feat: 订单详情功能完善

pages/order/components/GoodsInfo/index.vue

@@ -1,8 +1,8 @@
 <template>
   <view class="goods-info mb12">
     <view class="hotel-header">
-      <image class="hotel-icon" src="./images/icon_house.png"></image>
-      <text class="hotel-name">{{ orderData.commodityAddress }}</text>
+      <image class="hotel-icon" :src="orderTypeIcon"></image>
+      <text class="hotel-name">{{ orderData.storeName }}</text>
     </view>
     <view class="goods-detail">
       <image
@@ -13,9 +13,21 @@
       ></image>
       <view class="goods-description">
         <text class="goods-title">{{ commodityName }}</text>
-        <text class="goods-date" v-if="checkInData"
-          >预定时间：{{ checkInData }}</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">
@@ -36,6 +48,9 @@
 
 <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: {
@@ -45,7 +60,7 @@ const props = defineProps({
       id: "",
       commodityServiceList: [],
       orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已退款 6-已完成
-      orderType: undefined, // 0-酒店订单, 1-门票订单, 2-餐饮
+      orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
     }),
   },
 });
@@ -63,6 +78,9 @@ const commodityCoverPhoto = computed(() => {
 // 计算属性：入住时间
 const checkInData = computed(() => props.orderData.checkInData || "");
 
+// 计算属性：离店时间
+const checkOutData = computed(() => props.orderData.checkOutData || "");
+
 // 计算属性：服务列表
 const serviceList = computed(() => props.orderData.commodityServiceList || []);
 
@@ -84,11 +102,50 @@ 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">