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>
		
		<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.getSwiper()
			// this.getListIficationBox()
			this.getExclusive()
			this.getClassify()
			this.getSwiper()
		},
		methods: {
			
			// 获取分类
			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: '全部' })
						
					}
					
					console.log(this.classifyList);
					console.log(this.classifyListFilter);
				})
			},
			
			// 切换分类
			changeClassify(e) {
				console.log(e);
				this.classifyIndex = e.index
				console.log(this.classifyIndex);
			},
			
			changeIndicatorDots(e) {
				this.indicatorDots = true
			},

			changeAutoplay(e) {
				this.autoplay = true
			},

			intervalChange(e) {
				this.interval = e.target.value
			},

			durationChange(e) {
				this.duration = e.target.value
			},

			// 跳转点击事件
			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 }`,
					})
				}
			},

			//轮播图
			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
					console.log(this.swiperList);
				})
			},

			// 分类列表
			getListIficationBox() {
				$http.post(`/api/v1/mp/user/exchange/category/list`, {
					noToken: true
				}).then(res => {
					console.log(res);
					res.data.forEach(item => {
						let picUrlArr = item.picUrl.split(',')
						item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/340'
					})
					this.goods = this.goods.concat(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
				console.log(this.exclusiveSingle);
			},


			//精选商品部分
			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&orderByColumn=${this.orderByColumn}&isAsc=${this.isAsc}`,
					data).then(
					res => {
						uni.hideLoading();
						if (res.code == 0) {
							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();
				})
			},

			pageList() {
				this.pageNum = 1
				this.total = 0
				this.list = []
				this.getList()
			},

			pageListTwo() {
				this.pageNum = 1
				this.total = 0
				this.list = []
				this.getList()
			},

			openSelect() {
				if (this.coinShow == false) {
					this.coinShow = true
					this.ascShow = false

					uni.createSelectorQuery().select(".core-cla").boundingClientRect((res) => {
						uni.createSelectorQuery().select(".screen-coin-select-text-two").boundingClientRect((
							data) => {
							uni.pageScrollTo({
								duration: 0,
								scrollTop: -res.top + data.top + 350,
							})
						}).exec()
					}).exec()
				} else {
					this.coinShow = false
				}
			},

			//排序切换
			ascSelect() {
				if (this.ascShow == false) {
					this.ascShow = true
					this.coinShow = false

					uni.createSelectorQuery().select(".core-cla").boundingClientRect((res) => {
						uni.createSelectorQuery().select(".screen-coin-select-text").boundingClientRect((data) => {
							uni.pageScrollTo({
								duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
								scrollTop: -res.top + data.top,
							})
						}).exec()
					}).exec()

				} else {
					this.ascShow = false
				}
			},

			selectCoin(item, index) {
				this.actionIndex = index
				this.actionInfo = this.coinList[this.actionIndex]
				this.coinShow = false
				this.coinNum.startPrice = item.min
				this.coinNum.endPrice = item.max
				this.pageList()
			},

			selectCoinTwo(item, index) {
				this.ascListIndex = index
				this.ascListsingle = this.ascList[this.ascListIndex]
				this.ascShow = false

				if (item.data == '') {
					this.orderByColumn = ''
					this.isAsc = ''
				} else {
					this.isAsc = item.data
					this.orderByColumn = 'exchangePrice'
				}

				this.pageListTwo()
			},
		},

		//精选商品
		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;
					}
				}
			}
		}
	}
	
</style>
<style lang="scss" scoped>
	.u-nav-slot {
		text {
			font-size: 32rpx;
		}
	}
</style>