提交订单修改

packageGoods/order/settlement.vue

@@ -3,6 +3,7 @@
 		<u-navbar title="提交订单" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
 		<view class="settlement">
 			<view class="settlement-address">
+				<!-- 选择地址、获取微信地址 -->
 				<view class="flex settlement-address-top" v-if="info.addr !== null">
 					<view class="settlement-address-top__left">配送地址</view>
 					<view class="flex settlement-address-top__right" @click="toAddress">
@@ -17,14 +18,13 @@
 						<u-icon name="arrow-right" size="18" color="#237ED4 100%"></u-icon>
 					</view>
 				</view>
+				<!-- 收货人、地址 -->
 				<view class="settlement-address-desc" v-if="info.addr !== null">
+					<view class="settlement-address-desc__item">{{ addr.receiver || '-' }}<text>{{ addr.mobile || '-' }}</text></view>
 					<view class="settlement-address-desc__item">
-						{{ `${ addr.province || '-' }-${ addr.city || '-' }-${ addr.area || '-' }` }}
-						{{ addr.addr || '-' }}
-					</view>
-					<view class="settlement-address-desc__item">{{ addr.receiver || '-' }} {{ addr.mobile || '-' }}
-					</view>
+						{{ `${ addr.province || '-' } ${ addr.city || '-' } ${ addr.area || '-' }` }} {{ addr.addr || '-' }}</view>
 				</view>
+				<!-- 地址form -->
 				<view class="settlement-address-form" v-else>
 					<view class="address-add">
 						<u--form labelPosition="left" ref="form" labelWidth="90">
@@ -51,46 +51,47 @@
 					</view>
 				</view>
 			</view>
+			<!-- 商品 -->
 			<view class="settlement-goods">
-				<view class="flex settlement-goods__detail" v-for="(item, index) in list" :key="index">
-					<view class="settlement-goods__detail__left">
-						<view class="img">
-							<image class="img" :src="item.picUrl" mode="aspectFill">
-							</image>
+				<view class="settlement-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 ells-one">规格：{{ item.properties || '-' }}</view>
+							<view class="info-num-goods">数量：{{ item.goodsNum }}</view>
 						</view>
 					</view>
-					<view class="settlement-goods__detail__right">
-						<view class="ells title">{{ item.title }}</view>
-						<view class="sku" v-if="item.properties">规格：{{ item.properties }}</view>
-						<view class="">数量：{{ item.goodsNum }}</view>
-					</view>
 				</view>
 			</view>
-
-			<view class="flex settlement-freight">
-				<text style="margin-right: 30rpx;">留言</text>
+			
+			<view class="settlement-freight flex">
+				<text>留言</text>
 				<u-input v-model="info.memo" placeholder="请输入留言" clearable  inputAlign="right" border="none" />
 			</view>
-			<view class="flex settlement-freight">
+			<view class="settlement-freight flex">
 				<text>运费</text>
 				<text>￥{{ $numberFormat(info.freightAmt) }}</text>
 			</view>
 		</view>
 		
 		<view class="footer-fixed">
-			<view v-if="info.freightType == 2" class="footer-fixed-color"><icon type="warn"  style="vertical-align: bottom; margin-right: 20rpx; " size="20"/><text>当前收货地址暂不支持发货</text></view>	
-			<view class="flex btn">
-				<view class="btn-left">
-					<view class="money">
-						<text>合计：</text>
-						<text class="value">￥{{ $numberFormat(info.payAmt) }}</text>
+			<view class="content">
+				<view class="content-not flex" v-if="info.freightType == 2">
+					<icon type="warn"  style="vertical-align: bottom; margin-right: 20rpx; " size="20"/>
+					<text>当前收货地址暂不支持发货</text>
+				</view>	
+				<view class="content-btn flex">
+					<view class="content-btn-left">
+						<view class="money">
+							<text>合计：</text>
+							<text class="value">￥{{ $numberFormat(info.payAmt) }}</text>
+						</view>
+					</view>
+					<view class="content-btn-right">
+						<text class="save not" v-if="info.freightType == 2">提交</text>
+						<text class="save" @click="save" v-else>提交</text>
 					</view>
-				</view>
-				<view class="btn-rightTwo" v-if="info.freightType == 2">
-					<text class="save" >提交</text>
-				</view>
-				<view class="btn-right" v-else>
-					<text class="save" @click="save">提交</text>
 				</view>
 			</view>
 		</view>
