Enhance payment page to improve display of payment details, including conditional rendering for amounts and labels. Introduce new fields for '权益金' and '合计金额', and implement formatting for monetary values. Update styles for better layout and alignment of labels.

pages/payment/payment.vue

@@ -11,9 +11,18 @@
 				<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>
+							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'>
@@ -72,6 +81,7 @@
 	} 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);
@@ -98,6 +108,22 @@
 		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)
@@ -156,6 +182,14 @@
 					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
@@ -294,6 +328,10 @@
 
 	text {
 		margin-left: 10px;
+		
+		&:empty {
+			margin-left: 0;
+		}
 	}
 
 	.status {
@@ -315,4 +353,27 @@
 		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>