cfc/cfc-frontend/pages/shop/logistics/logistics.vue

<template>
  <view class="container">
    <view v-if="loading" class="loading-wrap">
      <text class="loading-text">加载中...</text>
    </view>
    <scroll-view v-else scroll-y class="content">
      <!-- Header -->
      <view class="header-section">
        <view class="header-top">
          <text class="order-no">订单号: {{ orderNo }}</text>
          <text :class="['status-badge', 'status-' + logisticsStatus]">{{ statusLabel }}</text>
        </view>
        <button class="refresh-btn" @click="loadLogistics">刷新物流信息</button>
      </view>

      <!-- Logistics Info -->
      <view v-if="logisticsData.logisticsNo" class="section">
        <text class="section-title">物流信息</text>
        <view class="info-row">
          <text class="info-label">物流公司</text>
          <text class="info-value">{{ logisticsData.logisticsCompany || logisticsData.logisticsName }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">物流单号</text>
          <view class="copy-row">
            <text class="info-value">{{ logisticsData.logisticsNo }}</text>
            <text class="copy-btn" @click="onCopy(logisticsData.logisticsNo)">复制</text>
          </view>
        </view>
      </view>

      <!-- Tracking Timeline -->
      <view class="section" v-if="trackingData && trackingData.length > 0">
        <text class="section-title">物流追踪</text>
        <view class="timeline">
          <view
            v-for="(node, index) in trackingData"
            :key="index"
            :class="['timeline-node', index === 0 ? 'latest' : '']"
          >
            <view class="timeline-dot-wrap">
              <view :class="['timeline-dot', index === 0 ? 'dot-orange' : 'dot-gray']"></view>
              <view v-if="index < trackingData.length - 1" class="timeline-line"></view>
            </view>
            <view class="timeline-content">
              <text class="timeline-text">{{ node.content }}</text>
              <text class="timeline-time">{{ node.time }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- Empty tracking -->
      <view v-else-if="logisticsData.logisticsNo && (!trackingData || trackingData.length === 0)" class="section">
        <view class="empty-tracking">
          <text class="empty-icon">🚚</text>
          <text class="empty-text">暂无物流信息</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import config from '@/config.js'

export default {
  data() {
    return {
      orderNo: '',
      orderId: null,
      loading: false,
      logisticsData: {},
      trackingData: [],
      logisticsStatus: 'pending'
    }
  },
  computed: {
    statusLabel() {
      var map = {
        pending: '待发货',
        shipped: '已发货',
        signing: '派送中',
        completed: '已签收'
      }
      return map[this.logisticsStatus] || this.logisticsStatus
    }
  },
  onLoad(options) {
    if (options.orderNo) {
      this.orderNo = options.orderNo
    }
    if (options.orderId) {
      this.orderId = parseInt(options.orderId)
    }
    this.loadLogistics()
  },
  methods: {
    loadLogistics() {
      if (!this.orderId) {
        uni.showToast({ title: '订单ID缺失', icon: 'none' })
        return
      }
      this.loading = true
      var that = this
      uni.request({
        url: config.api('/api/shop/logistics/query'),
        method: 'POST',
        data: { orderId: this.orderId },
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          that.loading = false
          if (res.data && res.data.code === 200) {
            var data = res.data.data || {}
            that.logisticsData = data
            that.trackingData = data.trackingData || []
            if (data.status) {
              that.logisticsStatus = data.status
            }
          } else {
            uni.showToast({ title: res.data.message || '查询失败', icon: 'none' })
          }
        },
        fail: function() {
          that.loading = false
          uni.showToast({ title: '网络请求失败', icon: 'none' })
        }
      })
    },
    onCopy(text) {
      uni.setClipboardData({
        data: text,
        success: function() {
          uni.showToast({ title: '已复制', icon: 'success' })
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
}
.loading-wrap {
  display: flex;
  justify-content: center;
  padding-top: 200rpx;
}
.loading-text {
  font-size: 28rpx;
  color: #999;
}
.content {
  height: calc(100vh - 120rpx);
}
.header-section {
  background: #fff;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  flex-direction: column;
}
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.order-no {
  font-size: 26rpx;
  color: #666;
}
.status-badge {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}
.status-pending {
  background: #fff7e6;
  color: #fa8c16;
}
.status-shipped {
  background: #e6f7ff;
  color: #1890ff;
}
.status-signing {
  background: #fff7e6;
  color: #fa8c16;
}
.status-completed {
  background: #f6ffed;
  color: #52c41a;
}
.refresh-btn {
  font-size: 24rpx;
  color: #F97316;
  background: #fff7e6;
  border: 1rpx solid #F97316;
  padding: 8rpx 30rpx;
  border-radius: 30rpx;
  width: auto;
  align-self: center;
  line-height: 1.5;
}
.refresh-btn::after {
  border: none;
}
.section {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 24rpx;
}
.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.info-row:last-child {
  border-bottom: none;
}
.info-label {
  font-size: 26rpx;
  color: #999;
}
.info-value {
  font-size: 26rpx;
  color: #333;
}
.copy-row {
  display: flex;
  align-items: center;
}
.copy-btn {
  font-size: 22rpx;
  color: #1890ff;
  background: #e6f7ff;
  padding: 2rpx 16rpx;
  border-radius: 20rpx;
  margin-left: 12rpx;
}
/* Timeline */
.timeline {
  padding: 0;
}
.timeline-node {
  display: flex;
  min-height: 100rpx;
}
.timeline-dot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40rpx;
  margin-right: 20rpx;
  position: relative;
}
.timeline-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  margin-top: 8rpx;
  z-index: 1;
}
.dot-orange {
  background: #F97316;
}
.dot-gray {
  background: #ddd;
}
.timeline-line {
  width: 2rpx;
  flex: 1;
  background: #e0e0e0;
  margin-top: 4rpx;
}
.timeline-content {
  flex: 1;
  padding-bottom: 30rpx;
}
.timeline-text {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 6rpx;
  line-height: 1.5;
}
.timeline-time {
  display: block;
  font-size: 22rpx;
  color: #999;
}
.empty-tracking {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
}
.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}
.empty-text {
  font-size: 26rpx;
  color: #999;
}
</style>