zhihuixiaoyuan2-ui/mine/components/list/list.vue

<template>
	<view>
		<view v-if="datalist.length>0">
			<!-- 学生 -->
			<block v-if="datype==1">
				<view class="stlbox clearf">
					<view class="stlist" :class="[ite.sex==1?'bg1':'bg2',roles=='parents'?'sthlist':'']" @click="getDetail(ite.id)"
						v-for="(ite,idx) in datalist" :key="idx">
						<view class="flext listt">
							<image v-if="ite.identificationPhoto" :src="baseUrl+ite.identificationPhoto" class="headimg"
								:class="ite.sex==1?'btn1':'btn2'"></image>
							<image :src="head" :class="ite.sex==1?'btn1':'btn2'" class="headimg" v-else></image>	
							 
							<view class="flex1">
								<view class="flextj ">
									<view class="flex1 flext">
										<view class="tit">{{ite.name}}</view>
										<image :src="man" class="mximg" v-if="ite.sex==1"></image>
										<image :src="woman" class="wmimg" v-if="ite.sex==2"></image>
										<image :src="year" class="yeimg" v-if="ite.isNearsightedness&&ite.isNearsightedness==1"></image>
										<image :src="health" class="heimg" v-if="ite.health&&ite.health!=1"></image>
									</view>
									<view class="flex0 f13 coa" v-if="roles=='parents'">更新时间：{{ite.updateTime||ite.createTime}}</view>
								</view>
								<view class="txt" >
									<block v-if="ite.age">{{ite.age}}岁/</block>
									<block v-if="ite.height">{{ite.height}}cm/</block>
									<block v-if="ite.weight">{{ite.weight}}kg/</block>
									<block v-if="ite.isNearsightedness==1">{{ite.degreeMyopia}}</block>
									<block v-if="ite.isNearsightedness==2">无近视/远视</block>
									<view class="updimg" @click.stop="getHeightFn(ite,'height')">
										<image :src="daupdata"></image>
									</view>
									
								</view>
							</view>
						</view>
						<view class="listf">
							<view class="ltxt" v-if="roles=='parents'">政治面貌:{{ite.politicalStatus}}</view>
							<view class="ltxt">心理健康状态:{{ite.mind}}
							<view class="updimg" @click.stop="getHeightFn(ite,'mind')">
								<image :src="daupdata"></image>
							</view>
							</view>
							<view class="ltxt">家长描述:{{ite.psychologicalDescription}}</view>
							<!-- 请假 -->
							<!-- <view class="ltxtq">请假中，查看详情...</view> -->
							<!-- 家长 -->
							<block v-if="roles=='parents'">
								<image :src="mbg" class="mbg" v-if="ite.sex==1"></image>
								<image :src="wmbg" class="mbg" v-if="ite.sex==2"></image>
							</block>
						</view>
					</view>
				</view>
			</block>
			<!-- 教职工 -->
			<block v-if="datype==2">
				<view class="stlbox clearf">
					<view class="stlist "  :class="ite.sex==1?'bg1':'bg2'" @click="getDetail(ite.id)"
						v-for="(ite,idx) in datalist" :key="idx">
						<view class="flext listt">
							<image v-if="ite.identificationPhoto" :src="baseUrl+ite.identificationPhoto" class="headimg"
								:class="ite.sex==1?'btn1':'btn2'"></image>
							<image :src="head" :class="ite.sex==1?'btn1':'btn2'" class="headimg" v-else></image>	
							<view>
								<view class="flext">
									<view class="tit">{{ite.name}}</view>
									<image :src="man" class="mximg" v-if="ite.sex==1"></image>
									<image :src="woman" class="wmimg" v-if="ite.sex==2"></image>
								</view>
								<view class="txt">
									<block v-if="ite.age">{{ite.age}}岁/</block>
									<block v-if="ite.height">{{ite.height}}cm/</block>
									<block v-if="ite.weight">{{ite.weight}}kg</block>
								</view>
							</view>
							<!-- <image :src="year" class="yeimg"></image> -->
						</view>
						<view class="listf">
							<!-- <view class="ltxt">教龄:7年</view> -->
							<view class="ltxt">职称:{{ite.professional}}</view>
							<view class="ltxt">联系方式:{{ite.phone}}</view>
							<!-- <view class="ltxt">入职已经<text :class="ite.sex==1?'co47':'cfe'">2313</text>天啦</view> -->
						</view>
					</view>
				</view>
			</block>
			<!-- 班级成绩 -->
			<block v-if="datype==3">
				<view class="cjlist" @click="getDetail(ite.scoreId)" v-for="(ite,idx) in datalist" :key="idx">
					<!-- 老师 -->
					<view class="flext mb6">
						<view class="f16 c16 fw flex1">{{ite.scoreTitle}}</view>
						<image :src="cjmicong" class="moimg"></image>
					</view>
					<!-- 家长 -->
					<!-- <view class="flexc mb6">
						<view class="f16 c16 fw flex1">{{ite.scoreTitle}}</view>
						<view class="f14 fw5 flex0 ml10 co47">已查看</view>
						<view class="f14 fw5 flex0 ml10 c6">未查看</view>
					</view> -->
					<view class="flexc">
						<view class="f14 fw5 co6 flex1">考试班级：{{ite.scoreClassName}}</view>
						<view class="f14 fw5 coa flex0">{{ite.scoreTime}}</view>
					</view>
					<view class='cjlook flexc' v-if="roles!='parents'">
						<view>已查看：<text class="f15 co16">{{ite.chaKan}}</text><text class="co16">人</text></view>
						<view>未查看：<text class="f15 co16">{{ite.weiChaKan}}</text><text class="co16">人</text></view>
						<view>查看率：<text class="f15 co16">{{ite.percentage}}</text></view>
					</view>
				</view>
			</block>
			<!-- 心理健康 -->
			<block v-if="datype==5">
				<view class="time" v-for="(lite,lidx) in datalist" :key="lidx">
					<view class="time_t"  @click="getLook(lidx)" :class="lite.check?'act':''">
						<view>{{lite.ayear}}年<text>{{lite.amonth}}月</text></view>
						<image :src="timeup" class="timeup"></image>
					 </view>
					 <view v-if="lite.check">
						<view class="timebox" v-for="(ite,idx) in lite.children" :key="idx">
							<view class="list">
								<image :src="timel" class="timel"></image>
								<view class="listr">
									<view class="listrt">
									{{ite.createTime}}<text v-if="ite.createType" class="type " :class="ite.createType==2?'bg2':'bg1'">
										{{ite.createType==2?'老师':'家长'}}
									</text>
										<view class="flex1"></view>
										<view class="delboxs" v-if="checkPermi(['live:old:remove'])" @click="getDel(ite.mindId)">删除</view>
									</view>
									<view class="listrx flext">
										<view class="ltit">状态：</view>
										<view class="ltxt">{{ite.mind}}</view>
									</view>
									<view class="listrx flext" v-if="ite.psychologicalDescription">
										<view class="ltit">描述：</view>
										<view class="ltxt">{{ite.psychologicalDescription}}</view>
									</view>
								</view>
							</view>
						</view> 
					 </view>
				</view>
			</block>
			<block v-if="datype==15">
				<view class="time" v-for="(ite,idx) in datalist" :key="idx">
					<!-- :class="actidx==1?'act':''" -->
					<!-- <view class="time_t"  @click="getLook(1)">
						<view>2023年<text>7月</text></view>
						<image :src="timeup" class="timeup"></image>
					 </view> -->
					<view class="timebox">
						<view class="list">
							<image :src="timel" class="timel"></image>
							<view class="listr">
								<view class="listrt">
								{{ite.createTime}}<text v-if="ite.createType" class="type " :class="ite.createType==2?'bg2':'bg1'">
									{{ite.createType==2?'老师':'家长'}}
								</text>
									<view class="flex1"></view>
									<view class="delboxs" v-if="checkPermi(['live:old:remove'])" @click="getDel(ite.mindId)">删除</view>
								</view>
								<view class="listrx flext">
									<view class="ltit">状态：</view>
									<view class="ltxt">{{ite.mind}}</view>
								</view>
								<view class="listrx flext" v-if="ite.psychologicalDescription">
									<view class="ltit">描述：</view>
									<view class="ltxt">{{ite.psychologicalDescription}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<!-- 身高体重 -->
			<block v-if="datype==6">
				<view class="time" v-for="(lite,lidx) in datalist" :key="lidx">
					<view class="time_t"  @click="getLook(lidx)" :class="lite.check?'act':''">
						<view>{{lite.ayear}}年<text>{{lite.amonth}}月</text></view>
						<image :src="timeup" class="timeup"></image>
					 </view>
					<view v-if="lite.check">
					<view class="timebox" v-for="(ite,idx) in lite.children" :key="idx">
						<view class="list">
							<image :src="timel" class="timel"></image>
							<view class="listr">
								<view class="listrt">
								{{ite.createTime}}
								<text v-if="ite.createType" class="type " :class="ite.createType==2?'bg2':'bg1'">
									{{ite.createType==2?'老师':'家长'}}</text>
									<view class="flex1"></view>
									<view class="delboxs" v-if="checkPermi(['live:old:remove'])" @click="getDel(ite.liveId)">删除</view>
								</view>
								<view class="listrx flext" v-if="ite.height">
									<view class="ltit">身高：</view>
									<view class="ltxt">{{ite.height}}cm</view>
								</view>
								<view class="listrx flext" v-if="ite.weight">
									<view class="ltit">体重：</view>
									<view class="ltxt">{{ite.weight}}kg</view>
								</view>
							</view>
						</view>
					</view>
					</view>
				</view>
			</block>
			<!-- 请假 -->
			<block v-if="datype==7">
				<view class="time" v-for="(lite,lidx) in datalist" :key="lidx">
					<view class="time_t"  @click="getLook(lidx)" :class="lite.check?'act':''">
						<view>{{lite.ayear}}年<text>{{lite.amonth}}月</text></view>
						<image :src="timeup" class="timeup"></image>
					 </view>
					<view v-if="lite.check">
					<view class="timebox" v-for="(ite,idx) in lite.children" :key="idx">
						<view class="list">
							<image :src="timel" class="timel"></image>
							<view class="listr">
								<view class="listrt">
								{{ite.submitTime}}
								<!-- <text v-if="ite.createType" class="type " :class="ite.createType==2?'bg2':'bg1'">
									{{ite.createType==2?'老师':'家长'}}</text> -->
									<view class="flex1"></view>
									<!-- <view class="delboxs" v-if="checkPermi(['system:leave:remove'])" @click="getDel(ite.id)">删除</view> -->
								</view>
								<view class="listrx flext" v-if="roles!='parents'">
									<view class="ltit">姓名：</view>
									<view class="ltxt">{{ite.absenteeName}}</view>
								</view>
								<view class="listrx flext">
									<view class="ltit">时间：</view>
									<view class="ltxt">{{ite.startTime}} 至 {{ite.endTime}}</view>
								</view>
								<view class="listrx flext">
									<view class="ltit">类别：</view>
									<view class="ltxt">{{kaType(ite.category,qjlxrange)}}</view>
								</view>
								<view class="listrx flext">
									<view class="ltit">描述：</view>
									<view class="ltxt">{{ite.reason}}</view>
								</view>
							</view>
						</view>
					</view>
					</view>
				</view>
			</block>
			<!-- 预约 -->
			<block v-if="datype==8">
				<view class="shlist" v-for="(ite,idx) in datalist" :key="idx">
					<view class="tittop flexc mb8">
						<view class="f17 f5 co47 flex1">{{ite.subject}} </view>
						<!-- <span style="margin-left: 20rpx;">{{ite.applyName}}</span> -->
						<view class="f14 f5 co47 flex0">{{ite.subjectTime}}/{{kaType(ite.week,week)}}</view>
					</view>
					<view class="plr12">
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">调课班级：</view>
							<view class="f15 co6 flex1">{{ite.subjectClass}}</view>
						</view>
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">被调课班级：</view>
							<view class="f15 co6 flex1">{{ite.beSubject}}/{{ite.beSubjectTime}}/{{kaType(ite.week,week)}}</view>
						</view>
						<view class="list flext ptb4" v-if='ite.content'>
							<view class="f15 co16 flex0 fw5">调课内容：</view>
							<view class="f15 co6 flex1">{{ite.content}}</view>
						</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 config from '@/config'
	const baseUrl = config.baseUrl
	import noData from "@/components/nodata/nodata.vue"
	import {selectDictValue} from '@/utils/common.js';
	import {
		checkPermi,
		checkRole
	} from "@/utils/permission"; // 权限判断函数
	export default {
		props: {
			datalist: {
				type: Array,
				default () {
					return []
				}
			},
			datype: {
				typeof: [Number, String],
				default () {
					return 0
				}
			},
			wtdt: {
				type: String,
				default () {
					return ''
				}
			},
			roles:{},
			delfalg:{
				type: Boolean,
				default () {
					return false
				}
			},
			qjlxrange:{
				type: Array,
				default () {
					return []
				}
			}

		},
		components: {
			noData
		},
		data() {
			return {
				woman:require("@/mine/static/score/woman.png"),
				man:require("@/mine/static/score/man.png"),
				year:require("@/mine/static/score/year.png"),
				head:require("@/mine/static/score/head.png"),
				health:require("@/mine/static/score/health.png"),
				mbg:require("@/mine/static/score/mbg.png"),
				wmbg:require("@/mine/static/score/wmbg.png"),
				cjmicong:require("@/mine/static/score/more.png"),
				timel:require("@/mine/static/score/timel.png"),
				timeup:require("@/mine/static/score/timeup.png"),
				daupdata:require("@/mine/static/score/daupdata.png"),
				baseUrl: ''
			}
		},
		methods: {
			checkPermi,
			checkRole,
			kaType(data, list) {
				return selectDictValue(list, data);
			},
			getDel(data) {
				this.$modal.confirm('确定删除该条信息？').then(() => {
					this.$emit('getDel', data)
				})
			},
			getDetail(id) {
				this.$emit('getDetail', id)
			},
			getHeightFn(ite,type){
				var obj={
					studentId:ite.studentId,
					name:ite.name,
					type:type
				}
				this.$emit('getHeightFn', obj)
			},
			// 查看照片
			getPreview(iurl, idx) {
				var newArr = [];
				iurl.forEach(ite => {
					var ds = this.baseUrl + ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current: idx,
					success: function(data) {

					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				});
			},
			// 展开
			getLook(idx){
				this.datalist[idx].check=!this.datalist[idx].check
			}
		},
		mounted() {
			this.baseUrl = baseUrl
		},
		onLoad: function() {

		}
	}
</script>

<style lang="scss" scoped>
	// align-items: stretch;display: flex;flex-wrap: wrap;justify-content: space-between;
.stlbox{padding:40rpx 20rpx 0;}
.shlist{width: 100%;background: #FFFFFF;border-radius: 14rpx;padding: 0 24rpx 24rpx;margin-bottom: 24rpx;
	.tittop{padding:20rpx 24rpx;border-bottom: 2rpx solid #E6E6E6;
		.tsbtn{min-width: 90rpx;height: 36rpx;border-radius: 4rpx;padding: 0 12rpx;box-sizing: border-box;font-size: 24rpx;line-height: 36rpx;
			&.co1{background: #FFEDDF;color: #E19301;}
			&.co2{background: #D3F7E5;color: #24D725;}
			&.co3{background: #FDE2E3;color: #EC1134;}
		}
	}
	.list{
		.btn{min-width: 106rpx;height: 46rpx;border-radius: 14rpx;display: flex;align-items: center;justify-content: center;box-sizing: border-box;font-size: 26rpx;margin-left: 20rpx;
			&.btn1{background: #1f57e6;color: #FFFFFF;}
			&.btn2{border: 1px solid #4775EA;color: #4775EA;}
			&.btn3{border: 1px solid red;color: red;}
		}
	}
}
// min-height: 288rpx;
.stlist{width: 328rpx;border-radius: 10rpx;padding:0 20rpx;box-sizing: border-box;margin:0 12rpx 24rpx;float: left;
	&.bg1{background: #F5FAFE;}
	&.bg2{background: #FFF8FA;}
	.listt{padding: 24rpx 0;min-height: 130rpx;box-sizing: border-box;}
	.headimg{width: 80rpx;height: 80rpx;border-radius: 50%;flex: 0 0 auto;margin: 0 !important;margin-right: 14rpx !important;box-sizing: border-box;
		&.btn1{border: 2rpx solid #4775EA;}
		&.btn2{border: 2rpx solid #F59FBC;}
	}
	.tit{font-size: 30rpx;font-weight: bold;color: #161616;margin-bottom: 10rpx;}
	.txt{font-weight: bold;color: #161616;font-size: 24rpx;word-break: break-all;	}
	image{flex: 0 0 auto;margin-left: 12rpx;margin-top: 10rpx;}
	.updimg{width: 32rpx;height: 32rpx;display: inline-flex;align-items: center;justify-content: center;
		image{width: 18rpx;height: 18rpx;}
	}
	.wmimg{width: 20rpx;height: 20rpx;}
	.mximg{width: 14rpx;height: 22rpx;}
	.yeimg{width: 32rpx;height: 20rpx;}
	.heimg{width: 20rpx;height: 22rpx;}
	.listf{border-top: 2rpx solid #E6E6E6;padding:20rpx 8rpx;position: relative;
		.ltxt{font-size: 26rpx;font-weight: 500;color: #666666;margin-bottom: 8rpx;z-index: 1;
			text{padding: 0 6rpx;}
		}
		.ltxtq{font-size: 26rpx;font-weight: 500;color: #FE5A0E;}
		.mbg{width: 96rpx;height: 96rpx;position: absolute;right: 16rpx;bottom: 20rpx;}
		
	}
	// 横向
	&.sthlist{
		min-height: 260rpx;width: 100%;
		.headimg{width: 70rpx;height: 70rpx;}
		.listt{padding: 24rpx 14rpx;}
		.listf{padding: 20rpx 16rpx;display: flex;flex-wrap: wrap;
			.ltxt{width: 50%;}
		}
	}
}
// 成绩
.cjlist{width: 100%;background: #FFFFFF;border-radius: 14rpx;padding: 24rpx;margin-bottom: 30rpx;
	.moimg{width: 26rpx;height: 6rpx;flex: 0 0 auto;margin-left: 20rpx;}
	.cjlook{border-top: 2rpx solid #E5E5E5;margin-top: 20rpx;padding-top: 16rpx;
		view{width: 33.3%;font-size: 26rpx;font-weight: bold;color: #666666;}
	}
}
// 安全
.secure{width: 100%;box-sizing: border-box;border-bottom: 2rpx solid #E5E5E5;padding: 24rpx 0 20rpx;display: flex;align-items: stretch;
	.sec_t{flex: 1;overflow: hidden;display: flex;flex-direction: column;
		.tit{font-size: 30rpx;font-weight: bold;color: #161616;width: 100%;margin-bottom: 12rpx;}
		.txt{font-size: 28rpx;color: #161616;width: 100%;margin-bottom: 20rpx;
		}
		.sec_x{font-size: 28rpx;color: #161616;
			.xxicona{width: 28rpx;height: 32rpx;margin-right: 18rpx;}
			.xxiconb{width: 30rpx;height: 28rpx;margin-right: 18rpx;}
			.xxiconc{width: 30rpx;height: 30rpx;margin-right: 18rpx;}
			.xxicond{width: 32rpx;height: 24rpx;margin-right: 18rpx;}
			.xxicondel{width: 32rpx;height: 33rpx;margin-right: 18rpx;}
		}
	}
	.sec_i{flex: 0 0 auto;margin-left: 28rpx;
		image{width: 220rpx;height: 160rpx;}
	}
}
//心理
.mind{
	padding: 0 24rpx;width: 100%;box-sizing: border-box;background-color: #FFFFFF;border-radius: 14rpx;margin-bottom: 24rpx;
	.mind_top{border-bottom: 2rpx solid #E5E5E5;min-height: 72rpx;padding:16rpx 0;
		image{width: 26rpx;height: 6rpx;flex: 0 0 auto;margin-left: 20rpx;}
	}
	.mind_c{padding: 20rpx 0;
		.tit{font-size: 30rpx;color: #AAAAAA;flex: 0 0 auto;}
		.txt{font-size: 30rpx;color: #161616;}
	}
}
// 时间轴
.time{
	.time_t{padding: 24rpx 0;display: flex;align-items: center;
		view{font-weight: bold;color: #4775EA;font-size: 32rpx;}
		text{margin-left:12rpx;}
		.timeup{width: 26rpx;height: 24rpx;margin-left: 30rpx;transition: all 0.3s; }
		&.act .timeup{transform: rotate(-180deg);}
	}
	// .timebox{display: none;}
	.list{display: flex;align-items: flex-start;padding-left: 10rpx;padding-bottom: 36rpx;position: relative;
	
		&::before{width: 2rpx;content: "";position: absolute;top: 44rpx;bottom: 14rpx;left: 26rpx;
background: #DADADA;}
		.timel{width: 32rpx;height: 32rpx;margin-right: 20rpx;position: relative;flex: 0 0 auto;}
		.listr{flex:1;
			.listrt{line-height: 32rpx;font-size: 30rpx;font-weight: bold;color: #161616;margin-bottom: 16rpx;display: flex;align-items: center;
				.type{height: 30rpx;border-radius: 10rpx;margin-left: 20rpx;font-size: 24rpx;color: #FFFFFF;padding:2rpx 8rpx;
					&.bg1{background: #AABCE9;}
					&.bg2{background: #8CD5B3;}
				}
			}
			.listrx{padding: 6rpx 0;
				.ltit{flex:0 0 auto;font-size: 30rpx;color: #AAAAAA;}
				.ltxt{font-weight: 500;color: #161616;flex:1;font-size: 30rpx;}
			}
		}
	}
	&.act .timebox{display: block;}
	
	// &.quse_txt:last-child ul:before{display: none;}
}
</style>