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="detail"></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: [],
				data: [],
				columns: 2,
				goodsid: '',
				title: '',
				parent_id: '',
				language:'',
				page:1,
				
			};
		},
		onLoad(options) {
			console.log(options);
			this.goodsid = options.id
			this.title = options.title
			this.parent_id = options.parent_id
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.title
			})
			this.goods(this.goodsid)
			this.category(this.parent_id)
			if (uni.getStorageSync('language') != '') {
				this.language = uni.getStorageSync('language')
			}
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		methods: {
			//商品详情
			detail(item){
				console.log(item);
				uni.navigateTo({
					url:'/pageA/productdetails?id='+item.id
				})
			},
			//商品分类
			category(id) {
				uni.$u.http.get('/api/goods/category', {
					params: {
						parent_id: id,
						limit:10,
						page:this.page
					}
				}).then((res) => {
					const categoryArr = res
					if (this.language == 'en-US') {
						categoryArr.forEach(item => {
							item.name = item.name_en
						})
					}
					if (this.language == 'es-ES') {
						categoryArr.forEach(item => {
							item.name = item.name_es
						})
					}
					if (this.language == 'it-IT') {
						categoryArr.forEach(item => {
							item.name = item.name_ita
						})
					}

					if (this.language == 'zh-CN') {
						categoryArr.forEach(item => {
							item.name = item.name_cn
						})
					}
					this.list1 = categoryArr
				}).catch(() => {

				})
			},
			//商品列表
			goods(id) {
				uni.$u.http.get('/api/goods', {
					params: {
						category_id: id
					}
				}).then((res) => {
					this.data = res.data
				}).catch(() => {

				})
			},
			shaixuan() {
				this.shai = true,
					this.current = 4
			},
			click(item) {
				console.log('item', item);
				this.curess = item.index
				this.goods(item.id)
				// 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>