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 keyword = ref('')

	onLoad(() => {
		// 
		getCategory()
	})

	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: '0'
			},
		}).then(rs => {
			if (rs.code === 200) {
				cateList.length = 1
				cateList.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.categoryCode = cateList[index].categoryCode
		// 重载列表
		proxy.$refs.product.refreshList()
	}

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

<template>
	<view class="appbw">
		<!-- 轮播图 -->
		<swiper class="banner oh mtb30 mlr30 br20" autoplay="true" v-if="0">
			<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>

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

		<!-- 功能区 -->
		<view class="fn rows mtb30 mlr30">
			<uni-icons type="scan" size="48rpx" color="#FF7F37" />
			<view class="searchBox rows f1 ml20 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 class="product oh ptb30 plr30">
			<productList ref="product" />
		</view>
	</view>

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

<style lang="scss" scoped>
	// 轮播图
	.banner {
		height: 300rpx;
		box-shadow: 0 0 20rpx #00000066;

		.item {
			height: 100%;
		}

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

	// 公告
	.notice {
		height: 80rpx;
		background-color: #f8f8f8;
	}

	// 功能区
	.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>