物流详情修改

packageGoods/order/detail.vue

@@ -101,7 +101,7 @@
 				<view class="info">
 					<view class="info-title ells">{{ item.title }}</view>
 					<view class="info-num flex">
-						<view class="info-num-sku">规格：{{ item.properties || '-' }}</view>
+						<view class="info-num-sku ells-one">规格：{{ item.properties || '-' }}</view>
 						<view class="info-num-goods">共{{ item.goodsNum }}件</view>
 					</view>
 				</view>
@@ -122,7 +122,12 @@
 			<view class="order-title">订单信息</view>
 			<view class="order-item flex">
 				<view class="order-item-title">订单编号</view>
-				<view class="order-item-content flex" @click="copyOrderId" v-if="status.value == 2 || status.value == 4">{{ info.orderId }}<text>复制</text></view>
+				<view class="order-item-content flex" @click="copyOrderId" v-if="status.value == 2 || status.value == 4">
+					<text>{{ info.orderId }}</text>
+					<view class="copy flex">
+						<text>复制</text>
+					</view>
+				</view>
 				<view class="order-item-content flex" v-else>{{ info.orderId }}</view>
 			</view>
 			<view class="order-item flex">
@@ -148,7 +153,6 @@
 		<view class="order" v-if="info.memo != ''">
 			<view class="order-title">留言</view>
 			<view class="order-item flex">
-				<view></view>
 				<view class="order-item-content">{{ info.memo }}</view>
 			</view>
 		</view>
@@ -472,6 +476,7 @@
 					justify-content: space-between;
 					
 					&-sku {
+						flex: 1;
 						color: #666666;
 						font-size: 26rpx;
 					}
@@ -540,17 +545,20 @@
 			}
 			
 			&-content {
-				
-				text {
-					height: 30rpx;
+				.copy {
+					height: 100%;
 					margin-left: 8rpx;
 					text-align: center;
 					border-radius: 12rpx;
 					font-size: 24rpx;
 					line-height: 24rpx;
-					display: inline-block;
 					padding: 0 6rpx;
 					background-color: rgba(153, 153, 153, .1);
+					
+					text {
+						display: inline-block;
+						transform: scale(0.8);
+					}
 				}
 			}
 		}

packageGoods/order/index.vue

@@ -16,7 +16,6 @@
 										width: '50px'
 									}" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;text-align: center;">
 				</u-tabs>
-				<view class="test"></view>
 			</view>
 			<!-- 订单列表 -->
 			<view class="order-list">

packageGoods/order/logistics.vue

@@ -1,58 +1,63 @@
 <template>
 	<view class="detail">
 		<u-navbar title="物流详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
-		<!-- 物流信息 -->
-		<view class="detail-info" v-if="deliverList.length>1?true:false">
-			<view class="detail-info-one" v-for="(item,index) in deliverList" :key="index" @click="jumpPosition(index)"
-				:class="{'aside-active':listIndex === index}"> 包裹{{index+1}} </view>
+		<!-- 包裹 -->
+		<view class="pack" v-if="deliverList.length>1">
+			<u-tabs @change="changeTab" :scrollable="false" :list="packList" lineWidth="20" lineHeight="4"
+				lineColor="#E96737" :activeStyle="{
+									color: '#333',
+									transform: 'scale(1.1)',
+									width: '50px',
+									
+								}" :inactiveStyle="{
+									color: '#666666',
+									transform: 'scale(1)',
+									width: '50px'
+								}" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;text-align: center;">
+			</u-tabs>
 		</view>
-
-		<view class="detail-info">
-			<view class="detail-info-title">商品信息</view>
-			<view class="detail-info-content">
-				<view class="detail-info-content-goods">
-					<view class="flex detail-info-content-goods__detail"
-						v-for="(item,index) in deliverListData[listIndex]" :key="index">
-						<view class="detail-info-content-goods__detail__left">
-							<view class="img">
-								<image class="img" :src="item.picUrl" mode="aspectFill">
-								</image>
-							</view>
-						</view>
-						<view class="detail-info-content-goods__detail__right">
-							<view class="ells title">{{ item.title }}</view>
-							<view class="sku" v-if="item.properties">规格：{{ item.properties }}
-							</view>
-							<view class="num">数量：{{ item.goodsNum }}</view>
-						</view>
+		
+		<!-- 商品 -->
+		<view class="goods">
+			<view class="goods-title">商品信息</view>
+			<view class="goods-item" v-for="(item, index) in deliverListData[listIndex]" :key="index">
+				<image :src="item.picUrl" mode="aspectFit"></image>
+				<view class="info">
+					<view class="info-title ells">{{ item.title }}</view>
+					<view class="info-num flex">
+						<view class="info-num-sku ells-one">规格：{{ item.properties || '-' }}</view>
+						<view class="info-num-goods">共{{ item.goodsNum }}件</view>
 					</view>
 				</view>
 			</view>
 		</view>
