zhywpt-h5/pages/payment/orderPayment.vue

<template>
	<view class="content">
		<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>
		<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="handleWing">已支付</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 {
		setToken,
		getToken
	} from '@/utils/storage'
	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);
			detectAliPay()
			delete data.config.tableConfig
			if(data.config.jumpPage){
				config.value.jumpPage = data.config.jumpPage
			}
		})
	})


	// 订单已支付
	function detectAliPay() {
		request('7d240e2034f94da399fb0e3775f87a62', {
			data: {
				orderId: qdOrderVal.value.qtOrderNo
			}
		}).then((res) => {
			if (res.statusCode === 0) {
				let data = JSON.parse(res.bizContent)
				let dataList = []
				if (data.paymentStatus === 'ALLSUCCESS') {
					let {
						jumpPage
					} = config.value
					// contractTesting(qdOrderVal.value.qdOrderNo, jumpPage)
					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
			}
			// contractTesting(qdOrderVal.value.qdOrderNo, jumpPage)
		})
	}
	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
		}).then((res) => {
			if (res.statusCode === 0) {
				show.value = true
				let data = JSON.parse(res.bizContent)
				qrCodeValue.value = data.codeUrl
			}
			// contractTesting(qdOrderVal.value.qdOrderNo, jumpPage)
		})
	}
	// 已支付
	async function handleWing(params) {
		show.value = false
		detectAliPay()
	}
	// 签约检测
	function contractTesting(qdOrderNo, jumpPage) {
		const data = {
			qdOrderNo,
		}
		request('fdfbdddba6ec49f8b451cf2e299b4feb', {
			data,
		}).then((res) => {
			if (res.statusCode === 0) {
				const data = JSON.parse(res.bizContent)
				if (data.signStatus === 1 && data.accountStatus === 1 && data.bindStatus === 1) {
					// 上面三值都为1才进行下一步，否则进行签约初始化
					if (!jumpPage) return
					uni.navigateTo({
						url: '/' + jumpPage,
						animationType: 'pop-in',
						animationDuration: 500
					})
					/* 自定义返回 */
				} else {
					// 进行签约初始化
					signingInitialization(qdOrderNo)
				}
				// qdOrderStore.orderInfo.value.orderId = JSON.parse(res.bizContent).orderId
				// 通过检测
			}
		})
	}
	// 签约初始化
	function signingInitialization(qdOrderNo) {
		const data = {
			qdOrderNo
		}
		request('94569071cf814517908cd35693f1f2e1', {
			data,
		}).then((res) => {
			if (res.statusCode === 0) {
				const data = JSON.parse(res.bizContent)
				if (data.returnType === 0) {
					// 0-无需跳转，关闭H5即可 1-需跳转至返回url
					// const opened = window.open('about:blank', '_self');
					// opened.opener = null;
					// opened.close();
					closeWin()
				} else {
					window.open(data.signUrl, '_self')
				}
			}
		})
	}
	// 关闭当前页面方法
	function closeWin() {
		// @ts-ignore
		var jWeixin = import('jweixin-module')
		// @ts-ignore
		jWeixin.miniProgram.getEnv(function(res) {
			if (res.miniprogram) {
				// @ts-ignore
				jWeixin.miniProgram.navigateTo({
					url: '/path/to/page'
				})
			} else {
				const opened = window.open('about:blank', '_self');
				opened.opener = null;
				opened.close()
			}
		})
	}
</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>