jiuyiUniapp/jiuyi2/pages/shop/shop.vue

<script setup>
	/**
	 * 商城
	 */
	// 底部菜单
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	// 顶部搜索
	import JyCommonHead from '@/components/public/jy-common-head'
	// 搜索
	import JySearch from './components/jy-search'
	//顶部条件栏
	import JyShopNavigation from '@/components/public/jy-shop-navigation'
	// 商品列表
	import productList from '@/components/shop/productList/productList'
	import footerMneu from '@/components/footerMenu/footerMenu'
	import {
		onReachBottom,
		onPullDownRefresh,
		onShow,
		onLoad,
	} from '@dcloudio/uni-app';

	import {
		classification
	} from '@/api/shop'
	// 分类
	const cate = reactive([{
			name: '推荐',
		}, {
			name: '电器',
		},
		{
			name: '零食',
		},
		{
			name: '日用百货',
		},
		{
			name: '水果',
		},
		{
			name: '生鲜',
		}
	])
	// 分类下标
	const cateIndex = ref(0)
	// 商品列表组件
	const jy_content = ref(null)
	// 滑动导航栏数据
	const tabs = reactive({
		list: [],
		total: 0
	})
	const getNavigationList = async () => {
		try {
			const {
				data,
				total
			} = await classification.list();
			tabs.list = data;
			tabs.total = total;
		} catch (error) {
			console.log(error);
		}
	};

	// 初始化
	const init = () => {
		getNavigationList()
	}

	onLoad(() => {
		// 
	})
	onReachBottom(() => {
		jy_content.value.getData(false, 'onReachBottom')
	})
	onPullDownRefresh(() => {
		jy_content.value.getData(true, 'onPullDownRefresh')
	})

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

	/**
	 * 切换分类下标
	 * @param {Object} index
	 */
	function handleCateIndex(index) {
		if (cateIndex.value === index) return
		cateIndex.value = index
	}
</script>

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

		<!-- 公告 -->
		<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" class="f1" placeholder="请输入关键字" />
				<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 cate" :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 />
		</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>