web-base-h5/pages/mine/order/wl.vue

<template>
  <view class="content">
    <!-- 选项卡区域 - 移到外层 -->
    <view class="tab-container" v-if="wlData.length > 0">
      <view
        v-for="(item, index) in wlData"
        :key="index"
        @click="isClick = index"
        class="tab-item"
        :class="{ active: isClick === index }"
      >
        <view class="tab-text">快递包裹{{ index + 1 }}</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="timeline-container">
        <view
          class="timeline-item"
          v-for="(ctem, cndex) in wlData[isClick].detailList"
          :key="cndex"
        >
          <view class="timeline-left">
            <view class="timeline-dot" :class="{ active: cndex === 0 }"></view>
            <view
              class="timeline-line"
              v-if="cndex < wlData[isClick].detailList.length - 1"
            ></view>
          </view>
          <view class="timeline-content">
            <view class="timeline-time" :class="{ active: cndex === 0 }">{{
              ctem.time
            }}</view>
            <view class="timeline-desc" :class="{ active: cndex === 0 }">{{
              ctem.context
            }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as api from '@/config/order.js'

export default {
  data() {
    return {
      wlData: [],
      isClick: 0,
    }
  },
  onLoad(options) {
    this.openWl(options.id)
  },
  onShow() {},
  methods: {
    openWl(id) {
      api.expressList(id).then(res => {
        if (res.code == 200) {
          this.wlData = res.data
        }
      })
    },
    onCopy(code) {
      let text = code + ''
      this.$copyText(text).then(res => {
        uni.showToast({
          title: '复制成功',
          icon: 'none',
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.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;
  border-bottom: 1rpx solid #eeeeee;
}

.logistics-info {
  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;
  color: #333333;
  font-weight: 500;
  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;
}

.timeline-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: #cccccc;
  position: relative;
  z-index: 2;
}

.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 {
  display: none;
}
</style>