feat: 订单详情功能完善

pages/order/components/OrderInfo/index.vue

@@ -13,7 +13,7 @@
       <text class="value">{{ payWayText }}</text>
     </view>
     <!-- 在已退款状态显示 -->
-    <view class="order-item">
+    <view v-if="orderData.orderStatus === '4'" class="order-item">
       <text class="label">退款单号</text>
       <text class="value">{{ orderData.refundOrderNo }}</text>
     </view>
@@ -26,7 +26,9 @@
     <button v-if="shouldShowButton" :class="buttonClass">
       {{ buttonText }}
     </button>
-    <text class="feedback">投诉反馈</text>
+    <view class="feedback">
+      <text @click="openFeedback">投诉反馈</text>
+    </view>
   </view>
 </template>
 
@@ -96,6 +98,12 @@ const buttonClass = computed(() => {
     return `${baseClass} pre-btn`; // 其他状态，添加pre-btn样式
   }
 });
+
+// 投诉电话
+const openFeedback = () => {
+  const phoneNumber = props.orderData.complaintHotline;
+  uni.makePhoneCall({ phoneNumber });
+};
 </script>
 
 <style scoped lang="scss">

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

@@ -147,7 +147,6 @@ $breakpoint-mobile: 480px;
     margin-top: $spacing-large;
     position: relative;
     overflow: hidden;
-    box-shadow: 0 2px 8px rgba($button-color, 0.3);
     transition: all $transition-normal;
     letter-spacing: 0.5px;
 
@@ -219,49 +218,10 @@ $breakpoint-mobile: 480px;
   }
 
   .feedback {
-    display: block;
     text-align: center;
     font-size: $font-size-medium;
     color: $text-color-primary;
     font-weight: $font-weight-normal;
     margin-top: $spacing-medium;
-    cursor: pointer;
-    text-decoration: none;
-    position: relative;
-    transition: all $transition-fast;
-    padding: $spacing-small;
-    border-radius: 4px;
-
-    // 下划线动画效果
-    &::after {
-      content: "";
-      position: absolute;
-      bottom: 4px;
-      left: 50%;
-      width: 0;
-      height: 1px;
-      background-color: $text-color-accent;
-      transition: all $transition-normal;
-      transform: translateX(-50%);
-    }
-
-    &:hover {
-      color: $text-color-accent;
-      background-color: rgba($text-color-accent, 0.05);
-
-      &::after {
-        width: 60%;
-      }
-    }
-
-    &:active {
-      transform: scale(0.98);
-    }
-
-    // 移动端适配
-    @media (max-width: $breakpoint-mobile) {
-      font-size: $font-size-medium - 1px;
-      padding: $spacing-medium $spacing-small;
-    }
   }
 }