139 lines
3.6 KiB
Vue
139 lines
3.6 KiB
Vue
<template>
|
||
<view class="order-card" @click="handleCardClick">
|
||
<!-- 卡片头部 -->
|
||
<view class="card-header">
|
||
<view class="status-info">
|
||
<image class="status-icon" :src="getStatusIcon()"></image>
|
||
<view class="order-title">
|
||
{{ orderData.workOrderTypeName || orderData.commodityName }}
|
||
</view>
|
||
<image class="arrow-icon" src="./images/arrow.png"></image>
|
||
</view>
|
||
<view
|
||
v-if="orderData.status !== 'pending'"
|
||
:class="[
|
||
'status-tag',
|
||
`tag-${orderData.orderStatus || orderData.workOrderStatus}`,
|
||
]"
|
||
>
|
||
{{ getStatusText(orderData.orderStatus || orderData.workOrderStatus) }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 分割线 -->
|
||
<Divider />
|
||
|
||
<!-- 卡片内容 -->
|
||
<OrderCardContent :order-data="orderData" />
|
||
|
||
<!-- 操作区域 -->
|
||
<view v-if="shouldShowActionArea()" class="action-area">
|
||
<button class="action-btn" @click.stop="handleCall">立即呼叫</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps, defineExpose } from "vue";
|
||
import Divider from "@/components/Divider/index.vue";
|
||
import OrderCardContent from "./OrderCardContent.vue";
|
||
import serviceIcon from "./images/service.png";
|
||
import ticketIcon from "./images/ticket.png";
|
||
import hotelIcon from "./images/hotel.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", "complete"]);
|
||
|
||
// 图标映射
|
||
const ICON_MAP = {
|
||
0: hotelIcon, // 酒店订单
|
||
1: ticketIcon, // 门票订单
|
||
2: hotelIcon, // 其他订单
|
||
};
|
||
|
||
// 获取状态图标
|
||
const getStatusIcon = () => {
|
||
// 工单情况：orderType 为 undefined
|
||
if (props.orderData.orderType === undefined) {
|
||
return serviceIcon;
|
||
}
|
||
// 订单情况：根据 orderType 返回对应图标
|
||
return ICON_MAP[props.orderData.orderType] || serviceIcon;
|
||
};
|
||
|
||
// 判断是否显示操作区域
|
||
const shouldShowActionArea = () => {
|
||
// 工单情况：orderType 为 undefined，且 workOrderStatus = 0 时显示
|
||
if (props.orderData.orderType === undefined) {
|
||
return props.orderData.workOrderStatus === "0";
|
||
}
|
||
};
|
||
|
||
// 获取状态文本
|
||
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 = () => {
|
||
emit("click", props.orderData);
|
||
};
|
||
|
||
// 处理呼叫
|
||
const handleCall = () => {
|
||
emit("call", props.orderData);
|
||
};
|
||
|
||
// 暴露方法
|
||
defineExpose({
|
||
getStatusText,
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "./styles/index.scss";
|
||
</style>
|