@@ -360,17 +361,19 @@
 
 <style lang="scss" scoped>
 	.settlement {
-		margin: 10rpx;
+		margin: 34rpx;
 		padding-bottom: 100rpx;
 
 		&-address {
 			background-color: #fff;
-			padding: 0 16rpx 24rpx;
-			margin-bottom: 20rpx;
+			padding: 34rpx;
+			margin-bottom: 34rpx;
+			border-radius: 22rpx;
 
+			// 选择地址、获取微信地址
 			&-top {
 				justify-content: space-between;
-				padding: 24rpx 0;
+				padding: 0 0 34rpx;
 				border-bottom: 1px solid rgba(236, 236, 236, 100);
 
 				&__left {
@@ -382,14 +385,29 @@
 					color: rgba(35, 126, 212, 100);
 				}
 			}
-
+			
+			// 收货人、地址
 			&-desc {
+				margin-top: 34rpx;
+				
 				&__item {
-					line-height: 40rpx;
-					margin-top: 16rpx;
+					line-height: 28rpx;
+					margin-bottom: 20rpx;
+					
+					text {
+						padding-left: 8rpx;
+						font-size: 24rpx;
+						color: #666;
+					}
+				}
+				
+				&__item:last-child {
+					margin-bottom: 0;
+					color: #999;
 				}
 			}
-
+			
+			// 地址form
 			&-form {
 				.save-btn {
 					padding: 10rpx 20rpx;
@@ -406,61 +424,64 @@
 				}
 			}
 		}
-
+		
+		// 商品
 		&-goods {
-			background-color: #fff;
-			padding: 0 40rpx;
-			margin-bottom: 20rpx;
-
-			&__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;
-						}
-					}
+			// 商品列表
+			&-item{
+				display: flex;
+				padding: 34rpx 32rpx 34rpx 22rpx;
+				box-shadow: 0px 0px 8px 0px rgba(26, 35, 113, 0.08);
+				background-color: #fff;
+				border-radius: 22rpx;
+				margin-bottom: 34rpx;
+				
+				image {
+					width: 176rpx;
+					height: 176rpx;
+					border-radius: 12rpx;
+					margin-right: 22rpx;
 				}
-
-				&__right {
-					flex: 1;
+				
+				.info {
 					display: flex;
-					height: 170rpx;
 					flex-direction: column;
 					justify-content: space-between;
-					align-items: flex-start;
-					font-size: 30rpx;
-
-					.title {
+					flex: 1;
+					padding: 8rpx 0;
+					
+					&-title {
+						font-size: 30rpx;
 						font-weight: bold;
+						line-height: 40rpx;
 					}
-
-					.sku {
-						color: #848484;
+					
+					&-num {
+						justify-content: space-between;
+						
+						&-sku {
+							flex: 1;
+							color: #666666;
+							font-size: 26rpx;
+						}
+						
+						&-goods {
+							color: #666666;
+							font-size: 26rpx;
+						}
 					}
 				}
-
-			}
-
-			&__detail:last-child {
-				border: none;
 			}
 		}
 
+		// 留言、运费
 		&-freight {
-			margin-bottom: 20rpx;
+			font-size: 30rpx;
+			margin-bottom: 34rpx;
 			background-color: #fff;
 			justify-content: space-between;
-			padding: 20rpx 16rpx;
+			padding: 34rpx;
+			border-radius: 22rpx;
 		}
 	}
 
@@ -469,61 +490,53 @@
 		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);
-		&-color {
-			font-size: 30rpx;
-			color: $uni-text-color;
-			margin: 10rpx 40rpx;
-		}
-		.btn {
-			justify-content: space-between;
-			padding: 20rpx 40rpx;
 
-			&-left {
-				.value {
-					color: $uni-text-color;
-				}
+		.content {
+			padding: 20rpx 40rpx;
+			font-size: 30rpx;
+			// 不发货提示
+			&-not {
+				justify-content: flex-start;
+				font-size: 30rpx;
+				color: #FF4208;
+				margin: 0 0 30rpx;
 			}
-
-			&-right {
-				display: flex;
-				align-items: center;
-				justify-content: flex-end;
-
-				.save {
-					width: 190rpx;
-					height: 60rpx;
-					line-height: 60rpx;
-					border-radius: 8rpx;
-					text-align: center;
-					margin-left: 40rpx;
-					background-color: rgba(236, 112, 9, 100);
-					color: rgba(255, 255, 255, 100);
+			// 提交按钮
+			&-btn {
+				justify-content: space-between;
+				
+				&-left {
+					.value {
+						color: #FF4208;
+					}
 				}
-			}
-			&-rightTwo {
-				display: flex;
-				align-items: center;
-				justify-content: flex-end;
-			
-				.save {
-					width: 190rpx;
-					height: 60rpx;
-					line-height: 60rpx;
-					border-radius: 8rpx;
-					text-align: center;
-					margin-left: 40rpx;
-					background-color: #6c6c6c;
-					color: #ffffff;
+				
+				&-right {
+					display: flex;
+					align-items: center;
+					justify-content: flex-end;
+				
+					.save {
+						width: 210rpx;
+						height: 82rpx;
+						line-height: 82rpx;
+						background: #F9822C;
+						border-radius: 40rpx;
+						text-align: center;
+						color: #fff;
+					}
+					
+					.not {
+						background-color: #6c6c6c;
+					}
 				}
+			
 			}
 		}
 	}