dsn_android/components/payCodePopup.vue

<template>
	<view>
		<uni-popup ref="payPopup" type="center">
			<view class="pay-popup">
				<image class="delete-icon" src="../static/images/icon-delete.png" @click="closePayDetail"></image>
				<view class="item">
					<view class="label">支付宝</view>
					<view class="qrcode">
						<image :src="aliCodeImg"></image>
						<!-- <mosowe-canvas-image ref="aliCanvas" @canvasImage="aliCanvasImage" :lists="aliLists" height="40vw" width="40vw" /> -->
					</view>
				</view>
				<view class="item">
					<view class="label">微信</view>
					<view class="qrcode">
						<image :src="wxCodeImg"></image>
						<!-- <mosowe-canvas-image ref="wxCanvas" @canvasImage="wxCanvasImage" :lists="wxLists" height="40vw" width="40vw" /> -->
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'


	export default {
		props: {
			orderSn: {
				type: String
			},

			type: {
				type: String
			}
		},
		data() {
			return {
				timer: '',
				aliLists: [{
					type: 'qr',
					content: '',
					x: 0,
					y: 0,
				}],
				aliCodeImg: '',
				wxLists: [{
					type: 'qr',
					content: '',
					x: 0,
					y: 0,
				}],
				wxCodeImg: ''
			};
		},

		created() {

		},

		methods: {
			init(res) {
				const $this = this;
				let info = uni.getSystemInfoSync()
				this.aliCodeImg = res.aliCode;
				this.wxCodeImg = res.wxCode;
				// this.aliLists[0].content = res.aliCode;
				// this.aliLists[0].width = info.screenWidth * 0.4
				// this.aliLists[0].height = info.screenWidth * 0.4
				// this.wxLists[0].content = res.wxCode;
				// this.wxLists[0].width = info.screenWidth * 0.4
				// this.wxLists[0].height = info.screenWidth * 0.4
				this.$nextTick(function() {
					console.log("SSS2-1");
					$this.$refs.payPopup.open();
					console.log("SSS2");
					$this.$refs.payPopup.open();
					// setTimeout(function() {
					// 	console.log("SSS3");
					// 	$this.$refs.aliCanvas.createCanvas();
					// 	console.log("SSS4");
					// 	$this.$refs.wxCanvas.createCanvas();
					// }, 500)
					clearInterval($this.timer)
					$this.timer = setInterval(function() {
						$this.getPayStatus();
					}, 3000)
				})

			},

			aliCanvasImage(e) {
				this.aliCodeImg = e;
			},

			wxCanvasImage(e) {
				this.wxCodeImg = e;
			},

			getPayStatus() {
				this.$api.offorderGetStatus({
					orderSn: this.orderSn
				}).then(res => {
					if (res.status == 1) {
						clearInterval(this.timer);
						console.log("SSS5");
						this.$refs.payPopup.close();
						this.$emit('success', this.type)
					}
				})
			},

			clearTimer() {
				clearInterval(this.timer);
			},

			closePayDetail() {
				clearInterval(this.timer)
				this.$nextTick(function() {
					this.$refs.payPopup.close();
				})
			},
		}
	}
</script>

<style lang="scss">
	.pay-popup {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 90vw;
		min-height: 70vw;
		margin: 0 5.8vw 1.9vw;
		border-radius: .8vw;
		background-color: #F8F8F8;

		.delete-icon {
			position: absolute;
			top: 4vw;
			right: 4vw;
			width: 3.3vw;
			height: 3.3vw;
		}

		.item {
			display: flex;
			align-items: center;
			flex-direction: column;

			.qrcode {
				width: 40vw;
				height: 40vw;

				image {
					width: 40vw;
					height: 40vw;
				}
			}

			.label {
				margin-bottom: 2.9vw;
				font-size: 2.9vw;
				font-weight: 500;
			}
		}
	}
</style>