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

<template>
	<view>
		<view v-if="datalist.length>0">
			<!-- 预约 -->
			<block v-if="datype==1">
				<view class="shlist" v-for="(ite,idx) in datalist" :key="idx">
					<view class="tittop flexc mb8">
						<view class="f17 fw co16 flex1">{{ite.visitName}}</view>
						<!-- <span style="margin-left: 20rpx;">{{ite.applyName}}</span> -->
						<!-- visitType 1:待审核   2：拒绝  3：通过 -->
						<block v-if="ite.visitType==1&&checkPermi(['system:reservat:sh'])">
							<view class="btn btn1" @click="getPass(ite)">同意</view>
							<view class="line"></view>
							<view class="btn btn2" @click="getSefuse(ite)">拒绝</view>
						</block>
						<view class="tsbtn co3" v-if="ite.visitType==2">已拒绝</view>
						<view class="tsbtn co2" v-if="ite.visitType==3">已通过</view>
						<!-- <view class="btn btn3" @click="getDel(ite)" v-if="checkPermi(['system:reservat:remove'])">删除</view> -->
					</view>
					<view class="plr12">
						<view class="list flext ptb4" v-if="roles=='school'">
							<view class="f15 co16 flex0 fw5">被访人员：</view>
							<view class="f15 co6 flex1 lh20">{{ite.teacherName}}</view>
						</view>
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">来访时间：</view>
							<view class="f15 co6 flex1 lh20">{{ite.visitDate}} {{ite.visitTime}}</view>
						</view>
						<view class="list flext ptb4" v-if="ite.visitIdCard">
							<view class="f15 co16 flex0 fw5">身份证号：</view>
							<view class="f15 co6 flex1 lh20">{{ite.visitIdCard}}</view>
						</view>
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">联系方式：</view>
							<view class="f15 co6 flex1 lh20">{{ite.visitPhone}}</view>
						</view>
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">来访事由：</view>
							<view class="f15 co6 flex1">{{ite.visitReason||''}}</view>
						</view>
						<view class="list flext ptb4" v-if="ite.visitRemark">
							<view class="f15 co16 flex0 fw5">补充事由：</view>
							<view class="f15 co6 flex1">{{ite.visitRemark}}</view>
						</view>
					</view>
				</view>
			</block>
			<!-- 食谱 -->
			<!-- 心理健康 -->
			<block v-if="datype==2">
				<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.createDate}}
										<view class="flex1"></view>
										<view class="delboxs btn1" v-if="checkPermi(['system:recipe:edit'])" @click.stop="getDetail(ite.id)">修改</view>
										<view class="delboxs" v-if="checkPermi(['system:recipe:remove'])" @click.stop="getDel(ite.id)">删除</view>
									</view>
									<view class="listrx flext">
										<view class="ltit">就餐类型：</view>
										<view class="ltxt">{{kaType(ite.type,dintype)}}</view>
									</view>
									<view class="listrx flext ">
										<view class="ltit">食谱详情：</view>
										<view class="ltxt">{{ite.description||''}}</view>
									</view>
									<view class="limg flexc mt15" v-if="ite.urls&&ite.urls.length">
										<view class="limgs flex1 flexc" >
											<block v-for="(pit,pid) in ite.urls" :key="pid">
												<image :src="baseUrl+pit" v-if="pid<3" @click.stop="getPreimg(ite.urls,pid)"></image>
											</block>	
										</view>
										<block v-if="ite.urls.length>3">
											<view class="tit" @click="getPreimg(ite.urls,3)">查看更多</view>
											<image :src="morimg" class="rimg"></image>
										</block>
									</view>
								</view>
							</view>
						</view> 
					 </view>
				</view>
			</block>
			<!-- 校园安全-->
			<block v-if="datype==4">
				<view class="secure" @click="getDetails(ite.infoId,idx)" v-for="(ite,idx) in datalist" :key="idx">
					<view class="sec_t">
						<view class="tit over">{{ite.infoTitle}}</view>
						<view class="flex1"></view>
						<view class="txt overtwo">
							<rich-text :nodes="ite.infoContent"></rich-text>
						</view>
						
						<!-- <view class="txt overtwo">为全力推进青少年宪法学习宣传教育走深走实，培养青少年尊法、学法、守法、用法意识，7月21日，安庆市太湖……</view> -->
						<view class="sec_x flexcj">
							<!-- <view>2023-07-27 13:53:12</view> -->
							<!-- <view class="flexc"><image :src="xxiconb" class="xxiconb"></image>{{ite.infopingllun||0}}</view> -->
							<view class="flexc"><image :src="xxiconc" class="xxiconc"></image>{{ite.infoDianZan||0}}</view>
							<view class="flexc"><image :src="xxicond" class="xxicond"></image>{{ite.infoYiDu||0}}</view>
							<!-- <view class="flexc"><image :src="xxicona" class="xxicona"></image>{{ite.infoZhuanFa||0}}</view> -->
							<view class="flexc" v-if="checkPermi(['xiaoYuanInfo:xiaoYuanInfo:remove'])&&delfalg" @click.stop="getDel(ite.infoId)"><image :src="tcdel" class="xxicondel"></image></view>
							<!-- <view class="delboxs" v-if="checkPermi(['xiaoYuanInfo:xiaoYuanInfo:remove'])&&delfalg" @click.stop="getDel(ite.infoId)">删除</view> -->
							
						</view>
					</view>
					<view class="sec_i">
						<image v-if="ite.infoPhoto" :src="baseUrl+ite.infoPhoto" ></image>
					</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: {
				type: [Number, String],
				default () {
					return 0
				}
			},
			dintype:{
				type: Array,
				default () {
					return []
				}
			},
			wtdt: {
				type: String,
				default () {
					return ''
				}
			},
			roles:{},
			delfalg:{
				type: Boolean,
				default () {
					return false
				}
			},

		},
		components: {
			noData
		},
		data() {
			return {
				xxicona:require("@/mine/static/score/xxicona.png"),
				xxiconb:require("@/mine/static/score/xxiconb.png"),
				xxiconc:require("@/mine/static/score/xxiconc.png"),
				xxicond:require("@/mine/static/score/xxicond.png"),
				morimg:require('@/work/static/order/rimg.png'),
				tcdel:require("@/static/images/tcdel.png"),
				timeup:require("@/mine/static/score/timeup.png"),
				timel:require("@/mine/static/score/timel.png"),
				baseUrl: ''
			}
		},
		methods: {
			checkPermi,
			checkRole,
			kaType(data, list) {
				return selectDictValue(list, data);
			},
			getLook(idx){
				this.datalist[idx].check=!this.datalist[idx].check
			},
			getDel(data) {
				this.$modal.confirm('确定删除该条信息？').then(() => {
					this.$emit('getDel', data)
				})
			},
			getPass(data){
				this.$modal.confirm('确定通过审核？').then(() => {
				  this.$emit('getPass',data)
				})
			},
			getSefuse(data){
				this.$emit('getSefuse',data)
			},
			getDetail(id){
				this.$emit('getDetail', id)
			},
			getDetails(id,idx){
				var obj={
					id:id,
					idx:idx
				}
				this.$emit('getDetail', obj)
			},
			getPreimg(urls,idx){
				var obj={
					urls:urls,
					idx:idx
				}
				this.$emit('getPreimg', obj)
			}
		},
		mounted() {
			this.baseUrl = baseUrl
		},
		onLoad: function() {

		}
	}
