feat: 调整项目结构
This commit is contained in:
116
src/pages-order/order/components/OrderCard/OrderCardContent.vue
Normal file
116
src/pages-order/order/components/OrderCard/OrderCardContent.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<view class="card-content">
|
||||
<!-- 动态渲染信息行 -->
|
||||
<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 = {
|
||||
ORDER_ID: "订单编号",
|
||||
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.ORDER_ID, value: orderData.orderId },
|
||||
{
|
||||
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.ORDER_ID, value: orderData.orderId },
|
||||
{
|
||||
label: LABELS.QUANTITY,
|
||||
value: formatQuantity(orderData.commodityAmount),
|
||||
},
|
||||
];
|
||||
|
||||
default:
|
||||
// 兜底情况,返回空数组
|
||||
return [];
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card-content {
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user