medical-mall/pages/mall/consumer/logistics.uvue

<template>
  <view class="logistics-page">
    <view class="logistics-header">
      <view class="product-info">
        <image class="product-image" :src="productImage" mode="aspectFill"></image>
        <view class="info-right">
          <text class="status-text">{{ logisticsStatus }}</text>
          <text class="courier-name">{{ courierName }}: {{ trackingNo }}</text>
          <text class="phone-text">官方电话: {{ courierPhone }}</text>
        </view>
      </view>
    </view>

    <view class="logistics-body">
      <view class="track-list">
        <view 
          v-for="(item, index) in trackList" 
          :key="index" 
          class="track-item"
          :class="{ first: index === 0 }"
        >
          <view class="node-icon">
            <view class="dot"></view>
            <view class="line" v-if="index !== trackList.length - 1"></view>
          </view>
          <view class="node-content">
            <text class="track-desc">{{ item.desc }}</text>
            <text class="track-time">{{ item.time }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, onMounted } from 'vue'

const orderId = ref('')
const productImage = ref('/static/product1.jpg')
const logisticsStatus = ref('运输中')
const courierName = ref('顺丰速运')
const courierPhone = ref('95338')
const trackingNo = ref('SF1234567890')

type TrackItem = {
  desc: string
  time: string
}

const trackList = ref<TrackItem[]>([
  {
    desc: '【深圳市】快件已到达 深圳南山集散中心',
    time: '2024-01-26 14:30:00'
  },
  {
    desc: '【广州市】快件已从 广州转运中心 发出，准备发往 深圳南山集散中心',
    time: '2024-01-26 09:20:00'
  },
  {
    desc: '【广州市】快件已到达 广州转运中心',
    time: '2024-01-25 22:15:00'
  },
  {
    desc: '【杭州市】商家已发货',
    time: '2024-01-25 18:00:00'
  }
])

onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options as any
  if (options.orderId) {
    orderId.value = options.orderId
    // 这里可以根据orderId去请求真实的物流信息
  }
})
</script>

<style scoped>
.logistics-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20px;
}

.logistics-header {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
}

.product-info {
  display: flex;
  align-items: center;
}

.product-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  margin-right: 15px;
  background-color: #eee;
}

.info-right {
  display: flex;
  flex-direction: column;
}

.status-text {
  font-size: 16px;
  color: #ff5000;
  font-weight: bold;
  margin-bottom: 5px;
}

.courier-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 2px;
}

.phone-text {
  font-size: 12px;
  color: #999;
}

.logistics-body {
  background-color: #fff;
  padding: 20px 15px;
}

.track-list {
  display: flex;
  flex-direction: column;
}

.track-item {
  display: flex;
  position: relative;
  padding-bottom: 25px;
}

.track-item:last-child {
  padding-bottom: 0;
}

.node-icon {
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 15px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ccc;
  margin-top: 6px;
  z-index: 1;
}

.first .dot {
  background-color: #ff5000;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  box-shadow: 0 0 0 4px rgba(255, 80, 0, 0.2);
}

.line {
  width: 1px;
  background-color: #eee;
  flex: 1;
  margin-top: 2px;
}

.node-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.track-desc {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 5px;
}

.first .track-desc {
  color: #ff5000;
  font-weight: bold;
}

.track-time {
  font-size: 12px;
  color: #999;
}
</style>