浏览代码

样式修改

lilei 4 月之前
父节点
当前提交
293d5745e3
共有 3 个文件被更改,包括 79 次插入50 次删除
  1. 29 17
      pages/shelfOrder/listComponent.vue
  2. 41 25
      pages/shelfOrder/orderDetail.vue
  3. 9 8
      pages/shelfOrder/shelfOrder.vue

+ 29 - 17
pages/shelfOrder/listComponent.vue

@@ -4,22 +4,30 @@
 			<view class="sales-list-main">
 				<view class="sales-list-item" v-for="(item, index) in listData" :key="item.id" @click="getDetail(item)">
 					<view class="list-item-tit align_center flex justify_between">
-						<view class="buyer flex">
-							{{item.shelfName||'--'}}
+						<view class="buyer flex ellipsis-one">
+							{{item.orderBillNo||'--'}}
 						</view>
 						<view>
-							<text :style="{color:item.billState=='CLOSE'?'#ff5500':'#999'}">{{item.billStateDictValue}}</text> 
-							<u-icon name="arrow-right" color="#969da3" size="28"></u-icon>
+							<text :style="{color:item.billState=='CLOSE'?'#ff0000':'#00aa00'}">{{item.billStateDictValue}}</text> 
+						</view>
+					</view>
+					<view class="list-item-stit align_center flex justify_between">
+						<view class="flex">
+							{{item.shelfName||'--'}}
 						</view>
 					</view>
 					<view class="detail-list">
-						<view class="flex align_center justify_between" v-for="de in item.orderBillDetailApiEntityList">
+						<view 
+						class="flex align_center justify_between" 
+						v-for="de in item.orderBillDetailApiEntityList"
+						:key="de.id"
+						>
 							<view class="limgs">
 								<u-image :src="de.images?de.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
 							</view>
 							<view class="pinfo">
-								<view class="pname">{{de.productCode}}</view>
 								<view>{{de.productName}}</view>
+								<view class="pname">{{de.productCode}}</view>
 							</view>
 							<view class="prices">
 								<view>¥{{de.settlePrice}}</view>
@@ -173,41 +181,45 @@
 						opacity: 0.6;
 					}
 					.list-item-tit{
-						padding-bottom: 18upx;
-						padding-top: 10upx;
-						border-bottom: 1px solid #e4e7ed;
+						padding: 10rpx 0 0;
 						.buyer{
 							flex-grow: 1;
-							font-size: 28upx;
 							font-weight: bold;
+							color: #666;
 						}
 						>view{
 							&:last-child{
-								width: 150upx;
 								text-align: right;
-								color: #666;
-								font-size: 26upx;
+								font-size: 24upx;
 							}
 						}
 					}
