zhywpt-h5/pages/payment/payment.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" v-if='isShow'>
				<view class="title">
					订单详情
				</view>
				<view class="container">
					<template v-for='(item,index) in formData'>
						<view class="detail-item" :key='index' v-if='item.value !== "" && item.value !== undefined && !item.isHide'>
							<text>{{item.label}}</text>
							<text class="amount">{{item.key === 'amount'? '￥'+ item.value:item.value}}</text>
						</view>
					</template>
					<template v-for='(item,index) in amountList'>
						<view class="detail-item" :key='index' v-if='item.value !== "" && item.value !== undefined '>
							<text>{{item.label}}</text>
							<view>
								<text class="amount">{{'￥'+ item.value}} </text>
								<text class="status" :class="{amount:item.status==='SUCCESS'}">({{item.statusName}}) </text>
							</view>
						</view>
					</template>
					<view class="detail-item">
						<text>合计金额</text>
						<text class="amount">￥{{amountData.totalFee}} </text>
					</view>
				</view>
				<view class="payment-total">
					<text>待付款</text>
					<text class="amount">￥{{handleAmount(amountData.actualPayment)}}</text>
				</view>

				<Hetong v-model="checked" :link='link' v-if='link' />
				<button type="success" class="btn-txt btn" @click="submit">确认办理</button>
			</view>
			<u-toast ref="uToastRef" />
		</view>
	</view>
</template>
<script setup lang='ts'>
	import {
		unifyTemplate
	} from '@/hooks/unifyTemplate'
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import Hetong from '@/components/Hetong/Hetong.vue'
	import {
		request,
		myJsonp,
		toWeixin
	} from '@/utils/network/request'
	import {
		payType,
		payMentStatus
	} from './common.js'
	import {
		setToken,
		getToken
	} from '@/utils/storage'
	import handleAmount from '@/utils/handleAmount.js';
	const {
		CustomHeader, //头部组件
		initData, //初始化数据
		isShow, //是否展示formBuilderVue组件
		qdOrderVal //qdOrder中数据 ref
	} = unifyTemplate() //初始化数据
	// import {
	// 	request
	// } from '../../static/js/network/request'

	let formData = reactive < any > ([{
		label: '产品名',
		value: '',
		key: "product",
		key1: 'promoteName',
	}, {
		label: '车牌号',
		key: "vehiclePlate",
		value: '贵'
	}, {
		label: '车主姓名',
		key: "ownerName",
		value: ''
	}, {
		label: '邮寄地址',
		key: "orderInfoExt",
		key1: 'region,address',
		default: "不邮寄",
		isHide: false,
		value: ''
	}])
	const amountList = ref < any > ([])
	const checked = ref(false)
	// 实付款
	const amountData = ref({
		totalFee: '',
		actualPayment: 0
	})
	let config = ref < any > ({
		submitName: '提交',
		titleWidth: 160
	})
	onLoad((opin) => {

		// 初始化数据
		initData(opin, 4).then(async data => {
			await login(data)
			getLink(data.order.orderId)
			getOrderInfo(data.qdOrder.qtOrderNo)
			delete data.config.tableConfig
			config.value = Object.assign(data.config, config.value)

		})
	})
	const link = ref('')
	// 获取协议链接
	async function getLink(orderId) {
		await request('32a9d99a781a4bf2af29a46d903702bd', {
			data: {
				orderId
			}
		}).then((res) => {
			if (res.statusCode === 0) {
				let bizContent = JSON.parse(res.bizContent)
				console.log(bizContent);
				link.value = bizContent.supAgree
			}
			// contractTesting(qdOrderVal.value.qdOrderNo, jumpPage)
		})
	}
	// 无感登录,如果没有登录调用登录
	async function login(orderData) {

		let data = {
			userType: '',
			account: ''
		}
		if (orderData.order.userType === "PERSONAL_USER") {
			// 个人办理
			data.userType = 'PERSONAL'
			data.account = orderData.order.customerTel
		} else {
			// 单位办理
			data.userType = 'ENTERPRISE'
			data.account = orderData.order.customerIdnum
		}
		console.log('请求参数', data);
		await request('abaf0013caa24dafad12b0f571e8ee40', {
			data,
		}).then((res) => {
			if (res.statusCode === 0) {
				let bizContent = JSON.parse(res.bizContent)
				// 保存token
				setToken(bizContent.accessToken)
			}
			// contractTesting(qdOrderVal.value.qdOrderNo, jumpPage)
		})
	}

	// 数据处理
	function getOrderInfo(orderId) {
		request('8', {
			data: {
				orderId
			}
		}).then((res) => {
			let data = JSON.parse(res.bizContent)
			console.log(data);
			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)
				}
				if (!itemData && itemData !== 0 && item.isHide === false) {
					item.isHide = true
				}
				item.value = itemData || item.default
			})
			amountData.value.totalFee = handleAmount(data.sumFee)
			amountData.value.actualPayment = 0
			amountList.value = data.datas.map(item => {
				if (item.payStatus === 'UNPAY') {
					amountData.value.actualPayment += parseInt(item.fee)
				}
				return {
					status: item.payStatus,
					statusName: payMentStatus[item.payStatus],
					label: payType[item.payType],
					value: handleAmount(item.fee)
				}
			})
			isShow.value = true;
		})
	}
	const uToastRef = ref(null)
	//确认办理
	function submit() {
		if (checked.value || !link.value) {
			uni.navigateTo({
				url: '/pages/payment/orderPayment',
				animationType: 'pop-in',
				animationDuration: 500
			})
		} else {
			uToastRef.value.show({
				title: '请先勾选协议',
				type: 'warning',
			})
		}
	}
</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;
	}

	.status {
		margin: 0;
	}

	.amount {
		color: #1AAC1B;
		max-width: 450rpx;
	}
</style>