104 lines
2.4 KiB
Vue
104 lines
2.4 KiB
Vue
<template>
|
||
<view class="order-card" @click="handleCardClick">
|
||
<!-- 卡片头部 -->
|
||
<view class="card-header">
|
||
<view class="status-info">
|
||
<image class="status-icon" src="./images/service.png"></image>
|
||
<view class="order-title">{{ orderData.visitorName }}</view>
|
||
</view>
|
||
<view
|
||
v-if="orderData.status !== 'pending'"
|
||
:class="['status-tag', `tag-${orderData.orderStatus}`]"
|
||
>
|
||
{{ getStatusText(orderData.orderStatus) }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 分割线 -->
|
||
<Divider />
|
||
|
||
<!-- 卡片内容 -->
|
||
<view class="card-content">
|
||
<view class="info-row">
|
||
<text class="label">创建时间：</text>
|
||
<text class="value">{{ orderData.createTime }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">联系房客：</text>
|
||
<text class="value">{{ orderData.visitorName }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">联系电话：</text>
|
||
<text class="value">{{ orderData.contactPhone }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作区域 -->
|
||
<view v-if="orderData.status === 'pending'" class="action-area">
|
||
<button class="action-btn" @click.stop="handleCall">立即呼叫</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import Divider from "@/components/Divider/index.vue";
|
||
import { defineProps } from "vue";
|
||
|
||
// Props
|
||
const props = defineProps({
|
||
orderData: {
|
||
type: Object,
|
||
required: true,
|
||
default: () => ({
|
||
id: "",
|
||
title: "",
|
||
createTime: "",
|
||
contactName: "",
|
||
contactPhone: "",
|
||
orderStatus: "pending", // pending-待处理, completed-已完成, cancelled-已取消
|
||
}),
|
||
},
|
||
});
|
||
|
||
// Emits
|
||
const emit = defineEmits(["click", "call", "complete"]);
|
||
|
||
// 获取状态文本
|
||
const getStatusText = (status) => {
|
||
const statusMap = {
|
||
0: "待支付",
|
||
1: "待确认",
|
||
2: "待使用",
|
||
3: "已取消",
|
||
4: "退款中",
|
||
5: "已退款",
|
||
6: "已完成",
|
||
};
|
||
return statusMap[status] || "未知状态";
|
||
};
|
||
|
||
// 处理卡片点击
|
||
const handleCardClick = () => {
|
||
emit("click", props.orderData);
|
||
};
|
||
|
||
// 处理呼叫
|
||
const handleCall = () => {
|
||
emit("call", props.orderData);
|
||
};
|
||
|
||
// 处理完成
|
||
const handleComplete = () => {
|
||
emit("complete", props.orderData);
|
||
};
|
||
|
||
// 暴露方法
|
||
defineExpose({
|
||
getStatusText,
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "./styles/index.scss";
|
||
</style>
|