搜索页面的tabs标签切换

packageA/search/index.vue

@@ -1,11 +1,190 @@
 <template>
-	<s-layout title="搜索结果" navbar="inner" :bgStyle="{ color: 'rgb()' }">
+	<s-layout title="搜索结果" :bgStyle="{ color: '#ffffff' }">
-		<view>搜索页面</view>
+		<!-- <view>搜索页面</view> -->
+		<view class="container">
+			<!-- tabs页签 -->
+			<view class="tabs-box">
+				<su-tabs :list="tabMaps" @change="onChange" :scrollable="false" :current="currentTab"></su-tabs>
+			</view>
+		</view>
 	</s-layout>
 </template>
 
-<script>
+<script setup>
+	import sheep from '@/sheep';
+	import {
+		reactive,
+		ref
+	} from 'vue';
+	import {
+		onLoad,
+		onReachBottom
+	} from '@dcloudio/uni-app';
+	import _ from 'lodash';
+	
+	// const
+	const tabMaps = [{
+			name: '食堂招租',
+			value: '0',
+		},
+		{
+			name: '平台学院',
+			value: '1',
+		},
+		{
+			name: '原料商城',
+			value: '2',
+		},
+	];
+	const currentTab = ref(0)
+	const collectRentList = ref([])
+	const rentCount = ref(0)
+	const collectSchoolList = ref([])
+	const schoolCount = ref(0)
+	const mallList = ref([])
+	const mallCount = ref(0)
+	const homrS = ref(false)
+	const loadStatus = ref('')
+	const listQuery = ref({
+		keywords: null,
+		add_type: null,
+		type: null,
+		my: null,
+		page: 1,
+		rentPage: 1,
+		schoolPage: 1,
+		limit: 10,
+		cate_ids: '',
+		province: null,
+		city: null,
+		district: null,
+		status: null,
+		recommend: null,
+		collect: null,
+		order: null,
+		nearby: null,
+		latitude: null,
+		longitude: '',
+		area: null,
+	})
+	//切换tabs
+	function onChange(e) {
+		console.log('onChange', e);
+		currentTab.value = e.index
+		console.log('切换tabs', currentTab.value);
+		if (currentTab.value == 0) {
+			collectRentList.value = [];
+			getRentList();
+		} else if(currentTab.value == 1){
+			collectSchoolList.value = [];
+			getSchoolList();
+		}else {
+			
+		}
+	}
+	
+	//招租列表
+	async function getRentList() {
+		const res = await sheep.$api.rent.rentlist({
+			keywords: listQuery.value.keywords,
+			page: listQuery.value.rentPage,
+			limit: listQuery.value.limit,
+			order: 'normal',
+			status: 1,
+		});
+		console.log('招租收藏列表', res);
+	
+		if (res.code == 1) {
+			collectRentList.value = [...collectRentList.value, ...res.data.list];
+			rentCount.value = res.data.count
+		} else {
+			// Handle case where data is not in expected format
+			collectRentList.value = [];
+			uni.showToast({
+				title: res.msg,
+				icon: 'none'
+			})
+		}
+		console.log('getList', collectRentList.value);
+	}
+	//平台课程列表
+	async function getSchoolList() {
+		const res = await sheep.$api.school.schoolList({
+			keywords: listQuery.value.keywords,
+			page: listQuery.value.schoolPage,
+			limit: listQuery.value.limit,
+			order: 'normal',
+			status: 1,
+		});
+		console.log('平台课程收藏列表', res);
+	
+		if (res.code == 1) {
+			collectSchoolList.value = [...collectSchoolList.value, ...res.data.list];
+			schoolCount.value = res.data.count
+		} else {
+			// Handle case where data is not in expected format
+			collectSchoolList.value = [];
+			uni.showToast({
+				title: res.msg,
+				icon: 'none'
+			})
+		}
+		console.log('平台课程收藏列表-222', collectSchoolList.value);
+	}
+	
+	//加载更多
+	function onScrolltolower() {
+		if (currentTab.value == 0) {
+			if (collectRentList.value.length < rentCount.value) {
+				listQuery.value.rentPage += 1;
+				getRentList();
+			}
+		} else {
+			if (collectSchoolList.value.length < schoolCount.value) {
+				listQuery.value.schoolPage += 1;
+				getSchoolList();
+			}
+		}
+	
+	}
+	//下拉刷新
+	function onS() {
+		homrS.value = true
+		uni.showLoading({
+			title: '加载中...'
+		});
+		resetLists();
+		if (currentTab.value == 0) {
+			getRentList();
+		} else {
+			getSchoolList();
+		}
+		setTimeout(() => {
+			homrS.value = false;
+			uni.hideLoading();
+			uni.stopPullDownRefresh();
+		}, 2000)
+	}
+	// 重置列表
+	function resetLists() {
+		if (currentTab.value == 0) {
+			listQuery.value.rentPage = 1;
+			collectRentList.value = [];
+			loadStatus.value = "loading";
+		} else {
+			listQuery.value.schoolPage = 1;
+			collectSchoolList.value = [];
+			loadStatus.value = "loading";
+		}
+	}
+	
+	
+	
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.container {
+		
+		
+	}
 </style>

pages/index/index.vue

@@ -10,17 +10,17 @@
 						<view class="locTop-left" @click="state.showRegion = true">
 							<image style="width: 34rpx;height: 34rpx;"
 								src="https://jiangxiaoxian.0rui.cn/locationTop.png" mode=""></image>
-							<view style="margin-left: 10rpx;font-size: 30rpx;font-weight: 800;line-height: 45rpx;white-space: nowrap;
+							<view 
-					overflow: hidden;
+							style="margin-left: 10rpx;font-size: 30rpx;font-weight: 800;line-height: 45rpx;
-					text-overflow: ellipsis;width: 270rpx;">
+							white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 270rpx;">
 								{{state.model.city_name ? proCity:'全国' }}
 							</view>
 						</view>
-						<view class="locTop-right">
+						<view class="locTop-right" @click="toPage('/packageA/search/index')">
 							<uni-section style="border-radius: 192rpx;padding: 0;" type="line">
 								<uni-search-bar style="border-radius: 192rpx;" radius="23" placeholder="搜索您需要的信息"
 									bgColor="#EEEEEE" clearButton="none" cancelButton="none"
-									@focus="toPage('/packageA/search/index')" />
+									:readonly="true" />
 							</uni-section>
 							<!-- @confirm="search"-->
 						</view>