sports-miniapp/src/pages/index/searchPage/index.vue

<template>
	<view class="s-header">
		<view class="header-search">
			<zzx-icon name="search" size="16"></zzx-icon>
			<input type="text" v-model="keyword" placeholder="搜索俱乐部名称" />
			<view class="search-btn" @click="to_search">
				搜索
			</view>
		</view>
		<view class="venue-navbar">
			<view class="navbar-list" v-for="(item,index) in navbarList" :key="index" @click="select_nav(item)">
				<view class="list-text">{{item.title}}</view>
				<image :src="sel_index==index?'/static/notsel-icon.png':'/static/select-icon.png'" mode=""></image>
			</view>
		</view>
	</view>
	<view class="content">
		<view class="select-btn">
			<view :class="sel_btn===index?'distance':'score'" v-for="(item,index) in selectList" :key="index"
				@click="select_btn(item,index)">{{item.text}}</view>
		</view>
		<view class="s-search-list"  v-if="!searchLoading">
			<!-- 场地 -->
			<view v-if="sel_index==0">
				<!-- pages/index/gymDetail/index -->
				<view class="s-venue-card" v-for="(venue,index) in searchList" :key="venue.id" @click="RouterUtils.to_page(`/pages/index/gymDetail/index?id=${venue.id}`)">
					<view class="s-venue-info">
						<view class="venue-img">
							<image :src="venue.cover" mode=""></image>
						</view>
						<view class="venue-info">
							<view class="name">{{venue.name}}</view>
							<view class="appraise">
								<zzx-icon name="star" size="12"></zzx-icon>
								<view class="app-text"><text style="color: #FDD143	;">{{venue.goodRate||0}}</text> | 37条评论</view>
							</view>
							<view class="address">{{venue.address}} | {{venue.km}}km</view>
							<view class="tags-box">
								<view class="tags" v-for="(tags,index) in venue.category" :key="index">{{tags}}</view>
							</view>
						</view>
					</view>
