yuanqu_ui/pages/order/staffcode.vue

<template>
  <view class="yybox">
	  <nav-bar navtit="来访预约" :leftflag='true'></nav-bar>
	  <view v-if="nodataflag" class="nodata">
		  <image :src="noiconpimg" class="img"></image>
		  <view class="tit">暂无预约信息</view>
	  </view>
	  <view class="yydet"v-else>
		  <view class="flex0">
		  	<step-bar :steps="barsteps" :datainfo="datainfo" :fixeda="fixedflag"></step-bar>  
		  </view>
		<view class="ytbox" >
			<image :src="ysta" class="ystaimg" v-if="datainfo.visitType==3"></image>
			<image :src="ystb" class="ystaimg" v-if="datainfo.visitType==2"></image>
			<view class="code_box">
				<!-- 预约成功 -->
				<!-- <view class="cdet" v-if="datainfo.visitType==3">
					<view class="ctit">通行路线</view>
					<view class="adrtip">
						您好，请您于【<text>园区大门</text>】扫脸进入，通过【<text>1号 楼</text>
						】的【<text>2号电梯</text>】直达【<text>5F</text>】
					</view>
				</view> -->
				<!-- 预约失败 -->
				<view class="cdet">
					<view class="ctit">预约信息</view>
					<!-- <view class="yerror" v-if="datainfo.visitType==2">
						<image :src="errorimg"></image>
						<view>审核失败</view>
					</view> -->
					<view class="cbox">
						<view class="ctxt">预约时间</view>
						<view class="ctlist">
							<view class="tit"><text>来访日期</text>：</view>
							<view class="txt">{{datainfo.visitDate||''}}</view>
						</view>
						<view class="ctlist">
							<view class="tit"><text>来访时间</text>：</view>
							<view class="txt">{{datainfo.visitTime||''}}</view>
						</view>
					</view>
					<view class="cbox">
						<view class="ctxt">来访信息</view>
						<view class="ctlist">
							<view class="tit"><text>人数</text>：</view>
							<view class="txt" >{{datainfo.visitNum}}人</view>
						</view>
						<view class="ctlist">
							<view class="tit"><text>姓名</text>：</view>
							<view class="txt">{{datainfo.visitName||''}}</view>
						</view>
						<view class="ctlist">
							<view class="tit"><text>手机号码</text>：</view>
							<view class="txt">{{datainfo.visitPhone||''}}</view>
						</view>
						<view class="ctlist">
							<view class="tit"><text>来访地点</text>：</view>
							<view class="txt">{{kaType(datainfo.appointmentSite,adrlist)||''}}</view>
						</view>
						<view class="ctlist">
							<view class="tit"><text>来访事由</text>：</view>
							<view class="txt">{{datainfo.visitReason||''}}</view>
						</view>
						<!-- <view class="ctlist">
							<view class="tit"><text>是否接待</text>：</view>
							<view class="txt">{{datainfo.isReception=='Y'?'是':'否'||''}}</view>
						</view>
						<block v-if="datainfo.isReception=='Y'">
							<view class="ctlist" v-if="datainfo.receptionName">
								<view class="tit"><text>接待人</text>：</view>
								<view class="txt">{{datainfo.receptionName||''}}</view>
							</view>
							<view class="ctlist" v-if="datainfo.receptionPhone">
								<view class="tit"><text>接待电话</text>：</view>
								<view class="txt">{{datainfo.receptionPhone||''}}</view>
							</view>
						</block> -->
						<view class="ctlist">
							<view class="tit"><text>补充事由</text>：</view>
							<view class="txt">{{datainfo.visitRemark||''}}</view>
						</view>
						<view class="ctlist" v-if="datainfo.humanFaceData">
							<view class="tit"><text>人脸信息</text>：</view>
							<view class="imgs">
								<!-- <image :src="baseUrl+datainfo.humanFaceData"></image> -->
								<image class="faceimg" @click="getPreview(datainfo.humanFaceData,'face')" :src="baseUrl+datainfo.humanFaceData"></image>
							</view>
						</view>
					</view>
				</view> 
			</view>
			<view class="ybtn" >
				<view class="ybtns btn1 flex1" v-if="checkPermi(['system:reservat:remove'])" @click="getFail">删除</view>
				<block v-if="datainfo.visitType==1&&checkPermi(['system:reservat:sh'])">
					<view class="ybtns btn2 flex1" @click="gettypeFn(2)" >拒绝</view>
					<view class="ybtns btn3 flex1" @click="gettypeFn(3)">同意</view>
				</block>
				
			</view> 
		</view>
	  </view>
	
	
	<!-- 弹窗 -->
	<pop-up :type="type" @getClose="getClose"></pop-up>
  </view>
