cashier_app/pages/quickMoney/qrCashier.vue

<template>
	 <view>
		<view style="height:50rpx"></view>
		<view class="collection-code"> 
			<view style="font-size: 36rpx;margin-bottom: 30rpx;">扫码付款</view>
			<view style="font-size: 50rpx;color: #0041c4;margin-bottom: 50rpx;">￥{{vdata.payAmount}}</view>
			<view class="img-box">
				<image v-if='vdata.qrImgUrl' :src="vdata.qrImgUrl" style="width:100%;height: 100%" mode=""></image>
			</view>
			<view class="text">
				<view>支付方式</view>
			</view>
			<view class="pay-methods">
				<view v-for="(item, index) in payMethods" :key="index">
					<image :src="item.url" mode=""></image>
					<view>{{ item.name }}</view>
				</view>
			</view>
		</view>
		
		<view class="scan" @click="changeScan">
			<image src="@/static/pay/scancode.svg" mode=""></image>
			<view>切换至扫一扫收款</view>
		</view>
		
		<PaymentSuccess ref="paymentSuccessRef" @close="go.back(1,emit.ENAME_RESET_PAY_AMOUNT)"/>
	 </view>
</template>

<script setup>
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { reactive, ref, onUnmounted, nextTick} from 'vue'
import PaymentSuccess from './components/PaymentSuccess.vue'
import { req, reqLoad, API_URL_MCH_STORE_LIST, $appPay, API_URL_PAY_ORDER_LIST } from "@/http/apiManager.js"
import infoBox from '@/commons/utils/infoBox.js'
import timer from '@/commons/utils/timer.js'
import go from '@/commons/utils/go.js'
import emit from '@/commons/utils/emit.js'


let payMethods = [
	{name: '微信支付', url: '/static/pay/type-wx.svg'},
	{name: '支付宝支付', url: '/static/pay/type-zfb.svg'},
	{name: '银联云闪付', url: '/static/pay/type-ysf.svg'},
]

const paymentSuccessRef = ref()


const vdata = reactive({
	qrImgUrl: '',
    payAmount: 0, 
	payOrderId: '',
	
	isUnload: false, // 是否已经销毁当前组件。
})


onLoad((options) => {
	
	vdata.payAmount = options.payAmount
	vdata.payOrderId = options.payOrderId
	vdata.qrImgUrl = options.qrImgUrl
	
	// 订单轮询
	orderPollingByQR(vdata.payOrderId)
})

// 页面销毁需要将 定时任务结束。 
onUnload(() => vdata.isUnload = true)

 // 轮询查单 (聚合收款码)
function orderPollingByQR(payOrderId) {
	
	// 总共查询几次
	let allCount = 15
	
	timer.startTimeoutTask(2, allCount, (subTime) => {
		
		// 页面已销毁。 
		if(vdata.isUnload){
			return false;
		}
		
		// 任务结束
		if(subTime <= 0){
			return infoBox.showToast('请于订单列表查询结果').then(() => {
				emit.pageEmit(emit.ENAME_REF_PAY_ORDER) // 刷新订单数据
				go.to('PAGES_PAY_ORDER', {}, go.GO_TYPE_SWITCHTAB)
			})
		}
		
		return req.getById(API_URL_PAY_ORDER_LIST, payOrderId).then(( { bizData } ) => {
			
			switch (bizData.state) {
				case 2:
				    infoBox.showSuccessToast("支付成功")
					paymentSuccessRef.value.open(bizData)
					return Promise.reject()
					break;
				case 3:
					infoBox.showToast('支付失败：' + bizData.errMsg, 3)
					return Promise.reject()
					break;
				case 4:
					infoBox.showErrorToast("订单撤销")
					return Promise.reject()
					break;
				default: 
					return Promise.resolve()
					break;
			}
		})
		
	})
}





// 切换到扫一扫
const changeScan = () => {
	
	// 先发射事件，  提示调起相机 。 
	emit.pageEmit(emit.ENAME_E_PAY_SCAN)
	
    // 返回上一页， onShow调起。 
	nextTick(() => {
		go.back();
	})
}



</script>

<style scoped lang="scss">
.collection-code {
	margin: 0 70rpx;
	padding: 50rpx 0;
	background-color: #eff2f7;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	.img-box {
		width: 370rpx;
		height: 370rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		image {
			width: 340rpx;
			height: 340rpx;
		}
	}
	.text {
		width: 100%;
		text-align: center;
		padding: 50rpx 0;
		margin: 50rpx 0;
		color: #adb8cc;
		position: relative;
		view {
			position: absolute;
			width: 30%;
			top: 30%;
			left:35%;
			background-color: #eff2f7;
			z-index: 10;
		}
		&::before {
			position: absolute;
			top: 50%;
			left:10%;
			content: '';
			height: 1px;
			z-index: 1;
			width: 80%;
			background-color: #d5dbe6;
		}
	}
	
	.pay-methods {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 80%;
		
		&>view {
			width: 30%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 22rpx;
			color: #666F80;
			
			image {
				margin-bottom: 20rpx;
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	
}

.scan {
	position: fixed;
	left: 0;
	bottom: 60rpx;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	image {
		width :60rpx;
		height: 60rpx;
		margin-bottom: 20rpx;
	}
	view {
		font-size: 20rpx;
		color: #666f80;
	}
}
</style>