Fix：4989 【商城小程序】体验券订单详情页，体验店信息缺少导航和联系客服按钮

pkg_product/views/experienceCouponOrderDetail.vue

@@ -35,19 +35,27 @@
     </view>
 
     <view class="merchant-card">
-      <image :src="orderInfo.merchantAvatar || webUrl + '/experienceCoupon/store-placeholder.png'" class="merchant-avatar" mode="aspectFill" />
-      <view class="merchant-info">
-        <view class="merchant-name-large">{{ orderInfo.experienceItemInfo && orderInfo.experienceItemInfo.themeName ? orderInfo.experienceItemInfo.themeName : '' }}</view>
-        <view class="merchant-time one-t" v-if="formattedBusinessTime">营业时间：{{ formattedBusinessTime }}</view>
-        <view class="merchant-location-wrap one-t">
-          <image :src="webUrl + '/orderIcon/map.png'" class="location-icon" />
-          <text class="distance-text" v-if="distanceText">距该地{{ distanceText }}km</text>
-          <text class="address-text">{{ orderInfo.address }}</text>
+      <view class="merchant-card-top">
+        <image :src="orderInfo.merchantAvatar || webUrl + '/experienceCoupon/store-placeholder.png'" class="merchant-avatar" mode="aspectFill" />
+        <view class="merchant-info">
+          <view class="merchant-name-large">{{ orderInfo.experienceItemInfo && orderInfo.experienceItemInfo.themeName ? orderInfo.experienceItemInfo.themeName : '' }}</view>
+          <view class="merchant-location-wrap one-t v12-mb-2">
+            <image :src="webUrl + '/orderIcon/map.png'" class="location-icon" />
+            <text class="distance-text" v-if="distanceText">距该地{{ distanceText }}km</text>
+            <text class="address-text">{{ orderInfo.address }}</text>
+          </view>
         </view>
       </view>
-      <view class="merchant-actions">
-        <image :src="webUrl + '/orderIcon/nav.png'" class="action-icon" @click="openLocation" />
-        <image :src="webUrl + '/orderIcon/phone.png'" class="action-icon" @click="callMerchant" v-if="orderInfo.merchantPhone" />
+      <view class="merchant-card-bottom">
+        <view class="merchant-time" v-if="formattedBusinessTime">营业时间：{{ formattedBusinessTime }}</view>
+        <view class="merchant-actions">
+          <view class="action-btn" @click="openLocation">
+            <u-icon :name="webUrl + '/page/qianxian/icon-addr.png'" color="#fff" size="24"></u-icon>
+          </view>
+          <view class="action-btn" @click="callMerchant">
+            <u-icon :name="webUrl + '/page/qianxian/icon-phone.png'" color="#fff" size="24"></u-icon>
+          </view>
+        </view>
       </view>
     </view>
 
@@ -216,6 +224,16 @@ export default {
       const d = R * c
       this.distanceText = d.toFixed(1)
     },
+    callMerchant() {
+      const phone = this.orderInfo.merchantPhone || this.orderInfo.merPhone || (this.orderInfo.experienceItemInfo && this.orderInfo.experienceItemInfo.phone) || this.orderInfo.companyTel;
+      if (phone) {
+        uni.makePhoneCall({
+          phoneNumber: phone
+        })
+      } else {
+        uni.showToast({ title: '暂无商家电话', icon: 'none' })
+      }
+    },
     openLocation() {
       if (this.orderInfo.latitude && this.orderInfo.longitude) {
         uni.openLocation({
@@ -224,13 +242,8 @@ export default {
           name: this.orderInfo.merchantName,
           address: this.orderInfo.address
         })
-      }
-    },
-    callMerchant() {
-      if (this.orderInfo.merchantPhone) {
-        uni.makePhoneCall({
-          phoneNumber: this.orderInfo.merchantPhone
-        })
+      } else {
+        uni.showToast({ title: '暂无位置信息', icon: 'none' })
       }
     },
     copyVerifyCode() {
@@ -381,8 +394,14 @@ export default {
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 24rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.merchant-card-top {
   display: flex;
   position: relative;
+  margin-bottom: 24rpx;
 }
 
 .merchant-avatar {
@@ -408,10 +427,20 @@ export default {
   margin-bottom: 8rpx;
 }
 
+.merchant-card-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .merchant-time {
   font-size: 24rpx;
   color: #666;
-  margin-bottom: 8rpx;
+  margin-bottom: 0;
+  line-height: 1.4;
+  word-break: break-all;
+  flex: 1;
+  padding-right: 24rpx;
 }
 
 .merchant-location-wrap {
@@ -443,15 +472,18 @@ export default {
 .merchant-actions {
   display: flex;
   flex-direction: row;
-  align-items: flex-end;
-  position: absolute;
-  right: 24rpx;
-  bottom: 24rpx;
+  align-items: center;
+  flex-shrink: 0;
 }
 
-.action-icon {
+.action-btn {
   width: 64rpx;
   height: 64rpx;
+  border-radius: 50%;
+  background: #C52733;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin-left: 16rpx;
 }