queyue-miniapp/pages/index/index.vue

<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-box" customStyle="background-color: #ffffff;padding: 24upx;">
			<u-search class="search" v-model="keyword" :clearabled="true" :showAction="false"
				bgColor="#ffffff"></u-search>

			<navigator url="/pages/cart/cart" open-type="switchTab" class="icon-box">
				<image class="cart-icon" src="../../static/index/cart.svg" mode=""></image>
				<u-badge type="error" class="cart-badge" :overflow-count="9" :count="cartNum"></u-badge>
			</navigator>
		</view>

		<!-- 服务列表 -->
		<view class="server-list">
			<view class="server-item" v-for="item in serverList" :key="item.code" @click="goto(item.code)">
				<view class="server-icon">
					<image :src="`../../static/index/${item.code}.svg`" mode=""></image>
				</view>
				<view class="server-text">{{item.title}}</view>
			</view>

		</view>

		<!-- 头部轮播 -->
		<view class="carousel-section">
			<swiper autoplay class="carousel" circular>
				<swiper-item v-for="(item, index) in newAdvertiseList" :key="index"
					:class="['carousel-item',item.length == 1?'single':'']">
					<image @click="navToAdvertisePage(subItem)" mode="aspectFill" :key="subItem.id"
						v-for="subItem in item" :src="subItem.pic"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 标签列表 -->
		<u-sticky bgColor="#f5f5f5">
			<u-tabs bgColor="#f5f5f5" class="tag-list" :list="categoryList" :current="tagCurrent" @change="changeTag"
				:activeStyle="{
            color: '#ffffff',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" active-color="#ffffff" :bar-height="0" :active-item-style="{
			backgroundColor: '#CC342D'
		}"></u-tabs>
		</u-sticky>
		<!-- 商城列表 -->
		<view class="product-section">
			<view v-for="(item, index) in recommendProductList" :key="index" class="product-item"
				@click="navToDetailPage(item)">
				<view class="image-wrapper">
					<image :src="item.pic" mode="aspectFill"></image>
				</view>
				<text class="title clamp">{{item.name}}</text>
				<!-- <text class="title2 clamp">{{item.subTitle}}</text> -->
				<text class="price">￥{{item.price}}</text>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		fetchContent,
		fetchContentV2,
		fetchRecommendProductList
	} from '@/api/home.js';
	import {
		fetchCartList
	} from '@/api/cart.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		groupData
	} from '@/utils/index.js'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				keyword: '',
				cartNum: 0,
				serverList: [{
						code: 'myOrders',
						title: '我的订单',
					},
					{
						code: 'collections',
						title: '收藏',
					},
					{
						code: 'records',
						title: '足迹',
					},
					{
						code: 'serverCenter',
						title: '客服中心',
					},
				],
				advertiseList: [],
				recommendProductList: [],
				hotProductList: [],
				recommendParams: {
					pageNum: 1,
					pageSize: 4
				},
				loadingType: 'more',
				tagCurrent: 0,
				categoryList: [{
					id: '',
					name: '全部',
				}]
			};
		},
		onLoad() {
			// this.loadData();
		},
		onShow() {
			this.loadData();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.recommendParams.pageNum = 1;
			this.loadData();
		},
		//加载更多
		onReachBottom() {
			this.recommendParams.pageNum++;
			this.loadingType = 'loading';
			fetchRecommendProductList(this.recommendParams).then(response => {
				let addProductList = response.data;
				if (response.data.length === 0) {
					//没有更多了
					this.recommendParams.pageNum--;
					this.loadingType = 'nomore';
				} else {
					this.recommendProductList = this.recommendProductList.concat(addProductList);
					this.loadingType = 'more';
				}
			})
		},
		computed: {
			...mapState(['hasLogin']),
			newAdvertiseList() {
				console.log(groupData(this.advertiseList, 2))
				return groupData(this.advertiseList, 2)
			}
		},
		filters: {},
		methods: {
			/**
			 * 加载数据
			 */
			async loadData() {
				fetchContent().then(response => {
					console.log("onLoad", response.data);
					this.advertiseList = response.data.advertiseList;
					this.hotProductList = response.data.hotProductList;
					fetchRecommendProductList(this.recommendParams).then(response => {
						this.recommendProductList = response.data;
						uni.stopPullDownRefresh();
					})
				});
				fetchContentV2().then(response => {
					this.categoryList = [{
						id: 0,
						name: "全部"
					}].concat(response.data.categoryList)
				});
				if (!this.hasLogin) {
					return;
				}
				fetchCartList().then(response => {
					this.cartNum = response.data.reduce((sum, item) => sum + item.quantity, 0);
				})
			},
			//商品详情页
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			//广告详情页
			navToAdvertisePage(item) {
				let id = item.id;
				console.log("navToAdvertisePage", item)
			},
			// 跳转
			goto(code) {
				switch (code) {
					case 'myOrders':
						uni.navigateTo({
							url: '/pages/order/order'
						})
						break;
					case 'collections':
						uni.navigateTo({
							url: '/pages/user/productCollection'
						})
						break;
					case 'records':
						uni.navigateTo({
							url: '/pages/user/readHistory'
						})
						break;
					case 'serverCenter':
						uni.showToast({
							title: '开发中，尽请期待!',
							icon: 'none',
							duration: 2000
						});
						break;
					default:
						break;
				}
			},
			changeTag(index) {
				console.log('index', index)
				this.tagCurrent = index
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.m-t {
		margin-top: 16upx;
	}

	/* 搜索 */
	.search-box {
		padding: 8upx 12upx 32upx 36upx;

		@include flex(x, center, center);

		.search {
			@include flex(x, center, center);
			flex: 1;
		}

		.icon-box {
			position: relative;
			@include flex(x, center, center);
			width: 56upx;
			height: 56upx;
		}

		.cart-icon {
			width: 48upx;
			height: 48upx;
		}

		.cart-badge>view {
			top: 0upx !important;
			right: -12upx !important;
		}
	}

	/* 服务列表 */
	.server-list {
		width: 100vw;
		min-height: 120upx;
		padding: 0 36upx;
		display: flex;
		flex-wrap: wrap;

		.server-item {
			width: 25%;
			height: 120upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.server-icon {
				image {
					width: 48upx;
					height: 48upx;
				}
			}

			.server-text {
				color: rgba(0, 0, 0, 0.7);
			}
		}

	}


	/* 头部 轮播图 */
	.carousel-section {
		position: relative;

		.carousel {
			height: 180upx;
			padding: 36rpx;
			box-sizing: content-box;

			.carousel-item {
				width: 100%;
				height: 100%;
				padding: 0 28upx;
				overflow: hidden;
				@include flex(x, center, center);

				image {
					height: 180upx;
					width: 328upx;
					margin: 0upx 10upx;
				}
			}

			.carousel-item.single {
				image {
					width: 656upx;
				}
			}
		}

	}

	/* 标签列表 */
	.tag-list {
		// padding: 0 36upx;
		.u-scroll-box {
			view {
				background-color: #ffffff;
				border-radius: 60upx;
				margin: 9upx;
			}
		}
	}

	/* 商品列表 */
	.product-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 36upx;

		.product-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			background-color: #ffffff;
			margin-bottom: 36upx;
			border-radius: 12upx;

			&:nth-child(2n+1) {
				margin-right: 4%;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 324upx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.image-wrapper-brand {
			width: 100%;
			height: 150upx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			padding: 0 36upx;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 80upx;
		}

		.title2 {
			font-size: $font-sm;
			color: $font-color-light;
			line-height: 40upx;
		}

		.price {
			padding: 0 36upx 36upx 36upx;
			font-size: $font-lg;
			color: #000000;
			line-height: 1;
			font-weight: 500;
		}
	}
</style>