zd2.0/pages/order/hxqm.vue

<template>
	<view class="content" style="height: 100vh;">
		<view class="" style="height: 87rpx;">

		</view>
		<view class="djq-wrap">
			<view class="djq-top flex f-d-c f-j-c">
				<view class="djq-name">
					服务确认二维码
				</view>
				<view class="djq-time">
					请扫码核销
				</view>
			</view>
			<view class="djq-body">
				<view class="ewm">
					<tki-qrcode :cid="cid" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background"
						:foreground="foreground" :pdground="pdground" :iconSize="iconSize" :lv="lv" :onval="onval"
						:loadMake="loadMake" :usingComponents="usingComponents" @result="qrR" />
				</view>
				<view class="ewm-code" >
					{{showVal}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	
	import {
		orderDetail
	} from '@/api/order.js';
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				showVal: '',
				type: 1,//1->普通商品核销 2-> 电池核销
				orderInfo: {},
				order_id: '', //订单编号
				cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
				size: 440, //生成的二维码大小
				unit: 'upx', //大小单位尺寸
				show: true, //默认使用组件中的image标签显示二维码
				val: '', //要生成的内容
				background: '#ffffff', //二维码背景色
				foreground: '#333333', //二维码前景色
				pdground: '#333333', //二维码角标色
				icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
				iconSize: 40, //二维码图标大小
				lv: 3, //容错级别
				onval: true, //监听val值变化自动重新生成二维码
				loadMake: true, //组件初始化完成后自动生成二维码，val需要有值
				usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
				showLoading: false, //是否显示loading
				loadingText: '二维码生成中', //loading文字
				src: '', // 二维码生成后的图片地址或base64
				ratio: 1, //页面比例用于计算
				ctxSrc: '', //要显示的图片
				loading: true, //是否载入图片中
			}
		},
		onLoad(opt) {
			this.type = opt.type
			// 普通商品核销
			if (this.type == 1) {
				this.order_id = opt.id
				this.getOrderDetail()
			}
			//电池核销码
			if(this.type == 2) {
				this.val = 'battery&'+ opt.id + '&' + opt.battery_number
				this.showVal = opt.id
			}
			// 升压器核销码
			if(this.type == 3) {
				this.val = 'booster&' + opt.id + '&' + opt.booster_number
				this.showVal = opt.id
			}
		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			getOrderDetail() {
				let that = this;
				orderDetail({}, that.order_id).then(e => {
					// that.item = e.data;
					that.orderInfo = e.data
					that.val = that.orderInfo.verify_code
					that.showVal = that.val
				});
			},
			qrR() {
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	page .content{
		min-height: 100%;
		height: auto;
		background:$base-color !important;
	}

	.djq-wrap {
		width: 696rpx;

		background-color: #fff;
		position: relative;
		margin: auto;

		.djq-top {
			height: 185rpx;
			background: #F5F5F5;
			overflow: hidden;
			flex-direction: column;
			justify-content: center;

			.djq-name {
				font-size: 44rpx;
				font-weight: bold;
				color: #222222;
			}

			.djq-time {
				font-size: 24rpx;
				font-weight: 500;
				color: #686868;
			}

			&::after,
			&::before {
				content: '';
				height: 120rpx;
				width: 120rpx;
				border-radius: 50%;
				position: absolute;
				top: -60rpx;
				background-color: $base-color;
			}

			&::before {
				left: -60rpx;
			}

			&::after {
				right: -60rpx;
			}
		}

		.djq-body {
			height: 770rpx;
			position: relative;
			padding-top: 115rpx;

			&::after,
			&::before {
				content: '';
				height: 120rpx;
				width: 120rpx;
				border-radius: 50%;
				position: absolute;
				bottom: -60rpx;
				background-color: $base-color;
			}

			&::before {
				left: -60rpx;
			}

			&::after {
				right: -60rpx;
			}

			.ewm {
				width: 440rpx;
				height: 440rpx;
				margin: auto;
			}

			.ewm-code {
				padding-top: 55rpx;
				font-size: 44rpx;
				font-weight: bold;
				color: #333333;
				text-align: center;
			}
		}


	}
</style>