zhywpt-h5/pages/payment/payment.vue

<template>
	<div class="content">
		<custom-header title="订单详情" :back="hasReturn === 'true'"></custom-header>
		<div style="padding: 20rpx">
			<view class="title">
				订单详情
			</view>
			<view class="container">
				<view class="detail-item" v-for='(item,index) in formData' :key='index'>
					<text>{{item.label}}</text>
					<text class="amount">{{item.key === 'amount'? '￥'+ item.value:item.value}}</text>
				</view>
			</view>
			<view class="payment-total">
				<text>实付款</text>
				<text class="amount">￥{{amount}}</text>
			</view>
			<button type="success" class="btn-txt btn" @click="submit">确认办理</button>
		</div>
	</div>
</template>
<script setup lang='ts'>
	import CustomHeader from '@/components/CustomHeader.vue';
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		request,
		OrdinaryRequest,
		myJsonp
	} from '@/utils/network/request'
	import {
		useQdOrderStore
	} from '@/stores/qdOrder.js'
	const qdOrderStore = useQdOrderStore()
	// import {
	// 	request
	// } from '../../static/js/network/request'

	let formData = reactive < any > ([{
		label: '产品名',
		value: '测试产品',
		key: "product",
		key1: 'promoteName',
	}, {
		label: '车牌号',
		key: "vehiclePlate",
		value: '贵zzzzzzz'
	}, {
		label: '车主姓名',
		key: "ownerName",
		value: '张三'
	}, {
		label: '邮寄地址',
		key: "orderInfoExt",
		key1: 'region,address',
		default: "不邮寄",
		value: ''
	}, {
		label: '产品金额',
		key: "amount",
		format: (val) => {
			return val * 0.01
		},
		value: '￥0.01'
	}, ])
	const amount = ref < any > ('')
	let jumpPage = 'pages/payment/paymentSucess'
	let hasReturn = ref('false')
	onLoad((opin) => {
		let qdOrderNo: any
		if (opin && opin.qdOrderNo) {
			qdOrderNo = opin.qdOrderNo
			uni.setStorageSync('qdOrderNo', opin.qdOrderNo)
		}else{
			qdOrderNo = uni.getStorageSync('qdOrderNo')
		}
		request('ac8756cc31eb4816b8eaeb71907ff9c1', {
			data: {
				qdOrderNo,
				pageStep: 4
			}
		}).then((res) => {
			let data = JSON.parse(res.bizContent)
			console.log(data.qdOrder);
			qdOrderStore.setQdOrder(data.qdOrder)
			getOrderInfo(data.qdOrder.qtOrderNo)
			jumpPage = data.config.jumpPage
			hasReturn.value = data.config.hasReturn
		})
	})

	function getOrderInfo(orderId) {
		request('8', {
			data: {
				orderId
			}
		}).then((res) => {
			let data = JSON.parse(res.bizContent)
			amount.value = data.amount * 0.01
			formData.forEach(item => {
				let itemData = data[item.key]
				if (typeof itemData === 'object') {
					if (item.key1.includes(',')) {
						let str = ''
						item.key1.split(',').forEach(listItem => {
							str += itemData[listItem] || ''
						})
						itemData = str
					} else {
						itemData = itemData[item.key1]
					}
				}
				if (item.format) {
					itemData = item.format(itemData)
				}
				item.value = itemData || item.default
			})
		})
	}
	//提交
	function submit() {
		// console.log('提交内容', item)
		uni.showLoading({
			title: '正在支付...',
			mask: true
		})
		setTimeout(() => {
			uni.hideLoading()
			uni.navigateTo({
				url: '/' + jumpPage,
				animationType: 'pop-in',
				animationDuration: 500
			})
		}, 1000)


		// myJsonp({
		// 	url: 'https://www.taobao.com/help/getip.php',
		// 	success(res) {
		// 		console.log(res)
		// 		const data = {
		// 			fee: 1,
		// 			spbillCreateIp: res.ip,
		// 		}
		// 		OrdinaryRequest({
		// 			data,
		// 		})
		// 	}
		// })


		// const data = {
		// 	fee: 1,
		// 	spbillCreateIp: '',
		// }
		// OrdinaryRequest({
		// 	data,
		// })

	}
</script>
<style lang='scss' scoped>
	.title {
		font-size: 30rpx;
		margin-left: 30rpx;
	}

	.container {
		padding: 10px;
		font-size: 14px;

		.detail-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px;
			margin-bottom: 8px;
			border-bottom: 1px solid #ccc;
		}
	}

	.payment-total {
		text-align: right;
		padding: 0 10px 20px;
	}

	text {
		margin-left: 10px;
	}

	.amount {
		color: #1AAC1B;
		max-width: 450rpx;
	}

	.btn {
		height: 80rpx;
		opacity: 1;
		border-radius: 100rpx;
		margin: 20rpx 20rpx 20rpx 20rpx;
	}

	.btn-txt {
		background: #1AAC1B;
		margin: 10px;
		color: #FFFFFF;
		font-size: 28rpx;
	}
</style>