feat: 商品详情页面交互

pages/order/components/GoodsInfo/index.vue

@@ -14,11 +14,7 @@
       <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>
+        <LocationInfo :orderData="orderData" />
         <!-- 酒店类型 -->
         <template v-if="orderData.orderType === '0'">
           <view class="in-date" v-if="checkInData">
@@ -48,6 +44,7 @@
 
 <script setup>
 import { defineProps, computed } from "vue";
+import LocationInfo from "@/components/LocationInfo/index.vue";
 import iconHouse from "./images/icon_house.png";
 import iconFood from "./images/food.png";
 import iconTicket from "./images/ticket.png";
@@ -123,29 +120,6 @@ 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">

pages/order/components/GoodsInfo/styles/index.scss

@@ -99,19 +99,6 @@ $image-size-md: 65px;
         line-height: 1.4;
       }
 
-      .store-address {
-        @include flex-center;
-        @include text-style($font-size-xs, $color-primary);
-
-        text {
-          flex: 1;
-          padding: 0 6px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-
       .in-date,
       .out-date {
         @include text-style($font-size-xs, $color-secondary);