Files
YGChatCS/src/pages-order/order/components/UserInfo/index.vue
duanshuwen 4af4255610 refactor: migrate to tailwind arbitrary width classes
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
2026-07-24 22:28:16 +08:00

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>