136 lines
3.7 KiB
Vue
136 lines
3.7 KiB
Vue
<template>
|
||
<view
|
||
class="order-card bg-white border-box p-12 rounded-12 m-12"
|
||
@click.stop="handleCardClick"
|
||
>
|
||
<!-- 卡片头部 -->
|
||
<view class="card-header flex items-center">
|
||
<view class="status-info flex items-center flex-full">
|
||
<image class="status-icon mr-4" :src="getStatusIcon()" />
|
||
<view class="order-title font-size-14 line-height-20 color-525866">
|
||
{{ getOrderTypeName() }}
|
||
</view>
|
||
</view>
|
||
<view
|
||
v-if="orderData.status !== 'pending'"
|
||
:class="[
|
||
'status-tag font-size-12',
|
||
`tag-${orderData.orderStatus || orderData.workOrderStatus}`,
|
||
]"
|
||
>
|
||
{{ getStatusText(orderData.orderStatus || orderData.workOrderStatus) }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 卡片内容 -->
|
||
<OrderCardContent :order-data="orderData" />
|
||
|
||
<view v-if="orderData.orderStatus === '0'" class="text-right">
|
||
<button
|
||
class="go-pay border-box border-none font-size-14 color-white bg-FF3D60 rounded-5 inline-block text-center line-height-30"
|
||
@click.stop="handleCardClick"
|
||
>
|
||
去支付
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps } from "vue";
|
||
import OrderCardContent from "./OrderCardContent.vue";
|
||
import serviceIcon from "./images/service.png";
|
||
|
||
// Props
|
||
const props = defineProps({
|
||
orderData: {
|
||
type: Object,
|
||
required: true,
|
||
default: () => ({
|
||
id: "",
|
||
workOrderTypeName: "",
|
||
createTime: "",
|
||
contactName: "",
|
||
contactPhone: "",
|
||
orderStatus: "0", // pending-待处理, completed-已完成, cancelled-已取消
|
||
orderType: undefined, // 0-酒店订单, 1-门票订单, 2-其他订单, undefined-工单
|
||
orderNumber: "", // 订单编号
|
||
checkInTime: "", // 入住时间
|
||
visitorName: "", // 游客姓名
|
||
commodityAmount: 0, // 份数
|
||
workOrderStatus: 0, // 工单状态：0-待处理, 1-已完成
|
||
}),
|
||
},
|
||
});
|
||
|
||
// Emits
|
||
const emit = defineEmits(["click", "call"]);
|
||
|
||
// 图标映射
|
||
const ICON_MAP = {
|
||
0: "https://oss.nianxx.cn/mp/static/version_101/order/room.png", // 酒店订单
|
||
1: "https://oss.nianxx.cn/mp/static/version_101/order/ticket.png", // 门票订单
|
||
2: "https://oss.nianxx.cn/mp/static/version_101/order/food.png", // 餐饮
|
||
3: "https://oss.nianxx.cn/mp/static/version_101/order/package.png", // 套餐
|
||
};
|
||
|
||
// 订单类型映射
|
||
const ORDER_NAME_MAP = {
|
||
0: "房间",
|
||
1: "门票",
|
||
2: "餐饮",
|
||
3: "套餐",
|
||
};
|
||
|
||
// 获取状态图标
|
||
const getStatusIcon = () => {
|
||
// 工单情况：orderType 为 undefined
|
||
if (props.orderData.orderType === undefined) {
|
||
return serviceIcon;
|
||
}
|
||
// 订单情况：根据 orderType 返回对应图标
|
||
return ICON_MAP[props.orderData.orderType] || serviceIcon;
|
||
};
|
||
|
||
// 获取订单类型名称
|
||
const getOrderTypeName = () => {
|
||
return ORDER_NAME_MAP[props.orderData.orderType] || "其他订单";
|
||
};
|
||
|
||
// 获取状态文本
|
||
const getStatusText = (status) => {
|
||
// 工单情况：orderType 为 undefined
|
||
if (props.orderData.orderType === undefined) {
|
||
const workOrderStatusMap = {
|
||
0: "待接单",
|
||
1: "处理中",
|
||
2: "已完成",
|
||
3: "已关闭",
|
||
};
|
||
return workOrderStatusMap[status] || "未知状态";
|
||
}
|
||
|
||
// 订单情况：orderType 有值
|
||
const orderStatusMap = {
|
||
0: "待支付",
|
||
1: "待确认",
|
||
2: "待使用",
|
||
3: "已取消",
|
||
4: "退款中",
|
||
5: "已退款",
|
||
6: "已完成",
|
||
};
|
||
return orderStatusMap[status] || "未知状态";
|
||
};
|
||
|
||
// 处理卡片点击
|
||
const handleCardClick = () => {
|
||
if (props.orderData.orderType === undefined) return;
|
||
emit("click", props.orderData);
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "./styles/index.scss";
|
||
</style>
|