feat(wl): 查看物流页面样式调整

pages/mine/order/index.vue

@@ -102,7 +102,7 @@
             @click="openWl(item)"
             shape="circle"
             :text="'查看物流'"
-            color="#E03030"
+            color="#005BAC"
           ></u-button>
         </view>
       </view>

pages/mine/order/wl.vue

@@ -1,35 +1,64 @@
-
 <template>
   <view class="content">
-    <view v-for="(item, index) in wlData"
+    <!-- 选项卡区域 - 移到外层 -->
-          :key="index">
+    <view class="tab-container" v-if="wlData.length > 0">
-      <view class="tab">
+      <view
-        <view @click="isClick = index"
+        v-for="(item, index) in wlData"
-              class="tab_i">
+        :key="index"
-          <view>{{'快递包裹'}}{{index+1 }}</view>
+        @click="isClick = index"
-          <view :class="[isClick===index?'heng':'heng1']">
+        class="tab-item"
+        :class="{ active: isClick === index }"
+      >
+        <view class="tab-text">快递包裹{{ index === 0 ? '' : index }}</view>
+        <view class="tab-underline" :class="{ show: isClick === index }"></view>
+      </view>
+    </view>
+
+    <!-- 分隔区域 -->
+    <view class="separator"></view>
+
+    <!-- 当前选中的物流信息 -->
+    <view v-if="wlData.length > 0 && wlData[isClick]">
+      <!-- 物流信息头部 -->
+      <view class="logistics-header">
+        <view class="logistics-info">
+          <image src="@/static/images/wl.png" class="logistics-icon" />
+          <view class="logistics-details">
+            <view class="company-name"
+              >物流公司：{{ wlData[isClick].expressName }}</view
+            >
+            <view class="tracking-number"
+              >物流单号：{{ wlData[isClick].expressCode }}</view
+            >
           </view>
         </view>
+        <view class="copy-btn" @click="onCopy(wlData[isClick].expressCode)"
+          >复制</view
+        >
       </view>
-      <view class="hui"></view>
+
-      <view class="head_t">
+      <!-- 物流轨迹时间线 -->
-        <view class="disflex">
+      <view class="timeline-container">
-          <img src="@/static/images/wl.png"
+        <view
-               alt="">
+          class="timeline-item"
-          <view>{{ item.expressName }}{{'快递包裹'}} {{ item.expressCode }}</view>
+          v-for="(ctem, cndex) in wlData[isClick].detailList"
-        </view>
+          :key="cndex"
-        <view @click="onCopy(item.expressCode)">{{'复制'}}</view>
+        >
-      </view>
+          <view class="timeline-left">
-      <view class="wl_tree"
+            <view class="timeline-dot" :class="{ active: cndex === 0 }"></view>
-            v-for="ctem,cndex in item.detailList"
+            <view
-            :key="cndex">
+              class="timeline-line"
-        <view class="zhong">
+              v-if="cndex < wlData[isClick].detailList.length - 1"
-          <view :class="cndex==0?'red1':'qiu'"></view>
+            ></view>
-          <view class="gun"></view>
+          </view>
-        </view>
+          <view class="timeline-content">
-        <view class="tree_r">
+            <view class="timeline-time" :class="{ active: cndex === 0 }">{{
-          <view :class="cndex==0?'red2':'tree_t'">{{ ctem.time }}</view>
+              ctem.time
-          <view :class="cndex==0?'red3':'tree_t'">{{ ctem.context }}</view>
+            }}</view>
+            <view class="timeline-desc" :class="{ active: cndex === 0 }">{{
+              ctem.context
+            }}</view>
+          </view>
         </view>
       </view>
     </view>
