jiuyiUniapp/jiuyi2/pages/shop/gift.vue

<script setup>
	// 礼包专区
	import {
		ref,
		reactive,
		getCurrentInstance,
	} from 'vue'
	import {
		onReachBottom,
		onPullDownRefresh,
		onShow,
		onLoad,
		onReady,
	} from '@dcloudio/uni-app';
	// 工具库
	import util from '@/common/js/util.js'
	// 
	import api from '@/api/index.js'
	// 商品列表
	import productList from '@/components/shop/productList/productList'

	const {
		proxy
	} = getCurrentInstance()
	// tab
	const tab = reactive([{
			name: '礼包专区',
		},
		{
			name: '超值礼包',
		},
		{
			name: '大礼包',
		},
		{
			name: '小礼包',
		},
	])
	// 下标
	const tabIndex = ref(0)

	onReady(() => {
		// 获取礼包分类
		getGiftCate().then(rs => {
			// 分类
			proxy.$refs.product.listPrototype.categoryId = tab[tabIndex.value].id
			proxy.$refs.product.getList()
		})
	})

	onReachBottom(() => {
		// 重载列表
		proxy.$refs.product.getMoreList()
	})

	onPullDownRefresh(() => {
		// 重载列表
		proxy.$refs.product.refreshList()
	})

	// 获取礼包分类
	function getGiftCate() {
		return new Promise(resolve => {
			api.shop.getCategory({
				query: {
					categoryCode: 'GIFT_PACK',
				},
			}).then(rs => {
				if (rs.code === 200) {
					tab.length = 0
					tab.push(...rs.data)
					resolve(tab)
					return
				}
				util.alert({
					content: rs.msg,
					showCancel: false,
				})
			})
		})
	}

	// 切换tab
	function handleTab(index) {
		if (tabIndex.value === index) return
		tabIndex.value = index
		// 分类
		proxy.$refs.product.listPrototype.categoryId = tab[tabIndex.value].id
		// 重载列表
		proxy.$refs.product.refreshList()
	}
</script>

<template>
	<view class="app">
		<!-- 公告 -->
		<!-- <swiper class="notice c333 f28" vertical="true">
			<swiper-item class="item bsb rows plr20" v-for="(item, index) in 2" :key="index">
				<image class="icon" src="/static/notice.png" mode="aspectFit" />
				<view class="f1 mlr20">九亿商城上线啦~</view>
			</swiper-item>
		</swiper> -->

		<!-- 礼包专区 -->
		<view class="tab bfff">
			<view class="item ver ptb20" v-for="(item,index) in tab" :key="index" @click="handleTab(index)"
				:class="{'active': index === tabIndex}">
				<view class="">
					<image class="icon" :src="item.icon" mode="aspectFill" />
				</view>
				<view class="line"></view>
			</view>
		</view>

		<!-- 商品卡片组 加载更多 -->
		<view class="product oh ptb30 plr30">
			<productList ref="product" />
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 公告
	.notice {
		height: 80rpx;
		background-color: #e8e8e8;

		.icon {
			width: 84rpx;
			height: 36rpx;
		}
	}

	// 导航
	.tab {
		display: grid;
		grid-template-columns: repeat(4, 1fr);

		// 
		.item {
			.icon {
				width: 160rpx;
				height: 40rpx;
			}

			.line {
				width: 40rpx;
				height: 6rpx;
				background-color: #DD4B5B;
				opacity: 0;
				transition: .3s;
			}

			&.active {
				.line {
					opacity: 1;
				}
			}
		}
	}
</style>