128 lines
2.9 KiB
Vue
128 lines
2.9 KiB
Vue
<template>
|
||
<view class="card-content border-box pt-12">
|
||
<view class="flex items-center justify-between">
|
||
<view
|
||
class="left flex-full font-size-14 line-height-20 color-171717 mr-12"
|
||
>
|
||
{{ orderData.commodityName }}
|
||
</view>
|
||
<view class="right font-size-18 font-bold line-height-20 color-525866">
|
||
{{ orderData.orderAmt }}
|
||
</view>
|
||
</view>
|
||
<!-- 动态渲染信息行 -->
|
||
<InfoRow
|
||
v-for="item in displayItems"
|
||
:key="item.label"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps, computed } from "vue";
|
||
import InfoRow from "./InfoRow.vue";
|
||
|
||
// 订单类型常量
|
||
const ORDER_TYPES = {
|
||
HOTEL: "0", // 酒店订单
|
||
TICKET: "1", // 门票订单
|
||
OTHER: "2", // 其他订单
|
||
};
|
||
|
||
// 标签常量
|
||
const LABELS = {
|
||
CHECK_IN_TIME: "入住时间",
|
||
VISITOR_NAME: "游客姓名",
|
||
CONTACT_PHONE: "联系电话",
|
||
QUANTITY: "份数",
|
||
CREATE_TIME: "创建时间",
|
||
CONTACT_GUEST: "联系房客",
|
||
};
|
||
|
||
// Props
|
||
const props = defineProps({
|
||
orderData: {
|
||
type: Object,
|
||
required: true,
|
||
default: () => ({
|
||
orderType: undefined,
|
||
orderId: "",
|
||
checkInTime: "",
|
||
visitorName: "",
|
||
contactPhone: "",
|
||
userName: "",
|
||
userPhone: "",
|
||
commodityAmount: 0,
|
||
createTime: "",
|
||
}),
|
||
},
|
||
});
|
||
|
||
// 格式化份数
|
||
const formatQuantity = (amount) => {
|
||
return `${Math.floor(amount || 0)}份`;
|
||
};
|
||
|
||
// 计算显示项目
|
||
const displayItems = computed(() => {
|
||
const { orderData } = props;
|
||
const { orderType } = orderData;
|
||
|
||
// 工单情况：orderType 为 undefined
|
||
if (orderType === undefined) {
|
||
return [
|
||
{ label: LABELS.CREATE_TIME, value: orderData.createTime },
|
||
{ label: LABELS.CONTACT_GUEST, value: orderData.userName },
|
||
{ label: LABELS.CONTACT_PHONE, value: orderData.userPhone },
|
||
];
|
||
}
|
||
|
||
// 订单情况：根据 orderType 返回不同的显示项
|
||
switch (orderType) {
|
||
case ORDER_TYPES.HOTEL:
|
||
return [
|
||
{
|
||
label: LABELS.CHECK_IN_TIME,
|
||
value:
|
||
orderData.checkInData?.replace(
|
||
/(\d{4})-(\d{1,2})-(\d{1,2})/,
|
||
"$2月$3日"
|
||
) +
|
||
"-" +
|
||
orderData.checkOutData?.replace(
|
||
/(\d{4})-(\d{1,2})-(\d{1,2})/,
|
||
"$2月$3日"
|
||
),
|
||
},
|
||
{ label: LABELS.VISITOR_NAME, value: orderData.visitorName },
|
||
{ label: LABELS.CONTACT_PHONE, value: orderData.contactPhone },
|
||
];
|
||
|
||
case ORDER_TYPES.TICKET:
|
||
case ORDER_TYPES.OTHER:
|
||
return [
|
||
{
|
||
label: LABELS.QUANTITY,
|
||
value: formatQuantity(orderData.commodityAmount),
|
||
},
|
||
];
|
||
|
||
default:
|
||
// 兜底情况，返回空数组
|
||
return [];
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.right {
|
||
&::before {
|
||
content: "￥";
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
</style>
|