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

<template>
	<view class="core">
		<!-- nav -->
		<u-navbar leftIconSize="0" :placeholder="true" bgColor="#ffffff">
			<view class="u-nav-slot" slot="left">
				<view class="u-nav-slot__input flex">
					<u-input v-model="goodsTitle" @confirm="toGoodsList()" confirmType="search" placeholder="搜索商品" border="none" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" />
					<!-- <view class="u-nav-slot__input__btn" @click="toGoodsList()">搜索</view> -->
				</view>
			</view>
		</u-navbar>
		<!-- 固定顶部搜索、分类 -->
		<view class="fixed-top">
			<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 class="fixed-top-screen" v-if="scrollTop > 50">
				<view class="fixed-top-screen-content flex">
					<view class="fixed-top-screen-content__item flex">
						<view class="title">我的盲豆：</view>
						<view class="num">{{ initData.coinNum ? `${ initData.coinNum }` : '--' }}</view>
					</view>
					<view class="fixed-top-screen-content__item flex" @click="changeScreen(1)">
						<view class="title">盲豆价格</view>
						<view class="select flex" v-if="screenIndex == 1">
							<image src="../../static/core/core_up.png" mode="scaleToFill" v-if="priceShow" />
							<image src="../../static/core/core_down.png" mode="scaleToFill" v-else />
						</view>
						<view class="select flex" v-else>
							<image src="../../static/core/core_null.png" mode="scaleToFill" />
						</view>
					</view>
					<view class="fixed-top-screen-content__item flex" @click="changeScreen(2)">
						<view class="title" v-if="!coinActionInfo.min && !coinActionInfo.max">盲豆区间</view>
						<view class="title flex" v-else>
							<view v-if="coinActionInfo.min">{{ coinActionInfo.min }}</view>
							<view v-if="coinActionInfo.max">-{{ coinActionInfo.max }}</view>
							<view>{{ coinActionInfo.desc }}</view>
						</view>
						<u-icon name="arrow-up" size="13" color="#fff" v-if="screenShow"></u-icon>
						<u-icon name="arrow-down" size="13" color="#fff" v-else></u-icon>
					</view>
					<view class="fixed-top-screen-content__coin" v-if="screenShow">
						<view class="fixed-top-screen-content__coin__list">
							<view class="item flex" :class="{ 'action': coinActionIndex == index }" v-for="(item, index) in coinList" :key="index" @click="selectCoin(item, index)">
								<text v-if="item.min">{{ item.min }}</text>
								<text v-if="item.max">-{{ item.max }}</text>
								<text>{{ item.desc }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="core-none"></view>
		
		<!-- 轮播 -->
		<view class="core-swiper" v-if="swiperList.length">
			<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="scaleToFill" @click="toPage(item)"></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-wrap">
						<view class="swiper-item-wrap__content" v-for="(items, indexs) in item" :key="indexs">
							<image :src="items.picUrl" mode="aspectFit" @click="toCategoryGoods(index, indexs)"></image>
							<view class="name">{{ items.name }}</view>
						</view>
					</view>
					
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 标签商品 -->
		<view class="tag-goods" v-for="(item, index) in exclusiveSingle" :key="index">
			<image class="tag-goods-imgBg" src="../../static/core/core_bg.png" mode="scaleToFill"></image>
			<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="scaleToFill"></image>
						<view class="title">{{ item.name }}</view>
						<image src="../../static/core/core_tag.png" mode="scaleToFill"></image>
					</view>
					<view class="tag-goods-content-nav__right flex" @click="toTagGoods(item)">
						<view class="title">更多</view>
						<image src="../../static/core/core_right.png" mode="scaleToFill"></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" @click="toGoodsDetail(items)">
						<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">
						<!-- #ifdef MP-ALIPAY -->
						<view class="content-titletwo">{{ item.title }}</view>
						<!-- #endif -->
						<!-- #ifndef MP-ALIPAY -->
						<view class="content-title ells-one">{{ item.title }}</view>
						<!-- #endif -->
						<view class="content-coin flex">
							<view class="content-coin__left flex">
								<image src="../../static/public/goods_coin.png" mode="scaleToFill"></image>
								<view class="num"><text>×</text>{{ 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 class="flex empty" v-if="!list.length">
				<view class="center">
					<image class="center-img" src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_3.png" mode="scaleToFill"></image>
					<view class="center-font">还没有商品</view>
				</view>
			</view>
		</view>
		
		<custom-tab-bar :activeValue="'core'" />
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
	export default {
		components: {
			CustomTabBar,
		},
		data() {
			return {
				pageNum: 1,
				total: 0,
				list: [],
				exclusiveSingle: [],
				categoryId: '',
				classifyList: [], // 分类列表
				classifyIndex: 0, // 分类选中下标
				classifyListFilter: [],
				swiperList: [], // 轮播图
				goodsTitle: '',
				scrollTop: 0,
				screenIndex: 0,
				priceShow: false,
				priceSort: null,
				priceStep: 0,
				screenShow: false,
				initData: {},
				coinNum:{
					startPrice: null,
					endPrice: null
				},
				coinActionIndex: 0,
				coinActionInfo: {},
				coinList:[
					{
						min: null,
						max: null,
						desc: '全部'
					},
					{
						min: 1,
						max: 100,
						desc: ''
					},
					{
						min: 101,
						max: 200,
						desc: ''
					},
					{
						min: 201,
						max: 500,
						desc: ''
					},
					{
						min: 501,
						max: 1000,
						desc: ''
					},
					{
						min: 1001,
						max: 5000,
						desc: ''
					},
					{
						min: 5000,
						max: null,
						desc: '以上'
					},
				],
			};
		},
		onLoad() {
			this.pageList()
			this.getExclusive()
			this.getClassify()
			this.getSwiper()
		},
		onShow() {
			if(uni.getStorageSync('token')) {
				this.getBean()
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop
		},
		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: '全部', categoryId: '' })
					}
				})
			},
			
			//轮播图
			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=10`, {
						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,
					priceSort: this.priceSort,
					...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) {
							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();
				})
			},
			
			getBean() {
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/mine/init', {}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.initData = res.data
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			
			// 切换分类
			changeClassify(e) {
				this.categoryId = e.categoryId
				this.classifyIndex = e.index
				this.screenIndex = 0
				this.priceStep = 0
				this.priceShow = false
				this.priceSort = null
				this.coinActionIndex = 0
				this.screenShow = false
				this.coinNum.endPrice = null
				this.coinNum.startPrice = null
				this.coinActionInfo = {}
				this.pageList()
			},
			
			// 盲豆筛选切换
			changeScreen(num) {
				this.screenIndex = num
				if(num == 1) {
					if(this.priceStep == 0) {
						this.priceStep ++
						this.priceShow = true
						this.priceSort = 1
					} else if (this.priceStep == 1) {
						this.priceStep ++
						this.priceShow = false
						this.priceSort = 2
					} else if(this.priceStep == 2) {
						this.priceStep = 0
						this.priceShow = false
						this.priceSort = null
						this.screenIndex = 0
					}
					this.pageList()
				} else if (num == 2) {
					this.priceStep = 0
					this.screenShow = !this.screenShow
					this.priceShow = false
					this.priceSort = null
				}
			},
			
			selectCoin(item, index) {
				this.coinActionIndex = index
				this.coinActionInfo = item
				this.screenShow = !this.screenShow
				this.coinNum.endPrice = item.max
				this.coinNum.startPrice = item.min
				this.pageList()
			},

			// 跳转点击事件
			toPage(item) {
				if (item.type == "link") {
					uni.navigateTo({
						url: `/packageOperate/webview/index?linkUrl=${ item.linkUrl }`,
					})
				} else if (item.type == "tag") {
					uni.navigateTo({
						url: `/packageGoods/goods/list?name=${ item.name }&tagIds=${ item.goodsTags ? item.goodsTags : '' }`
					})
				}
			},

			// 商品详情
			toGoodsDetail(item) {
				uni.navigateTo({
					url: `/packageGoods/goods/detail?id=${ item.goodsId }`
				})
			},
			
			// 商品列表
			toGoodsList() {
				uni.navigateTo({
					url: `/packageGoods/goods/list?title=${ this.goodsTitle }`
				})
			},
			
			// 商品标签
			toTagGoods(item) {
				uni.navigateTo({
					url: `/packageGoods/goods/list?name=${ item.name }&tagIds=${ item.tagId ? item.tagId : '' }`
				})
			},
			
			// 商品分类
			toCategoryGoods(index, indexs) {
				let list = this.classifyIndex == 0 ? this.classifyListFilter : this.classifyList[this.classifyIndex].list
				let item = list[index][indexs]
				uni.navigateTo({
					url: `/packageGoods/goods/list?name=${ item.name }&categoryId=${ item.categoryId ? item.categoryId : '' }`
				})
			},
		},
		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',
			}
		},
		//分享朋友圈
		onShareTimeline() {
			return {
				title: '盲票，玩的就是有趣',
				path: '/pages/index/index'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.core {
		background-color: #fff;
		
		&-none {
			height: 120rpx;
		}
	}
	
	// 搜索
	.u-nav-slot {
		text {
			font-size: 32rpx;
		}
		
		&__input {
			position: relative;
			height: 70rpx;
			width: 518rpx;
			padding-left: 30rpx;
			background: #F4F5F6;
			border-radius: 35rpx;
			
			&__btn {
				z-index: 200;
				width: 140rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 30rpx;
				text-align: center;
				font-weight: bold;
				color: #fff;
				background-color: #FF8D0B;
				border-radius: 35rpx;
			}
		}
	}
	
	// 固定搜索、分类
	.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;
		}
		
		// 盲豆筛选
		&-screen {
			height: 64rpx;
			
			&-content {
				position: relative;
				justify-content: space-between;
				padding: 0 34rpx;
				color: #fff;
				height: 100%;
				background: #F9822C;
				
				&__item {
					.title {
						margin-right: 14rpx;
					}
					
					.select {
						flex-direction: column;
						
						image {
							width: 18rpx;
							height: 26rpx;
						}
					}
				}
				
				&__coin {
					position: absolute;
					right: 0;
					bottom: -390rpx;
					width: 200rpx;
					height: 390rpx;
					background: #FFFFFF;
					box-shadow: 0px 0px 2px 0px rgba(100, 100, 100, 0.1);
					
					&__list {
						padding-top: 20rpx;
						color: #666;
						
						.item {
							margin-bottom: 30rpx;
							font-size: 26rpx;
							line-height: 26rpx;
						}
						
						.action {
							color: #F9822C;
						}
					}
				}
			}
		}
	}
	
	// 轮播
	.core-swiper {
		margin: 0 34rpx 20rpx;
		border-radius: 16rpx;
		
		&-centent {
			height: 300rpx;
			
			.swiper-item {
				width: 100%;
				height: 100%;
				
				image {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}
		}
	}
	
	// 二级分类
	.core-category {
		width: 100%;
		height: 360rpx;
		margin-bottom: 34rpx;
		padding: 0 34rpx;
		
		&-swiper {
			
			width: 100%;
			height: 360rpx;
			
			.swiper-item {
				width: 100%;
				height: 360rpx;
				
				&-wrap {
					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 {
		display: flex;
		align-items: center;
		position: relative;
		margin: 0 34rpx 34rpx;
		height: 350rpx;
		
		&-imgBg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 350rpx;
		}
		
		&-content {
			width: 100%;
			position: absolute;
			top: 0;
			z-index: 5;
			padding: 26rpx 22rpx;
			
			&-nav {
				justify-content: space-between;
				height: 40rpx;
				margin-bottom: 10rpx;
				
				&__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: 180rpx;
						height: 180rpx;
						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%;
				padding-bottom: 32rpx;
				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: 16rpx;
					
					image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx 16rpx 0 0;
					}
				}
				
				.content {
					width: 100%;
					padding: 0 22rpx;
					
					&-title {
						height: 28rpx;
						font-size: 28rpx;
						line-height: 28rpx;
						font-weight: bold;
						overflow: hidden;
					}
					&-titletwo {
						height: 34rpx;
						font-size: 28rpx;
						line-height: 34rpx;
						font-weight: bold;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					
					&-coin {
						height: 34rpx;
						font-size: 24rpx;
						justify-content: space-between;
						margin-top: 30rpx;
						margin-bottom: 24rpx;
						
						&__left {
							margin-right: 24rpx;
							font-size: 28rpx;
							font-weight: bold;
							
							text {
								font-weight: normal;
							}
							
							image {
								width: 34rpx;
								height: 34rpx;
							}
						}
						
						&__right {
							color: #666666;
							text-decoration: line-through;
						}
					}
					
					&-price {
						font-size: 24rpx;
						line-height: 24rpx;
						color: #666666;
					}
				}
			}
			
			&-item:last-child {
				box-shadow: none;
			}
		}
		
		.empty {
			.center {
				text-align: center;
				&-img {
					width: 228rpx;
					height: 320rpx;
				}
			
				&-font {
					font-size: 30rpx;
					font-weight: 400;
					color: #999999;
					margin-bottom: 200rpx;
				}
			}
		}
	}
</style>