zheng_xie_ui/work/components/report/list.vue

<template>
  <view>
	<view v-if="datalist.length>0">
		<!-- 履职信息 -->
		<block v-if="type==1">
			<view class="caselist" v-for="(ite,idx) in datalist" :key='idx' @click="getDetail(ite.proposalId)">
				<view class="head flexc mb18">
					<image :src="avatarimg"></image>
					<view class="headr">
						<view class="name">吴爱妮</view>
						<view class="unit">中国共产党；中国共产党</view>
					</view>
				</view>
				<!-- <view class="tit overtwo">{{ite.title}}</view> -->
				<view class="ftxt">
					<text>工作单位及职位</text>
					<view>潜山市政协委员会 委员</view>
				</view>
				<view class="ftxt">
					<text>联系方式 </text>
					<view>13700562888</view>
				</view>
				<view class="flexw">
					<view class="ftxt">
						<text>履职得分</text>
						<view class="cofe">86</view>
					</view>
					<view class="ftxt">
						<text>综合排名</text>
						<view class="cofe">3</view>
					</view>
				</view>
				<view class="casebtn">
					<view class="btn btn2">审核</view>
					<view class="btn btn4">修改</view>
					<view class="btn btn1">删除</view>
				</view>
			</view>
		</block>
		<!-- 提案方便 -->
		<block v-if="type==2">
			<view class="talist">
				<view class="tit overtwo">关于拓展市校合作，助推高质量发展的建议</view>
				<view class="flexc">
					<view class="f12 co6 fw5 mr24">个人提案</view>
					<view class="f12 co6 fw5">2024-01-01</view>
				</view>
				<view class="mt9 flexcj">
					<!-- <view class="btna">已立案</view> -->
					<view class="btna">办理中</view>
					<!-- <view class="btna">已办结</view> -->
					<view class="btnb">4.3 <text>分</text></view>
				</view>
			</view>
		</block>
		
		<view class="shax" v-if="wtdt">{{wtdt}}</view>
	</view>
	<block v-else>
		<no-data></no-data>
	</block>
  </view>
</template>

<script>
	import { selectValue } from '@/utils/common.js';
	import noData from "@/components/nodata/nodata.vue"
  export default {
	props:{
		datalist: {
			type: Array,
			default () {
				return []
			}
		},
		tajdlist: {
			type: Array,
			default () {
				return []
			}
		},
		wtdt:{
			type: String,
			default () {
				return ''
			}
		},
		type:{
			type: [String,Number],
			default () {
				return ''
			}
		},
	},
	components:{
		noData
	},
	data(){
		return{
			avatarimg:require("@/static/images/mine/header.png"),
			
			
			start:require("@/work/static/images/start.png"),
			nstart:require("@/work/static/images/nstart.png"),
			zanimg:require("@/work/static/images/zanico.png"),
			nzanimg:require("@/work/static/images/nzanico.png"),
			flower:require("@/work/static/images/flower.png"),
			nflower:require("@/work/static/images/nflower.png"),
		}
	},
	onLoad: function() {
	},
	methods:{
		kaType(ite){
			return selectValue(this.tajdlist, ite);
		},
		getDetail(e){
			this.$emit('getDetail',e)
		},
		getTuiFn(txt){
			var obj={
				type:txt,
				id:1,
			}
			this.$emit('getTuiFn',obj)
		},
		typeFn(data){
			if(data){
				var newArr=[]
				var astr=data.split('-')
				astr.forEach(ite=>{
					var a=ite.substring(0,5);
					newArr.push(a)
				})
				return newArr.join('-')
			}else{
				return ''
			}
		},
	},
	
  }
</script>

<style lang="scss" scoped>
.caselist{background: #FFFFFF;border-radius: 30rpx;margin-top: 24rpx;padding: 38rpx 24rpx 8rpx;
	.head{
		image{width: 120rpx;height: 120rpx;margin-right: 36rpx;flex: 0 0 auto;border-radius: 50%;}
		.headr{
			.name{font-weight: bold;font-size: 30rpx;color: #222327;margin-bottom: 14rpx;}
			.unit{font-weight: 500;font-size: 26rpx;color: #666666;}
		}
	}
	.tit{font-weight: bold;font-size: 32rpx;color: #222327;margin-bottom: 42rpx;}
	.ftxt{display: flex;align-items: flex-start;margin-bottom: 32rpx;flex:0 1 auto;min-width: 50%;
		text{font-weight: bold;font-size: 26rpx;color: #CACACA;flex: 0 0 auto;min-width: 104rpx;text-align-last: justify;}
		view{flex: 1;color: #343434;font-size: 26rpx;margin-left: 20rpx;line-height: 34rpx;}
	}
	.casebtn{padding: 26rpx 0;border-top: 2rpx solid #E6E6E6;display: flex;align-items: center;justify-content: flex-end;
		.ftit{font-weight: bold;font-size: 26rpx;color: #CACACA;flex: 1;
			text{color: $com-cd3;margin-left: 20rpx;font-weight:500;min-width: 104rpx;text-align-last: justify;}
		}
		.lftit{font-weight: 500;font-size: 26rpx;color: #666666;flex:1;
			.lfdet{color: $com-cd3;text-decoration: underline;}
		}
		.zanimg{width: 22rpx;height: 20rpx;margin-right: 14rpx;}
		.staimg{width: 24rpx;height: 24rpx;margin-right: 14rpx;}
		.btn{min-width: 128rpx;height: 52rpx;border-radius: 26rpx;font-weight: bold;flex: 0 0 auto;
font-size: 26rpx;margin-left: 24rpx;line-height: 52rpx;text-align: center;padding: 0 32rpx;box-sizing: border-box;
		&.btn1{background: #FFEDED;color: #FF4141;}
		&.btn2{background: #E4EEFF;color: #1D64E2;}
		&.btn3{background: #ECECEC;color: #666666;}
		&.btn4{background:  #E9FFE9;color: #28C529;}
		
		}
	}
}
.talist{width: 100%;background: #F2F6FF;border-radius: 10rpx;padding: 24rpx 24rpx;
	.tit{font-weight: bold;font-size: 30rpx;color: #222327;margin-bottom: 16rpx;}
	.btna{font-weight: bold;font-size: 24rpx;color: #FF4E00;}
	.btnb{font-weight: bold;font-size: 46rpx;color: #1D64E2;
		text{font-size: 24rpx;color: #222327;margin-left: 8rpx;}
	}
	
}
</style>