[商城整个模块，及个人中心相应的模块调整]

pages/user/order/logistics.vue

@@ -0,0 +1,178 @@
+<template>
+	<view class="LogisticsIndex" v-if="loaded">
+		<block v-if="list.length>0">
+			<view class="logistics-top">
+				<view>{{express.express_name}} <span class="copy" @click='copy(express.express_no)'>复制单号</span></view>
+				<view><span>快递编号</span>：{{express.express_no}} </view>
+			</view>
+			<view class="Logistics-content">
+				<view>物流追踪</view>
+				<view class="list">
+					<view class="list-item" v-for="(item,index) in list" :key='index'>
+						<view :class="['dian',index === 0 ?'dian-active':'']"></view>
+						<view :class="['content',index === 0?'content-active':'']">
+							<view class=""><span style='padding-right: 10rpx;'>{{item.status}} - </span>{{item.context}}
+							</view>
+							<view class="date"> {{item.time}} </view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</block>
+
+		<!-- 没有订单列表 -->
+		<no-list v-if="list.length === 0" name='no-addr' txt="暂无任务物流进度信息~" />
+		<!-- <u-toast ref="uToast" /> -->
+		<u-toast ref="uToast" />
+	</view>
+</template>
+<script>
+	import {
+		mallShipmentsLogistic
+	} from '@/apis/interfaces/numberWeight'
+	export default {
+		data() {
+			return {
+				list: [],
+				loaded:false,
+				no: '', // 快递单号
+				express:{},// 地址信息
+			}
+		},
+		onLoad(e) {
+			// this.no = this.$route.params.no
+			// this.getLogistic(this.no)
+			this.no = e.no
+			this.getLogistic(this.no)
+		},
+		methods: {
+			getLogistic(no) {
+				mallShipmentsLogistic(no).then(res => {
+					console.log(res)
+					this.list = res.logistics
+					this.express = res.express
+					this.loaded = true
+				}).catch(err => {
+					this.$refs.uToast.show({
+						title: err.message,
+						type: 'error',icon:false,
+						duration: 3000
+					})
+				})
+			},
+			// 复制
+			copy(no) {
+				uni.setClipboardData({
+					data: no,
+					success: res=>{
+						console.log('success');
+						console.log(res)
+					}
+				});
+			},
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #F8F8F8;
+	}
+
+	.LogisticsIndex {
+		font-size: $title-size;
+		color: #333;
+		margin-top: 20rpx;
+
+		// 物流名称
+		.logistics-top {
+			background-color: #fff;
+			padding: 30rpx 50rpx;
+			margin-bottom: 20rpx;
+
+			view:nth-child(2) {
+				padding-top: $padding * 0.5;
+				font-size: 0.9*$title-size;
+			}
+
+			.copy {
+				display: inline-block;
+				padding: $padding *0.4 $padding;
+				background-color: $main-color;
+				margin-left: 30rpx;
+				color: #fff;
+				font-size: $title-size *0.8;
+				border-radius: 6rpx;
+			}
+		}
+
+		// 物流进度
+		.Logistics-content {
+			background-color: #fff;
+			padding: 30rpx 50rpx;
+			margin: 50rpx 0;
+
+			.list {
+				margin-top: $margin*2;
+				margin-left: 20rpx;
+
+				.list-item {
+					display: flex;
+					flex-direction: row;
+					justify-content: flex-start;
+					align-items: flex-start;
+					box-sizing: border-box;
+					position: relative;
+					border-left: solid 2rpx #cacaca;
+					padding-bottom: $margin*1.6;
+
+					&:last-child {
+						border-left: solid 2rpx #fff !important;
+					}
+
+					&:first-child {
+						color: $main-color !important;
+					}
+
+					.dian {
+						width: 20rpx;
+						height: 20rpx;
+						border-radius: 50%;
+						background-color: #cacaca;
+						border: solid 10rpx rgba($color:#cacaca, $alpha: 0.3);
+						position: relative;
+						left: -11rpx;
+					}
+
+					.dian-active {
+						background-color: $main-color;
+						width: 30rpx;
+						height: 30rpx;
+						left: -16rpx;
+						border: solid 10rpx rgba($color: $main-color, $alpha: 0.3);
+						box-shadow: 0 0 20rpx 4rpx rgba($color: $main-color, $alpha: 0.5);
+					}
+
+					.content {
+						flex: 1;
+						margin-left: 60rpx;
+						// padding: 10rpx 0;
+						font-size: $title-size * 0.9;
+						color: #666;
+						position: relative;
+						top: -10rpx;
+
+						.date {
+							margin-top: $margin;
+						}
+					}
+
+					.content-active {
+						color: $main-color;
+					}
+				}
+			}
+		}
+	}
+</style>