wx-qhb/pageA/shoplist.vue

<template>
	<view>
		<u-tabs lineColor="rgba(0,0,0,0)" :current='current' :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="first" class="u-flex" :style="{color:current1==0?'rgba(255, 21, 21, 1)':''}">
					{{i18n.synthesis}}
					<view>
					</view>

				</view>
				<view class="u-flex">
					<text @click="sale_num" :style="{color:current1==1?'rgba(255, 21, 21, 1)':''}">{{i18n.sell}}</text>
					<view class="u-flex-column">
						<u-icon v-if="desc==false && current1==1" name="arrow-up-fill" color="rgba(255, 21, 21, 1)"
							size="8"></u-icon>
						<u-icon v-if="(desc==true ) || (desc==false && current1 !=1) " name="arrow-up-fill"
							size="8"></u-icon>
						<u-icon
							v-if="(desc==false && current1 ==1) || (desc==true && current1 !=1) || (desc==false && current1 !=1) "
							name="arrow-down-fill" size="8"></u-icon>
						<u-icon v-if="desc==true && current1==1" name="arrow-down-fill" color="rgba(255, 21, 21, 1)"
							size="8"></u-icon>
					</view>
				</view>
				<view @click="price" class=" u-flex" :style="{color:current1==2?'rgba(255, 21, 21, 1)':''}">
					<view>{{i18n.Pricea}}</view>
					<!-- <image src="static/images/up.png" style="width: 16rpx;height: 16rpx;" mode=""></image> -->
					<view class="u-flex-column">
						<u-icon v-if="desc==false && current1==2" name="arrow-up-fill" color="rgba(255, 21, 21, 1)"
							size="8"></u-icon>
						<u-icon v-if="(desc==true ) || (desc==false && current1 !=2) " name="arrow-up-fill"
							size="8"></u-icon>
						<u-icon
							v-if="(desc==false && current1 ==2) || (desc==true && current1 !=2) || (desc==false && current1 !=2) "
							name="arrow-down-fill" size="8"></u-icon>
						<u-icon v-if="desc==true && current1==2" name="arrow-down-fill" color="rgba(255, 21, 21, 1)"
							size="8"></u-icon>
					</view>
				</view>
				<text @click="weightty" :style="{color:current1==3?'rgba(255, 21, 21, 1)':''}">≤1kg</text>
				<text>|</text>
				<view class="u-flex" :style="{color:current1==4?'rgba(255, 21, 21, 1)':''}" @click="shaixuan">
					<view style="margin-right: 10rpx;">{{i18n.screen}}</view>
					<image v-if="current1==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&&current1==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"
							v-model="price_range_start" />
					</view>
					<text>-</text>
					<view class="input u-flex u-row-center">
						<input style="text-align: center;" type="text" :placeholder="i18n.highestprice"
							v-model="price_range_end" />
					</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"
							v-model="weight_range_start" />
					</view>
					<text>-</text>
					<view class="input u-flex u-row-center">
						<input style="text-align: center;" type="text" :placeholder="i18n.highestprice"
							v-model="weight_range_end" />
					</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(item,idx)" v-for="(item,idx) in brandlist" :key="idx">
						<view :class="index==idx?'acitem':'item'" class="" v-if="language =='zh-CN'">
							{{item.name_cn}}
						</view>
						<view :class="index==idx?'acitem':'item'" class="" v-if="language =='en-US'">
							{{item.name_en}}
						</view>
						<view :class="index==idx?'acitem':'item'" class="" v-if="language =='es-ES'">
							{{item.name_es}}
						</view>
						<view :class="index==idx?'acitem':'item'" class="" v-if="language =='it-IT'">
							{{item.name_ita}}
						</view>
					</view>
				</view>
				<view style="margin-top: 36rpx;" class="title">{{i18n.Proprietary}}</view>
				<view :class="yes==true?'acitem':'item'" @click="yesa">
					<!-- {{yes}} -->
					{{i18n.yes}}
				</view>
				<view class="bottom u-flex" style="margin-top: 58rpx;">
					<view class="btn1" @click="reset">
						{{i18n.reset}}
					</view>
					<view class="btn2" @click="enter">
						{{i18n.enter}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yes: false,
				shai: false,
				current1: 0,
				current: 0,
				index: '',
				list1: [],
				data: [],
				columns: 2,
				goodsid: '',
				title: '',
				parent_id: '',
				language: 'zh-CN',
				page: 1,
				weight_range_start: '', //重量区间 start
				weight_range_end: '', //重量区间 end
				brand_id: '', //品牌id
				price_range_start: '', //价格区间
				price_range_end: '', //价格区间
				brandlist: [],
				static: '', //销售或价格状态
				desc: true,
				brand_idone: ''
			};
		},
		onLoad(options) {
			this.goodsid = options.id
			this.title = options.title
			this.parent_id = options.parent_id
			this.current = Number(options.index)
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.title
			})
			this.goods(this.goodsid)
			this.category(this.parent_id)
			if (uni.getStorageSync('language') != '') {
				this.language = uni.getStorageSync('language')
			}
			// this.brand()
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		methods: {
			first(){
				this.current1=0
				this.reset()
			},
			//重置
			reset() {
				this.weight_range_start = ''
				this.weight_range_end = ''
				this.brand_id = this.brand_idone //品牌id
				this.price_range_start = '' //价格区间
				this.price_range_end = '' //价格区间
				this.yes = false
				this.shai = false
				this.goods(this.goodsid)
			},
			//重量筛选
			weightty() {
				this.current1 = 3
				this.weight_range_start = 0
				this.weight_range_end = 1
				this.goods(this.goodsid)
			},
			sale_num() {
				this.current1 = 1
				this.static = 'sale_num'
				this.desc = !this.desc
				this.goods(this.goodsid)
			},
			price() {
				this.current1 = 2
				this.static = 'price'
				this.desc = !this.desc
				this.goods(this.goodsid)
			},
			enter() {
				this.shai = false
				this.goods(this.goodsid)
			},

			yesa() {
				this.yes = !this.yes
			},
			//商品详情
			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.reverse()
					console.log(this.list1);
				}).catch(() => {

				})
			},
			//商品列表
			goods(id) {
				uni.$u.http.get('/api/goods', {
					params: {
						category_id: id,
						limit: 10,
						page: this.page,
						weight_range_start: this.weight_range_start,
						weight_range_end: this.weight_range_end,
						brand_id: this.brand_id,
						price_range_start: this.price_range_start,
						price_range_end: this.price_range_end,
						order: this.static,
						order_type: this.desc ? 'desc' : 'asc',
						source: this.yes ? 1 : 0
					}
				}).then((res) => {
					this.data = res.data
				}).catch(() => {

				})
			},
			//品牌列表
			brand() {
				uni.$u.http.get('/api/goods/brand', {
					params: {}
				}).then((res) => {
					this.brandlist = res
					this.brand_id = brandlist[0].id
					this.brand_idone = brandlist[0].id
				}).catch(() => {

				})
			},
			shaixuan() {
				this.shai = true,
					this.current1 = 4
				this.weight_range_start = ''
				this.weight_range_end = ''
				this.desc = true
				this.brand()
				this.goods(this.goodsid)
			},
			click(item) {
				console.log('item', item);
				this.current = item.index
				this.title = item.title
				this.goodsid = item.id
				this.goods(item.id)
				if (this.language == 'en-US') {
					uni.setNavigationBarTitle({
						title: item.name_en
					})
				}
				if (this.language == 'es-ES') {
					uni.setNavigationBarTitle({
						title: item.name_es
					})
				}
				if (this.language == 'it-IT') {
					uni.setNavigationBarTitle({
						title: item.name_ita
					})
				}

				if (this.language == 'zh-CN') {
					uni.setNavigationBarTitle({
						title: item.name_cn
					})
				}
			},
			changei(item, idx) {
				this.brand_id = item.id
				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;
			border-radius: 36rpx;
			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>