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

<template>
  <view class="lg-wrap">
    <view class="lg-header">
      <text class="lg-title">物流进度</text>
      <text class="lg-sub">查看试剂盒寄送与样本回收状态</text>
    </view>

    <view class="lg-loading" v-if="loading">加载中...</view>

    <view class="lg-empty" v-else-if="status === 'none'">
      <text class="lg-empty-icon">📦</text>
      <text class="lg-empty-text">等待商家发货</text>
      <text class="lg-empty-sub">商家正在准备试剂盒，请耐心等待</text>
    </view>

    <view class="lg-timeline" v-else>
      <view class="lg-step" :class="{ 'lg-step-active': stepIndex >= 0 }">
        <view class="lg-step-dot"></view>
        <view class="lg-step-body">
          <text class="lg-step-title">试剂盒已寄出</text>
          <text class="lg-step-time" v-if="status === 'kit_shipped'">已发货，请留意查收</text>
          <text class="lg-step-tracking" v-if="trackingNo">快递单号：{{ trackingNo }}</text>
        </view>
      </view>
      <view class="lg-step" :class="{ 'lg-step-active': stepIndex >= 1 }">
        <view class="lg-step-dot"></view>
        <view class="lg-step-body">
          <text class="lg-step-title">试剂盒已收到</text>
          <text class="lg-step-time" v-if="status === 'kit_received'">已签收</text>
        </view>
      </view>
      <view class="lg-step" :class="{ 'lg-step-active': stepIndex >= 2 }">
        <view class="lg-step-dot"></view>
        <view class="lg-step-body">
          <text class="lg-step-title">样本已寄回</text>
          <text class="lg-step-time" v-if="status === 'sample_shipped'">正在返回实验室</text>
        </view>
      </view>
      <view class="lg-step" :class="{ 'lg-step-active': stepIndex >= 3 }">
        <view class="lg-step-dot"></view>
        <view class="lg-step-body">
          <text class="lg-step-title">样本已签收</text>
          <text class="lg-step-time" v-if="status === 'sample_received'">实验室已收到样本，等待报告生成</text>
        </view>
      </view>
    </view>

    <view class="lg-refresh" @click="refresh">
      <text class="lg-refresh-text">刷新状态</text>
    </view>
  </view>
</template>

<script>
import { getMyLogistics } from '../../utils/api.js'
import { updateUserIntentStage } from '../../utils/api.js'

var STATUS_ORDER = ['kit_shipped', 'kit_received', 'sample_shipped', 'sample_received']

export default {
  data() {
    return {
      code: '',
      status: 'none',
      trackingNo: '',
      loading: false
    }
  },
  computed: {
    stepIndex() {
      var idx = STATUS_ORDER.indexOf(this.status)
      return idx
    }
  },
  onLoad(options) {
    this.code = (options && options.code) || ''
    this.loadStatus()
  },
  onShow() {
    this.loadStatus()
  },
  methods: {
    loadStatus() {
      var self = this
      self.loading = true
      uni.showLoading({ title: '加载中...', mask: true })
      getMyLogistics().then(function(res) {
        uni.hideLoading()
        self.loading = false
        var data = res && res.data
        if (data) {
          self.status = data.logisticsStatus || data.logistics_status || 'none'
          self.trackingNo = data.trackingNo || data.tracking_no || ''
          // 如果已签收样本，推进旅程
          if (self.status === 'sample_received') {
            updateUserIntentStage(4).then(function() {}).catch(function() {})
          }
        }
      }).catch(function() {
        uni.hideLoading()
        self.loading = false
        self.status = 'none'
      })
    },
    refresh() {
      this.loadStatus()
    }
  }
}
</script>

<style scoped>
.lg-wrap {
  min-height: 100vh;
  background: #FFF7ED;
  padding: 40rpx 32rpx;
  box-sizing: border-box;
}

.lg-header {
  margin-bottom: 40rpx;
}

.lg-title {
  display: block;
  font-size: 38rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.lg-sub {
  display: block;
  font-size: 26rpx;
  color: #999;
  text-align: center;
  margin-top: 10rpx;
}

.lg-loading {
  text-align: center;
  font-size: 28rpx;
  color: #999;
  padding: 80rpx 0;
}

.lg-empty {
  text-align: center;
  padding: 80rpx 0;
}

.lg-empty-icon {
  font-size: 80rpx;
  display: block;
}

.lg-empty-text {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-top: 20rpx;
}

.lg-empty-sub {
  display: block;
  font-size: 26rpx;
  color: #999;
  margin-top: 10rpx;
}

.lg-timeline {
  padding-left: 30rpx;
}

.lg-step {
  position: relative;
  padding-left: 60rpx;
  padding-bottom: 40rpx;
  opacity: 0.5;
}

.lg-step-active {
  opacity: 1;
}

.lg-step:last-child {
  padding-bottom: 0;
}

.lg-step-dot {
  position: absolute;
  left: 0;
  top: 4rpx;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background: #FED7AA;
  z-index: 2;
}

.lg-step-active .lg-step-dot {
  background: #F97316;
}

.lg-step-body {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 28rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.lg-step-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.lg-step-time {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
}

.lg-step-tracking {
  display: block;
  font-size: 24rpx;
  color: #F97316;
  margin-top: 6rpx;
}

.lg-refresh {
  text-align: center;
  margin-top: 40rpx;
  padding: 20rpx 0;
}

.lg-refresh-text {
  font-size: 28rpx;
  color: #F97316;
  text-decoration: underline;
}
</style>