yuanqu_ui/a/code.vue

<template>
  <view class="yybox">
	  <nav-bar navtit="来访预约" ></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" >
			<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 class="faceimg" @click="getPreview(datainfo.humanFaceData,'face')" :src="baseUrl+datainfo.humanFaceData"></image>
							</view>
						</view>
					</view>
				</view> 
			</view>
			<view class="code_btn" v-if="!useflag">
				<view class="btn btn2 flex1" @click="getFail" >取消预约</view>
			</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 {getReservatDetailh5,getReservatRemoveh5} from "@/api/mine/order.js"
	import { selectDictValue } from '@/utils/common.js';
	import {getDictionaryFn} from "@/api/mine/register.js"
	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"),
			//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:{
		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) {
						getReservatRemoveh5(that.id).then(res=>{
							if(res.code==200){
								that.$toast('取消成功')
								uni.$emit('refreshrelist')
								setTimeout(function(){
									that.getDataFn()
								},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(){
			getReservatDetailh5(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;
							// var reservatType=res.data.reservatType
							// if(reservatType==2){
							// 	this.steps[2].status=2;
							// 	this.steps[3].status=2;
							// 	this.steps[3].tit='预约成功';
							// 	this.yy_code = QR.createQrCodeImg(this.id, {
							// 		size: parseInt(240),//二维码大小 
							// 		typeNumber:10
							// 	})
							// }else{
								//visitType":"预约状态 1:等待审核 2:拒绝 3:同意",
								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='审核完成';
									// this.barsteps[3].tit='预约成功';
									// this.yy_code = QR.createQrCodeImg(this.id, {
									// 	size: parseInt(240),//二维码大小 
									// 	typeNumber:10
									// })
								}
							// }
						}	
					}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;}
.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;}
		}
		
	}
}
.code_btn{flex: 0 0 auto;padding: 40rpx 0rpx;display: flex;align-items: center;justify-content: space-between;
	.btn{width: 100%;height: 90rpx;border-radius: 14rpx;box-sizing: border-box;font-size: 28rpx;font-weight: 500;text-align: center;line-height: 80rpx;
		&.btn1{background: #FFFFFF;border: 2rpx solid $com-cd3;color: $com-cd3;}
		&.btn2{background: $com-cd3;color: #FFFFFF;}
	}

}

.imgs{flex: 1;display: flex;justify-content: flex-end;
	.faceimg{width: 100rpx;height: 100rpx;}
}

</style>