@@ -52,7 +81,7 @@ export default {
   onShow() {},
   methods: {
     openWl(id) {
-      api.expressList(id).then((res) => {
+      api.expressList(id).then(res => {
         if (res.code == 200) {
           this.wlData = res.data
         }
@@ -60,7 +89,7 @@ export default {
     },
     onCopy(code) {
       let text = code + ''
-      this.$copyText(text).then((res) => {
+      this.$copyText(text).then(res => {
         uni.showToast({
           title: '复制成功',
           icon: 'none',
@@ -72,109 +101,202 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.tab {
+.content {
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+/* 选项卡样式 */
+.tab-container {
+  display: flex;
+  background: #ffffff;
+  padding: 20rpx 40rpx 0;
+}
+
+.tab-item {
+  flex: 1;
+  text-align: center;
+  padding-bottom: 20rpx;
+  cursor: pointer;
+}
+
+.tab-text {
+  font-size: 28rpx;
+  color: #999999;
+  font-weight: 400;
+  margin-bottom: 8rpx;
+}
+
+.tab-item.active .tab-text {
+  color: #333333;
+  font-weight: 500;
+}
+
+.tab-underline {
+  height: 4rpx;
+  background: transparent;
+  margin: 0 auto;
+  width: 60rpx;
+  border-radius: 2rpx;
+  transition: all 0.3s ease;
+}
+
+.tab-underline.show {
+  background: #005bac;
+}
+
+/* 分隔区域 */
+.separator {
+  height: 20rpx;
+  background: #f5f5f5;
+}
+
+/* 物流信息头部 */
+.logistics-header {
+  background: #ffffff;
+  padding: 30rpx 40rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 24rpx;
+  border-bottom: 1rpx solid #eeeeee;
-  margin-top: 20rpx;
-  margin-bottom: 6rpx;
 }
-.tab_i {
+
-  // width: 120rpx;
+.logistics-info {
-  text-align: center;
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.logistics-icon {
+  width: 88rpx;
+  height: 88rpx;
+  margin-right: 20rpx;
+  border-radius: 50%;
+}
+
+.logistics-details {
+  flex: 1;
+}
+
+.company-name {
   font-size: 28rpx;
-  font-family: PingFang SC;
-  font-weight: 400;
   color: #333333;
-  // margin-right: 28rpx;
+  font-weight: 500;
-  white-space: nowrap;
+  margin-bottom: 8rpx;
+}
+
+.tracking-number {
+  font-size: 24rpx;
+  color: #666666;
+  font-weight: 400;
+}
+
+.copy-btn {
+  padding: 12rpx 24rpx;
+  background: #f8f8f8;
+  border: 1rpx solid #e6e6e6;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  color: #666666;
+  cursor: pointer;
+}
+
+.copy-btn:active {
+  background: #eeeeee;
+}
+
+/* 时间线样式 */
+.timeline-container {
+  background: #ffffff;
+  padding: 0 40rpx 40rpx;
+}
+
+.timeline-item {
+  display: flex;
+  position: relative;
+  padding: 30rpx 0;
+}
+
+.timeline-left {
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-right: 30rpx;
+  position: relative;
 }
-.heng {
+
-  width: 24px;
+.timeline-dot {
-  height: 2px;
+  width: 20rpx;
-  background: #ed1d25;
+  height: 20rpx;
-  border-radius: 1px 1px 1px 1px;
-  margin-top: 4rpx;
-}
-.heng1 {
-  width: 24px;
-  height: 2px;
-  background: #fff;
-  border-radius: 1px 1px 1px 1px;
-  margin-top: 4rpx;
-}
-.hui {
-  height: 24rpx;
-  background: #eee;
-}
-.head_t {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 12px;
-  font-family: PingFang SC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #666666;
-  border-bottom: 1px solid #ccc;
-  margin: 0 20rpx;
-  padding: 20rpx;
-  margin-bottom: 40rpx;
-  img {
-    width: 44px;
-    height: 44px;
-    margin-right: 10px;
-  }
-}
-.disflex {
-  display: flex;
-  align-items: center;
-}
-.wl_tree {
-  display: flex;
-  padding-right: 40rpx;
-  .zhong {
-    // flex: 1;
-    margin: 0 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .qiu {
-      width: 10px;
-      height: 10px;
-      background: #cccccc;
-      border-radius: 50%;
-      // margin: 10px 0;
-      // margin: 3px 0 10px 0;
-    }
-    .gun {
-      background: #ccc;
-      width: 1px;
-      min-height: 110px;
-    }
-  }
-  .tree_r {
-    // width: 60%;
-    font-size: 24rpx;
-    color: #999;
-    .tree_t {
-      color: #999;
-    }
-  }
-}
-.red1 {
-  width: 10px;
-  height: 10px;
-  background: #005BAC;
   border-radius: 50%;
+  background: #cccccc;
+  position: relative;
+  z-index: 2;
 }
-.red2 {
+
-  color: #005BAC;
+.timeline-dot.active {
+  background: #ff4757;
+  width: 24rpx;
+  height: 24rpx;
 }
+
+.timeline-line {
+  width: 2rpx;
+  background: #eeeeee;
+  position: absolute;
+  top: 24rpx;
+  bottom: -30rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+.timeline-content {
+  flex: 1;
+  padding-top: 2rpx;
+}
+
+.timeline-time {
+  font-size: 24rpx;
+  color: #999999;
+  margin-bottom: 8rpx;
+  font-weight: 400;
+}
+
+.timeline-time.active {
+  color: #ff4757;
+  font-weight: 500;
+}
+
+.timeline-desc {
+  font-size: 28rpx;
+  color: #666666;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+.timeline-desc.active {
+  color: #333333;
+  font-weight: 500;
+}
+
+/* 移除旧样式 */
+.tab,
+.tab_i,
+.heng,
+.heng1,
+.hui,
+.head_t,
+.disflex,
+.wl_tree,
+.zhong,
+.qiu,
+.gun,
+.tree_r,
+.tree_t,
+.red1,
+.red2,
 .red3 {
-  color: #333;
+  display: none;
 }
 </style>