wx-qhb/pageA/shoplist.vue

<template>
	<view>
		<u-tabs lineColor="rgba(0,0,0,0)" :activeStyle="{
            color: 'rgba(255, 21, 21, 1)',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :list="list1" @click="click"></u-tabs>
		<view class="box" style="position: relative;">
			<view class="u-flex u-row-between">
				<view @click="current=0" class="u-flex" :style="{color:current==0?'rgba(255, 21, 21, 1)':''}">
					{{i18n.synthesis}}
					<view>
					</view>
					<u-icon name="arrow-down-fill" color="rgba(255, 21, 21, 1)" size="8"></u-icon>
				</view>
				<text @click="current=1" :style="{color:current==1?'rgba(255, 21, 21, 1)':''}">{{i18n.sell}}</text>
				<view @click="current=2" class=" u-flex" :style="{color:current==2?'rgba(255, 21, 21, 1)':''}">
					<view>{{i18n.Pricea}}</view>
					<image src="static/images/up.png" style="width: 16rpx;height: 16rpx;" mode=""></image>
				</view>
				<text @click="current=3" :style="{color:current==3?'rgba(255, 21, 21, 1)':''}">≤1kg</text>
				<text>|</text>
				<view class="u-flex" :style="{color:current==4?'rgba(255, 21, 21, 1)':''}" @click="shaixuan">
					<view style="margin-right: 10rpx;">{{i18n.screen}}</view>
					<image v-if="current==4" src="static/images/shaixuana.png" style="width: 24rpx;height: 24rpx;"
						mode=""></image>
					<image v-else src="static/images/shaixuan.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
				</view>
			</view>
			<liu-waterfall :dataList="data" :column="columns" @click="click"></liu-waterfall>
			<view class="pop" style="position: absolute;top:80rpx" v-if="shai&&current==4">
				<view class=" title">{{i18n.Pricerange}}</view>
				<view class="u-flex u-row-between">
					<view class="input u-flex u-row-center">
						<input style="text-align: center;" type="text" :placeholder="i18n.Bottomprice" />
					</view>
					<text>-</text>
					<view class="input u-flex u-row-center">
						<input style="text-align: center;" type="text" :placeholder="i18n.highestprice" />
					</view>
				</view>
				<view class="title" style="margin-top: 36rpx;">{{i18n.Weightinterval}}</view>
				<view class="u-flex u-row-between">
					<view class="input u-flex u-row-center">
						<input style="text-align: center;" type="text" :placeholder="i18n.Bottomprice" />
					</view>
					<text>-</text>
					<view class="input u-flex u-row-center">
						<input style="text-align: center;" type="text" :placeholder="i18n.highestprice" />
					</view>
				</view>
				<view style="margin-top: 36rpx;" class="title">{{i18n.brand}}</view>
				<view class="u-flex " style="flex-wrap: wrap;column-gap: 34rpx;">
					<view @click="changei(idx)" class="item" v-for="(item,idx) in 8" :key="idx"
						:class="index==idx?'acitem':'item'">
						PURICH/醇粹
					</view>
				</view>
				<view style="margin-top: 36rpx;" class="title">{{i18n.Proprietary}}</view>
				<view class="item">
					{{i18n.yes}}
				</view>
				<view class="bottom u-flex" style="margin-top: 58rpx;">
					<view class="btn1">
						{{i18n.reset}}
					</view>
					<view class="btn2" @click="shai=false">
						{{i18n.enter}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shai: false,
				current: 0,
				curess: 0,
				index: '',
				list1: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}],
				data: [{
					picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
					title: '思考',
					desc: '我是第1个图片',
					id: 1,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg',
					title: '兔子',
					desc: '我是第2个图片',
					id: 2,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg',
					title: '雨天',
					desc: '我是第3个图片',
					id: 3,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png',
					title: '日落',
					desc: '我是第4个图片',
					id: 4,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2022/11/29/19/05/boho-7625140_1280.jpg',
					title: '植物',
					desc: '我是第5个图片',
					id: 5,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2022/08/25/23/06/woman-7411414_1280.png',
					title: '时尚',
					desc: '我是第6个图片',
					id: 6,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2023/03/07/12/45/child-7835677_1280.jpg',
					title: '生活',
					desc: '我是第7个图片',
					id: 7,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
					title: '思考',
					desc: '我是第8个图片',
					id: 8,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg',
					title: '兔子',
					desc: '我是第9个图片',
					id: 9,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg',
					title: '雨天',
					desc: '我是第10个图片',
					id: 10,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2022/11/29/19/05/boho-7625140_1280.jpg',
					title: '植物',
					desc: '我是第11个图片',
					id: 11,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2022/08/25/23/06/woman-7411414_1280.png',
					title: '时尚',
					desc: '我是第12个图片',
					id: 12,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2023/03/07/12/45/child-7835677_1280.jpg',
					title: '生活',
					desc: '我是第13个图片',
					id: 13,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg',
					title: '雨天',
					desc: '我是第14个图片',
					id: 14,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2023/03/07/12/45/child-7835677_1280.jpg',
					title: '生活',
					desc: '我是第15个图片',
					id: 15,
				}, {
					picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
					title: '思考',
					desc: '我是第16个图片',
					id: 16,
				}],
				columns: 2,
			};
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		methods: {
			shaixuan() {
				this.shai = true,
					this.current = 4
			},
			click(item) {
				console.log('item', item);
				this.curess = item.index
				uni.navigateTo({
					url:'/pageB/delivery'
				})
			},
			changei(idx) {
				this.index = idx
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		min-height: 1360rpx;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		padding: 38rpx 20rpx 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.pop {
		width: 750rpx;
		// height: 904rpx;
		background: #FFFFFF;
		padding: 36rpx 32rpx;
		box-sizing: border-box;

		.btn1 {
			width: 702rpx;
			height: 84rpx;
			background: rgba(248, 50, 36, 0.1);
			border-radius: 42rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #F83224;
			line-height: 84rpx;
			text-align: center;
			font-style: normal;
			border-radius: 42rpx 0 0 42rpx;
		}

		.btn2 {
			width: 702rpx;
			height: 84rpx;
			background: #F83224;
			border-radius: 42rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;
			font-style: normal;
			border-radius: 0rpx 42rpx 42rpx 0;
		}

		.item {
			width: 206rpx;
			height: 64rpx;
			background: #F4F4F4;
			border-radius: 36rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #131415;
			line-height: 64rpx;
			text-align: center;
			font-style: normal;
			margin-top: 26rpx;
		}

		.acitem {
			width: 206rpx;
			height: 64rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(248, 50, 36, 1);
			line-height: 64rpx;
			text-align: center;
			font-style: normal;
			margin-top: 26rpx;
			background: rgba(248, 50, 36, 0.1);
			border: 1rpx solid #F83224;
			box-sizing: border-box;
		}

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #131415;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 24rpx;
		}

		.input {
			width: 312rpx;
			height: 64rpx;
			background: #F4F4F4;
			border-radius: 36rpx;
		}
	}
</style>