Browse Source

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.

ms
wangxyi 2 months ago
parent
commit
57e90a0263
1 changed files with 64 additions and 3 deletions
  1. 64
    3
      pages/payment/payment.vue

+ 64
- 3
pages/payment/payment.vue View File

<view class="container"> <view class="container">
<template v-for='(item,index) in formData'> <template v-for='(item,index) in formData'>
<view class="detail-item" :key='index' <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> </view>
</template> </template>
<template v-for='(item,index) in amountList'> <template v-for='(item,index) in amountList'>
} from '@/utils/utils'; } from '@/utils/utils';
import { useQdOrderStore } from '@/stores/qdOrder.js'; import { useQdOrderStore } from '@/stores/qdOrder.js';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { getVehiclePlateColor } from '@/datas/vehiclePlateColor.js';


const qdOrderStore = useQdOrderStore(); const qdOrderStore = useQdOrderStore();
const { qdOrderVal } = storeToRefs(qdOrderStore); const { qdOrderVal } = storeToRefs(qdOrderStore);
label: '车主姓名', label: '车主姓名',
key: "customerName", key: "customerName",
value: '' 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 amountList = ref<any>([])
const checked = ref(false) const checked = ref(false)
if(item.key === 'orderStepCode') { if(item.key === 'orderStepCode') {
itemData = stepOptions.find(opt => opt.value === itemData)?.label || itemData 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 || '' item.value = itemData || item.default || ''
}) })
isShow.value = true isShow.value = true


text { text {
margin-left: 10px; margin-left: 10px;
&:empty {
margin-left: 0;
}
} }


.status { .status {
background-color: #ccc !important; background-color: #ccc !important;
color: #666; 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> </style>

Loading…
Cancel
Save