154 lines
4.5 KiB
Vue
154 lines
4.5 KiB
Vue
<template>
|
||
<view class="goods-info mb12">
|
||
<view class="hotel-header">
|
||
<image class="hotel-icon" :src="orderTypeIcon"></image>
|
||
<text class="hotel-name">{{ orderData.storeName }}</text>
|
||
</view>
|
||
<view class="goods-detail">
|
||
<image
|
||
v-if="shouldShowImage"
|
||
class="goods-image"
|
||
:src="commodityCoverPhoto"
|
||
lazy-load
|
||
></image>
|
||
<view class="goods-description">
|
||
<text class="goods-title">{{ commodityName }}</text>
|
||
<!-- 门店地址 -->
|
||
<view class="store-address" @click="openMap">
|
||
<uni-icons type="location" size="18" color="#999" />
|
||
<text>{{ orderData.commodityAddress }}</text>
|
||
<uni-icons type="right" size="14" color="#999" />
|
||
</view>
|
||
<!-- 酒店类型 -->
|
||
<template v-if="orderData.orderType === '0'">
|
||
<view class="in-date" v-if="checkInData">
|
||
入住时间：{{ checkInData }}
|
||
</view>
|
||
<view class="out-date" v-if="checkOutData">
|
||
离店时间：{{ checkOutData }}
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view class="included-services" v-if="hasServices">
|
||
<text class="services-title">包含服务</text>
|
||
<view
|
||
v-for="item in formattedServiceList"
|
||
:key="item.key"
|
||
class="service-item"
|
||
>
|
||
<text class="service-name"> · {{ item.displayTitle }} </text>
|
||
<text class="service-quantity">
|
||
{{ item.displayAmount }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps, computed } from "vue";
|
||
import iconHouse from "./images/icon_house.png";
|
||
import iconFood from "./images/food.png";
|
||
import iconTicket from "./images/ticket.png";
|
||
|
||
const props = defineProps({
|
||
orderData: {
|
||
type: Object,
|
||
required: true,
|
||
default: () => ({
|
||
id: "",
|
||
commodityServiceList: [],
|
||
orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已退款 6-已完成
|
||
orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
|
||
}),
|
||
},
|
||
});
|
||
|
||
// 计算属性：商品名称
|
||
const commodityName = computed(() => {
|
||
return props.orderData.commodityName || "未知商品";
|
||
});
|
||
|
||
// 计算属性：商品封面图片
|
||
const commodityCoverPhoto = computed(() => {
|
||
return props.orderData.commodityCoverPhoto || "";
|
||
});
|
||
|
||
// 计算属性：入住时间
|
||
const checkInData = computed(() => props.orderData.checkInData || "");
|
||
|
||
// 计算属性：离店时间
|
||
const checkOutData = computed(() => props.orderData.checkOutData || "");
|
||
|
||
// 计算属性：服务列表
|
||
const serviceList = computed(() => props.orderData.commodityServiceList || []);
|
||
|
||
// 计算属性：是否有服务
|
||
const hasServices = computed(() => serviceList.value.length);
|
||
|
||
// 计算属性：格式化的服务列表（预处理数据，减少模板中的计算）
|
||
const formattedServiceList = computed(() => {
|
||
return serviceList.value.map((item, index) => ({
|
||
...item,
|
||
key: item.id || item.serviceTitle || `service-${index}`,
|
||
displayTitle: item.serviceTitle || "未知服务",
|
||
displayAmount: formatServiceAmount(item.serviceAmount),
|
||
}));
|
||
});
|
||
|
||
// 计算属性：是否显示商品图片
|
||
const shouldShowImage = computed(() => {
|
||
return !!commodityCoverPhoto.value;
|
||
});
|
||
|
||
// 计算属性：根据订单类型动态显示图标
|
||
const orderTypeIcon = computed(() => {
|
||
const orderType = props.orderData.orderType;
|
||
|
||
switch (orderType) {
|
||
case "0":
|
||
return iconHouse; // 酒店订单
|
||
case "1":
|
||
return iconTicket; // 门票订单
|
||
case "2":
|
||
return iconFood; // 餐饮订单
|
||
default:
|
||
return iconHouse; // 默认显示酒店图标
|
||
}
|
||
});
|
||
|
||
// 格式化服务数量
|
||
const formatServiceAmount = (amount) => {
|
||
if (!amount) return "";
|
||
return typeof amount === "number" ? `×${amount}` : amount;
|
||
};
|
||
|
||
// 打开地图
|
||
const openMap = () => {
|
||
const address = props.orderData.commodityAddress;
|
||
const latitude = Number(props.orderData.commodityLatitude);
|
||
const longitude = Number(props.orderData.commodityLongitude);
|
||
|
||
uni.getLocation({
|
||
type: "gcj02", //返回可以用于uni.openLocation的经纬度
|
||
success: (res) => {
|
||
console.log("当前经纬度", latitude, longitude);
|
||
|
||
uni.openLocation({
|
||
latitude: latitude,
|
||
longitude: longitude,
|
||
address: address,
|
||
success: () => {
|
||
console.log("success");
|
||
},
|
||
});
|
||
},
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "./styles/index.scss";
|
||
</style>
|