waterDelivery/pages/order/WriteOff.vue

<template>
	<view class="content">
		<view class="qr-box position-relative">
			<view class="title-box">
				<view class="title">
					服务确认二维码
				</view>
				<view class="tip-text">
					请扫码核销
				</view>
			</view>
			<view class="qr-content flex-center">
				<uqrcode :loading='loading' :auto='false' :start='false' sizeUnit='rpx' ref="qrcode" canvas-id="qrcode" :value="item.verify_code" size="500"></uqrcode>
			</view>
			<view class="text-code">
				{{item.verify_code}}
			</view>
			<view class="tip-icon top-left"></view>
			<view class="tip-icon bottom-left"></view>
			<view class="tip-icon top-right"></view>
			<view class="tip-icon bottom-right"></view>
		</view>
	</view>
</template>

<script>
	import {
		orderDetail
	} from '@/api/order.js';
	export default {
		data() {
			return {
				orderId: '',
				item: {
					verify_code: ''
				},
				loading:true
			};
		},
		onLoad(option) {
			this.orderId = option.id;
			this.loadOrder();
		},
		methods: {
			// 载入订单详细
			loadOrder() {
				let obj = this;
				orderDetail({}, obj.orderId).then(e => {
					obj.item = e.data;
					obj.$refs.qrcode.make({
					  success: () => {
						  obj.loading=false;
					    console.log('生成成功');
					  },
					  fail: err => {
					    console.log(err)
					  }
					});
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: $base-color;
	}
	.qr-box{
		color: $font-color-dark;
		background-color: #FFF;
		text-align: center;
		margin: 0 30rpx;
		.title-box{
			padding-top: 50rpx;
			padding-bottom: 30rpx;
			background-color: #F5F5F5;
			.title{
				font-weight: bold;
				font-size: 44rpx;
			}
			.tip-text{
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
		.qr-content{
			padding-top: 110rpx;
		}
		.tip-icon{
			position: absolute;
			background-color: $base-color;
			border-radius: 99rpx;
			width: 100rpx;
			height: 100rpx;
		}
		.top-left,.bottom-left{
			left: -40rpx;
		}
		.top-right,.bottom-right{
			right: -40rpx;
		}
		.bottom-left,.bottom-right{
			bottom: -40rpx;
		}
		.top-left,.top-right{
			top: -40rpx;
		}
		.text-code{
			font-size: 44rpx;
			font-weight: bold;
			padding-top: 60rpx;
			padding-bottom: 110rpx;
		}
	}
	.content{
		padding-top: 90rpx;
	}
</style>