dingdong-mall/pages/index/index.vue

<template>
	<view>
		<!-- 轮播图-->
		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			:autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="item.id">
				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
					v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>
		<!-- 搜索栏 -->
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="inputFocus" @blur="inputBlur" @confirm="searchGoods" :adjust-position="false" type="text"
					placeholder="输入搜索内容" confirm-type="search"></input>
			</view>
			<view class="action">
				<text>广州</text>
				<text class="cuIcon-location"></text>
			</view>
		</view>
		<view class="margin-lr-sm margin-bottom-with-bar">
			<!-- 大类 -->
			<view class="flex justify-between text-black">
				<view class="padding text-lg">
					<text>分类</text>
					<text class="cuIcon-apps text-main-color"></text>
					<text class="cuIcon-triangledownfill"></text>
				</view>
				<view>
					<scroll-view scroll-x class="nav">
						<view class="flex text-center">
							<view class="cu-item flex-sub" :class="index==tabCur?'text-main-color cur':''"
								v-for="(item,index) in categories" :key="item.id" @tap="tabSelect" :data-id="index">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 热门细类 -->
			<view class="cu-list grid no-border hot-sub-category" :class="['col-5']">
				<view class="cu-item" v-for="(item,index) in subCategories" :key="index" v-if="index < 5" @click="searchGoods(item)">
					<view class="hot-sub-category-icon" :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
						<view class="cu-tag badge" v-if="item.badge!=0">
							<block v-if="item.badge!=1">{{item.badge}}</block>
						</view>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
			<!-- 细类 -->
			<view class="cu-list grid no-border" :class="['col-5']" v-if="subCategories.length > 5">
				<view class="cu-item" v-for="(item,index) in subCategories" :key="index"
					v-if="index < subCategories.length && index > 4" @click="searchGoods(item)">
					<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
						<view class="cu-tag badge" v-if="item.badge!=0">
							<block v-if="item.badge!=1">{{item.badge}}</block>
						</view>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
			<!-- 超值服务 -->
			<classify-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
				:title="discountGoods.title"></classify-goods-card>
			<!-- 热门服务 -->
			<classify-goods-card ref="hotGoodsCard" :goodsInfos="hotGoods.goodsInfos"
				:title="hotGoods.title"></classify-goods-card>
		</view>
		<module-bar ref="moduleBar" :moduleBarInfos="moduleBarInfos"></module-bar>
	</view>
</template>

<script>
	import moduleBar from '@/components/custom-bar/module-bar.vue';
	import classifyGoodsCard from '@/components/goods-card/classify-goods-card.vue';

	export default {
		components: {
			moduleBar,
			classifyGoodsCard
		},
		data() {
			return {
				dotStyle: true,
				swiperList: [],
				tabCur: 0,
				categories: [],
				subCategories: [],
				moduleBarInfos: [],
				hotGoods: {},
				discountGoods: {}
			}
		},
		onLoad() {
			this.loadData();
			this.bindEvent();
		},
		methods: {
			async loadData() {
				this.swiperList = await this.$api.data('swiperList');
				this.categories = await this.$api.data('categories');
				this.subCategories = await this.$api.data('subCategories');
				this.moduleBarInfos = await this.$api.data('moduleBarInfos');
				this.hotGoods = await this.$api.data('hotGoods');
				this.discountGoods = await this.$api.data('discountGoods');
			},
			bindEvent() {
				uni.$on('showProductDetail', this.showDetails);
			},
			inputFocus(e) {
				this.InputBottom = e.detail.height
			},
			inputBlur(e) {
				this.InputBottom = 0
			},
			async tabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				// 获取大类信息
				let categoryId = this.categories[this.tabCur].id;
				console.log("切换细类, 大类id=" + categoryId);
				let allSubCategories = await this.$api.data('subCategories');
				this.subCategories = allSubCategories.slice(0, (4 - categoryId) * 5);
			},
			searchGoods(item) {
				console.log("搜索条件信息: " + item)
				console.log("商品搜索中...");
			},
			showDetails(productItem) {
				uni.navigateTo({
					url: '../product/product-detail'
				});
			}
		}
	}
</script>

<style scoped>
	.cu-list+.cu-list {
		margin-top: 0;
	}

	.cu-list.grid.no-border {
		padding: 0 10rpx;
	}

	.hot-sub-category .cu-item .hot-sub-category-icon {
		font-size: 80rpx;
	}
</style>