163 lines
4.1 KiB
Vue
163 lines
4.1 KiB
Vue
<!-- 物流追踪 -->
|
||
<template>
|
||
<s-layout title="物流追踪">
|
||
<view class="log-wrap">
|
||
<!-- 商品信息 -->
|
||
<view class="log-card ss-flex ss-m-20 ss-r-10" v-if="goodsImages.length > 0">
|
||
<uni-swiper-dot :info="goodsImages" :current="state.current" mode="round">
|
||
<swiper class="swiper-box">
|
||
<swiper-item v-for="(item, index) in goodsImages" :key="index">
|
||
<image class="log-card-img" :src="sheep.$url.static(item.image)" />
|
||
</swiper-item>
|
||
</swiper>
|
||
</uni-swiper-dot>
|
||
<view class="log-card-msg">
|
||
<!-- TODO 芋艿：优化点：展示状态 -->
|
||
<!-- <view class="ss-flex ss-m-b-8">-->
|
||
<!-- <view>物流状态：</view>-->
|
||
<!-- <view class="warning-color">{{ state.info.status_text }}</view>-->
|
||
<!-- </view>-->
|
||
<view class="ss-m-b-8">快递单号：{{ state.info.logisticsNo }}</view>
|
||
<view>快递公司：{{ state.info.logisticsName }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 物流轨迹 -->
|
||
<view class="log-content ss-m-20 ss-r-10">
|
||
<view
|
||
class="log-content-box ss-flex"
|
||
v-for="(item, index) in state.tracks"
|
||
:key="item.title"
|
||
>
|
||
<view class="log-icon ss-flex-col ss-col-center ss-m-r-20">
|
||
<text class="cicon-title" />
|
||
<view v-if="state.tracks.length - 1 !== index" class="line" />
|
||
</view>
|
||
<view class="log-content-msg">
|
||
<!-- TODO 芋艿：优化点：展示状态 -->
|
||
<!-- <view class="log-msg-title ss-m-b-20">-->
|
||
<!-- {{ item.status_text }}-->
|
||
<!-- </view>-->
|
||
<view class="log-msg-desc ss-m-b-16">{{ item.content }}</view>
|
||
<view class="log-msg-date ss-m-b-40">
|
||
{{ sheep.$helper.timeFormat(item.time, 'yyyy-mm-dd hh:MM:ss') }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</s-layout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import sheep from '@/sheep';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import { computed, reactive } from 'vue';
|
||
import OrderApi from '@/sheep/api/trade/order';
|
||
|
||
const state = reactive({
|
||
info: [],
|
||
tracks: [],
|
||
});
|
||
|
||
const goodsImages = computed(() => {
|
||
let array = [];
|
||
if (state.info.items) {
|
||
state.info.items.forEach((item) => {
|
||
array.push({
|
||
image: item.picUrl,
|
||
});
|
||
});
|
||
}
|
||
return array;
|
||
});
|
||
|
||
async function getExpressDetail(id) {
|
||
const { data } = await OrderApi.getOrderExpressTrackList(id);
|
||
state.tracks = data.reverse();
|
||
}
|
||
|
||
async function getOrderDetail(id) {
|
||
const { data } = await OrderApi.getOrder(id)
|
||
state.info = data;
|
||
}
|
||
|
||
onLoad((options) => {
|
||
getExpressDetail(options.id);
|
||
getOrderDetail(options.id);
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.swiper-box {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
}
|
||
.log-card {
|
||
border-top: 2rpx solid rgba(#dfdfdf, 0.5);
|
||
padding: 20rpx;
|
||
background: #fff;
|
||
margin-bottom: 20rpx;
|
||
.log-card-img {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
.log-card-msg {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
width: 490rpx;
|
||
color: #333333;
|
||
.warning-color {
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
.log-content {
|
||
padding: 34rpx 20rpx 0rpx 20rpx;
|
||
background: #fff;
|
||
.log-content-box {
|
||
align-items: stretch;
|
||
}
|
||
.log-icon {
|
||
height: inherit;
|
||
.cicon-title {
|
||
color: #ccc;
|
||
font-size: 40rpx;
|
||
}
|
||
.activity-color {
|
||
color: #f0c785;
|
||
font-size: 40rpx;
|
||
}
|
||
.info-color {
|
||
color: #ccc;
|
||
font-size: 40rpx;
|
||
}
|
||
.line {
|
||
width: 1px;
|
||
height: 100%;
|
||
background: #d8d8d8;
|
||
}
|
||
}
|
||
|
||
.log-content-msg {
|
||
.log-msg-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
.log-msg-desc {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
line-height: 36rpx;
|
||
}
|
||
.log-msg-date {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
</style>
|