dingdong-master/pages/order-manage/modal/pay-qrcode.vue

<template>
	<!-- 报价/客户支付模态框 -->
	<view class="cu-modal" :class="show?'show':''">
		<view class="cu-dialog bg-white">
			<view class="cu-bar bg-white justify-end">
				<view class="content">支付宝扫码支付</view>
				<view class="action" data-modal="showPayQrcodeModal" @click="finishQrPay">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view class="bg-white">
				<view class="padding-tb-sm" style="width: 300px; margin: 0 auto;" v-show="modal_qr">
					<ayQrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="300"
						:width="300" />
				</view>
			</view>
			<view class="text-center padding-bottom-xl">
				<view>请客户扫描码付款后方能提交完单</view>
				<view class="text-red">必须按二维码生成金额支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue";

	export default {
		nama: 'pay-qrcode',
		emits: ['finishQrPay'],
		components: {
			ayQrcode
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				//二维码相关参数
				modal_qr: false,
				url: ''
			}
		},
		methods: {
			finishQrPay(e) {
				this.$emit('finishQrPay', e);
				this.hideQrcode();
			},
			// 展示二维码
			showQrcode(url) {
				this.url = url;
				let _this = this;
				this.modal_qr = true;
				// uni.showLoading()
				setTimeout(function() {
					// uni.hideLoading()
					_this.$refs.qrcode.crtQrCode()
				}, 50)
			},
			//传入组件的方法
			hideQrcode() {
				this.modal_qr = false;
			}
		}
	}
</script>

<style>
</style>