53 lines
1.5 KiB
Vue
53 lines
1.5 KiB
Vue
<template>
|
||
<view class="service-order-item">
|
||
<view class="order-header">
|
||
<image class="order-icon" src="./images/icon_order.png"></image>
|
||
<text class="order-title">温泉早鸟票</text>
|
||
<text :class="['order-status', `status-${orderStatus}`]">{{
|
||
orderStatusText
|
||
}}</text>
|
||
</view>
|
||
<view class="order-details">
|
||
<view class="detail-item">
|
||
<text class="detail-label">订单编号：</text>
|
||
<text class="detail-value">{{ orderId }}</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">游客人数：</text>
|
||
<text class="detail-value">{{ touristCount }}人</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from "vue";
|
||
|
||
// Sample data
|
||
const orderId = ref("7378400483776544");
|
||
const touristCount = ref(7);
|
||
const orderStatus = ref("pending"); // Options: 'canceled', 'pending', 'refundProcessing', 'refunded', 'completed'
|
||
|
||
// Computed property for order status text
|
||
const orderStatusText = computed(() => {
|
||
switch (orderStatus.value) {
|
||
case "canceled":
|
||
return "已取消";
|
||
case "pending":
|
||
return "待确认";
|
||
case "refundProcessing":
|
||
return "退款中";
|
||
case "refunded":
|
||
return "已退款";
|
||
case "completed":
|
||
return "已完成";
|
||
default:
|
||
return "";
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "./styles/index.scss";
|
||
</style>
|