yuanqu_ui/pages/order/comedetail.vue

<template>
  <view>
	  <!-- 顶部选填情况 -->
	<step-bar :steps="steps" :fixeda="fixedflag" :reservatType="datainfo.reservatType"></step-bar>
	<view class="ytbox" :style="fixedflag?'padding-top: 152rpx;':''">
		<view class="code_box">
			<view class="cdet" v-if="yy_code">
				<view class="ctit">通行码</view>
				<view class="ycode">
					<!-- <view class="tit">请向工作人员出示该二维码即可扫码通行</view> -->
					<view class="img">
						<image :src="yy_code" class="codeimg" @click.stop="getPreview"></image>
						<view class="usebox" v-if="useflag">
							<image :src="useimg" class="useimg"></image>
						</view>
						
					</view>
					<view class="txt txta" v-if="useflag">通行码已使用</view>
					<view class="txt" v-else>点击二维码可放大哦</view>
				</view>
			</view> 
			<!-- 预约失败 -->
			<view class="cdet">
				<view class="ctit">预约信息</view>
				<view class="yerror" v-if="yyerror">
					<image :src="errorimg"></image>
					<view>审核失败</view>
				</view>
				<view class="cbox">
					<view class="ctxt">预约时间</view>
					<view class="ctlist">
						<view class="tit">参观日期：</view>
						<view class="txt">{{datainfo.visitDate||''}}</view>
					</view>
					<view class="ctlist">
						<view class="tit">参观时间：</view>
						<view class="txt">{{datainfo.visitTime||''}}</view>
					</view>
				</view>
				<view class="cbox">
					<view class="ctxt">登记信息</view>
					<view class="ctlist">
						<view class="tit">游客类型：</view>
						<view class="txt" v-if="datainfo.reservatType">{{datainfo.reservatType=='2'?'散客':'团队'}}</view>
					</view>
					<view class="ctlist">
						<view class="tit">单位名称：</view>
						<view class="txt">{{datainfo.visitUnitName||''}}</view>
					</view>
					<view class="ctlist">
						<view class="tit">参观人数：</view>
						<view class="txt">{{datainfo.visitNum||''}}人</view>
					</view>
					<view class="ctlist">
						<view class="tit">联系人：</view>
						<view class="txt">{{datainfo.visitName||''}}</view>
					</view>
					<view class="ctlist">
						<view class="tit">联系电话：</view>
						<view class="txt">{{datainfo.visitPhone||''}}</view>
					</view>
					<view class="ctlist">
						<view class="tit">是否接待：</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">接待人：</view>
							<view class="txt">{{datainfo.receptionName||''}}</view>
						</view>
						<view class="ctlist" v-if="datainfo.receptionPhone">
							<view class="tit">接待电话：</view>
							<view class="txt">{{datainfo.receptionPhone||''}}</view>
						</view>
					</block>
					<view class="ctlist">
						<view class="tit">备注信息：</view>
						<view class="txt">{{datainfo.visitRemark||''}}</view>
					</view>
				</view>
			</view> 
		</view>
		  
	</view>
	<view class="code_btn" v-if="!useflag">
		<view class="btn btn2 flex1" @click="getFail" >取消预约</view>
	</view>
	<!-- 弹窗 -->
	<pop-up :type="type" @getClose="getClose"></pop-up>
  </view>
</template>

<script>
	import * as base64 from "base-64"
	import stepBar from "@/components/order/stepbar.vue"
	import popUp from "@/components/order/popup.vue"
	import {getReservatDetail,getReservatDel} from "@/api/mine/order.js"
	import QR from "@/utils/wxqrcode.js" // 二维码生成器 
	import config from '@/config'
	const baseUrlimg = config.baseUrlimg
  export default {
	  components:{stepBar,popUp},
	data(){
		return{
			codeimg:require('@/static/images/order/comes/code.png'),
			useimg:require('@/static/images/order/comes/use.png'),
			errorimg:require('@/static/images/order/comes/error.png'),
			//status:  填写状态  0:未填   1:在填  2:填完
			steps:[{tit:'预约时间',status:1,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,
			datainfo:{
				
			},

		}
	},
	onLoad: function(e) {
		this.id=base64.decode(e.id);
		this.getDataFn()
		
	},
	methods:{
		getClose(){
			this.type=0;
		},
		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('取消成功')
								setTimeout(function(){
									uni.$emit('refreshrelist')
									uni.navigateBack({
										delta:1
									})
								},1500)
								
							}else{
								that.$toast(res.msg)
							}
						})
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});
			
		},
		getPreview() {
			var newArr=[];
			var 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){
					this.datainfo=res.data;
					if(res.data.visitStatus&&res.data.visitStatus==2){
						this.useflag=true;
					}
					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.steps[2].status=2;
						}else if(type==2){
							this.steps[2].status=2;
							this.steps[3].status=2;
							this.steps[3].tit='预约失败';
							this.yyerror=true
						}else if(type==3){
							this.steps[2].status=2;
							this.steps[3].status=2;
							this.steps[2].tit='审核完成';
							this.steps[3].tit='预约成功';
							this.yy_code = QR.createQrCodeImg(this.id, {
								size: parseInt(240),//二维码大小 
								typeNumber:10
							})
						}
					}
					
				}else{
					this.$toast(res.msg)
				}
			})
		}
	},
	
  }
</script>

<style lang="scss" scoped>
.ytbox{padding-bottom: 32rpx;}
.code_box{
	width: 684rpx;background: #FFFFFF;border-radius: 6rpx;margin: 40rpx auto 0;padding:40rpx 60rpx;box-sizing: border-box;flex: 1;
	.cdet{
		.ctit{font-size: 32rpx;font-weight: bold;color: #161616;position: relative;
				&::before{width: 6rpx;height: 34rpx;background: $com-cd3;border-radius: 2rpx;content: '';left: -26rpx;top: 3rpx;position: absolute;bottom: 3rpx;}
		}
		.cbox{padding: 36rpx 0 12rpx;}
		.ctxt{font-size: 30rpx;font-weight: bold;
color: $com-cd3;margin-bottom: 16rpx;}
		.ctlist{padding: 10rpx 0;display: flex;justify-content: space-between;
			.tit{font-size: 30rpx;font-weight: 500;
			color: #AAAAAA;flex:0 0 auto;margin-right: 20rpx;}
			.txt{font-size: 30rpx;font-weight: 500;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;}
		}
		
	}
	
	// 二维码
	.ycode{text-align: center;padding: 34rpx 0 30rpx;
		.tit{font-size: 28rpx;font-weight: bold;
color: #FFB132;}
		.img{width: 270rpx;height: 270rpx;margin: 6rpx auto;padding: 10rpx;box-sizing: border-box;position: relative;
			.codeimg{width: 100%;height: 100%;}
			.usebox{
				position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(255, 255, 255, 0.8);
			}
			.useimg{width: 132rpx;height: 86rpx;position: absolute;bottom: 50rpx;right: 40rpx;}
		}
		.txt{font-size: 24rpx;font-weight: bold;color: $com-cd3;
			&.txta{color: #AAAAAA;}
		}
	}
}
.code_btn{flex: 0 0 auto;padding: 40rpx 32rpx;display: flex;align-items: center;justify-content: space-between;
	.btn{width: 320rpx;height: 80rpx;border-radius: 40rpx;box-sizing: border-box;font-size: 32rpx;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;}
	}

}



</style>