-
-		<view class="detail-info">
-			<view class="detail-info-content-desc">
+		
+		<!-- 配送方式 -->
+		<view class="mode">
+			<view class="mode-item">
 				<view>配送方式：</view>
 				<view>{{ deliverListData[listIndex][0].companyName ? "快递发货" : "无需物流" }}</view>
 			</view>
-			<view class="detail-info-content-desc" v-if="deliverListData[listIndex][0].companyName?true:false">
+			<view class="mode-item" v-if="deliverListData[listIndex][0].companyName">
 				<view>{{ deliverListData[listIndex][0].companyName }}：</view>
-				<view class="copy" @click="copyDeliveryFlowId(deliverListData[listIndex][0].deliveryFlowId)">复制</view>
-				<view>{{ deliverListData[listIndex][0].deliveryFlowId }}</view>
+				<view class="flex" @click="copyDeliveryFlowId(deliverListData[listIndex][0].deliveryFlowId)">
+					<text>{{ deliverListData[listIndex][0].deliveryFlowId }}</text>
+					<view class="copy flex">
+						<text>复制</text>
+					</view>
+				</view>
 			</view>
 		</view>
-
-		<view class="detail-info" v-if="deliverListData[listIndex][0].companyName && logistics!==''?true:false">
-			<u-steps current="0" direction="column" dot>
+		
+		<!-- 物流信息 -->
+		<view class="logistics" v-if="deliverListData[listIndex][0].companyName && logistics!==''">
+			<u-steps current="0" direction="column" dot activeColor="#F9822C">
 				<u-steps-item :desc="item.context" :title="item.status + '  ' + item.time"
 					v-for="(item,index) in logistics">
-					<!-- <text class="slot-icon" slot="icon" v-if="item.status == '签收'">签</text> -->
-					<!-- <text class="slot-icon" slot="icon" v-else-if="item.status == '揽收'">揽</text>
-					<text class="slot-icon" slot="icon" v-else-if="item.status == '在途'">途</text> -->
 				</u-steps-item>
 			</u-steps>
 		</view>
-		<view v-else-if="deliverListData[listIndex][0].companyName?true:false" class="detail-info">
+		<view class="logistics" v-else-if="deliverListData[listIndex][0].companyName">
 			<view style="color: #b1b1b1;">
 				暂无物流信息
 			</view>
@@ -84,7 +89,7 @@
 				ListData: [],
 				listIndex: 0,
 				logistics: '',
