订单列表、详情修改

packageGoods/order/detail.vue

@@ -1,7 +1,7 @@
 <template>
-	<view>
+	<view class="detail">
 		<u-navbar title="订单详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
-		<view class="detail">
+		<!-- <view class="detail">
 			<view class="detail-state">
 				<view class="detail-state-title">
 					<text>订单状态：</text>
@@ -69,95 +69,99 @@
 				<view style="width: 150rpx;display: inline-block;">留言:</view>
 				<view style="display: inline-block;width: 524rpx;vertical-align: top;">{{info.memo}}</view>
 			</view>
-
-			<!-- <view class="detail-info" v-if="(status.value == 2 || status.value == 4) && deliverList.length > 1">
-				<view class="detail-info-title">发货信息</view>
-				<view class="detail-info-content border" v-for="(item, index) in deliverList" :key="index">
-					<view class="detail-info-content-desc">
-						<view>配送方式：</view>
-						<view>{{ item.companyName ? "快递发货" : "无需物流" }}</view>
-					</view>
-					<view class="detail-info-content-desc" v-if="item.companyName">
-						<view>快递公司：</view>
-						<view>{{ item.companyName || '-' }}</view>
-					</view>
-					<view class="detail-info-content-desc" v-if="item.deliveryFlowId">
-						<view>物流单号：</view>
-						<view class="copy" @click="copyDeliveryFlowId(item.deliveryFlowId)">复制</view>
-						<view>{{ item.deliveryFlowId || '-' }}</view>
-					</view>
-					<view class="detail-info-content-desc">
-						<view>发货时间：</view>
-						<view>{{ $parseTime(item.deliveryTime) }}</view>
-					</view>
-					<view class="detail-info-content-deliver">
-						<view class="flex detail-info-content-deliver__detail" v-for="(items, indexs) in item.items"
-							:key="indexs">
-							<view class="detail-info-content-deliver__detail__left">
-								<view class="img">
-									<image class="img" :src="items.picUrl" mode="aspectFill">
-									</image>
-								</view>
-							</view>
-							<view class="detail-info-content-deliver__detail__right">
-								<view class="title">{{ items.title }}</view>
-								<view class="flex num">
-									<view class="sku" v-if="!items.properties"></view>
-									<view class="sku" v-if="items.properties">规格：{{ items.properties }}</view>
-									<view class="">数量：{{ items.goodsNum }}</view>
-								</view>
-							</view>
-						</view>
-					</view>
+		</view> -->
+		<!-- 订单状态 -->
+		<view class="status">
+			<image src="../../packageGoods/static/ordr/bg.png" mode="scaleToFill"></image>
+			<view class="status-info">
+				<image src="../../packageGoods/static/ordr/car.png" mode=""></image>
+				<view class="status-info-contet">
+					<view class="status-info-contet-txt" :class="{'status-info-contet-one': status.value != 2 }">{{ status.desc }}</view>
+					<view class="status-info-contet-time" v-if="status.value == 2">还剩 {{ autoConfirmTime || "--" }} 自动确认</view>
 				</view>
 			</view>
-			 -->
-			<!-- <view class="detail-info" v-if="(status.value == 2 || status.value == 4) && deliverList.length == 1">
-				<view class="detail-info-title">发货信息</view>
-				<view class="detail-info-content" v-for="(item, index) in deliverList" :key="index">
-					<view class="detail-info-content-desc">
-						<view>配送方式：</view>
-						<view>{{ item.companyName ? "快递发货" : "无需物流" }}</view>
-					</view>
-					<view class="detail-info-content-desc" v-if="item.companyName">
-						<view>快递公司：</view>
-						<view>{{ item.companyName || '-' }}</view>
-					</view>
-					<view class="detail-info-content-desc" v-if="item.deliveryFlowId">
-						<view>物流单号：</view>
-						<view class="copy" @click="copyDeliveryFlowId(item.deliveryFlowId)">复制</view>
-						<view>{{ item.deliveryFlowId || '-' }}</view>
-					</view>
-					<view class="detail-info-content-desc">
-						<view>发货时间：</view>
-						<view>{{ $parseTime(item.deliveryTime) }}</view>
-					</view>
-				</view>
-			</view> -->
 		</view>