</template>

<script>
	import * as base64 from "base-64"
	import popUp from "@/components/order/popup.vue"
	import stepBar from "@/components/order/stepbar.vue"
	import navBar from "@/components/toptab/navbar.vue"
	import {getReservatDetail,getReservatDel,getReservatSh} from "@/api/mine/order.js"
	import { selectDictValue } from '@/utils/common.js';
	import {getDictionaryFn} from "@/api/mine/register.js"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import QR from "@/utils/wxqrcode.js" // 二维码生成器 
	import config from '@/config'
	const baseUrlimg = config.baseUrlimg
  export default {
	  components:{popUp,navBar,stepBar},
	data(){
		return{
			baseUrl:config.baseUrl,
			adrlist:[],
			codeimg:require('@/static/images/order/comes/code.png'),
			useimg:require('@/static/images/order/comes/use.png'),
			errorimg:require('@/static/images/order/comes/error.png'),
			noiconpimg:require("@/static/images/noiconp.png"),
			ysta:require("@/static/images/order/staff/ysta.png"),
			ystb:require("@/static/images/order/staff/ystb.png"),
			//status:  填写状态  0:未填   1:在填  2:填完
			barsteps:[{tit:'信息填写',status:2,val:0},{tit:'等待审核',status:1,val:1},{tit:'审核成功',status:0,val:2},{tit:'已完成',status:0,val:3}],
			fixedflag:true,
			fixedflag:true,
			useflag:false,
			type:0,
			yy_code:'',
			id:'',
			yyerror:false,
			nodataflag:false,
			datainfo:{
				
			},

		}
	},
	onLoad: function(e) {
		// this.id=base64.decode(e.id);
		this.id=e.id;
		this.init()
		this.getDataFn()
	},
	methods:{
		checkPermi, checkRole,
		getClose(){
			this.type=0;
		},
		kaType(data, list) {
			return selectDictValue(list, data);
		},
		init(){
			// 记录来源
			getDictionaryFn('jluly').then(res=>{
				if(res.code==200){
					this.adrlist = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
				}
			})
		},
		getFail(){
			var that=this;
			uni.showModal({
				title: '确认删除',
				content: "是否确认删除该预约",
				cancelText: '取消',
				confirmText: '确认',
				success: function(res) {
					if (res.confirm) {
						getReservatDel(that.id).then(res=>{
							if(res.code==200){
								that.$toast('删除成功')
								uni.$emit('refreshdatalist')
								uni.$emit('refreshdatalists')
								setTimeout(function(){
									uni.navigateBack({
										delta:1
									})
									// that.$tab.reLaunch('/pages/index/index')
								},1500)
								
							}else{
								that.$toast(res.msg)
							}
						})
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});	
		},
		gettypeFn(type){
			var that=this;
			var str="拒绝"
			if(type==3){
				str='同意'
			}
			uni.showModal({
				title: '确认'+str,
				content: "是否确认"+str+"该预约",
				cancelText: '取消',
				confirmText: '确认',
				success: function(res) {
					if (res.confirm) {
						var params={
							reservatId:that.id,
							visitType:type
						}
						getReservatSh(params).then(res=>{
							if(res.code==200){
								that.$toast('审核成功')
								uni.$emit('refreshdatalist','sh')
								uni.$emit('refreshdatalists')
								setTimeout(function(){
									that.getDataFn();
									// that.getcount();
								},1500)
								
							}else{
								that.$toast(res.msg)
							}
						})
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});
			
		},
		getPreview(ite,type) {
			var newArr=[];
			var url='';
			if(type=='face'){
				url=this.baseUrl+ite
			}else{
				url=this.yy_code
			}
			newArr.push(url)
			uni.previewImage({
				urls: newArr,
				current:0,
				success: function(data) {
					
				},
				fail: function(err) {
					
				}
			});
		},
		getDataFn(){
			getReservatDetail(this.id).then(res=>{
				if(res.code==200){
					if(res.data){
						this.datainfo=res.data;
						if(res.data.visitStatus&&res.data.visitStatus==2){
							this.useflag=true;
							this.barsteps[1].status=2;
							this.barsteps[2].status=2;
							this.barsteps[2].tit='审核完成';
							this.barsteps[3].status=3;
						}else{
							var type=res.data.visitType;
							if(type==1){
								this.barsteps[1].status=1;
							}else if(type==2){
								this.barsteps[1].status=2;
								this.barsteps[2].status=2;
								this.barsteps[2].tit='审核失败';
								this.yyerror=true
							}else if(type==3){
								this.barsteps[1].status=2;
								this.barsteps[2].status=2;
								this.barsteps[2].tit='审核完成';
							}
						}
						
					}else{
						this.nodataflag=true
					}
					
					
				}else{
					this.$toast(res.msg)
				}
			})
		}
	},
	
  }
</script>

<style lang="scss" scoped>
.ytbox{width: 684rpx;margin: 0 auto;padding-top: 24rpx;position: relative;flex: 1;overflow: auto;}
.ystaimg{width: 140rpx;height: 140rpx;top: 40rpx;right: 22rpx;position: absolute;}
.nodata{z-index: 3;flex: 1;overflow: auto;
	display: flex;flex-direction: column;align-items: center;box-sizing: border-box;padding-top: 200rpx;background-color: #FFFFFF;
	.img{width: 456rpx;height: 178rpx;margin-bottom: 28rpx;flex: 0 0 auto;}
	.tit{font-size: 30rpx;color: #AAAAAA;font-weight: bold;}
}	
.code_box{
	width: 100%rpx;background: #FFFFFF;border-radius: 14rpx;margin: 0 auto;padding:48rpx 56rpx 36rpx;box-sizing: border-box;flex: 1;
	.cdet{
		.ctit{font-size: 28rpx;font-weight: bold;color: #161616;position: relative;
				&::before{width: 6rpx;height: 34rpx;background: $com-cd3;border-radius: 4rpx;content: '';left: -26rpx;top: 3rpx;position: absolute;bottom: 3rpx;}
		}
		.adrtip{font-weight: 500;font-size: 28rpx;color: #161616;line-height: 40rpx;padding: 30rpx 0 56rpx;
			text{color: $com-cd3;}
		}
		.cbox{padding: 40rpx 0 0rpx;}
		.ctxt{font-size: 26rpx;font-weight: bold;
color: $com-cd3;margin-bottom: 16rpx;}
		.ctlist{padding: 12rpx 0;display: flex;justify-content: space-between;
			.tit{font-size: 28rpx;font-weight: 500;color: #666666;flex:0 0 auto;margin-right: 20rpx;
				text{display: inline-block;width: 116rpx;text-align-last: justify;}
			}
			.txt{font-size: 26rpx;font-weight: bold;color: #161616;flex: 1;text-align: right;	}
		}
		.yerror{padding: 14rpx 0 30rpx;
			image{width: 296rpx;height: 330rpx;margin: 0 auto 16rpx;}
			view{font-size: 24rpx;font-weight: bold;color: #D32C26;text-align: center;}
		}
		
	}
}
.ybtn{border-top: 2rpx solid #DADADA;padding: 20rpx 0rpx;display: flex;align-items: center;justify-content: space-between;
		.ybtns{border-radius: 6rpx;height: 80rpx;font-weight: 500;font-size: 26rpx;display: flex;align-items: center;justify-content: center;box-sizing: border-box;
			&.btn1{border: 2rpx solid #FC3838;color: #FC3838;}
			&.btn2{border: 2rpx solid #666666;color: #666666;margin-left: 30rpx;}
			&.btn3{background-color: #0391FD;color: #ffffff;margin-left: 30rpx;}
		}
	}
.imgs{flex: 1;display: flex;justify-content: flex-end;
	.faceimg{width: 100rpx;height: 100rpx;}
}


</style>