-
+				packList: []
 			}
 		},
 		onLoad(opthios) {
@@ -92,15 +97,33 @@
 			this.getDetail()
 		},
 		methods: {
+			changeTab(e) {
+				this.listIndex = e.index
+				if (this.deliverListData[this.listIndex][0].deliveryFlowId == "") {
+					return
+				}
+				let data = {
+					deliveryFlowId: this.deliverListData[this.listIndex][0].deliveryFlowId,
+					deliveryId: this.deliverListData[this.listIndex][0].deliveryId,
+				}
+				$http.post('/api/v1/mp/logistics/query', data).then(res => {
+					if (res.code == 500) {
+						uni.hideToast();
+					}
+					if (res.code == 0) {
+						this.logistics = res.data
+					}
+				})
+			},
+
 			getDetail() {
-				// uni.showLoading({
-				// 	title: '加载中'
-				// });
+				uni.showLoading({
+					title: '加载中'
+				});
 				$http.post('/api/v1/mp/user/deliver/order/detail', {
 					orderId: this.orderId
 				}).then(res => {
-
-					// uni.hideLoading();
+					uni.hideLoading();
 					this.info = res.data
 					this.deliverList = res.data.deliverList;
 					res.data.items.forEach(item => {
@@ -108,256 +131,144 @@
 						item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
 					})
 
-					res.data.deliverList && res.data.deliverList.forEach((item) => {
+					res.data.deliverList && res.data.deliverList.forEach((item, index) => {
 						item.items.forEach((ele) => {
 							let picUrlArr = ele.picUrl.split(",");
 							ele.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170';
 							this.ListData.push(item.items)
+							this.packList.push({ name: `包裹${ index + 1 }` })
 						});
 					});
 					this.deliverListData = this.ListData
 					this.list = res.data.items
 					this.logisticsQuery()
 				}).catch(() => {
-					// uni.hideLoading();
+					uni.hideLoading();
 				})
 			},
+			
 			jumpPosition(index) {
-
 				this.listIndex = index
 				this.logisticsQuery()
-
 			},
+			
 			copyDeliveryFlowId(id) {
 				uni.setClipboardData({
 					data: id,
 				});
 			},
-			logisticsQuery() {
-				if (this.deliverListData[this.listIndex][0].deliveryFlowId == "") {
-					return
-				}
-				let data = {
-					deliveryFlowId: this.deliverListData[this.listIndex][0].deliveryFlowId,
-					deliveryId: this.deliverListData[this.listIndex][0].deliveryId,
-				}
-				$http.post('/api/v1/mp/logistics/query', data).then(res => {
-					if (res.code == 500) {
-						uni.hideToast();
-					}
-					if (res.code == 0) {
-						this.logistics = res.data
-					}
-				})
-			}
 		}
 	}
 </script>
 <style lang="scss" scopen>
 	.aside-active {
 		color: #f27120;
-		border-bottom: 2rpx solid #f27120;
+		border-bottom: 4rpx solid #f27120;
 	}
 </style>
 <style lang="scss" scoped>
 	.detail {
-		margin: 10rpx;
 		padding-bottom: 160rpx;
+	}
 
-		&-state {
-			padding: 28rpx;
-			margin-bottom: 20rpx;
-			background-color: #FFFFFF;
-
-			&-title {
-				line-height: 40rpx;
-				font-weight: bold;
-				display: inline-block;
-			}
-
-			&-time {
-				line-height: 40rpx;
-				color: #b1b1b1;
-				float: right;
-			}
+	// 包裹
+	.pack {
+		display: flex;
+		background-color: #fff;
+	}
+	
+	// 商品
+	.goods {
+		margin: 26rpx 34rpx 22rpx;
+		background-color: #fff;
+		padding: 20rpx 36rpx;
+		border-radius: 20rpx;
+		
+		&-title {
+			font-size: 30rpx;
+			line-height: 30rpx;
+			margin-bottom: 22rpx;
 		}
-
-		&-info {
-			margin-bottom: 20rpx;
-			padding: 20rpx 28rpx;
-			background-color: #FFFFFF;
-
-			&-one {
-				height: 60rpx;
-				padding: 1px;
-				line-height: 60rpx;
-				text-align: center;
-				display: inline-block;
-				margin-right: 20rpx;
-			}
-
-			&-title {
-				line-height: 40rpx;
-				font-weight: bold;
+		
+		// 商品列表
+		&-item{
+			display: flex;
+			
+			image {
+				width: 220rpx;
+				height: 200rpx;
+				border-radius: 12rpx;
+				margin-right: 24rpx;
 			}
-
-			&-content {
-
-				&-goods {
-
-					&__detail {
-						padding: 20rpx 0;
-						justify-content: space-between;
-						border-bottom: 1px solid rgba(236, 236, 236, 100);
-
-						&__left {
-							display: flex;
-							height: 170rpx;
-
-							.img {
-
-								image {
-									width: 170rpx;
-									height: 170rpx;
-									margin-right: 20rpx;
-								}
-							}
-						}
-
-						&__right {
-							flex: 1;
-							display: flex;
-							height: 170rpx;
-							flex-direction: column;
-							justify-content: space-between;
-							align-items: flex-start;
-							font-size: 30rpx;
-
-							.title {
-								font-weight: bold;
-							}
-
-							.sku {
-								color: #8C8C8C;
-							}
-
-						}
-
-					}
-
-					&__detail:last-child {
-						border: none;
-					}
-				}
-
-				&-money {
-					margin-top: 40rpx;
-
-					&__item {
-						display: flex;
-						align-items: center;
-						justify-content: space-between;
-						line-height: 40rpx;
-						margin-bottom: 24rpx;
-					}
-				}
-
-				&-toatl {
-					padding-top: 24rpx;
-					display: flex;
-					align-items: center;
-					justify-content: flex-end;
+			
+			.info {
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				flex: 1;
+				padding: 8rpx 0;
+				
+				&-title {
 					font-weight: bold;
-				}
-
-				&-desc {
-					position: relative;
-					display: flex;
 					line-height: 40rpx;
-					margin-top: 20rpx;
-					margin-bottom: 24rpx;
-
-					view:first-child {
-						width: 150rpx;
-					}
-
-					view:last-child {
-						width: calc(100% - 150rpx)
-					}
-
-					.copy {
-						position: absolute;
-						right: 0;
-						top: -6rpx;
-						width: 136rpx;
-						height: 52rpx;
-						line-height: 52rpx;
-						text-align: center;
-						color: rgba(149, 149, 149, 100);
-						border: 1px solid rgba(187, 187, 187, 100);
-						border-radius: 10rpx;
-					}
 				}
-
-				&-desc:last-child {
-					margin-bottom: 0;
-				}
-
-				&-deliver {
-					&__detail {
-						padding: 20rpx 0;
-						justify-content: space-between;
-						border-bottom: 1px solid rgba(236, 236, 236, 100);
-
-						&__left {
-							display: flex;
-							height: 170rpx;
-
-							.img {
-
-								image {
-									width: 170rpx;
-									height: 170rpx;
-									margin-right: 20rpx;
-								}
-							}
-						}
-
-						&__right {
-							flex: 1;
-							display: flex;
-							height: 170rpx;
-							flex-direction: column;
-							justify-content: space-between;
-							align-items: flex-end;
-
-							.num {
-								width: 100%;
-								justify-content: space-between;
-
-								.sku {
-									color: #8C8C8C;
-								}
-							}
-						}
-
+				
+				&-num {
+					justify-content: space-between;
+					
+					&-sku {
+						flex: 1;
+						color: #666666;
+						font-size: 26rpx;
 					}
-
-					&__detail:last-child {
-						border: none;
+					
+					&-goods {
+						color: #666666;
+						font-size: 26rpx;
 					}
 				}
 			}
-
-			.border {
-				border-bottom: 1px solid rgba(236, 236, 236, 100);
-			}
-
-			.border:last-child {
-				border: none;
+		}
+	}
+	
+	// 配送方式
+	.mode {
+		margin: 0 34rpx 22rpx;
+		background-color: #fff;
+		padding: 20rpx 36rpx;
+		border-radius: 20rpx;
+		
+		&-item {
+			display: flex;
+			margin-bottom: 22rpx;
+			
+			.copy {
+				height: 100%;
+				margin-left: 8rpx;
+				text-align: center;
+				border-radius: 12rpx;
+				font-size: 24rpx;
+				line-height: 24rpx;
+				padding: 0 6rpx;
+				background-color: rgba(153, 153, 153, .1);
+				
+				text {
+					display: inline-block;
+					transform: scale(0.8);
+				}
 			}
 		}
-
-
+		
+		&-item:last-child {
+			margin-bottom: 0;
+		}
+	}
+	
+	// 物流信息
+	.logistics {
+		margin: 0 34rpx 22rpx;
+		background-color: #fff;
+		padding: 20rpx 36rpx;
+		border-radius: 20rpx;
 	}
 </style>

pages/index/index.vue

@@ -129,8 +129,6 @@
 		<custom-tab-bar :activeValue="'index'" />
 		<!-- 支付弹框组件 -->
 		<pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="toProcess" v-if="payShow" />
-		<!-- 助力邀请弹框组件 -->
-		<activity-help :activity-show="activityShow" :inviteCode="inviteCode" :marketingId="marketingId" @close="close" @success="toActivity" v-if="activityShow" />
 	</view>
 </template>
 
@@ -140,13 +138,11 @@
 	import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
 	import PayPopup from '../../components/pay-popup/pay-popup.vue'
 	import PrizeBarrage from '@/components/prize-barrage/prize-barrage.vue'
-	import ActivityHelp from '@/components/activity-help/activity-help.vue'
 	export default {
 		components: {
 			CustomTabBar,
 			PayPopup,
-			PrizeBarrage,
-			ActivityHelp
+			PrizeBarrage
 		},
 		data() {
 			return {
@@ -166,10 +162,6 @@
 				list: [1,2,3,4,5],
 				percentage: 0,
 				checkStatus: true, 
-				
-				inviteCode: '',//助力邀请码
-				marketingId: '',//活动id
-				activityShow: false,//助力邀请弹框
 			};
 		},
 		onLoad(opthios) {
@@ -183,6 +175,7 @@
 				this.marketingId = opthios.marketingId
 				this.activityShow = true
 			}
+			
 			/**
 			 * 票赢天下小程序分享盲票跳转接受的参数
 			 * shareUid: 用户ID
@@ -355,7 +348,6 @@
 			// 关闭支付弹框
 			close() {
 				this.payShow = false
-				this.activityShow = false
 			},
 
 			// // 盲票选中改变