+					.list-item-stit{
+						padding: 10rpx 0 15rpx;
+						border-bottom: 1px solid #eee;
+						color: #666;
+					}
 					.detail-list{
 						> view{
 							padding: 20upx 0;
 							border-bottom: 1rpx solid #f8f8f8;
 						}
 						.pinfo{
-							padding: 0 15rpx;
+							padding: 0 20rpx;
+							width: 50%;
+							flex-grow: 1;
 							.pname{
+								margin-top: 6rpx;
 								font-weight: bold;
-								margin-bottom: 6rpx;
+								color: #666;
 							}
 						}
 						.prices{
-							width: 20%;
+							padding-left: 10rpx;
 							text{
 								font-size: 20rpx;
 								color: #999;
-								margin-right: 20rpx;
+								margin-right: 6rpx;
 							}
 							text-align: right;
 							> view{

+ 41 - 25
pages/shelfOrder/orderDetail.vue

@@ -34,16 +34,16 @@
 				<view>{{ detailData&&detailData.vehicleModel || '--' }}</view>
 			</view>
 		</view>
+		<view class="countData flex align_center" v-if="countDetail">
+			<view>总款数:<text>{{countDetail.productCategory}}</text></view>
+			<view>总数量:<text>{{countDetail.totalQty}}</text></view>
+			<view>总结算金额:<text>¥{{countDetail.settleAmount}}</text></view>
+		</view>
 		<view class="shelfOrderDetail-info">
 			<view class="list-item-tit flex align_center">
 				<view class="u-line" :style="{background: $config('primaryColor')}"></view>
 				<view class="buyer">产品列表</view>
 			</view>
-			<view class="countData flex align_center" v-if="countDetail">
-				<view>总款数:<text>{{countDetail.productCategory}}</text>;</view>
-				<view>总数量:<text>{{countDetail.totalQty}}</text>;</view>
-				<view>总结算金额:<text>¥{{countDetail.settleAmount}}</text>;</view>
-			</view>
 			<view 
 			class="panel-box flex justify_between" 
 			v-for="item in detailList" :key="item.id">
@@ -54,8 +54,8 @@
 					<view><text class="pcode">{{item.shelfPlaceCode}}</text>{{item.productCode || '--'}}</view>
 					<view class="padding_7">{{item.productName || '--'}}</view>
 					<view class="prices flex align_center justify_between">
-						<view><text class="p1">¥{{item.settlePrice}}</text><text class="p2">X</text>{{item.totalQty}}{{item.unit}}</view>
-						<view>¥{{item.settleAmount}}</view>
+						<view><text>¥{{item.settlePrice}}</text><text class="p2">X</text>{{item.totalQty}} {{item.unit}}</view>
+						<view class="p1">¥{{item.settleAmount}}</view>
 					</view>
 				</view>
 			</view>
@@ -95,6 +95,7 @@
 <style lang="scss">
 	.shelfOrderDetail-wrap{
 		width: 100%;
+		padding-bottom: 50rpx;
 		.panel-box {
 			padding: 20upx 20upx;
 			display: flex;
@@ -118,24 +119,25 @@
 					padding-top: 15rpx;
 					.p1{
 						color:#ff0000;
-						margin-right: 30rpx;
 					}
 					.p2{
 						color: #999;
 						font-size: 20rpx;
 						margin-right: 10rpx;
+						margin-left: 30rpx;
 					}
 				}
 			}
-			border-bottom: 1px solid #e4e7ed;
+			border-bottom: 1px solid #eee;
 			&:last-child{
 				border: 0;
 			}
 		}
 		.list-item-tit{
-			padding-bottom: 18upx;
+			padding-bottom: 15upx;
 			padding-top: 10upx;
 			border-bottom: 1px solid #e4e7ed;
+			margin-bottom: 10rpx;
 			.u-line{
 				display: inline-block;
 				width: 6upx;
@@ -157,28 +159,42 @@
 			box-shadow: 3upx 2upx 6upx #eee;
 			margin: 20upx;
 			.info-item{
-				border-bottom: 1px solid #e4e7ed;
-				padding: 20upx 0;
+				padding: 10upx 0;
 				.info-name{
-					color: #999;
-					padding-right: 20rpx;
-					width: 150rpx;
+					color: #666;
+					padding-right: 30rpx;
+					width: 160rpx;
+					text-align: right;
 				}
-				&:last-child{
-					border: 0;
+				> view{
+					&:last-child{
+						flex-grow: 1;
+						width: 80%;
+					}
 				}
 			}
-			.countData{
-				background: #fff;
+		}
+		.countData{
+			display: flex;
+			background: #fff;
+			flex-wrap: wrap;
+			font-size: 26rpx;
+			margin: 0 20rpx;
+			padding: 10px;
+			border-radius: 20upx;
+			box-shadow: 3upx 2upx 6upx #eee;
+			> view{
+				width: 100%;
 				display: flex;
-				padding: 15upx;
-				border-radius: 15rpx;
+				justify-content: space-between;
+				color: #666;
+				padding: 2px 0;
 				text{
-					color: #ff5500;
+					color: #333;
+				}
+				&:last-child{
+					text{color: #ff5500;}
 				}
-				font-size: 24rpx;
-				border-bottom: 1px solid #e4e7ed;
-				padding: 20upx 0;
 			}
 		}
 	}

+ 9 - 8
pages/shelfOrder/shelfOrder.vue

@@ -8,9 +8,9 @@
 				<u-icon name="arrow-right"></u-icon>
 			</view>
 			<view class="countData">
-				<view>总款数:<text>{{countData&&countData.productCategory||0}}</text></view>
-				<view>总数量:<text>{{countData&&countData.totalQty||0}}</text></view>
-				<view>总结算金额:<text>¥{{countData&&countData.settleAmount||0}}</text></view>
+				<view>总款数:<text>{{countData&&countData.productCategory||0}}</text></view>
+				<view>总数量:<text>{{countData&&countData.totalQty||0}}</text></view>
+				<view>总结算金额:<text>¥{{countData&&countData.settleAmount||0}}</text></view>
 			</view>
 		</view>
 		<!-- 货架列表 -->
@@ -155,18 +155,19 @@
 			}
 			.countData{
 				background: #fff;
-				margin: 20upx 20upx 0;
 				display: flex;
-				padding: 15upx;
-				border-radius: 15rpx;
+				padding: 0 20rpx 15rpx;
 				text{
 					color: #ff5500;
 				}
-				font-size: 24rpx;
+				font-size: 26rpx;
+				> view{
+					padding-right: 10px;
+				}
 			}
 		}
 		.list-box{
-			padding: 0 25upx;
+			padding: 0 20upx;
 		}
 	}
 </style>