You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/order/logisitcsInfo.vue

128 lines
2.7 KiB

<!--
* @Author: ch
* @Date: 2022-04-18 15:28:14
* @LastEditors: ch
* @LastEditTime: 2022-04-18 17:13:27
* @Description: file content
-->
<template>
<view>
<UiWhiteBox>
<UiGoodsInfo :class="idx === orderInfo.products.length-1 ? 'goods-info__last' : ''" :key="item.orderProductId"
v-for="(item, idx) in orderInfo.products" :data="item"></UiGoodsInfo>
</UiWhiteBox>
<UiWhiteBox class="company">
<text class="company--name">{{orderInfo.companyName}}</text>
<view class="company--no">{{orderInfo.trackingNo}}</view>
</UiWhiteBox>
<UiWhiteBox>
<view class="title">
<text>物流信息</text>
<text class="title--desc">本服务有快递100提供</text>
</view>
<view class="group">
<view class="item" :class="idx === orderInfo.logisticsDataList.length - 1 ? 'item__last' : ''"
v-for="(item, idx) in orderInfo.logisticsDataList" :key="idx">
<view class="item--time">{{item.time}}</view>
<view class="item--ctx">{{item.context}}</view>
</view>
</view>
</UiWhiteBox>
</view>
</template>
<script>
import UiGoodsInfo from '@/components/UiGoodsInfo.vue'
import UiWhiteBox from '@/components/UiWhiteBox.vue'
import {ApiGetOrderLogistics} from '@/common/api/order';
export default {
components: { UiWhiteBox, UiGoodsInfo },
data(){
return {
orderInfo : {}
}
},
mounted(){
this.getOrderProductInfo()
},
methods : {
async getOrderProductInfo(){
const {error, result} = await ApiGetOrderLogistics({
orderId : this.$Route.query.orderId
});
if(error){
uni.$u.toast(error.message);
return false;
}
this.orderInfo = result;
}
}
}
</script>
<style lang="scss" scoped>
page{
background: $color-grey1;
}
.company{
height: 100rpx;
padding: 0 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.title{
height: 98rpx;
line-height: 98rpx;
border-bottom: 2rpx solid $color-grey2;
padding: 0 30rpx;
color: $color-grey5;
display: flex;
justify-content: space-between;
&--desc{
color: $color-grey4
}
}
.group{
padding: 30rpx;
}
.item{
padding-bottom: 44rpx;
position: relative;
padding-left: 58rpx;
&::before{
display: block;
width: 10rpx;
height: 10rpx;
content: '';
border-radius: 50%;
border:6rpx solid $color-yellow3;
background: $color-grey0;
position: absolute;
left: 0;
}
&::after{
display: block;
content: '';
height: calc(100% - 38rpx);
width: 1px;
left: 10rpx;
top: 28rpx;
border-left: 1px dashed $color-grey4;
position: absolute;
}
&__last::after{
display: none;
}
&--time{
font-size: $font-size-sm;
color: $color-grey4;
}
&--ctx{
line-height: 42rpx;
color: $color-grey5;
margin-top: 20rpx;
}
}
.goods-info__last{
border: 0;
}
</style>