设置不同角色 显示

pages/index/index.vue

@@ -17,7 +17,12 @@
 					  @search="onSearch"
 					  @clear="onSearch"
 					/>
+					<view class="statussearch" @click="show=true">
+						<text class="year-text">{{status_name || '状态'}}</text>
+						<u-icon name="arrow-down" size="14" color="#999"></u-icon>
+					</view>
 				</view>
+				<u-picker :show="show" :columns="columns" keyName="label" @confirm="onstatus" @cancel="show = false"></u-picker>
 			</view>
 			<view class="list-wrap">
 				<CarCard
@@ -26,6 +31,7 @@
 					:item="item"
 					@pdfchange="onSearch"
 					@request-price="onRequestPrice"
+					@restchange="onSearch"
 				/>
 			</view>
 		</z-paging>
@@ -95,18 +101,39 @@
 		    </view>
 		  </view>
 		</uni-popup>
+
+		<!-- #ifdef H5 -->
+		<CustomTabBar class="h5-custom-tabbar" />
+		<!-- #endif -->
 	</view>
 </template>
 
 <script>
 	import { request } from '@/api/apiT.js'
 	import CarCard from '@/components/CarCard/CarCard.vue'
+	import CustomTabBar from '@/custom-tab-bar/index.vue'
 	export default {
 		components: {
-			CarCard
+			CarCard,
+			CustomTabBar
 		},
 		data() {
 			return {
+				show: false,
+				status_id:1,
+				status_name:'',
+				columns: [
+					[{
+						label: '正常',
+						id: 1
+					}, {
+						label: '已售出',
+						id: 2
+					}, {
+						label: '已归档',
+						id: 3
+					}]
+				],
 				priceDialogItem: null,
 				priceDialogIndex: -1,
 				priceDialogValue: '',
@@ -379,15 +406,15 @@
 			    }, 300)
 			},
 			onSearch() {
-				this.queryList(this.page,this.pageSize)
+				this.$refs.paging && this.$refs.paging.reload()
 			},
 			queryList(pageNo, pageSize, from) {
 				this.loading = true;
 				var that = this;
 				const params = {
 					current:pageNo,
-					status:1,
-					size:10
+					status:this.status_id,
+					size:pageSize
 				};
 				params.keyword = this.keyword;
 				request({
@@ -403,6 +430,15 @@
 					uni.stopPullDownRefresh();
 					//
 				})
+			},
+			onstatus(e){
+				if (e.value && e.value[0]) {
+					const selectedItem = typeof e.value[0] === 'object' ? e.value[0] : { value: e.value[0], label: e.value[0].toString() };
+					this.status_name = selectedItem.label;
+					this.status_id = selectedItem.id;
+					this.show = false;
+					this.$refs.paging && this.$refs.paging.reload()
+				}
 			}
 		}
 	}
@@ -418,6 +454,13 @@
 		background: #f4f6f8;
 	}
 
+	/* #ifdef H5 */
+	.page {
+		/* 给自定义 TabBar 预留空间，避免内容被遮挡 */
+		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
+	}
+	/* #endif */
+
 	.page-head {
 		position: fixed;
 		width: 100%;
@@ -428,11 +471,23 @@
 	}
 
 	.head-search {
+		display: flex;
+		align-items: center;
+		gap: 10px;
 		background: rgba(255, 255, 255, 1);
 		border-radius: 9px 9px 0px 0px;
 		padding: 20rpx 10px;
 		box-shadow: 0 10rpx 28rpx rgba(0, 0, 0, 0.06);
 	}
+	.statussearch{
+		border: 1px solid #eae9e9;
+		border-radius: 4px;
+		padding: 4px 8px;
+		font-size: 24rpx;
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
 
 	.list-wrap {
 		padding: 18rpx 24rpx 40rpx;