<!-- 					<view class="s-course-list" v-for="item in 2">
						<view class="course-name">
							<view class="price">￥25.6</view>
							<view class="name">室内小班篮球培训课时</view>
						</view>
						<view class="sales">年售1万+</view>
					</view> -->
				</view>
			</view>
			<!-- 培训 -->
			<view v-if="sel_index==1">
				<view class="s-training-card" v-for="(venue,index) in searchList" :key="venue.id" @click="RouterUtils.to_page(`/pages/index/courseDetail/index?id=${venue.id}`)">
					<view class="training-box">
						<view class="training-img">
							<image class="t-img" :src="venue.cover" mode="">
							</image>
						</view>
						<view class="training-info">
							<view class="training-name">
								<!-- <view class="t-tags">公益课</view> -->
								<view class="t-name textHidden">{{venue.name}}</view>
							</view>
							<!-- <view class="tips">促进青少年长高</view> -->
							<view class="t-price">
								<view class="price"><text class="mini-text">￥</text>{{venue.originalPrice}}</view>
								<!-- <view class="price-tips">不支持退款</view> -->
							</view>
							<view class="sales">已售{{venue.sales}} {{venue.goodRate||'0'}}%好评</view>
							<view class="address">{{venue.address}} | {{venue.km}}km</view>
						</view>
					</view>
					<view class="tags-img">
						<image class="enroll-tags" src="@/static/search-icon1.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- 赛事 -->
			<view v-if="sel_index==2">
				<events :listData="searchList" />
			</view>
			<!-- 教练 -->
			<view v-if="sel_index==3">
				<instructor :listData="searchList" />
			</view>
		</view>
		<zs-loading v-else></zs-loading>
		<zs-empty v-if="searchList.length<1&&!searchLoading"></zs-empty>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue';
	import { onLoad,onReachBottom } from '@dcloudio/uni-app';
	import { http } from '@/utils/http'
	import {RouterUtils,TipsUtils} from '@/utils/util'
	import { useCacheStore } from '@/stores/cache'
	import events from './components/events.vue'
	import instructor from './components/instructor.vue'
	import zsEmpty from '@/components/zs-empty/index.vue'
	import zsLoading from '@/components/zzx-loading/zzx-loading.vue'
	const cache = useCacheStore()
	const selectList = ref()
	const sel_index = ref(0);
	const sel_btn = ref(0);
	const keyword = ref();
	const venueType=ref()
	const searchList=ref();
	const navbarList = ref([{title: '场地',value: 0,tagsVal:'0-1'},{title: '培训',value: 1,tagsVal:'1-1'},{title: '赛事',value: 2,tagsVal:'2-1'},{title: '教练',value: 3,tagsVal:'3-1'}]);
	onLoad((options) => {
		keyword.value = options.keyword
		venueType.value=options.venueType
		console.log(options);
	})
	onReachBottom(()=>{
		current.value++
		get_searchInfo(tagsVal.value||'0-1')
	})
	onMounted(() => {
		if(venueType.value){
			get_searchInfo(venueType.value)
		}else{
			get_searchInfo('0-1')
		}
		// get_dictItems()
		get_dictType(0)
	})
	const select_btn = (e,i) => {
		searchLoading.value=true
		sel_btn.value = i
		get_searchInfo(e.value)
	}
	const select_nav = (e) => {
		searchLoading.value=true
		sel_index.value = e.value
		tagsVal.value=e.tagsVal
		sel_btn.value=0
		searchList.value=[]
		get_dictType(e.value || 0)
		get_searchInfo(e.tagsVal)
	}

	// 查询分类
	const get_dictType = (type : number) => {
		http.get('/common/getDictItems', { data: { dictCode: 'search_type' } }).then(res => {
			let arr = []
			res.result.forEach((item) => {
				let value = parseInt(item.value.split('-')[0])
				if (type == value){
					return arr.push(item)
				}
			})
			selectList.value=arr
		})
	}
	
	const tagsVal=ref()
	const to_search=()=>{
		if(keyword.value=='') return TipsUtils.tips_toast('请输入搜索内容')
		searchLoading.value=true
		get_searchInfo(tagsVal.value||'0-1')
	}
	
	const searchLoading=ref(true)
	const current=ref(1)
	const get_searchInfo = (tagsVal) => {
		http.post('/home/search', { keyword: keyword.value, size: 10, current:current.value, venueType:String(tagsVal), longitude: cache.get('LON')||0, latitude: cache.get('LAT')||0 }).then((res) => {
			searchLoading.value=false
			if(current.value==1){
				searchList.value=res.result.records
			}else{
				searchList.value=[...searchList.value,...res.result.records]
			}
		})
	}
</script>

