jiuyiUniapp/jiuyi2/pages/shop/shop.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'
	// 
	import footerMneu from '@/components/footerMenu/footerMenu'

	const {
		proxy
	} = getCurrentInstance()
	// 分类
	const cateList = reactive([{
		id: '',
		name: '推荐',
	}])
	// 分类下标
	const cateIndex = ref(0)
	// 礼物下标
	const giftCateList = reactive([])
	// 搜索的关键字
	const keyword = ref('')

	onLoad(() => {
		// 获取普通商品分类
		getCategory()
		// 获取礼包分类
		getGiftCate()
	})

	onReady(() => {
		proxy.$refs.product.getList()
	})

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

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

	onShow(() => {
		// 触发自定义tabbar函数
		uni.$emit('changeMine', 'shop')
	})

	// 获取商品分类
	function getCategory() {
		api.shop.getCategory({
			query: {
				// categoryCode: null,
			},
		}).then(rs => {
			if (rs.code === 200) {
				cateList.length = 1
				cateList.push(...rs.data)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

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

	/**
	 * 切换分类下标
	 * @param {Object} index
	 */
	function handleCateIndex(index) {
		if (cateIndex.value === index) return
		cateIndex.value = index
		// 分类
		proxy.$refs.product.listPrototype.categoryId = cateList[index].id
		// 重载列表
		proxy.$refs.product.refreshList()
	}

	// 搜索
	function handleSearch() {
		// 分类
		proxy.$refs.product.listPrototype.searchValue = keyword.value
		// 重载列表
		proxy.$refs.product.refreshList()
	}

	/**
	 * 更新
	 * @param {Object} item
	 */
	function handleGiftCate(item) {
		uni.navigateTo({
			url: '/pages/shop/gift'
		})
	}
</script>

<template>
	<view class="app">
		<!-- 轮播图 -->
		<!-- <swiper class="banner oh" autoplay="true">
			<swiper-item v-for="(item, index) in 3" :key="index">
				<view class="item">
					<image class="poster"
						src="https://img12.360buyimg.com/babel/jfs/t20271206/247554/11/28097/64155/675290e6F829316f2/0722626e5b28b005.jpg.avif"
						mode="aspectFill" />
				</view>
			</swiper-item>
		</swiper> -->

		<view class="gift mt30 bfff">
			<view class="item fdc fmid" :class="{'big': item.categoryCode == 'GIFT_PACK'}"
				v-for="(item,index) in giftCateList" :key="index" @click="handleGiftCate(item)">
				<view class="icon">
					<image class="image" :src="item.image" mode="widthFix" />
				</view>
				<view class="mt10 c333 f28">{{item.name}}</view>
			</view>
		</view>

		<view class="oh bfff">
			<!-- 功能区 -->
			<view class="fn rows mtb30 mlr30">
				<!-- <uni-icons type="scan" class="mr20" size="48rpx" color="#FF7F37" /> -->
				<view class="searchBox rows f1 ptb10 plr20 bar">
					<input type="text" v-model="keyword" class="f1" placeholder="请输入关键字" @blur="handleSearch" />
					<uni-icons type="search" size="30rpx" color="#999" />
				</view>
			</view>

			<!-- 滚动条 -->
			<view class="cate">
				<scroll-view scroll-x="true" class="scroll f30">
					<view class="item" v-for="(item,index) in cateList" :key="index"
						:class="{'active': index === cateIndex}" @click="handleCateIndex(index)">
						<view class="name ptb20 plr40">{{item.name}}</view>
						<view class="line"></view>
					</view>
				</scroll-view>
			</view>
		</view>

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

	<!-- 底部导航 -->
	<footerMenu ref="footerMneuRef" page="shop" />
</template>

<style lang="scss" scoped>
	// 轮播图
	.banner {
		height: 180rpx;

		.item {
			height: 100%;
		}

		.poster {
			width: 100%;
			height: 100%;
		}
	}

	// 礼包专区
	.gift {
		display: flex;
		
		.image {
			width: 100%;
			height: 100%;
		}

		.item.big {
			width: 400rpx;

			.icon {
				width: 240rpx;
			}
		}

		.item {
			flex: 1;
		}

		.icon {
			display: flex;
			justify-content: center;
			align-items: flex-end;
			width: 100%;
			height: 200rpx;
		}
	}

	// 功能区
	.fn {
		.searchBox {
			background-color: #f3f3f3;
		}
	}

	// 分类
	.cate {
		.scroll {
			white-space: nowrap;

			.item {
				display: inline-block;
				color: #999;
				transition: .3s;

				.line {
					width: 0;
					margin: 0 auto;
					border-bottom: 3rpx solid #FF7F37;
					opacity: 0;
					transition: .3s;
				}

				&.active {
					color: #FF7F37;
					font-weight: bold;

					.line {
						width: 100%;
						opacity: 1;
					}
				}
			}
		}
	}

	// 产品图
	.product {
		background-color: #f8f8f8;
	}
</style>