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 && (!item.needpay || (item.needpay && orderObj.needPay))'>
							<view v-if="item.isRightLabel" class="left-empty"></view>
							<text v-else>{{item.label}}</text>
							
							<view v-if="item.isRightLabel" class="right-label-container">
								<text class="right-label">{{item.label}}</text>
								<text class="amount">{{item.key === 'amount'? '￥'+ item.value:item.value}}</text>
							</view>
							<text v-else class="amount">
								{{item.key === 'amount'? '￥'+ item.value:item.value}}
								<span v-if="item.label === '权益金'" class="pending-text"><span>（待支付）</span></span>
							</text>
						</view>
					</template>
					<template v-for='(item,index) in amountList'>
						<view class="detail-item" :key='index'
							v-if='item.value !== "" && item.value !== undefined &&  parseFloat(item.value) !== 0'>
							<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" v-if='amountData.totalFee &&  parseFloat(amountData.totalFee) !== 0'>
						<text>合计金额</text>
						<text class="amount">￥{{amountData.totalFee}} </text>
					</view>
				</view>
				<view class="over-txt">
					<button class="btn-txt btn" :class='{disabledBtn:!qdOrderVal.h5ReturnQdUrl}'
						:disabled="!qdOrderVal.h5ReturnQdUrl" @click="toNav">用户车辆信息上传完成</button>
				</view>
			</view>
			<u-toast ref="uToastRef" />
		</view>
	</view>
</template>
<script setup lang='ts'>
	import CustomHeader from '@/components/CustomHeader'
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		requestNew
	} from '@/utils/network/request'
	import {
		payType,
		payMentStatus
	} from './common.js'
	import {
		setToken,
		setItem,
		StorageKeys
	} from '@/utils/storage'
	import handleAmount from '@/utils/handleAmount.js';
	import {
		handleToTypes,
		isWeb,
		handleToZhifubao,
		handleTonei,
		isWxDuan
	} from '@/utils/utils';
	import { useQdOrderStore } from '@/stores/qdOrder.js';
	import { storeToRefs } from 'pinia';
	import { getVehiclePlateColor } from '@/datas/vehiclePlateColor.js';

	const qdOrderStore = useQdOrderStore();
	const { qdOrderVal } = storeToRefs(qdOrderStore);

	let orderObj: any = {}
	let formData = reactive<any>([{
		label: '产品名',
		value: '',
		key: "productName",
		key1: 'promoteName',
	}, {
		label: '订单步骤',
		value: '',
		key: "orderStepCode",
	}, {
		label: '车牌号',
		key: "vehiclePlate",
		value: '贵'
	}, {
		label: '车牌颜色',
		key: "vehiclePlateColor",
		value: '贵'
	}, {
		label: '车主姓名',
		key: "customerName",
		value: ''
	}, {
		label: '权益金',
		key: "amount",
		value: '',
		needpay: true
	}, {
		label: '合计金额',
		key: "amount",
		value: '',
		needpay: true
	}, {
		label: '待付款',
		key: "amount",
		value: '',
		needpay: true,
		isRightLabel: true
	}])
	const amountList = ref<any>([])
	const checked = ref(false)
	// 实付款
	const amountData = ref({
		totalFee: '',
		actualPayment: 0
	})
	let config = ref<any>({
		hasReturn: "false",
		submitName: '提交',
		titleWidth: 160
	})
	const isShow = ref(false)

	onLoad((opin) => {
		const params = {
			orderNo: opin.orderNo
		};
		queryOrder(params);
	})

	// 获取订单信息
	function queryOrder(params) {
		requestNew("/iaw/h5/order/web/queryOrder", {
			data: params
		}).then((res) => {
			if (res.code === 0) {
				orderObj = res.data
				// 更新qdOrderVal的h5ReturnQdUrl
				qdOrderVal.value = {
					...qdOrderVal.value,
					h5ReturnQdUrl: res.data.h5ReturnQdUrl || ''
				}
				// 处理表单数据
				formData.forEach(item => {
					let itemData = res.data[item.key]
					if (typeof itemData === 'object' && itemData) {
						if (item.key1 && 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
					}
					// 处理订单步骤显示
					if(item.key === 'orderStepCode') {
						itemData = stepOptions.find(opt => opt.value === itemData)?.label || itemData
					}
					// 处理车牌颜色显示
					if(item.key === 'vehiclePlateColor') {
						itemData = getVehiclePlateColor(itemData)
					}
					// 处理金额字段：从分转换为元，保留两位小数
					if(item.key === 'amount' && itemData) {
						itemData = (parseFloat(itemData) / 100).toFixed(2)
					}
					item.value = itemData || item.default || ''
				})
				isShow.value = true
			}
		});
	}

	const stepOptions = [{
			value: 1,
			label: "完成填写基本信息"
		},
		{
			value: 2,
			label: "完成个人/单位信息上传"
		},
		{
			value: 3,
			label: "已支付，待签约"
		},
		{
			value: 4,
			label: "完成车辆信息上传,待支付"
		},
		{
			value: 5,
			label: "完成签约"
		},
		{
			value: 6,
			label: "待审核"
		},
		{
			value: 7,
			label: "审核不通过"
		},
		{
			value: 8,
			label: "待发货"
		},
		{
			value: 9,
			label: "待收货"
		},
		{
			value: 10,
			label: "待激活"
		},
		{
			value: 11,
			label: "已完成"
		},
		{
			value: 12,
			label: "已申请-换货"
		},
		{
			value: 13,
			label: "已申请-退货"
		},
		{
			value: 14,
			label: "已结束"
		},
		{
			value: 15,
			label: "退款中"
		},
		{
			value: 16,
			label: "退款成功"
		},
		{
			value: 17,
			label: "退货成功"
		},
	]

	const uToastRef = ref(null)

	const toNav = () => {
		handleFinish()
	}

	const handleOther = (returnUrl) => {
		const type = handleToTypes();
		if (type === 'alipaymini') {
			handleToZhifubao(returnUrl);
		} else if (type === 'wechatmini') {
			let returnUrls = returnUrl.split('?')
			if (returnUrls.length === 1) {
				returnUrls = returnUrl +
					`?orderId=${orderObj.orderNo}&ownerName=${orderObj.ownerName}&productName=${orderObj.productName}&tel=${orderObj.customerTel || orderObj.agentTel}&vehicleId=${orderObj.vehicleId}&qdOrderNo=${orderObj.orderNo}`
			} else {
				returnUrls = returnUrl
			}
			handleTonei(returnUrls);
		}
	};

	const handleFinish = () => {
		const h5ReturnQdUrl = qdOrderVal.value.h5ReturnQdUrl || '';
		if (!h5ReturnQdUrl) {
			return;
		}
		if (isWeb(h5ReturnQdUrl) || isWxDuan(h5ReturnQdUrl)) {
			window.open(h5ReturnQdUrl, '_self');
		} else {
			handleOther(h5ReturnQdUrl);
		}
	};
</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;
		
		&:empty {
			margin-left: 0;
		}
	}

	.status {
		margin: 0;
	}

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

	.over-txt {
		text-align: center;
		font-size: 32rpx;
		padding-top: 30rpx;
	}

	.over-txt .disabledBtn {
		background-color: #ccc !important;
		color: #666;
	}

	.right-label-container {
		display: flex;
		align-items: center;
		gap: 10rpx;
		justify-content: flex-end;
		flex: 1;
	}

	.left-empty {
		width: 1px;
	}

	.right-label {
		color: #333;
		font-size: 28rpx;
	}

	.pending-text {
		color: #333!important;
		font-size: 24rpx;
		margin-left: 10rpx;
	}
</style>