shop-app/pages/order/logisitcsInfo.vue

<!--
 * @Author: ch
 * @Date: 2022-04-18 15:28:14
 * @LastEditors: ch
 * @LastEditTime: 2022-05-17 17:55:56
 * @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">
				<text>{{orderInfo.trackingNo}}</text>
				<UiCopy class="company--copy" :value="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';
import UiCopy from '../../components/UiCopy.vue';
export default {
	components: { UiWhiteBox, UiGoodsInfo, UiCopy },
	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">
page {
	background: $color-grey1;
}
</style>
<style lang="scss" scoped>
.company{
	height: 100rpx;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	&--copy{
		margin-left: 20rpx;
	}
}
.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>