mp-ui-user/pages/core/index.vue

<template>
	<view class="core">
		<!-- nav -->
		<u-navbar leftIconSize="0" :placeholder="true" bgColor="#ffffff">
			<view class="u-nav-slot" slot="left">
				<text>商城</text>
			</view>
		</u-navbar>
		<!-- 固定顶部搜索、分类 -->
		<view class="fixed-top">
			<!-- 搜索 -->
			<view class="fixed-top-search flex">
				<view class="fixed-top-search__input flex">
					<u--input placeholder="请输入关键词进行搜索" border="none" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" />
					<view class="fixed-top-search__input__btn">搜索</view>
				</view>
				<image src="../../static/core/core_block.png" mode="scaleToFill" />
			</view>
			<view class="fixed-top-classify">
				<u-tabs @change="changeClassify" :scrollable="true" :list="classifyList" lineWidth="20" lineHeight="2"
					lineColor="#FF8D0B" :activeStyle="{
										color: '#333',
										transform: 'scale(1.1)'
									}" :inactiveStyle="{
										color: '#999',
										transform: 'scale(1.1)'
									}" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px; text-align: center;">
				</u-tabs>
			</view>
		</view>
		<view class="core-none"></view>
		<!-- 轮播 -->
		<view class="core-swiper">
			<swiper class="core-swiper-centent" circular :indicator-dots="true" :autoplay="true" :interval="3000" indicator-active-color="#fff">
				<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
					<image :src="item.picUrl" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 二级分类 -->
		<view class="core-category">
			<swiper class="core-category-swiper" :autoplay="false">
				<swiper-item class="swiper-item" v-for="(item, index) in classifyIndex == 0 ? classifyListFilter : classifyList[classifyIndex].list" :key="index">
					<view class="swiper-item__content" v-for="(items, indexs) in item" :key="indexs">
						<image :src="items.picUrl" mode="aspectFit"></image>
						<view class="name">{{ items.name }}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 标签商品 -->
		<view class="tag-goods" v-for="(item, index) in exclusiveSingle" :key="index">
			<view class="tag-goods-content">
				<view class="tag-goods-content-nav flex">
					<view class="tag-goods-content-nav__left flex">
						<image src="../../static/core/core_tag.png" mode=""></image>
						<view class="title">{{ item.name }}</view>
						<image src="../../static/core/core_tag.png" mode=""></image>
					</view>
					<view class="tag-goods-content-nav__right flex">
						<view class="title">更多</view>
						<image src="../../static/core/core_right.png" mode=""></image>
					</view>
				</view>
				
				<view class="tag-goods-content-list">
					<view class="tag-goods-content-list-item flex" v-for="(items, indexs) in item.data" :key="indexs">
						<view class="image flex">
							<image :src="items.picUrl" mode="aspectFit"></image>
						</view>
						<view class="title">{{ items.exchangePrice }}盲豆</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 商品列表 -->
		<view class="core-goods">
			<view class="core-goods-list flex">
				<view class="core-goods-list-item flex" v-for="(item, index) in list" :key="index" @click="toGoodsDetail(item)">
					<view class="image-wrap flex">
						<image :src="item.picUrl" mode="aspectFit"></image>
					</view>
					<view class="content">
						<view class="content-title ells-one">{{ item.title }}</view>
						<view class="content-coin flex">
							<view class="content-coin__left flex">
								<image src="../../static/public/goods_coin.png" mode=""></image>
								<view class="num">×{{ item.exchangePrice }}</view>
							</view>
							<view class="content-coin__right" v-if="item.originPrice">原价：{{ item.originPrice }}</view>
						</view>
						<view class="content-price">￥{{ $numberFormat(item.value) }}</view>
					</view>
				</view>
				<view class="core-goods-list-item"></view>
			</view>
		</view>
		
		<custom-tab-bar :activeValue="'core'" />
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
	import $http from '@/utils/request.js'
	export default {
		components: {
			CustomTabBar,
		},
		data() {
			return {
				imgTop: [],
				goods: [],
				exclusive: [],
				exclusiveSingle: [],
				pageNum: 1,
				total: 0,
				list: [],
				
				/////////
				classifyList: [], // 分类列表
				classifyIndex: 0, // 分类选中下标
				classifyListFilter: [],
				swiperList: [], // 轮播图
			};
		},
		onLoad() {
			this.pageList()
			this.getExclusive()
			this.getClassify()
			this.getSwiper()
		},
		methods: {
			pageList() {
				this.pageNum = 1
				this.total = 0
				this.list = []
				this.getList()
			},
			
			// 获取分类
			getClassify() {
				$http.post('/api/v1/mp/user/exchange/category/listTree', {}).then(res => {
					if(res.code == 0){
						let interval = 10
						this.classifyList = res && res.rows
						this.classifyList.forEach(item => {
							item.picUrl = env.filePublic + item.picUrl.split(',')[0] + '?imageView2/2/w/340'
							item.goodsCategoryList.forEach(ele => {
								ele.picUrl = env.filePublic + ele.picUrl.split(',')[0] + '?imageView2/2/w/340'
							})
							item.list = []
							if(item.goodsCategoryList.length > interval) {
								let num = Math.ceil(item.goodsCategoryList.length / interval)
								let arr = []
								
								let a = 0
								let stop = interval
								for(let i = 1; i <= num; i++) {
									arr = item.goodsCategoryList.slice(a, stop)
									a = i * interval
									stop = stop + interval
									
								}
							} else {
								item.list.push(item.goodsCategoryList)
							}
						})
						if(this.classifyList.length > interval) {
							let num = Math.ceil(this.classifyList.length / interval)
							let arr = []
							
							let a = 0
							let stop = interval
							for(let i = 1; i <= num; i++) {
								arr = this.classifyList.slice(a, stop)
								a = i * interval
								stop = stop + interval
								this.classifyListFilter.push(arr)
							}
						} else {
							this.classifyListFilter =[ [ ...this.classifyList ] ]
						}
						this.classifyList.unshift({ name: '全部' })
						
					}
				})
			},
			
			//轮播图
			getSwiper() {
				$http.post(`/api/v1/mp/user/exchange/banner/list`, {
					noToken: true,
					location: "top"
				}).then(res => {
					res.data.forEach(item => item.picUrl = env.filePublic + item.picUrl.split(',')[0])
					this.swiperList = res.data
				})
			},
			
			// 标签商品
			async getExclusive() {
				let resData = await $http.post(`/api/v1/mp/user/exchange/activity/list`, {
					noToken: true
				})
				let goodsList = []
				for (let item of resData.data) {
			
					let resDatas = await $http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=1&pageSize=4`, {
						noToken: true,
						tagIds: item.tagId
					})
					goodsList.push({
						data: resDatas.rows,
						name: item.name,
						tagId: item.tagId
					})
				}
				goodsList.forEach(item => {
					item.data.forEach(items => {
						items.picUrl = env.filePublic + items.picUrl.split(',')[0] + '?imageView2/2/w/340'
					})
				})
				this.exclusiveSingle = goodsList
			},
			
			// 商品列表
			getList() {
				uni.showLoading({
					title: '加载中'
				});
				let data = {
					categoryId: this.categoryId,
					tagIds: this.tagIds,
					...this.coinNum,
					noToken: true
				}
				$http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=${this.pageNum}&pageSize=20`,data).then(
					res => {
						uni.hideLoading();
						if (res.code == 0) {
							console.log("res: ",res);
							res.rows.forEach(item => {
								let picUrlArr = item.picUrl.split(',')
								item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/340'
							})
			
							this.total = res.total
							this.list = this.list.concat(res.rows)
						}
					}).catch(() => {
					uni.hideLoading();
				})
			},
			
			// 切换分类
			changeClassify(e) {
				console.log(e);
				this.classifyIndex = e.index
				console.log(this.classifyIndex);
			},

			// 跳转点击事件
			toCoreRange(type, data, name) {
				if (type == "link") {
					uni.navigateTo({
						url: `/packageOperate/webview/index?url=${ data }`,
					})
				} else {
					uni.navigateTo({
						url: `/packageGoods/core/index?type=${ type }&data=${ data }&name=${ name }`,
					})
				}
			},

			toGoodsDetail(item) {
				uni.navigateTo({
					url: `/packageGoods/goods/detail?id=${ item.goodsId }`
				})
			},
		},
		onReachBottom() {
			// 判断是否有数据
			if (this.total > this.pageNum * 20) {
				setTimeout(() => {
					++this.pageNum
					this.getList()
				}, 500)
			} else {
				uni.$u.toast('已经到底了')
			}
		},
		onShareAppMessage(res) {
			return {
				title: '盲票，玩的就是有趣',
				path: '/pages/index/index',
				// imageUrl:'../../static/icon/lucky_bg.png',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.core {
		background-color: #fff;
		
		&-none {
			height: 240rpx;
		}
	}
	
	// 固定搜索、分类
	.fixed-top {
		position: fixed;
		z-index: 100;
		width: 100%;
		background-color: #fff;
		
		// 搜索
		&-search {
			justify-content: space-between;
			padding: 14rpx 30rpx 34rpx;
			
			&__input {
				position: relative;
				flex: 1;
				height: 84rpx;
				padding-left: 46rpx;
				background: #F4F5F6;
				border-radius: 20rpx;
				
				&__btn {
					position: absolute;
					right: 0;
					width: 110rpx;
					height: 76rpx;
					line-height: 76rpx;
					font-size: 34rpx;
					text-align: center;
					font-weight: bold;
					color: #FFC062;
					background-color: #333333;
					border-radius: 18rpx;
				}
			}
			
			image {
				width: 52rpx;
				height: 52rpx;
				margin-left: 50rpx;
			}
		}
		
		// 分类
		&-classify {
			padding-bottom: 20rpx;
		}
	}
	
	// 轮播
	.core-swiper {
		margin-bottom: 20rpx;
		
		&-centent {
			height: 330rpx;
			
			.swiper-item {
				width: 100%;
				height: 100%;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	// 二级分类
	.core-category {
		width: 100%;
		height: 360rpx;
		margin-bottom: 34rpx;
		
		&-swiper {
			
			width: 100%;
			height: 100%;
			
			.swiper-item {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				
				&__content {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: space-between;
					width: 20%;
					height: 50%;
					
					image {
						width: 90%;
						height: 70%;
					}
				}
			}
		}
	}
	
	// 标签商品
	.tag-goods {
		border-top: 2px solid #191919;
		border-bottom: 2px solid #191919;
		padding: 4rpx 0;
		margin-bottom: 34rpx;
		
		&-content {
			background-color: #191919;
			padding: 26rpx 32rpx;
			
			&-nav {
				justify-content: space-between;
				height: 40rpx;
				margin-bottom: 34rpx;
				
				&__left {
					image {
						width: 40rpx;
						height: 30rpx;
					}
					
					.title {
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						font-size: 40rpx;
						color: #FFFFFF;
						padding: 0 36rpx;
					}
				}
				
				&__right {
					.title {
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						color: #FFFFFF;
						margin-right: 12rpx;
					}
					
					image {
						width: 22rpx;
						height: 20rpx;
					}
				}
			}
			
			&-list {
				display: flex;
				height: 260rpx;
				overflow-x: auto;
				
				&-item {
					flex-direction: column;
					margin-right: 14rpx;
					
					.image {
						width: 220rpx;
						height: 200rpx;
						background: #FFFFFF;
						box-shadow: 0px 0px 4px 0px rgba(100, 100, 100, 0.13);
						border-radius: 4rpx;
						margin-bottom: 24rpx;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
					
					.title {
						text-align: center;
						line-height: 28rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
	
	// 商品列表
	.core-goods {
		padding: 0 34rpx;
		
		&-list {
			width: 100%;
			justify-content: space-between;
			flex-wrap: wrap;
			
			&-item {
				flex-direction: column;
				justify-content: flex-start;
				width: 48%;
				// height: 520rpx;
				padding-bottom: 36rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 3px 0px rgba(100, 100, 100, 0.1);
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				
				.image-wrap {
					width: 100%;
					height: 320rpx;
					margin-bottom: 18rpx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.content {
					width: 100%;
					padding: 0 22rpx;
					
					&-title {
						height: 28rpx;
						font-size: 28rpx;
						line-height: 28rpx;
						font-weight: bold;
						margin-bottom: 40rpx;
					}
					
					&-coin {
						height: 30rpx;
						font-size: 24rpx;
						justify-content: flex-start;
						margin-bottom: 34rpx;
						
						&__left {
							margin-right: 24rpx;
							
							image {
								width: 34rpx;
								height: 30rpx;
							}
						}
						
						&__right {
							color: #666666;
							text-decoration: line-through;
						}
					}
					
					&-price {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
			
			&-item:last-child {
				box-shadow: none;
			}
		}
	}
</style>
<style lang="scss" scoped>
	.u-nav-slot {
		text {
			font-size: 32rpx;
		}
	}
</style>