yuanqu_ui/components/order/list.vue

<template>
  <view>
	<view v-if="datalist.length>0">
		<!-- 预约 -->
		<block v-if="type=='order'">
			<view class="ylist" v-for="(ite,idx) in datalist" :key='idx' @click="getDetail(ite.reservatId)">
				<image :src="ysta" class="ystaimg" v-if="ite.visitType==3"></image>
				<image :src="ystb" class="ystaimg" v-if="ite.visitType==2"></image>
				<view class="ytop flexc">
					<view class="tit">{{ite.visitName.charAt(0)}}</view>
					<view class="cent">
						<view class="ctit">{{ite.visitName}}提交的预约来访申请</view>
						<view class="ctime">提交时间：{{ite.createTime}}</view>
					</view>
					<view class="right" v-if="ite.visitType==1">
						<image :src="ybga"></image>
						<view>待审核</view>
					</view>
					
				</view>
				<view class="ybox">
					<view class="yblist mw50"><text>预约日期</text>{{ite.visitDate}}</view>
					<view class="yblist mw50"><text>预约时间</text>{{ite.visitTime}}</view>
					<view class="yblist mw50"><text>手机号码</text>{{ite.visitPhone}}</view>
					<view class="yblist mw50"><text>人 数</text>{{ite.visitNum}}</view>
					<view class="yblist mw50"><text>来访地点</text>{{kaType(ite.appointmentSite,adrlist)}}</view>
					<view class="yblist mw50"><text>来访事由</text>{{ite.visitReason}}</view>
				</view>
				<view class="ybtn">
					<view class="ybtns btn1" @click.stop="getDelFn(ite.reservatId)">删除</view>
					<view class="flex1"></view>
					<block v-if="ite.visitType==1">
						<view class="ybtns btn2" @click.stop="gettypeFn(2,ite.reservatId)">拒绝</view>
						<view class="ybtns btn3" @click.stop="gettypeFn(3,ite.reservatId)">同意</view>
					</block>
					
				</view>
			</view>
		</block>
		<!-- 视频 -->
		<block v-if="type=='video'">
			<view class="ylist" v-for="(ite,idx) in datalist" :key='idx' @click="getDetail(ite.reservatId)">
				<image :src="ysta" class="ystaimg" v-if="ite.visitType==3"></image>
				<image :src="ystb" class="ystaimg" v-if="ite.visitType==2"></image>
				<view class="ytop flexc">
					<view class="tit">{{ite.visitName.charAt(0)}}</view>
					<view class="cent">
						<view class="ctit">{{ite.visitName}}提交的预约来访申请</view>
						<view class="ctime">提交时间：{{ite.createTime}}</view>
					</view>
					<view class="right" v-if="ite.visitType==1">
						<image :src="ybg"></image>
						<view>待审核</view>
					</view>
				</view>
				<view class="ybox">
					<view class="yblist mw50"><text>预约日期</text>{{ite.visitDate}}</view>
					<view class="yblist mw50"><text>预约时间</text>{{ite.visitTime}}</view>
					<view class="yblist mw50"><text>手机号码</text>{{ite.visitPhone}}</view>
					<view class="yblist mw50"><text>人 数</text>{{ite.visitNum}}</view>
					<view class="yblist mw50"><text>来访地点</text>{{kaType(ite.appointmentSite,adrlist)}}</view>
					<view class="yblist mw50"><text>来访事由</text>{{ite.visitReason}}</view>
				</view>
				<view class="ybtn">
					<view class="ybtns btn1" @click.stop="getDelFn(ite.reservatId)">删除</view>
					<view class="flex1"></view>
					<block v-if="ite.visitType==1">
						<view class="ybtns btn2" @click.stop="gettypeFn(2,ite.reservatId)">拒绝</view>
						<view class="ybtns btn3" @click.stop="gettypeFn(3,ite.reservatId)">同意</view>
					</block>
					
				</view>
			</view>
		</block>
		<!-- 打卡记录 -->
		<block v-if="type=='record'">
			<view class="ylist rlist" v-for="(ite,idx) in datalist" :key='idx' @click="getDetail(ite.reservatId)">
				<view class="rtop mb15 flexcj">
					<view class="rlistl flexc">
						<image :src="time"></image>
						<view>07-18 / 星期四</view>
					</view>
					<view class="right" v-if="ite.visitType==1">
						<image :src="ybga"></image>
						<view>缺卡</view>
						<!-- <view>迟到</view> -->
					</view>	
				</view>
				<view class="rbox flexcj">
					<view class="rboxa">
						<image :src="bgaimg" class="rbg"></image>
						<view class="rboxb">
							<view class="tit">上班08:30</view>
							<view class="time flexc">
								<image :src="chose"></image>
								08:21已打卡
							</view>
						</view>
					</view>
					<view class="rboxa">
						<image :src="bgbimg" class="rbg"></image>
						<view class="rboxb">
							<view class="tit">下班17:30</view>
							<view class="time flexc">
								<image :src="close"></image>
								缺卡
								<!-- 未打卡 -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 打卡列表 -->
		<block v-if="type=='clock'">
			<view class="ylist rlist" style="padding-top: 12rpx;" v-for="(ite,idx) in datalist" :key='idx' @click="getDetail(ite.reservatId)">
				<view class="ytop flexc">
					<view class="tit">{{ite.visitName.charAt(0)}}</view>
					<view class="cent">
						<view class="ctit">{{ite.visitName}}的打卡记录</view>
						<view class="ctime">最新打卡：{{ite.createTime}}</view>
					</view>
					<view class="rights" v-if="ite.visitType==1">
						<image :src="ybga"></image>
						<view>缺卡</view>
						<!-- <view>迟到</view> -->
					</view>
				</view>
				<view class="ybox">
					<view class="yblist mw50 line"><text>上班打卡</text>08:31已打卡
						<view class="tip">迟到</view>
					</view>
					<view class="yblist mw50"><text>下班打卡</text>17:31已打卡
					</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 { selectDictValue } from '@/utils/common.js';
	import noData from "@/components/nodata/nodata.vue"
  export default {
	props:{
		datalist: {
			type: Array,
			default () {
				return []
			}
		},
		adrlist:{
			type: Array,
			default () {
				return []
			}
		},
		wtdt:{
			type: String,
			default () {
				return ''
			}
		},
		type:{
			type: [String,Number],
			default () {
				return ''
			}
		},
	},
	components:{
		noData
	},
	data(){
		return{
			time:require("@/static/images/home/time.png"), 
			chose:require("@/static/images/home/chose.png"), 
			close:require("@/static/images/home/close.png"), 
			bgaimg:require("@/static/images/home/hbgg.png"), 
			bgbimg:require("@/static/images/home/hbgh.png"), 
			ybg:require("@/static/images/order/staff/ybg.png"), 
			ybga:require("@/static/images/order/staff/ybga.png"), 
			ysta:require("@/static/images/order/staff/ysta.png"), 
			ystb:require("@/static/images/order/staff/ystb.png"), 
		}
	},
	onLoad: function() {
	},
	methods:{
		kaType(data, list) {
			return selectDictValue(list, data);
		},
		getDelFn(id){
			var that=this;
			uni.showModal({
				title: '确认删除',
				content: "是否确认删除该预约",
				cancelText: '取消',
				confirmText: '确认',
				success: function(res) {
					if (res.confirm) {
						that.$emit("getDelFn",id)
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});
		},
		gettypeFn(type,id){
			var that=this;
			var str="拒绝"
			if(type==3){
				str='同意'
			}
			uni.showModal({
				title: '确认'+str,
				content: "是否确认"+str+"该预约",
				cancelText: '取消',
				confirmText: '确认',
				success: function(res) {
					if (res.confirm) {
						var newobj={
							type:type,
							id:id
						}
						that.$emit("gettypeFn",newobj)
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});
		},
		getDetail(e){
			this.$emit('getDetail',e)
		},
		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>
// 预约
.ylist{background: #FFFFFF;border-radius: 14rpx;margin-bottom: 30rpx;position: relative;
	.ystaimg{width: 140rpx;height: 140rpx;top: 22rpx;right: 22rpx;position: absolute;}
	.ytop{padding: 16rpx 0 24rpx 16rpx;
		.tit{width: 62rpx;height: 62rpx;background: #0391FD;border-radius: 6rpx;font-weight: 500;
font-size: 34rpx;color: #FFFFFF;margin-right: 18rpx;text-align: center;line-height: 62rpx;flex: 0 0 auto;}
		.cent{
			flex: 1;
			.ctit{font-weight: bold;font-size: 28rpx;color: #161616;margin-bottom: 6rpx;}
			.ctime{font-weight: 500;font-size: 18rpx;color: #666666;}
		}
		.right{position: relative;flex: 0 0 auto;margin-left: 10rpx;
			image{width: 144rpx;height: 56rpx;}
			view{font-weight: 800;font-size: 22rpx;color: #FFFFFF;position: absolute;left: 0;top: 0;right: 0;bottom: 0;text-align: center;padding-left: 20rpx;box-sizing: border-box;line-height: 56rpx;}
		}
		.rights{position: relative;width: 96rpx;height: 38rpx;right: 0;top: 0;
			image{width: 100%;height: 100%;}
			view{font-weight: 500;font-size: 20rpx;
		color: #FFFFFF;position: absolute;left: 0;top: 0;right: 0;bottom: 0;text-align: center;padding-left: 20rpx;box-sizing: border-box;line-height: 38rpx;}
		}
	}
	.ybox{padding: 0rpx 24rpx 24rpx 16rpx;display: flex;flex-wrap: wrap;
		.yblist{display: flex;font-size: 24rpx;font-weight: 500;color: #161616;padding: 6rpx 0 6rpx 8rpx;line-height: 40rpx;position: relative;
			text{font-weight: normal;color: #aaa;flex: 0 0 auto;width: 100rpx;text-align-last: justify;margin-right: 12rpx;}
			.tip{border-radius: 12rpx;font-weight: 500;font-size: 16rpx;color: #F87C29;border: 2rpx solid #F87C29;height: 28rpx;box-sizing: border-box;
				display: flex;align-items: center;padding: 0 8rpx;margin-left: 12rpx;flex: 0 0 auto;margin-top: 6rpx;
			}
			&.line{
				&::after{
					position: absolute;content: '';width: 2rpx;height: 30rpx;background: #CDCDCD;right: 0;top: 9rpx;
				}
				
			}
		}
	}
	.ybtn{border-top: 2rpx solid #DADADA;padding: 20rpx 18rpx;display: flex;align-items: center;
		.ybtns{width: 130rpx;border-radius: 6rpx;height: 52rpx;font-weight: 500;font-size: 26rpx;display: flex;align-items: center;justify-content: center;box-sizing: border-box;flex: 0 0 auto;
			&.btn1{border: 2rpx solid #FC3838;color: #FC3838;}
			&.btn2{border: 2rpx solid #666666;color: #666666;}
			&.btn3{background-color: #0391FD;color: #ffffff;margin-left: 22rpx;}
		}
	}
	// 记录
	&.rlist{padding-top:28rpx;
		.rtop{position: relative;padding-left: 22rpx;
			.rlistl{flex: 1;
				image{width: 30rpx;height: 30rpx;margin-right: 18rpx;}
				view{font-weight: bold;font-size: 28rpx;color: #161616;}
			}
			.right{position: relative;width: 96rpx;height: 38rpx;right: 0;top: 0;
				image{width: 100%;height: 100%;}
				view{font-weight: 500;font-size: 20rpx;
color: #FFFFFF;position: absolute;left: 0;top: 0;right: 0;bottom: 0;text-align: center;padding-left: 20rpx;box-sizing: border-box;line-height: 38rpx;}
			}
		}
		.ytop{padding-bottom: 18rpx;}
		.ybox{padding-bottom: 14rpx;}
		.rbox{padding: 0 22rpx 8rpx 22rpx;
			.rboxa{width: 306rpx;height: 104rpx;position: relative;margin-bottom: 20rpx;
				.rbg{width: 100%;height: 100%;}
				.rboxb{box-sizing: border-box;padding:14rpx 0 16rpx 28rpx;
					position: absolute;left: 0;top: 0;right: 0;bottom: 0;
					.tit{font-weight: 500;font-size: 26rpx;color: #161616;margin-bottom: 10rpx;}
					.time{font-weight: 500;font-size: 22rpx;color: #666666;
						image{width: 18rpx;height: 18rpx;margin-right: 14rpx;flex: 0 0 auto;}
					}
				}
			}
		}
		
	}
}

</style>