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

<template>
	<view class="venue-navbar">
		<view class="navbar-list" v-for="(item,index) in navbarList" :key="index" @click="select_nav(index)">
			<view class="list-text">{{item.text}}</view>
			<image :src="sel_index==index?'/static/notsel-icon.png':'/static/select-icon.png'" mode=""></image>
		</view>
	</view>
	<view style="height: 70rpx;"></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>
		<block v-if="courseList?.length>0">
			<view class="t-card-list" v-for="item in courseList" :key="item.id" @click="RouterUtils.to_page(`/pages/index/courseDetail/index?id=${item.id}`)">
				<view class="t-courseImg">
					<image :src="item.cover" mode=""></image>
				</view>
				<view class="t-course">
					<view class="c-title textHidden">{{item.name}}</view>
					<view class="c-address" v-if="item.km">{{item.address}} | {{item.km.toFixed(2)}}km</view>
					<view class="c-price">￥{{ item?.sellingPrice.toFixed(2) }}
						<text v-if="item.priceType==0&&item.originalPrice"
							style="font-size: 22rpx;color: #AAAAAA;text-decoration: line-through;">￥{{ item.originalPrice.toFixed(2) }}</text>
					</view>
					<view class="c-ratio">已售{{item.saleNum||'0'}} {{item.goodRate||'0'}}%好评</view>
					<view class="c-class">{{item.coursesNum}}课时 {{item.startTime}}-{{item.endTime}}</view>
					<view class="c-icon">
						<image v-if="item.priceType==1" src="/src/static/snapped.png" mode="widthFix"></image>
						<block v-else>
							<image v-if="item.isOneBuy" src="/src/static/snapped1.png" mode="widthFix"></image>
							<image v-else src="/src/static/qinggou.png" mode="widthFix"></image>
						</block>
					</view>
				</view>
			</view>
		</block>
		<zs-empty v-else></zs-empty>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { http } from '@/utils/http'
	import { useCacheStore } from '@/stores/cache'
	import { RouterUtils } from '@/utils/util';
	import zsEmpty from '@/components/zs-empty/index.vue'
	const cache = useCacheStore()
	const navbarList = ref([{
		text: '全部'
	}, {
		text: '免费课'
	}, {
		text: '精品课'
	}]);
	// 132
	const selectList = ref([{
		text: '距离',
		type: 1
	}, {
		text: '好评',
		type: 3
	}, {
		text: '销量',
		type: 2
	}])
	const sel_index = ref(0);
	const sel_btn = ref(0);
	onLoad((option)=>{
		priceType.value=option.priceType
		if(option.priceType==1){
			sel_index.value=1
		}else if(option.priceType==0){
			sel_index.value=2
		}
	})
	onReachBottom(() => {
		pageNo.value++
		if (sel_index.value === 0) {
			get_findByCourseList('', selectType.value)
		} else if (sel_index.value === 1) {
			get_findByCourseList(1, selectType.value)
		} else if (sel_index.value === 2) {
			get_findByCourseList('0', selectType.value)
		}
	})
	onMounted(() => {
		if(priceType.value){
			get_findByCourseList(priceType.value, 1)
		}else{
			get_findByCourseList('', 1)
		}
	})
	const selectType = ref(1)
	const select_btn = (e, i) => {
		selectType.value = e.type
		pageNo.value = 1
		if (sel_index.value === 0) {
			get_findByCourseList('', e.type)
		} else if (sel_index.value === 1) {
			get_findByCourseList(1, e.type)
		} else if (sel_index.value === 2) {
			get_findByCourseList('0', e.type)
		}
		sel_btn.value = i
	}
	const select_nav = (i) => {
		sel_index.value = i
		sel_btn.value = 0
		pageNo.value = 1
		if (i === 0) {
			get_findByCourseList('', 1)
		} else if (i === 1) {
			get_findByCourseList(1, 1)
		} else if (i === 2) {
			get_findByCourseList('0', 1)
		}
	}

	// 获取列表
	const courseList = ref()
	const pageNo = ref(1)
	const priceType=ref()
	const get_findByCourseList = (priceType : any, orderByType : number) => {
		http.get('/detail/findByCourseList', {
			data: {
				priceType: priceType,
				longitude: cache.get('LON')||0,
				latitude: cache.get('LAT')||0,
				orderByType: orderByType,
				pageNo: pageNo.value,
				pageSize: 10

			}, loading: true
		}).then((res) => {
			if (pageNo.value == 1) {
				courseList.value = res.result.records
			} else {
				courseList.value = [...courseList.value, ...res.result.records]
			}
		})
	}
</script>

<style lang="less" scoped>
	.venue-navbar {
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		padding-bottom: 30rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1000;

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

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

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

	.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;
		}
	}

	.t-card-list {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-top: 20rpx;

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

		.t-course {
			position: relative;

			.c-title {
				width: 430rpx;
				font-weight: 800;
				font-size: 32rpx;
				color: #222222;
				line-height: 52rpx;
			}

			.c-address {
				margin-top: 4rpx;
				font-size: 22rpx;
				color: #AAAAAA;
			}

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

			.c-ratio {
				font-size: 22rpx;
				color: #222222;
				height: 32rpx;
				line-height: 32rpx;
			}

			.c-class {
				font-size: 22rpx;
				color: #AAAAAA;
				height: 32rpx;
				line-height: 32rpx;
			}

			.c-icon {
				position: absolute;
				bottom: -30rpx;
				right: -42rpx;

				&>image {
					width: 161rpx;
				}
			}
		}
	}
</style>