122 lines
2.7 KiB
Vue
122 lines
2.7 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;
|
|
|
|
// 去掉末尾连续、、
|
|
const formattedPhone = orderData.contactPhone.replace(/、+$/, "");
|
|
|
|
// 订单情况：根据 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: formattedPhone },
|
|
];
|
|
|
|
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>
|