</script>

<style lang="scss" scoped>
// 预约
.shlist{width: 100%;background: #FFFFFF;border-radius: 14rpx;padding: 0 24rpx 24rpx;margin-bottom: 24rpx;
	.tittop{padding:20rpx 0 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: #DAE3FB;color: #4775EA;}
			&.co3{background: #FFD3BE;color: #FE5A0E;}
		}
		.btn{
			font-size: 30rpx;font-weight: 500;flex: 0 0 auto;padding: 0 30rpx;
			&.btn1{color: #4775EA;}
			&.btn2{color: #FF2D4F;}
		}
		.line{width: 2rpx;height: 30rpx;background: #DADADA;flex: 0 0 auto;}
	}
	.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;}
		}
	}
}
// 时间轴
.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: 28rpx;color: #AAAAAA;}
				.ltxt{font-weight: 500;color: #161616;flex:1;font-size: 28rpx;}
			}
			// 图片
			.limg{
				.limgs{
					image{width: 160rpx;height: 110rpx;margin-right: 20rpx;}
				}
				.tit{font-size: 28rpx;font-weight: 500;color: #AAAAAA;margin-right: 12rpx;flex:0 0 auto;width: 60rpx;}
				.rimg{width: 14rpx;height: 24rpx; flex:0 0 auto;}
			}
		}
	}
	&.act .timebox{display: block;}
	.delboxs{
		&.btn1{color: #4775ea;}
	}
	// &.quse_txt:last-child ul:before{display: none;}
}
// 安全
.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;}
	}
}

</style>