ec.uniapp-master/pages/index/onlineMall/onlineMall.vue

<template>
	<view>
		<lf-nav :title="title" :showIcon="true" @changeHeight="e => nav_height = e"></lf-nav>
		<view class="head">
			<u-search placeholder="搜你想要的" :show-action="false" :disabled="true" @click="searchClick"></u-search>
		</view>
		<view class="filter-box">
			<!-- tabs -->
			<view class="filter-item" 
				v-for="(item, index) in filter_tabs" 
				:key="index" @click="switchTab(index)">
				<text style="white-space: nowrap" v-if="index == 0">{{ item.list[item.select_index].name }}</text>
				<text style="white-space: nowrap" v-else>{{ item.name }}</text>
			</view>
			<!-- 普通列表文字选择 -->
			<view class="filter-modal" v-if="show_filter && tab_current == 0" @click="show_filter = false">
				<view class="filter-content">
					<view v-for="(item, index) in filter_tabs[0].list"
						:key="index" 
						:class="{'active-c': filter_tabs[0].select_index == index}" 
						@click="clickSort(index)">{{ item.name }}
					</view>
				</view>
			</view>
			<!-- 多条件搜索 -->
			<view class="filter-modal" v-else-if="show_filter && tab_current == 2" @click="show_filter = false">
				<view class="filter-many" @click.stop>
					<view class="filter-main">
						<view>
							<view class="filter-title lf-row-between">
								<view>{{ filter_tabs[2].list[0].name }}</view>
								<view class="lf-flex">
									<input class="filter-input" type="number" v-model="filter_tabs[2].list[0].min_price" placeholder="最低价" />
									<view class="filter-division">-</view>
									<input class="filter-input" type="number" v-model="filter_tabs[2].list[0].max_price" placeholder="最高价"/>
								</view>
							</view>
							<view class="filter-title" style="margin-top: 80rpx;">
								<text>{{ filter_tabs[2].list[1].name }}</text>
								<text class="lf-font-24 lf-color-777">(可多选)</text>
							</view>
							<view class="lf-flex-wrap">
								<view class="filter-capsule" 
									:class="{'active-bg': autoSelectBrand(index)}"
									@click="clickBrand(index)"
									v-for="(item, index) in filter_tabs[2].list[1].brand" 
									:key="index">{{ item.name }}
								</view>
							</view>
						</view>
					</view>
					<view class="filter-foot">
						<button class="filter-btn" @click="reset">重置条件</button>
						<button class="filter-btn solid-btn" @click="submit">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 104rpx;"></view>
		<scroll-view :style="{height: autoHeight}" :scroll-y="true" @scrolltolower="scrolltolower">
			<view class="scroll-content">
				<lf-waterfall :list="list"></lf-waterfall>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
	export default {
		components: {
			lfWaterfall
		},
		data(){
			return {
				show_filter: true,
				tab_current: null,
				scrollH: 0,
				nav_height: 0,
				list: [],
				title: '',
				c_id: 0,
				filter_tabs: [{
					name: '综合排序',
					select_index: 0,
					list: [{
						name: '综合排序',
						orderBy: ''
					},{
						name: '销量最高',
						orderBy: 'sale_count'
					},{
						name: '价格最香',
						orderBy: 'sell_price'
					},{
						name: '最新排序',
						orderBy: 'updated_at'
					}]
				},{
					name: ''
				},{
					name: '筛选',
					list: [{
						name: '价格区间',
						min_price: '',
						max_price: ''
					},{
						name: '品牌',
						brand: [],
						selected: []
					}]
				}],
				filter_tabs_source: []
			}
		},
		computed: {
			autoHeight(){
				return `calc(${this.scrollH}px - ${this.nav_height}px - 124rpx - 104rpx)`;
			},
			autoSelectBrand(){
				return function(index){
					let item = this.filter_tabs[2].list[1];
					let flag = false;
					item.selected.map(i => {
						if(index == i){
							flag = true;
						}
					})
					return flag;
				}
			}
		},
		onLoad(options){
			let info = uni.getSystemInfoSync();
			this.scrollH = info.screenHeight;
			this.c_id = options.id;
			this.getGoodsList();
		},
		methods: {
			// 首次获取商品列表
			getGoodsList(){
				this.$http.get({
					api: 'api/store/list',
					data: {
						c_id: this.c_id
					}
				}).then(res => {
					console.log("getgoodslist", res);
					this.getBrandList();
					let data_list = res.data.data || [];
					let list = data_list.map(item => {
						return {
							id: item.id,
							original_price: item.market_price,
							picture: item.img,
							pictures: [item.img],
							price: item.min_price,
							product_id: item.brand_id,
							sale: item.sale_count,
							title: item.name
						}
					})
					if(data_list[0] && data_list[0].tags){
						this.title = data_list[0].tags[0];
						this.filter_tabs[1].name = data_list[0].tags[0];
					}
					this.list = list;
				})
			},
			// 获取品牌列表，只会在第一次进入页面时获取
			getBrandList(){
				this.$http.get({
					api: 'api/brand'
				}).then(res => {
					console.log("brand", res);
					let list = res.data.data.list;
					let brand = list.map(item => {
						return {name: item.name, id: item.id};
					})
					this.filter_tabs[2].list[1].brand = brand;
					this.filter_tabs_source = JSON.parse(JSON.stringify(this.filter_tabs));
				})
			},
			// 筛选后的接口请求获取商品列表
			getFilterGoods(){
				let sortItem = this.filter_tabs[0];
				let moreItem = this.filter_tabs[2];
				let par = {
					c_id: this.c_id
				}
				// 排序
				par.orderBy = sortItem.list[sortItem.select_index].orderBy;
				// 品牌
				if(moreItem.list[1].selected.length){
					let brand_id = [];
					moreItem.list[1].selected.map(s_item => {
						brand_id.push( moreItem.list[1].brand[s_item].id );
					})
					par.brand_id = brand_id;
				}
				// 价格
				if(moreItem.list[0].min_price && moreItem.list[0].max_price){
					par.price = moreItem.list[0].min_price +'-'+ moreItem.list[0].max_price;
				}
				// TODO 传入分页等信息
				this.$http.get({
					api: 'api/store/list',
					data: par
				}).then(res => {
					console.log("res", res);
				})
			},
			// 点击选择筛选
			clickSort(index){
				this.filter_tabs[0].select_index = index;
				this.getFilterGoods();
			},
			// 点击选中筛选某个品牌
			clickBrand(index){
				let item = this.filter_tabs[2].list[1];
				let num = item.selected.indexOf(index);
				if(num != -1){
					item.selected.splice(num, 1);
				}else{
					item.selected.push(index);
				}
			},
			// 提交筛选
			submit(){
				console.log("所以筛选条件", this.filter_tabs)
				this.show_filter = false;
				this.getFilterGoods();
			},
			// 重置所有筛选
			reset(){
				if(this.filter_tabs_source && Object.keys(this.filter_tabs_source).length){
					this.filter_tabs = JSON.parse(JSON.stringify(this.filter_tabs_source));
					this.show_filter = false;
					this.getFilterGoods();
				}else{
					this.$msg('重置失败', {icon: 'error'});
				}
			},
			// 搜索框被点击
			searchClick(){
				this.$url('/pages/shop/search');
			},
			// 切换tabs
			switchTab(current){
				if(this.tab_current != current){
					this.show_filter = true;
				}else{
					this.show_filter = !this.show_filter;
				}
				this.tab_current = current;
			},
			// scroll page滚动到底部
			scrolltolower(){
				this.$msg('页面触底啦~')
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.head{
		padding: 30rpx 32rpx;
	}
	
	.filter-box{
		width: 750rpx;
		height: 102rpx;
		border-bottom: 1rpx solid #e5e5e5;
		position: fixed;
		background-color: #FFFFFF;
		z-index: 9;
		display: flex;
		// justify-content: space-between;
		justify-content: space-around;
		align-items: center;
		padding: 0 32rpx;
		box-sizing: border-box;
		.filter-item{
			width: 114rpx;
			height: 62rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #222222;
			.tab-active{
				display: inline-block;
				transform: rotate(180deg);
				color: #15716E !important;
			}
		}
		.filter-modal{
			position: absolute;
			z-index: 7;
			background-color: rgba(0,0,0,0.5);
			top: 103rpx;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: calc(100vh - 103rpx);
			.filter-content{
				position: absolute;
				width: 100%;
				height: max-content;
				max-height: 806rpx;
				background-color: #FFFFFF;
				left: 0;
				z-index: 14;
				overflow-y: scroll;
				padding: 0 0 32rpx 32rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				view{
					height: 60rpx;
					// border-bottom: 1rpx solid #e5e5e5;
					padding: 20rpx 0;
					line-height: 60rpx;
				}
			}
			.filter-many{
				position: absolute;
				width: 100%;
				min-height: max-content;
				max-height: 630rpx;
				background-color: #FFFFFF;
				left: 0;
				z-index: 14;
				.filter-main{
					min-height: max-content;
					max-height: 500rpx;
					overflow-y: scroll;
					box-sizing: border-box;
					padding: 32rpx;
					.filter-title{
						font-size: 28rpx;
						color: #222222;
						font-weight: bold;
						margin-bottom: 20rpx;
						.filter-input{
							width: 160rpx;
							height: 50rpx;
							background-color: #FFFFFF;
							border: 1rpx solid #e5e5e5;
							text-align: center;
							font-size: 24rpx;
							font-weight: initial;
							border-radius: 40rpx;
						}
						.filter-division{
							padding: 0 20rpx;
							font-weight: initial;
						}
					}
					.filter-capsule{
						width: 163rpx;
						height: 62rpx;
						border-radius: 31rpx;
						border: 1rpx solid #999999;
						font-size: 20rpx;
						color: #999999;
						text-align: center;
						line-height: 62rpx;
						margin-right: 12rpx;
						&:nth-child(4n){
							margin-right: 0rpx;
						}
						&:nth-child(n+5){
							margin-top: 12rpx;
						}
					}
					.filter-active{
						border-color: #15716E;
						color: #15716E;
					}
					.input-search{
						width: 686rpx;
						height: 62rpx;
						background-color: #FFFFFF;
						border-radius: 10rpx;
						border: 1rpx solid #DDDDDD;
						box-sizing: border-box;
						padding: 0 15rpx;
						font-size: 28rpx;
						margin-bottom: 50rpx;
					}
				}
				.filter-main>view:nth-child(n+3){
					margin-top: 40rpx;
				}
				.filter-foot{
					height: 130rpx;
					border-top: 1rpx solid #e5e5e5;
					padding: 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.filter-btn{
						width: 332rpx;
						height: 90rpx;
						border-radius: 10rpx;
						border: 1rpx solid #555555;
						background-color: #FFFFFF;
						line-height: 88rpx;
						font-size: 32rpx;
						color: #555555;
						margin: 0;
					}
					.solid-btn{
						background-color: #15716E;
						color: #FFFFFF;
						border: none;
					}
				}
			}
		}
	}
	.active-c{
		color: #15716E;
	}
	.active-bg{
		background: #15716E;
		color: #fff !important;
		border: none;
	}
	.scroll-content{
		padding: 30rpx 32rpx;
	}
</style>