90 lines
2.0 KiB
Vue
90 lines
2.0 KiB
Vue
<template>
|
|
<view class="order-status">
|
|
<view class="status-header">
|
|
<uni-icons
|
|
class="status-icon"
|
|
fontFamily="ZhiNian"
|
|
size="20"
|
|
color="#fff"
|
|
>
|
|
{{ "" }}
|
|
</uni-icons>
|
|
<!-- 订单状态 -->
|
|
<text class="status-text">{{ statusText }}</text>
|
|
</view>
|
|
<view class="status-description">{{ statusDescription }}</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, computed } from "vue";
|
|
|
|
// 订单状态配置映射
|
|
const ORDER_STATUS_CONFIG = {
|
|
0: {
|
|
text: "待支付",
|
|
description: "请尽快完成支付",
|
|
},
|
|
1: {
|
|
text: "待确认",
|
|
description: "商家正在确认您的订单",
|
|
},
|
|
2: {
|
|
text: "待使用",
|
|
description: "预订成功，订单待使用",
|
|
},
|
|
3: {
|
|
text: "已取消",
|
|
description: "订单已取消",
|
|
},
|
|
4: {
|
|
text: "退款中",
|
|
description: "商家退款正在处理中，请耐心等待",
|
|
},
|
|
5: {
|
|
text: "已退款",
|
|
description: "款项预计1-7个工作日退回至原支付账户",
|
|
},
|
|
6: {
|
|
text: "已完成",
|
|
description: "订单已完成，感谢您的使用",
|
|
},
|
|
};
|
|
|
|
const props = defineProps({
|
|
orderData: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({
|
|
orderId: "",
|
|
paySerialNumber: "",
|
|
payWay: "", // 支付方式 0-微信 1-支付宝 2-云闪付
|
|
payAmt: "",
|
|
orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已退款 6-已完成
|
|
orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
|
|
}),
|
|
},
|
|
});
|
|
|
|
// 当前状态配置
|
|
const currentStatusConfig = computed(() => {
|
|
return (
|
|
ORDER_STATUS_CONFIG[props.orderData.orderStatus] || ORDER_STATUS_CONFIG["0"]
|
|
);
|
|
});
|
|
|
|
// 状态文本
|
|
const statusText = computed(() => {
|
|
return currentStatusConfig.value.text;
|
|
});
|
|
|
|
// 状态描述
|
|
const statusDescription = computed(() => {
|
|
return currentStatusConfig.value.description;
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import "./styles/index.scss";
|
|
</style>
|