-
-		<view class="footer-fixed" v-if="status.value == 2 || status.value == 3">
-			<view class="flex btn">
-				<view class="btn-right">
-					<text class="logistics" @click="getLogistics">查看物流</text>
-				</view>
-				<view class="btn-right">
-					<text class="confirm" @click="confirmOne" v-if="status.value == 2">确认收货</text>
+		
+		<!-- 地址 -->
+		<view class="address">
+			<view class="address-content">
+				<image src="../static/ordr/addr.png" mode="scaleToFill"></image>
+				<view class="address-content-txt">
+					<view class="name">{{ info.receiver }} <text> {{ info.tel }}</text></view>
+					<view class="city ells">{{ info.province }} {{ info.city }} {{ info.area }} {{ info.address }}</view>
 				</view>
 			</view>
 		</view>
-
-		<view class="footer-fixed" v-if="status.value == 0">
-			<view class="flex btn">
-				<view class="btn-right">
-					<text class="logisticsCancel" @click="cancelOrder">取消订单</text>
-				</view>
-				<view class="btn-right">
-					<text class="confirmPay" @click="payOrder">去支付</text>
+		
+		<!-- 商品 -->
+		<view class="goods">
+			<view class="goods-title">商品信息</view>
+			<view class="goods-item" v-for="(item, index) in list" :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">规格：{{ item.properties || '-' }}</view>
+						<view class="info-num-goods">共{{ item.goodsNum }}件</view>
+					</view>
 				</view>
 			</view>
+			<!-- 运费 -->
+			<view class="goods-freight">
+				<view class="freight-title">运费</view>
+				<view class="freight-price">￥{{ $numberFormat(info.freightAmt) }}</view>
+			</view>
+			<!-- 总价 -->
+			<view class="goods-total flex">
+				<view class="goods-total-price">应付：<text>￥{{ $numberFormat(info.payAmt) }}</text></view>
+			</view>
+		</view>
+		
+		<!-- 订单信息 -->
+		<view class="order">
+			<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" v-else>{{ info.orderId }}</view>
+			</view>
+			<view class="order-item flex">
+				<view class="order-item-title">下单时间</view>
+				<view class="order-item-content">{{ $parseTime(info.createdTime) }}</view>
+			</view>
+		</view>
+		
+		<!-- 发货信息 -->
+		<view class="order">
+			<view class="order-title">发货信息</view>
+			<view class="order-item flex">
+				<view class="order-item-title">配送方式</view>
+				<view class="order-item-content">无需物流</view>
+			</view>
+			<view class="order-item flex">
+				<view class="order-item-title">发货时间</view>
+				<view class="order-item-content">{{ $parseTime(info.createdTime) }}</view>
+			</view>
+		</view>
+		
+		<!-- 留言 -->
+		<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>
 
+		<!-- 操作按钮 -->
+		<view class="footer-fixed" v-if="status.value == 2 || status.value == 3">
+			<view class="btn flex">
+				<view class="btn-item flex logistics" v-if="status.value == 2 || status.value == 3"  @click="getLogistics"><text>查看物流</text></view>
+				<view class="btn-item flex pay" v-if="status.value == 2"  @click="confirmOne"><text>确认收货</text></view>
+				<view class="btn-item flex cancel" v-if="status.value == 0" @click="cancelOrder"><text>取消订单</text></view>
+				<view class="btn-item flex pay"v-if="status.value == 0"  @click="payOrder"><text>去支付</text></view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -327,310 +331,287 @@
 		}
 	}
 </script>
-
 <style lang="scss" scoped>
