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

<template>
	<view>
		<lf-nav 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" @click="switchTab(0)">
				<text style="white-space: nowrap">综合排序</text>
			</view>
			<view class="filter-item">
				<text style="white-space: nowrap">黄金珠宝</text>
			</view>
			<view class="filter-item" @click="switchTab(2)">
				<text style="white-space: nowrap">筛选</text>
			</view>
			<!-- 普通列表文字选择 -->
			<view class="filter-modal" v-if="show_filter && tab_current == 0" @click="show_filter = false">
				<view class="filter-content">
					<view>综合排序</view>
					<view>销量最高</view>
					<view>价格最香</view>
					<view>好评最多</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>价格区间</view>
								<view class="lf-flex">
									<input class="filter-input" placeholder="最低价" />
									<view class="filter-division">-</view>
									<input class="filter-input" placeholder="最高价"/>
								</view>
							</view>
							<view class="filter-title" style="margin-top: 80rpx;">
								<text>品牌</text>
								<text class="lf-font-24 lf-color-777">(可多选)</text>
							</view>
							<view class="lf-flex-wrap">
								<view class="filter-capsule" v-for="(item) in 10" :key="item">周大福</view>
							</view>
						</view>
					</view>
					<view class="filter-foot">
						<button class="filter-btn" >重置条件</button>
						<button class="filter-btn solid-btn" >确定</button>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 104rpx;"></view>
		<scroll-view :style="{height: autoHeight}" :scroll-y="true">
			<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: [
					{
						id: 10,
						original_price: "4111.00",
						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
						price: "2412.00",
						product_id: 1008,
						sale: 0,
						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
					},
					{
						id: 10,
						original_price: "4111.00",
						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
						price: "2412.00",
						product_id: 1008,
						sale: 0,
						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
					},
					{
						id: 10,
						original_price: "4111.00",
						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
						price: "2412.00",
						product_id: 1008,
						sale: 0,
						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
					},
					{
						id: 10,
						original_price: "4111.00",
						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
						price: "2412.00",
						product_id: 1008,
						sale: 0,
						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
					}
				]
			}
		},
		computed: {
			autoHeight(){
				return `calc(${this.scrollH}px - ${this.nav_height}px - 124rpx - 104rpx)`;
			}
		},
		onLoad(){
			let info = uni.getSystemInfoSync();
			this.scrollH = info.screenHeight;
		},
		methods: {
			searchClick(){
				this.$url('/pages/shop/search');
			},
			switchTab(current){
				if(this.tab_current != current){
					this.show_filter = true;
				}else{
					this.show_filter = !this.show_filter;
				}
				this.tab_current = current;
			}
		}
	}
</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%;
				height: 630rpx;
				background-color: #FFFFFF;
				left: 0;
				z-index: 14;
				.filter-main{
					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;
					}
				}
			}
		}
	}
	
	.scroll-content{
		padding: 30rpx 32rpx;
	}
</style>