yuanqu_ui/pages/order/stafffail.vue

<template>
  <view class="code pt8 pb15">
	<view class="code_box pt80 flexdc">
		<view class="code_fail flex0">
			<image :src="failimg"></image>
			<view class="f16 fw co16 txc">核销失败</view>
		</view>
		<view class="txc code_tip flex1">
			<view>该通行码已使用</view>
			<view>请告知来访者重新预约</view>	 
		</view>
		<view class="code_btn code_btna flex0">
			<view class="btn btn1" @click="getFail" v-if="checkPermi(['system:reservat:cav'])">继续扫码</view>
			<view class="btn btn2 " @click="getBack">返回首页</view>
		</view>
	</view>
	
  </view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import {getReservatvav} from "@/api/mine/order.js"
  export default {
	data(){
		return{
			failimg:require("@/static/images/order/staffs/fail.png") 
		}
	},
	onLoad: function() {
	},
	methods:{
		checkPermi, checkRole,
		getFail(){
			var that = this;
			uni.scanCode({
				onlyFromCamera: true,
				autoZoom:false,
				scanType: ['qrCode'],
				success: function(red) {
					let result = red.result;
					if (typeof result == 'string') {
						try {
						
						} catch (e) {
							uni.navigateBack({
								delta: 1
							})
							uni.showToast({
								title: '扫码查询失败,请检查二维码是否正确',
								icon: "none"
							})
							return
						}
					}
					var id = red.result
					var params = {
						"reservatId": id,
					}
					getReservatvav(params).then(res => {
						if (res.code == 200) {
							// 刷新页面
							if(res.msg=='核销失败'){
								that.$tab.redirectTo('/pages/order/stafffail')
							}else{
								uni.$emit('refreshdatalist')
								that.$tab.redirectTo('/pages/order/staffcode?id='+id)
							}
							
						} else {
							uni.showToast({
								title: res.msg,
								duration: 1000,
								icon: 'none'
							});
						
						}
					})
				},
				fail: function(e) {
					if (e && e.errMsg && e.errMsg.indexOf('scanCode:fail cancel') != -1) {
						return;
					}
					uni.showToast({
						title: '扫码失败',
						icon: "none"
					})
				},
			});
		},
		getBack(){
			this.$tab.reLaunch('/pages/index/index')
		}, 
	},
	
  }
</script>

<style lang="scss" scoped>
.code{display: flex;flex-direction: column;height: 100vh;box-sizing: border-box;}
.code_box{
	width: 684rpx;background: #FFFFFF;border-radius: 6rpx;margin: 0 auto;padding:64rpx 60rpx 40rpx;box-sizing: border-box;flex: 1;
	&.pt80{padding-top: 160rpx;}
	.code_suc{
		image{width: 138rpx;height: 148rpx;margin: 0 auto 32rpx;}
	}
	.code_fail{
		image{width: 172rpx;height: 172rpx;margin: 0 auto 32rpx;}
	}
	.cdet{padding-top: 48rpx;
		.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;}
		}
		
	}
}
.code_tip {margin-top: 60rpx;
	view{font-size: 30rpx;font-weight: 500;color: #161616;}
}
.code_btn{flex: 0 0 auto;padding: 40rpx 32rpx;display: flex;align-items: center;justify-content: space-between;
	&.code_btna{padding: 0;display: block;padding-bottom: 72rpx;
		.btn{width: 100%;margin-bottom:20rpx;}
	}
	.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>