-	.footer-fixed {
-		position: fixed;
-		bottom: var(--window-bottom);
-		left: 0;
-		right: 0;
-		z-index: 11;
-		box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
-		background: #fff;
-
-		// 设置ios刘海屏底部横线安全区域
-		padding-bottom: constant(safe-area-inset-bottom);
-		padding-bottom: env(safe-area-inset-bottom);
-
-		.btn {
-			justify-content: flex-end;
-			padding: 20rpx 40rpx;
-
-			&-right {
-				display: flex;
-				align-items: center;
-				justify-content: right;
-
-				.value {
-					color: $uni-text-color;
-				}
-
-				@mixin btn {
-					width: 160rpx;
-					height: 60rpx;
+	.detail {
+		padding-bottom: 100rpx;
+	}
+	
+	// 订单状态
+	.status {
+		position: relative;
+		height: 216rpx;
+		
+		image {
+			width: 100%;
+			height: 100%;
+		}
+		
+		&-info {
+			position: absolute;
+			top: 0;
+			display: flex;
+			width: 100%;
+			height: 100%;
+			padding: 56rpx 0 0 34rpx;
+			
+			image {
+				width: 74rpx;
+				height: 62rpx;
+				margin: 18rpx 22rpx 0 0;
+			}
+			
+			&-contet {
+				&-txt {
+					font-size: 38rpx;
+					font-weight: 800;
+					color: #FFFFFF;
 					line-height: 60rpx;
-					border-radius: 8rpx;
-					text-align: center;
-					margin-left: 20rpx;
 				}
-
-				.logistics {
-					@include btn border: 1px solid #bbbbbb;
-					color: #414141;
-				}
-
-				.logisticsCancel {
-					@include btn border: 2rpx solid #666;
+				
+				&-one {
+					margin-top: 18rpx;
+					height: 62rpx;
+					line-height: 62rpx;
 				}
-
-				.confirm {
-					@include btn border: 2rpx solid rgba(236, 112, 9, 100);
-					color: rgba(236, 112, 9, 100);
-				}
-
-				.confirmPay {
-					@include btn background-color: $uni-bg-color;
-					border: 2rpx solid $uni-bg-color;
+				
+				&-time {
+					font-size: 30rpx;
+					font-weight: 500;
 					color: #FFFFFF;
+					line-height: 44rpx;
 				}
 			}
 		}
 	}
-</style>
-
-<style lang="scss" scoped>
-	.freight {
-		margin-bottom: 20rpx;
+	
+	// 地址
+	.address {
+		position: relative;
+		margin-top: -34rpx;
 		background-color: #fff;
-		// justify-content: space-between;
-		padding: 20rpx 28rpx;
-	}
-
-	.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;
+		border-radius: 34rpx 34rpx 0 0;
+		z-index: 10;
+		padding-top: 34rpx;
+		margin-bottom: 22rpx;
+		
+		&-content {
+			display: flex;
+			align-items: center;
+			border-top: 1px dashed rgb(254, 143, 62);
+			padding: 18rpx 0 36rpx 34rpx;
+			
+			image {
+				width: 30rpx;
+				height: 38rpx;
+				margin-right: 34rpx;
 			}
-
-			&-time {
-				line-height: 40rpx;
-				color: #b1b1b1;
-				float: right;
+			
+			&-txt {
+				flex: 1;
+				
+				.name {
+					font-size: 30rpx;
+					line-height: 30rpx;
+					margin-bottom: 20rpx;
+					
+					text {
+						padding: 0 8rpx;
+						font-size: 26rpx;
+						color: #414141;
+					}
+				}
+				
+				.city {
+					color: #999999;
+					line-height: 28rpx;
+				}
 			}
 		}
-
-		&-info {
+	}
+	
+	// 商品
+	.goods {
+		padding: 34rpx;
+		background-color: #fff;
+		margin-bottom: 22rpx;
+		
+		&-title {
+			font-size: 30rpx;
+			line-height: 30rpx;
+			margin-bottom: 22rpx;
+		}
+		
+		// 商品列表
+		&-item{
+			display: flex;
+			padding: 34rpx 32rpx 34rpx 22rpx;
+			box-shadow: 0px 0px 8px 0px rgba(26, 35, 113, 0.08);
+			border-radius: 4rpx;
 			margin-bottom: 20rpx;
-			padding: 20rpx 28rpx;
-			background-color: #FFFFFF;
-
-			&-title {
-				line-height: 40rpx;
-				font-weight: bold;
+			
+			image {
+				width: 176rpx;
+				height: 176rpx;
+				border-radius: 12rpx;
+				margin-right: 22rpx;
 			}
-
-			&-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 {
+						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);
+		}
+		
+		&-item:last-child {
+			margin-bottom: 0;
+		}
+		
+		// 运费
+		&-freight {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding-bottom: 18rpx;
+			border-bottom: 1px solid #eee;
+			margin-bottom: 20rpx;
+			
+			&-title {
+				line-height: 28rpx;
+				color: #999;
 			}
-
-			.border:last-child {
-				border: none;
+			
+			&-price {
+				line-height: 28rpx;
+			}
+		}
+		
+		// 总价
+		&-total {
+			justify-content: flex-end;
+			
+			&-price {
+				font-size: 30rpx;
+				color: #F24E4E;
 			}
 		}
-
-
 	}
-
-	.detail-btn {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
+	
+	// 订单信息
+	.order {
+		padding: 34rpx;
+		background-color: #fff;
+		margin-bottom: 22rpx;
+		
+		&-title {
+			font-size: 30rpx;
+			line-height: 30rpx;
+			margin-bottom: 22rpx;
+		}
+		
+		&-item {
+			justify-content: space-between;
+			margin-bottom: 28rpx;
+			
+			&-title {
+				color: #999999;
+				line-height: 28rpx;
+			}
+			
+			&-content {
+				
+				text {
+					height: 30rpx;
+					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);
+				}
+			}
+		}
+		
+		&-item:last-child {
+			margin-bottom: 0;
+		}
+	}
+	
+	// 操作按钮
+	.footer-fixed {
 		position: fixed;
 		bottom: var(--window-bottom);
 		left: 0;
 		right: 0;
-		// min-height: 120rpx;
 		z-index: 11;
 		box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
 		background: #fff;
-		// margin-bottom: 40rpx;
-
 		// 设置ios刘海屏底部横线安全区域
 		padding-bottom: constant(safe-area-inset-bottom);
 		padding-bottom: env(safe-area-inset-bottom);
-		box-shadow: 0 -5rpx 5rpx #ececec;
-		padding: 20rpx 20rpx;
-
-		text {
-
-			display: block;
-			box-sizing: border-box;
-			margin: 0 0 0 40rpx;
-			width: 160rpx;
-			height: 60rpx;
-			line-height: 60rpx;
-			text-align: center;
-			font-size: 24rpx;
-			border-radius: 8rpx;
-			border: none;
-		}
-
-		text:first-child {
-			background-color: #fff;
-			line-height: 56rpx;
-			border: 2rpx solid $uni-bg-color;
-		}
-
-		text:last-child {
-			background-color: $uni-bg-color;
-			color: #FFFFFF;
+	
+		.btn {
+			justify-content: flex-end;
+			padding: 20rpx 34rpx;
+			
+			&-item {
+				width: 200rpx;
+				height: 66rpx;
+				font-size: 30rpx;
+				border-radius: 33rpx;
+				margin-left: 44rpx;
+					
+				text {
+					line-height: 30rpx;
+				}
+			}
+			
+			.logistics {
+				border: 1px solid #F9822C;
+				color: #F9822C;
+			}
+			
+			.detail {
+				background-color: rgb(249, 130, 44);
+				color: #FFFFFF;
+			}
+			
+			.cancel {
+				border: 1px solid #c4c6c9;
+				color: #c4c6c9;
+			}
+			
+			.pay {
+				background-color: #5ac725;
+				color: #fff;
+			}
+			
+			&-item:first-child {
+				margin-left: 0;
+			}
 		}
 	}
 </style>

packageGoods/order/index.vue

@@ -1,70 +1,55 @@
 <template>
 	<view>
-		<u-navbar title="提货订单" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
+		<u-navbar title="我的订单" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
 		<view class="order">
+			<!-- 订单导航 -->
 			<view class="flex order-state-search">
-				<u-tabs @change="changeTab" :scrollable="false" :list="statusArr" lineWidth="30" lineHeight="1"
+				<u-tabs @change="changeTab" :scrollable="false" :list="statusArr" lineWidth="20" lineHeight="4"
 					lineColor="#E96737" :activeStyle="{
-										color: '#E96737',
-										transform: 'scale(1)',
+										color: '#333',
+										transform: 'scale(1.1)',
 										width: '50px',
 										
 									}" :inactiveStyle="{
-										color: '#333',
+										color: '#666666',
 										transform: 'scale(1)',
 										width: '50px'
-									}" itemStyle="padding-left: 11px; padding-right: 11px; height: 44px;text-align: center;">
+									}" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;text-align: center;">
 				</u-tabs>
 				<view class="test"></view>
 			</view>
+			<!-- 订单列表 -->
 			<view class="order-list">
-				<view class="order-list-data">
-					<view class="order-list-data-item" v-for="(item, index) in list" :key="index">
-						<view class="order-list-data-item__info">
-							<view class="flex order-list-data-item__info__title">
-								<view class="number">
-									<text>订单编号：</text>
-									<text>{{ item.orderId }}</text>
-								</view>
-								<view class="success" v-if="item.status.value == 1">{{ item.status.desc }}</view>
-								<view v-else>{{ item.status.desc }}</view>
-							</view>
-							<navigator :url="`/packageGoods/order/detail?id=${ item.orderId }`" hover-class="navigator-hover">
-								<view class="flex order-list-data-item__info__detail"
-									v-for="(items, index) in item.items" :key="index">
-									<view class="order-list-data-item__info__detail__left">
-										<view class="img">
-											<image class="img" :src="items.picUrl" mode="aspectFill">
-											</image>
-										</view>
-									</view>
-									<view class="order-list-data-item__info__detail__right">
-										<view class="ells title">{{ items.title }}</view>
-										<view class="sku" v-if="items.properties">规格：{{ items.properties }}</view>
-										<view class="num">数量：{{ items.goodsNum }}</view>
-									</view>
-								</view>
-							</navigator>
-
-							<view class="order-list-data-item__info__total">
-								<view>共{{ item.orderNum }}个商品</view>
-								<view class="money">
-									<text v-if="item.status.value == 0">应付：</text>
-									<text v-else>实付：</text>
-									<text>￥{{ $numberFormat(item.payAmt) }}</text>
+				<view class="order-list-item" v-for="(item, index) in list" :key="index">
+					<view class="order-list-item__state">
+						<text class="success">{{ item.status && item.status.desc }}</text>
+					</view>
+					<view class="order-list-item__goods">
+						<view class="order-list-item__goods-item" v-for="(items, indexs) in item.items" :key="indexs">
+							<image :src="items.picUrl" mode="aspectFit"></image>
+							<view class="info">
+								<view class="info-title ells">{{ items.title }}</view>
+								<view class="info-num flex">
+									<view class="info-num-price">￥{{ $numberFormat(85) }}</view>
+									<view class="info-num-goods">x{{ items.goodsNum }}</view>
 								</view>
 							</view>
-
-							<view class="order-list-data-item__info__btn" v-if="item.status.value == 0">
-								<text @click="cancelOrder(item.orderId)" style="border-color: #666;">取消订单</text>
-								<text @click="payOrder(item)">去支付</text>
-							</view>
 						</view>
 					</view>
+					<view class="order-list-item-price flex">
+						<view class="order-list-item-price__num">共计<text>{{ item.orderNum }}</text>商品，</view>
+						<view class="order-list-item-price__total">总金额：<text>￥{{ $numberFormat(item.payAmt) }}</text></view>
+					</view>
+					<view class="order-list-item-btn flex">
+						<view class="order-list-item-btn-item flex logistics" v-if="item.status.value == 2 || item.status.value == 3" @click="toLogistics(item)"><text>查看物流</text></view>
+						<view class="order-list-item-btn-item flex cancel" v-if="item.status.value == 0" @click="cancelOrder(item.orderId)"><text>取消订单</text></view>
+						<view class="order-list-item-btn-item flex detail" @click="toDetail(item)"><text>查看详情</text></view>
+						<view class="order-list-item-btn-item flex pay"v-if="item.status.value == 0"  @click="payOrder(item)"><text>去支付</text></view>
+					</view>
 				</view>
-				<view class="flex empty" v-if="!list.length && !loading">
-					<u-empty text="订单为空" mode="order" />
-				</view>
+			</view>
+			<view class="flex empty" v-if="!list.length && !loading">
+				<u-empty text="订单为空" mode="order" />
 			</view>
 		</view>
 	</view>
@@ -152,6 +137,19 @@
 					}
 				})
 			},
+			
+			toDetail(item) {
+				uni.navigateTo({
+					url: `/packageGoods/order/detail?id=${ item.orderId }`
+				})
+			},
+			
+			// 查看物流
+			toLogistics(item) {
+				uni.navigateTo({
+					url: `/packageGoods/order/logistics?id=${ item.orderId }`
+				});
+			},
 
 			payOrder(item) {
 				let _this = this
@@ -229,7 +227,8 @@
 <style lang="scss" scoped>
 	.order {
 		padding-bottom: 40rpx;
-
+		
+		// 订单导航
 		&-state-search {
 			position: relative;
 			width: 100%;
@@ -239,134 +238,145 @@
 			box-shadow: 0 5rpx 5rpx #ececec;
 		}
 
+		// 订单列表
 		&-list {
-			background-color: #F8F8F8;
-			margin: 0rpx 10rpx 0;
-			padding-top: 100rpx;
-
-			&-data {
-
-				navigator {
-					margin-bottom: 10rpx;
-				}
-
-				navigator:last-child {
-					margin-bottom: 0;
-				}
-
-				&-item {
-					margin-bottom: 10rpx;
-					padding: 20rpx 30rpx;
-					background-color: #FFFFFF;
-					justify-content: space-between;
-					background-color: #FFFFFF;
+			margin: 0rpx 34rpx 0;
+			padding-top: 110rpx;
+
+			&-item {
+				background: #FFFFFF;
+				border-radius: 6rpx;
+				margin-bottom: 22rpx;
+				padding: 20rpx 34rpx;
+				
+				// 订单状态
+				&__state {
+					font-size: 30rpx;
+					line-height: 30rpx;
+					margin-bottom: 22rpx;
+					
+					.success {
+						color: #FF1818;
+					}
 				}
-
-				&-item {
-					&__info {
-
-						&__title {
-							justify-content: space-between;
-
-							.number {
-								line-height: 40rpx;
-							}
-
-							.success {
-								color: $uni-text-color;
-							}
+				
+				// 商品列表
+				&__goods {
+					margin-bottom: 20rpx;
+					
+					&-item{
+						display: flex;
+						padding: 22rpx;
+						box-shadow: 0px 0px 8px 0px rgba(26, 35, 113, 0.08);
+						border-radius: 4rpx;
+						margin-bottom: 20rpx;
+						
+						image {
+							width: 220rpx;
+							height: 200rpx;
+							border-radius: 12rpx;
+							margin-right: 24rpx;
 						}
-
-						&__detail {
-							padding: 20rpx 0;
+						
+						.info {
+							display: flex;
+							flex-direction: column;
 							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;
-									}
-								}
+							flex: 1;
+							padding-bottom: 34rpx;
+							
+							&-title {
+								font-weight: bold;
+								line-height: 40rpx;
 							}
-
-							&__right {
-								flex: 1;
-								display: flex;
-								height: 170rpx;
-								flex-direction: column;
+							
+							&-num {
 								justify-content: space-between;
-								align-items: flex-start;
-								font-size: 30rpx;
 								
-								.title{
-									font-weight: bold;
+								&-price {
+									font-size: 24rpx;
 								}
-
-								.sku {
-									color: #848484;
+								
+								&-goods {
+									color: #999999;
 								}
 							}
-
 						}
-
-						&__detail:last-child {
-							border: none;
+					}
+					
+					&-item:last-child {
+						margin-bottom: 0;
+					}
+				}
+				
+				// 订单价格
+				&-price {
+					justify-content: flex-end;
+					padding-bottom: 18rpx;
+					border-bottom: 1px solid #E5E5E5;
+					margin-bottom: 22rpx;
+					
+					&__num {
+						text {
+							color: #F9822C;
 						}
-
-						&__total {
-							display: flex;
-							align-items: center;
-							justify-content: flex-end;
-							padding: 10rpx 0;
-
-							.money {
-								font-weight: bold;
-								margin-left: 54rpx;
-							}
+					}
+					
+					&__total {
+						text {
+							color: #F24E4E;
 						}
-
-						&__btn {
-							display: flex;
-							align-items: center;
-							justify-content: flex-end;
-							padding-top: 10rpx;
-							border-top: 1px solid rgba(236, 236, 236, 100);
-
-							text {
-								display: block;
-								box-sizing: border-box;
-								margin: 0 0 0 40rpx;
-								width: 160rpx;
-								height: 60rpx;
-								line-height: 60rpx;
-								text-align: center;
-								font-size: 24rpx;
-								border-radius: 8rpx;
-								border: none;
-							}
-
-							text:first-child {
-								background-color: #fff;
-								line-height: 56rpx;
-								border: 2rpx solid $uni-bg-color;
-							}
-
-							text:last-child {
-								background-color: $uni-bg-color;
-								color: #FFFFFF;
-							}
+					}
+				}
+				
+				// 操作按钮
+				&-btn {
+					justify-content: flex-end;
+					
+					&-item {
+						width: 200rpx;
+						height: 66rpx;
+						font-size: 30rpx;
+						border-radius: 33rpx;
+						margin-left: 44rpx;
+							
+						text {
+							line-height: 30rpx;
 						}
 					}
+					
+					.logistics {
+						border: 1px solid #F9822C;
+						color: #F9822C;
+					}
+					
+					.detail {
+						background-color: rgb(249, 130, 44);
+						color: #FFFFFF;
+					}
+					
+					.cancel {
+						border: 1px solid #c4c6c9;
+						color: #c4c6c9;
+					}
+					
+					.pay {
+						background-color: #5ac725;
+						color: #fff;
+					}
+					
+					&-item:first-child {
+						margin-left: 0;
+					}
 				}
 			}
+			
+			&-item:last-child {
+				margin-bottom: 0;
+			}
 		}
 
+		// 空状态
 		.empty {
 			height: 60vh;
 		}

pages/index/index.vue

@@ -761,6 +761,7 @@
 				height: 90%;
 				border-radius: 50%;
 				overflow: hidden;
+				box-shadow: 2px 2px 10px rgba(255, 189, 24, .8), -2px -2px 10px rgba(255, 189, 24, .8), 2px -2px 10px rgba(255, 189, 24, .8), -2px 2px 10px rgba(255, 189, 24, .8);
 				
 				.btn {
 					width: 310rpx;

pages/user/index.vue

@@ -44,7 +44,7 @@
 		<!-- 操作项 -->
 		<view class="action">
 			<u-cell-group :border="false">
-				<u-cell icon="order" title="提货订单" :isLink="true" @click="toOrder"></u-cell>
+				<u-cell icon="order" title="我的订单" :isLink="true" @click="toOrder"></u-cell>
 				<u-cell icon="map" title="我的地址" :isLink="true" @click="toAddress"></u-cell>
 				<u-cell icon="kefu-ermai" title="联系我们" :isLink="true" @click="contactService"></u-cell>
 				<u-cell icon="info-circle" title="关于我们" :border="false" :isLink="true" :url="'/packageOther/about/index'">