remove the unused src/static/scss/width.scss file and its import from index.scss, replace all existing custom width utility class usages with the equivalent Tailwind arbitrary width syntax
43 lines
1.3 KiB
Vue
43 lines
1.3 KiB
Vue
<template>
|
|
<view class="bg-white rounded-[10px] p-[12px] mb-[12px]" v-if="hasConsumerData">
|
|
<view v-for="(item, index) in consumerList" :key="index">
|
|
<view class="flex mb-[8px] text-[12px]">
|
|
<text class="w-[60px] text-[#99a0ae]">住客姓名</text>
|
|
<text class="text-[#525866]">{{ item.visitorName }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex text-[12px]">
|
|
<text class="w-[60px] text-[#99a0ae]">联系电话</text>
|
|
<text class="text-[#525866]">{{ contactPhone }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
orderData: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({
|
|
createTime: "",
|
|
consumerInfoList: [],
|
|
orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
|
|
orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
|
|
}),
|
|
},
|
|
});
|
|
|
|
// 使用计算属性处理用户信息列表,提供更好的响应性和缓存
|
|
const consumerList = computed(() => props.orderData.consumerInfoList || []);
|
|
|
|
// 联系电话
|
|
const contactPhone = computed(() => consumerList.value[0]?.contactPhone);
|
|
|
|
// 检查是否有用户数据
|
|
const hasConsumerData = computed(() => consumerList.value.length);
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|