feat: 改造商品详情的位置组件样式

src/components/LocationCard/index.vue

@@ -1,14 +1,26 @@
 <template>
-  <view class="store-address" @click="openMap">
+  <view class="store-address">
-    <view class="text-container">
+    <view class="text-container" @click.stop="openMap">
       <text class="location-label">位于 {{ orderData.oneLevelAddress }}</text>
       <text class="address-text">{{ orderData.commodityAddress }}</text>
     </view>
-    <image
+
-      class="loc-icon"
+    <view class="actions">
-      src="./images/loc_icon_img.png"
+      <view>
-      mode="aspectFit"
+        <view class="actions-btn" @click.stop="openMap">
-    ></image>
+          <text class="actions-icon">📞</text>
+        </view>
+        <text class="actions-text">导航</text>
+      </view>
+      
+      <view>
+        <view class="actions-btn" @click.stop="callPhone">
+          <text class="actions-icon">📞</text>
+        </view>
+        <text class="actions-text">电话</text>
+      </view>
+      
+    </view>
   </view>
 </template>
 
@@ -30,21 +42,38 @@ const openMap = () => {
   const longitude = Number(props.orderData.commodityLongitude);
 
   uni.getLocation({
-    type: "gcj02", //返回可以用于uni.openLocation的经纬度
+    type: "gcj02",
-    success: (res) => {
+    success: () => {
-      console.log("当前经纬度", latitude, longitude);
-
       uni.openLocation({
         latitude: latitude,
         longitude: longitude,
         address: address,
-        success: () => {
+      });
-          console.log("success");
     },
+    fail: () => {
+      uni.openLocation({
+        latitude: latitude,
+        longitude: longitude,
+        address: address,
       });
     },
   });
 };
+
+// 拨打电话
+const getPhoneNumber = () => {
+  const o = props.orderData || {};
+  return o.commodityPhone || o.phone || o.contactPhone || "";
+};
+
+const callPhone = () => {
+  const phone = getPhoneNumber();
+  if (!phone) {
+    uni.showToast({ title: "未提供电话号码", icon: "none" });
+    return;
+  }
+  uni.makePhoneCall({ phoneNumber: String(phone) });
+};
 </script>
 
 <style scoped lang="scss">

src/components/LocationCard/styles/index.scss

@@ -1,51 +1,56 @@
 .store-address {
   display: flex;
   align-items: center;
-  margin: 6px 12px;
+  margin-top: 12px;
-  padding: 16px 12px;
+  padding: 12px 12px 0 12px;
-  background-image: url("./images/loc_bg_img.png"); // 预留背景图片位置，用户手动导入
+  background-color: #ffffff;
-  background-size: cover;
+  border-top: 1px solid #e0e0e0;
-  background-position: center;
-  border-radius: 20px;
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-  position: relative;
-  overflow: hidden;
   
   // 左侧文本容器
   .text-container {
     display: flex;
     flex-direction: column;
     flex: 1;
-    position: relative;
-    z-index: 2;
-  }
-
-  // 确保内容在遮罩层之上
-  .location-label,
-  .address-text,
-  .loc-icon {
-    position: relative;
-    z-index: 2;
   }
 
   .location-label {
-    color: $uni-text-color;
+    color: $text-color-800;
     font-size: $uni-font-size-base;
     font-weight: 500;
   }
 
   .address-text {
     margin-top: 4px;
-    color: #666;
+    color: $text-color-600;
     font-size: $uni-font-size-sm;
     font-weight: 400;
   }
 
-  // 右侧图标样式
+  // 右侧操作按钮组
-  .loc-icon {
+  .actions {
-    width: 24px;
+    display: flex;
-    height: 24px;
+    align-items: center;
-    margin-left: 12px;
+    gap: 10px;
+    margin-left: 16px;
+  }
+
+  .actions-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 10px;
+    background-color: #F5F5F5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .actions-icon {
+    font-size: 16px;
+    line-height: 16px;
+  }
+
+  .actions-text {
+    font-size: $uni-font-size-sm;
+    color: $text-color-600;
   }
 }