zhywpt-h5/pages/payment/orderPayment.vue

<template>
	<view class="content">
		<image class='bg-image' mode="widthFix"
			src="https://qtzl.etcjz.cn/default-bucket/20240324/3eba2095f5204798a1f8101b_beijing.jpg"></image>
		<view class="content-re">
			<custom-header title="订单支付" :back="config.hasReturn === 'true'"></custom-header>
			<view style="padding: 20rpx 0 30rpx" class="order-content">
				<!-- 获取产品展示 -->
				<view class="order-car" v-for="(item, index) in orderList" @click="handlePayment(item)" :key="index"
					:class="{ isWing: item.payStatus !== 'UNPAY' }">
					<view class="l-info">
						<view class="goods-name">
							{{ item.payTypeName }}
						</view>
						<view class="goods-des">
							{{ item.payStatusName }}
						</view>
					</view>
					<view class="r-amount">￥: {{ handleAmount(item.fee) }}</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14" :closeable="true" length="60%" @close="detectAliPay">
			<view class="title">微信扫码支付</view>
			<view class="slot-content">
				<view class="order-amount">
					<text>{{ currentData.payTypeName }}：</text>
					<text class="amount">￥ {{ handleAmount(currentData.fee) }}</text>
				</view>

				<view style="width: 300rpx; height: 300rpx">
					<qrcode-vue :value="qrCodeValue" :level="level" :render-as="renderAs" style="width: 100%; height: 100%" />
				</view>
				<view class="desc">请您及时付款，二维码将会5分钟后在后超时！</view>
			</view>
			<view class="bottom-btn">
				<u-button class="btn" type="primary" @click="getQrCodeText">
					刷新二维码
				</u-button>
				<u-button class="btn" type="success" @click="show = false">
					已支付
				</u-button>
			</view>
		</u-popup>
	</view>
</template>
<script setup lang="ts">
	import handleAmount from '@/utils/handleAmount.js';
	import { unifyTemplate } from '@/hooks/unifyTemplate';
	import { reactive, ref, nextTick } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { request, myJsonp, toWeixin } from '@/utils/network/request';

	import { payType, payMentStatus, orderSource } from './common.js';
	import QrcodeVue, { Level, RenderAs } from 'qrcode.vue';
	const {
		CustomHeader, //头部组件
		initData, //初始化数据
		isShow, //是否展示formBuilderVue组件
		qdOrderVal //qdOrder中数据 ref
	} = unifyTemplate(); //初始化数据
	// import {
	// 	request
	// } from '../../static/js/network/request'

	const orderList = ref<any>([]);
	// 实付款
	const amount = ref<any>('');
	let config = ref<any>({
		jumpPage: ''
	});
	onLoad((opin) => {
		initData(opin, 4).then((data) => {
			console.log('data数据', data);
			detectAliPay(data.qdOrder.qtOrderNo);
			delete data.config.tableConfig;
			if (data.config.jumpPage) {
				config.value.jumpPage = data.config.jumpPage;
			}
		});
	});
	let isLock = ref(false);
	// 订单已支付
	function detectAliPay(orderIdOld = '') {
		let orderId = orderIdOld || qdOrderVal.value.qtOrderNo;
		if (!orderId) {
			return;
		}
		request('7d240e2034f94da399fb0e3775f87a62', {
			data: {
				orderId
			}
		}).then((res) => {
			if (res.statusCode === 0) {
				let data = JSON.parse(res.bizContent);
				let dataList = [];
				console.log(data, '支付的数据');
				if (data.paymentStatus === 'ALLSUCCESS') {
					console.log('全部已支付');
					if (isLock.value) {
						return;
					}
					isLock.value = true;
					let { jumpPage } = config.value;
					uni.navigateTo({
						url: '/' + jumpPage,
						animationType: 'pop-in',
						animationDuration: 500
					});
				} else {
					data.datas.forEach((item) => {
						if (item.payStatus === 'UNPAY') {
							dataList.push({
								...item,
								payStatusName: payMentStatus[item.payStatus],
								payTypeName: payType[item.payType]
							});
						}
					});
				}
				orderList.value = dataList;
			}
		});
	}
	const show = ref(false);
	const currentData = ref<any>({});
	const qrCodeValue = ref<String>('');
	const level = ref<Level>('M');
	const renderAs = ref<RenderAs>('svg');
	//提交
	function handlePayment(orderData) {
		console.log(orderData);
		if (orderData.payStatus !== 'UNPAY') {
			return;
		}
		currentData.value = {
			...orderData
		};
		getQrCodeText();
	}
	// 根据公网ip获取支付地址

	// 获取二维码
	function getQrCodeText() {
		let params = {
			orderId: currentData.value.orderId,
			payType: currentData.value.payType
			// spbillCreateIp: "",
			// h5Type: ""
		};
		request('377421d6ed4f48a29575aa126838a4d2', {
			data: params,
			hideShowModal: true
		}).then((res) => {
			if (res.statusCode === 0) {
				show.value = true;
				let data = JSON.parse(res.bizContent);
				qrCodeValue.value = data.codeUrl;
			} else {
				uni.showModal({
					title: '提示',
					content: res.data.errorMsg,
					success: function (res) {
						detectAliPay();
					}
				});
			}
			// contractTesting(qdOrderVal.value.qdOrderNo, jumpPage)
		});
	}
</script>
<style lang="scss" scoped>
	view.isWing {
		background-color: #27be5e;
	}

	.order-car {
		margin: 30rpx 30rpx 0;
		width: calc(100% - 60rpx);
		height: 170rpx;
		border-radius: 20rpx;
		background-color: #57aef9;
		display: flex;
		justify-content: space-between;
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		align-items: center;
		padding: 0 40rpx;

		.l-info {
			color: #fff;

			.goods-name {
				margin-bottom: 16rpx;
				font-size: 32rpx;
				font-weight: bold;
			}

			.goods-des {
				font-size: 26rpx;
			}
		}

		.r-amount {
			font-size: 38rpx;
			color: #fff;
			padding-left: 20rpx;
			font-weight: bold;
		}
	}

	.title {
		font-size: 36rpx;
		text-align: center;
		padding: 20rpx 0;
	}

	.slot-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.order-amount {
			font-size: 28rpx;
			color: #999;
			margin-bottom: 20rpx;
		}

		.desc {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
	}

	.bottom-btn {
		padding: 20rpx;
		display: flex;
		align-items: center;

		.btn {
			width: 260rpx;
		}
	}
</style>