发货记录

pages/news3/setOutRecords.vue

@@ -1,5 +1,16 @@
 <template>
-	<view class="updatePrice" style="padding-bottom: 120rpx;">
+	<view style="padding-bottom: 120rpx;">
+		<!-- 分类列表 -->
+		<view class="container">
+			<view class="classify-list">
+				<view class="list" v-for="(item,index) in classList" :class="{'action':classifyShow==item.id}"
+					@click="onClassify(item,index)" :key="index">
+					<text>{{item.name}}</text>
+					<text class="line" v-show="classifyShow==item.id"></text>
+				</view>
+			</view>
+		</view>
+		<view class="updatePrice" style="padding: 0 20upx;">
 			<view class="head-info">
 				<!-- 搜索 -->
 				<view class="searchContent">
@@ -8,12 +19,12 @@
 					<u-icon name="search" class="search" @click="getOrderList(1)"></u-icon>
 				</view>
 			</view>
-		<view class="bg">
+			<!-- 		<view class="bg">
 				<image :src="$picUrl+'/static/news3/bg.png'" mode="widthFix"></image>
 				<view class="text">
 					只属于非商城订单
 				</view>
-		</view>
+			</view> -->
 			<view style="padding-bottom: 120upx;" v-if="goodsList.length>0">
 				<view class="dispatchContent" v-for="(item, index) in goodsList" :key="index">
 					<view class="orderNum">
@@ -55,6 +66,7 @@
 				<view class="btn" @click="manualEntry">手动录入</view>
 			</view>
 		</view>
+	</view>
 </template>
 
 <script>
@@ -66,13 +78,21 @@
 				goodsList: [],
 				total: 1,
 				pageNum: 1,
+				classifyShow: 1,
+				classList: [{
+					id: 1,
+					name: '商城订单',
+				}, {
+					id: 2,
+					name: '非商城订单',
+				}],
 			}
 		},
 		onLoad(o) {
-			this.getOrderList(1)
+			this.getList(1)
 			uni.$on('refreshData', () => {
 				// 调用列表接口
-				this.getOrderList(1)
+				this.getList(1)
 			})
 		},
 		//页面卸载
@@ -94,6 +114,16 @@
 			}
 		},
 		methods: {
+			onClassify(item, index) {
+				this.classifyShow = item.id;
+				this.pageNum = 1;
+				this.goodsList = []
+				if(index==1){
+					this.getOrderList(1);
+				}else{
+					this.getList(1)
+				}
+			},
 			// 手动录入
 			manualEntry() {
 				uni.navigateTo({
@@ -106,6 +136,30 @@
 					url: "/pages/news3/seasoningCondimentsRecord?item=" + JSON.stringify(e)
 				})
 			},
+			async getList(type) {
+				uni.showLoading({
+					title: "加载中"
+				})
+				if (type == 1) {
+					this.pageNum = 1;
+					this.goodsList = []
+				}
+				let {
+					status,
+					message,
+					data
+				} = await newFunApi.shopOrderList({
+					dataType: 'complete',
+					page: this.pageNum,
+					searchValue: this.searchText,
+				});
+				if (status == 200) {
+					uni.hideLoading();
+					this.total = data.list.total
+					this.goodsList = this.goodsList.concat(data.list.data)
+					this.total = data.list.total
+				}
+			},
 			/**
 			 * 获取商品列表
 			 */
@@ -126,16 +180,11 @@
 					search: this.searchText
 				});
 				if (status == 200) {
+					uni.hideLoading();
 					this.goodsList = this.goodsList.concat(data.data)
 					this.total = data.total
-					console.log(this.goodsList)
 				}
 			},
-			onClassify(index) {
-				this.pageNum = 1;
-				this.goodsList = []
-				this.getOrderList();
-			},
 		}
 	};
 </script>
@@ -144,7 +193,6 @@
 	page {
 		min-height: 100%;
 		background-color: #F7F8FA;
-		padding: 0 20upx;
 	}
 
 	.head-info {
@@ -373,4 +421,56 @@
 			margin-top: 200rpx;
 		}
 	}
+
+	.container {
+		background-color: #fff;
+
+
+		.classify-list {
+			white-space: nowrap;
+			width: 100%;
+			height: 100rpx;
+			overflow-x: auto;
+			overflow-y: hidden;
+
+			.list {
+				position: relative;
+				display: inline-block;
+				width: 50%;
+				height: 100%;
+				line-height: 100rpx;
+				text-align: center;
+
+				text {
+					font-size: 28rpx;
+					color: #3B3B3B;
+
+				}
+
+				.line {
+					position: absolute;
+					left: 50%;
+					bottom: 10rpx;
+					// width: 60%;
+					// height: 8rpx;
+					background: linear-gradient(to right, #f8f893, #fe9d00);
+					// border-radius: 10rpx;
+					transform: translate(-50%, 0);
+
+					width: 60upx;
+					height: 8upx;
+					background: #FF6257;
+					border-radius: 29px 29px 29px 29px;
+					opacity: 1;
+				}
+			}
+
+			.action {
+				text {
+					font-size: 32rpx;
+					opacity: 1;
+				}
+			}
+		}
+	}
 </style>