zhywpt-h5/pages/payment/orderPayment - 副本 (2).vue

<template>
	<div 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'
				:style="{'background-image':`url(${fileURL}image/applyCard/product-bg.png)`}">

				<!-- 				<image style="width: 100%; height: 170rpx; border-radius: 20rpx" :src="`${fileURL}image/applyCard/product-bg.png`">
				</image> -->
				<view class="l-info">
					<image class="icon-tip" :src="`${fileURL}image/applyCard/wechat.png`"></image>
					<view class="info-desc">
						<view class="goods-name">
							{{ item.name }}
						</view>
						<view class="goods-des">
							{{ item.status }}
						</view>
					</view>
				</view>
				<view class="r-amount">
					￥: {{ item.fee * 0.01 }}
				</view>
			</view>
		</view>
	</div>
</template>
<script setup lang='ts'>
	import {
		fileURL
	} from '@/utils/network/api.js';
	import {
		unifyTemplate
	} from '@/hooks/unifyTemplate'
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		request,
		myJsonp,
		toWeixin
	} from '@/utils/network/request'
	import {
		setToken,
		getToken
	} from '@/utils/storage'
	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 > ({
		submitName: '提交',
		titleWidth: 160
	})
	onLoad((opin) => {
		detectAliPay()
	})

	// 订单已支付
	function detectAliPay() {
		orderList.value = [{
			name: '办理费',
			fee: 100,
			status: '已支付'
		}, {
			name: '预存金',
			fee: 100,
			status: '未支付'
		}, {
			name: '保证金',
			fee: 100,
			status: '未支付'
		}, ]
		return
		request('56', {
			data: {
				orderId: qdOrderVal.value.qdOrderNo
			}
		}).then((res) => {
			if (res.statusCode === 0) {
				let data = JSON.parse(res.bizContent)
				if (data.tradeState === 'SUCCESS') {
					let {
						jumpPage
					} = config.value
					contractTesting(qdOrderVal.value.qdOrderNo, jumpPage)
				}
			}
			// contractTesting(qdOrderVal.value.qdOrderNo, jumpPage)
		})
	}

	//提交
	function handlePayment(orderData) {
		console.log(orderData);
	}
	// 签约检测
	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>
	.content {
		/* background-color: #f5f5f5; */
		/* height: 100%; */
	}

	.order-car {
		margin: 30rpx 30rpx 0;
		width: calc(100% - 60rpx);
		height: 170rpx;

		border-radius: 20rpx;
		/* background-color: #73acf9; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		/* 背景图不平铺 */
		background-repeat: no-repeat;
		/* 让背景图基于容器大小伸缩 */
		background-size: cover;



		.l-info {
			color: #fff;
			display: flex;
			.icon-tip {
				width: 100rpx;
				height: 100rpx;
				margin-right: 30rpx;
			}
			.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;
		}

	}
</style>