<style lang="less" scoped>
	.s-header {
		background: #fff;
		padding: 20rpx;

		.header-search {
			display: flex;
			align-items: center;
			gap: 10rpx;
			background: #F6F6F6;
			width: 680rpx;
			height: 60rpx;
			border-radius: 40rpx;
			padding-left: 20rpx;
			&>input {
				width: 670rpx;
				font-weight: bold;
				font-size: 24rpx;
			}

			.search-btn {
				width: 144rpx;
				height: 52rpx;
				background: #222222;
				border-radius: 28rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #C8FF0C;
				line-height: 52rpx;
				text-align: center;
			}
		}

		.venue-navbar {
			margin-top: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.navbar-list {
				display: flex;
				align-items: center;
				gap: 10rpx;

				.list-text {
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
				}

				&>image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}

	.content {
		.select-btn {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-top: 20rpx;

			.distance {
				width: 92rpx;
				height: 48rpx;
				background: #222222;
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #C8FF0C;
				line-height: 48rpx;
				text-align: center;
			}

			.score {
				width: 92rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #AAAAAA;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
			}
		}

		.s-search-list {
			.s-venue-card {
				margin-top: 20rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				padding: 20rpx;

				.s-venue-info {
					display: flex;
					align-items: center;
					gap: 20rpx;

					.venue-img {
						&>image {
							width: 200rpx;
							height: 200rpx;
							border-radius: 32rpx;
						}
					}

					.venue-info {
						.name {
							font-weight: 800;
							font-size: 32rpx;
							color: #222222;
						}

						.appraise {
							display: flex;
							align-items: center;
							margin-top: 16rpx;

							.app-text {
								font-size: 24rpx;
								color: #AAAAAA;
							}
						}

						.address {
							margin-top: 12rpx;
							font-size: 24rpx;
							color: #222222;
						}

						.tags-box {
							margin-top: 16rpx;
							display: flex;
							align-items: center;
							gap: 12rpx;
							flex-wrap: wrap;
							.tags {
								width: 92rpx;
								height: 36rpx;
								background: #F5F5F5;
								border-radius: 8rpx;
								font-size: 22rpx;
								color: #AAAAAA;
								line-height: 36rpx;
								text-align: center;
							}
						}
					}
				}

				.s-course-list {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;

					.course-name {
						display: flex;
						align-items: center;
						gap: 20rpx;
						font-weight: bold;
						font-size: 28rpx;

						.price {
							color: #FB5B5B;
						}

						.name {
							color: #222222;
						}
					}

					.sales {
						font-size: 24rpx;
						color: #AAAAAA;
					}
				}
			}

			.s-training-card {
				margin-top: 20rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				padding: 20rpx;
				position: relative;

				.training-box {
					display: flex;
					align-items: center;
					gap: 20rpx;

					.training-img {
						position: relative;

						.t-img {
							width: 200rpx;
							height: 200rpx;
							border-radius: 32rpx;
						}

						.img-tags {
							position: absolute;
							left: -20rpx;
							top: 0;
							width: 113rpx;
						}

						.tags-text {
							position: absolute;
							font-size: 18rpx;
							color: #FFFFFF;
							top: 14rpx;
							left: 0;
						}

						.s-downtime {
							position: absolute;
							display: flex;
							bottom: 20rpx;
							left: 18rpx;

							.hours {
								width: 40rpx;
								height: 40rpx;
								background: rgba(200, 255, 12, 0.5);
								border-radius: 8rpx;
								font-weight: 800;
								font-size: 22rpx;
								color: #222222;
								line-height: 40rpx;
								text-align: center;
							}

							.unit {
								width: 20rpx;
								font-weight: 800;
								font-size: 22rpx;
								color: #222222;
								line-height: 40rpx;
								text-align: center;
							}
						}
					}

					.training-info {
						.training-name {
							display: flex;
							align-items: center;
							gap: 8rpx;

							.t-tags {
								width: 92rpx;
								height: 36rpx;
								background: #4DD951;
								border-radius: 8rpx;
								font-size: 22rpx;
								color: #FFFFFF;
								text-align: center;
								line-height: 36rpx;
							}

							.t-name {
								width: 360rpx;
								font-weight: 800;
								font-size: 32rpx;
								color: #222222;
							}
						}

						.tips {
							font-size: 22rpx;
							color: #AAAAAA;
						}

						.t-price {
							display: flex;
							align-items: center;
							gap: 12rpx;

							.price {
								font-weight: 800;
								font-size: 32rpx;
								color: #FB5B5B;
							}

							.price-tips {
								margin-top: 8rpx;
								width: 176rpx;
								height: 42rpx;
								background: linear-gradient(90deg, #C8FF0C 0%, #F2FFC7 79%, rgba(255, 255, 255, 0) 100%);
								border-radius: 28rpx;
								font-size: 22rpx;
								color: #222222;
								line-height: 42rpx;
								text-align: center;
							}
						}

						.sales {
							margin-top: 8rpx;
							font-size: 22rpx;
							color: #222222;
						}

						.address {
							margin-top: 8rpx;
							font-size: 22rpx;
							color: #222222;
						}
					}
				}

				.tags-img {
					position: absolute;
					right: 0;
					bottom: 0;

					.enroll-tags {
						width: 161rpx;
					}
				}

			}
		}
	}
</style>