ds_mobile_app/mobile/pages/product/list.vue

<template>
	<view class="content">
		<view class="fixed_top_status_bar"></view>
		<view class="top_part">
			<!-- 搜索头部分 start -->
			<view class='sea_input_part'>
				<!-- #ifndef MP-->
				<text class="back_icon iconfont iconziyuan2" @click="navBack"></text>
				<!-- #endif -->
				<view class="search_center" @click="search">
					<image class="search_icon" :src="imgUrl+'search.png'"></image>
					<input disabled class='sea_input' type='text' :value="searchParams.keyword" :placeholder="$L('请输入关键词')"></input>
					<image v-if='searchParams.keyword' class='clear_content' v-show="searchParams.keyword" :src="imgUrl+'input_clear.png'"
					 @click.stop="clearInput" />
				</view>
			</view>
			<!-- 搜索头部分 end -->
			<!-- 头部搜索nav start -->
			<view class="navbar">
				<view class="nav-item complex" :class="{current: filterIndex === 0||filterIndex === 3||filterIndex === 4||filterIndex === 5}"
				 @click="showSelect">
					<text>{{$L('综合')}}</text>
					<text class="iconfont iconziyuan14"></text>
				</view>
				<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
					{{$L('销量')}}
				</view>
				<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
					{{$L('店铺')}}
				</view>
				<view class="nav-item default" v-if="showStoreList">
					<text>{{$L('筛选')}}</text>
					<text class="filter_icon iconfont iconshaixuan"></text>
				</view>
				<view v-else class="nav-item" @click="toggleCateMask('show')">
					<text>{{$L('筛选')}}</text>
					<text class="filter_icon iconfont iconshaixuan"></text>
				</view>
				<text v-if="showStoreList" class="cate_item iconfont iconliebiao1  default"></text>
				<text v-else :class="{cate_item:loadingState, iconfont:loadingState, iconfenlei1:gridFlag,iconliebiao1:!gridFlag,grid_icon:gridFlag}"
				 @click="tabShowStyle"></text>
			</view>
		</view>
		<!-- 头部搜索nav end -->

		<view v-if="(loadingState!='first_loading'&&!showStoreList&&goodsList.length == 0)||(loadingState!='first_loading'&&showStoreList&&store_list.length==0)" class="empty_part flex_column_start_center">
			<image :src="imgUrl+'empty_goods.png'" />
			<text>{{$L('暂无数据')}}</text>
		</view>
		<view class="pricearea" :hidden="pricearea" @tap.stop="showSelect" id="pricearea-wrap" catchtouchmove="touchmove">

			<view class="pri-content">

				<view :class="'pri-item ' + (seleindex==0?'current':'')" data-order data-key data-index="0" @tap.stop="changeSort(0)">
					<text>{{$L('综合排序')}}</text>
					<image :src="imgUrl+'good_search/order_sel.png'" v-if="seleindex==0"></image>
				</view>

				<view :class="'pri-item ' + (seleindex==5?'current':'')" data-index="5" @tap.stop="changeSort(5)">
					<text>{{$L('人气排序从高到低')}}</text>
					<image :src="imgUrl+'good_search/order_sel.png'" v-if="seleindex==5"></image>
				</view>
				<view :class="'pri-item ' + (seleindex==4?'current':'')" data-index="4" @tap.stop="changeSort(4)">
					<text>{{$L('价格排序从高到低')}}</text>
					<image :src="imgUrl+'good_search/order_sel.png'" v-if="seleindex==4"></image>
				</view>

				<view :class="'pri-item ' + (seleindex==3?'current':'')" data-index="3" @tap.stop="changeSort(3)">
					<text>{{$L('价格排序从低到高')}}</text>
					<image :src="imgUrl+'good_search/order_sel.png'" v-if="seleindex==3"></image>
				</view>

			</view>

		</view>
		<scroll-view v-if="goodsList.length&&!showStoreList" class="goods_part" scroll-y @scrolltolower='getMoreData'>
			<view v-if='gridFlag' class="goods_list_another flex_row_start_start">
				<goodsListItemV v-for="(item,index) in goodsList" :goods_info="item" :key='index' />
			</view>
			<view v-if='!gridFlag' class="goods_list flex_row_start_start">
				<goodsItemH v-for="(item,index) in goodsList" :goods_info="item" :key='index' />
			</view>
			<loadingState v-if="loadingState == 'first_loading'||goodsList.length > 0" :state='loadingState' />
		</scroll-view>
		<scroll-view v-if="showStoreList&&store_list.length>0" class="shop_lists" scroll-y @scrolltolower='getMoreStoreData'>
			<view class="" v-if="showStoreList&&store_list.length>0">
				<storeItem v-for="(item, index) in store_list" :store_info='item' :key="index"></storeItem>
				<loadingState v-if="loadingState == 'first_loading'||store_list.length > 0" :state='loadingState' />
			</view>
		</scroll-view>
		<view class="cate-mask" :class="cateMaskState===0 ? 'none' : cateMaskState===1 ? 'show' : ''" @click="toggleCateMask">
			<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
				<view class="filter_title">
					{{$L('筛选')}}
				</view>
				<scroll-view scroll-y class="cate-list flex_column_start_start">
					<view class="wrap">
						<view class="part price_part">
							<view class="title flex_row_between_center">
								<text class="left">{{$L('价格区间')}}</text>
							</view>
							<view class="detail price_area flex_row_start_center">
								<input type='number' :value="searchParams.lowPrice" class="amount low" :placeholder="$L('最低价')" placeholder-class="price_input_placeholder"
								 data-key='lowPrice' @input="inputPrice" />

								<input type='number' :value="searchParams.highPrice" class="amount hight" :placeholder="$L('最高价')" placeholder-class="price_input_placeholder"
								 data-key='highPrice' @input="inputPrice" />

							</view>
						</view>
						<!-- 分类 -->
						<view v-if='cateList.length>0' class="part" style="margin-top: 20rpx;">
							<view class="title flex_row_between_center">
								<text class="left">{{$L('分类')}}</text>
								<text v-if="cateList.length>cateLimit||cateLimit==999999" :class="{iconfont:true, iconziyuan11:true,up:cateFlag=='up',down:cateFlag=='down',}"
								 @click="viewMoreCate"></text>
								<view v-if="cateList.length>cateLimit||cateLimit==999999" class="attributr_sel_con">
									<text class="attributr_sel_text">{{selectCateText}}</text>
								</view>
							</view>
							<view class="detail flex_row_start_center">
								<template v-for="(itemCat,index) in cateList">
									<view v-if="index<cateLimit" :class="{item:true, sel:searchParams.cateId == itemCat.categoryId}" @click="selCat('cateId',itemCat.categoryId,itemCat.categoryName)">
										<text class="brand_name">{{itemCat.categoryName}}</text></view>
								</template>
							</view>
						</view>
						<!-- 品牌 selectBrandText-->
						<view class="part" style="margin-top: 20rpx;" v-if="brandList.length>0">
							<view class="title flex_row_between_center">
								<text class="left">{{$L('品牌')}}</text>
								<text v-if="brandList.length>brandLimit||brandLimit==999999" :class="{iconfont:true, iconziyuan11:true,up:brandFlag=='up',down:brandFlag=='down',}"
								 @click="viewMoreBrand"></text>
								<view v-if="brandList.length>brandLimit||brandLimit==999999" class="attributr_sel_con">
									<text class="attributr_sel_text" v-for="(item,index) in selectBrandText">{{item}}<text v-if="(index+1)!=selectBrandText.length">,</text></text>
								</view>
							</view>
							<view class="detail flex_row_start_center">
								<template v-for="(item,index) in brandList">
									<view v-if='index<brandLimit' :class="{item:true, sel:searchParams.brandId.indexOf(item.brandId)>-1}" @click="selBrand(item.brandId,item.brandName)"><text
										 class="brand_name">{{item.brandName}}</text></view>
								</template>
							</view>
						</view>
						<!-- 商品属性 -->
						<view class="part" v-for="(attribute,index) in attributeList" style="margin-top: 20rpx;" v-if="attributeList.length>0">
							<view class="title flex_row_between_center">
								<text class="left">{{attribute.attributeName}}</text>
								<!-- <text  :class="{iconfont:true, iconziyuan11:true,up:arrowFlag=='up',down:arrowFlag=='down',}" -->
								<text v-if="attribute.attributeValueList.length>attribute.showLimit||attribute.showLimit==999999" :class="{iconfont:true, iconziyuan11:true,up:attribute.showFlag=='up',down:attribute.showFlag=='down',}"
								 @click="viewMoreAttridute(attribute)"></text>
								<view v-if="attribute.attributeValueList.length>attribute.showLimit||attribute.showLimit==999999" class="attributr_sel_con">
									<text class="attributr_sel_text" v-for="(item,index) in attribute.select_text_list">{{item}}<text v-if="(index+1)!=attribute.select_text_list.length">,</text></text>
								</view>
							</view>
							<view class="detail flex_row_start_center">
								<template v-for="(item,index) in attribute.attributeValueList">
									<view v-if="index<attribute.showLimit" :class="{item:true, sel:attribute.select_text_list.indexOf(item.attributeValue)>-1}"
									 @click="selAttribude(attribute,item.attributeValue)"><text class="brand_name">{{item.attributeValue}}</text></view>
								</template>
								<!-- <view v-if='brandLimit==17' :class="{item:true}" @click="viewBrand"><text class="brand_name">查看全部品牌</text></view> -->
							</view>
						</view>

					</view>
				</scroll-view>
				<view class="bottom flex_row_end_center">
					<text class="btn reset flex_row_center_center" @click="resetSel">{{$L('重置')}}</text>
					<text class="btn confirm flex_row_center_center" @click="confirmSel">{{$L('确认')}}</text>
				</view>
			</view>
		</view>

	</view>
</template>
<script module="filters" lang="wxs" src="@/utils/filter.wxs"></script>
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import goodsListItemV from "@/components/goods_list_item_v.vue";
	import storeItem from "@/components/store_item.vue";
	import goodsItemH from "@/components/goods_item_h.vue";
	import loadingState from "@/components/loading-state.vue";
	export default {
		components: {
			uniLoadMore,
			goodsListItemV,
			goodsItemH,
			loadingState,
			storeItem
		},
		data() {
			return {
				midPrice: '',  //筛选切换用
				imgUrl: getApp().globalData.imgUrl,
				source: '', //页面来源（从哪个页面进入的），如果是搜素页，点击该页顶部搜素的时候会返回上级页面，否则会跳转
				searchParams: {
					brandId: [], //选中的品牌，多选
					categoryIds: '', //选中的分类
					lowPrice: '', //筛选的最低价
					highPrice: '', //筛选的最高价
					attribudeId: '',
					keyword: '',
					storeId:'',
					goodsIds:'',
					cateId:''
				}, //搜索的参数
				stopPullDownRefresh: false, //是否下拉刷新中
				cateMaskState: 0, //分类面板展开状态
				headerPosition: "fixed",
				filterIndex: 0,
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				cateList: [], //分类列表
				brandList: [], //品牌列表
				brandLimit: 6, //筛选条件展示
				cateLimit: 6, //筛选条件展示
				arrowFlag: '',
				goodsList: [],
				loadingState: 'first_loading',
				pageSize: 10,
				current: 1,
				loading: false, //是否加载数据
				hasMore: true, //是否还有数据
				gridFlag: false, //是否网格形式展示，默认item形式展示
				options: {},
				pricearea: true,
				seleindex: 0,
				store_list: [],
				store_info: {
					pageSize: 10,
					current: 1,
					hasMore: false
				},
				showStoreList: false,
				attributeList: [], //商品属性列表
				cateFlag: 'up',
				brandFlag: 'up',
				selectCateText: '', //已选分类名称
				selectBrandText: [], //已选品牌列表
        keyword:''
			};
		},

		onLoad(options) {
		  this.options = options;
				// this.getBrandList();
				// if (options.source) {
				// 	this.source = options.source;
				// }
		  this.keyword = decodeURIComponent(options.keyword)
				if (options.keyword) { //关键词
					this.searchParams.keyword = decodeURIComponent(options.keyword)
				}
				if (options.goodsIds) { //关键词
					this.searchParams.goodsIds = decodeURIComponent(options.goodsIds)
				}
				if (options.storeId) { //店铺id
					this.searchParams.storeId = decodeURIComponent(options.storeId)
				}
				if (options.categoryId) { //接受分类
					this.searchParams.categoryIds = options.categoryId;
					if(!options.source){//如果是优惠券进来的分类，不调取筛选条件中的品牌等
						this.getcateList(options.categoryId);
					}
				}
				if(options.brandId){ //品牌id
					this.searchParams.brandIds = decodeURIComponent(options.brandId)
				}
				if(options.storeInnerLabelId){ //店铺内分类id
					this.searchParams.storeInnerLabelId = decodeURIComponent(options.storeInnerLabelId)
				}
				this.getGoodsList();
		},
		
		onShow() {
		},

		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.current = 1;
			this.stopPullDownRefresh = true; //下拉刷新状态
			this.getGoodsList();
		},
		methods: {
			changeSort(index) {
				this.seleindex = index
				this.filterIndex = index
				this.pricearea = !this.pricearea
				this.current=1
				this.getGoodsList()
			},
			getGoodsList() {
				uni.showLoading({
					title:'加载中',
					icon:'none'
				})
				//处理属性选择
				let attributeInfo = []
				this.attributeList.map(item => {
					if (item.select_list.length > 0) {
						item.select_list.map(item => {
							attributeInfo.push(item)
						})
					}
				})
				let param = {};
				param.url = 'v3/goods/front/goods/goodsList';
				param.data = {};
				param.data.pageSize = this.pageSize;
				param.data.current = this.current;
				param.data.sort = this.filterIndex;

				if (this.searchParams.categoryIds) {
					param.data.categoryIds = this.searchParams.categoryIds
				}
				if(this.searchParams.cateId){
					param.data.categoryIds = this.searchParams.cateId
				}
				if (attributeInfo.length > 0) {
					param.data.attributeInfo = attributeInfo.join(',')
				}
				if (this.searchParams.highPrice) {
					param.data.highPrice = this.searchParams.highPrice
				}
				if (this.searchParams.lowPrice) {
					param.data.lowPrice = this.searchParams.lowPrice;
				}
				 if(param.data.lowPrice > param.data.highPrice) {
				  this.midPrice = param.data.lowPrice
				  param.data.lowPrice = param.data.highPrice
				  param.data.highPrice = this.midPrice
				  this.searchParams.lowPrice = param.data.lowPrice;
				  this.searchParams.highPrice = param.data.highPrice;
				}
				if (this.searchParams.keyword) {
					param.data.keyword = this.searchParams.keyword
				}
				// if (this.searchParams.brandId.join(',')) {
				// 	param.data.brandIds = this.searchParams.brandId.join(',')
				// }
				if (this.searchParams.storeId) {
					param.data.storeId = this.searchParams.storeId
				}
				if (this.searchParams.goodsIds) {
					param.data.goodsIds = this.searchParams.goodsIds
				}
				if(this.searchParams.brandIds){
					param.data.brandIds = this.searchParams.brandIds
				}
				if(this.searchParams.storeInnerLabelId){
					param.data.storeInnerLabelId = this.searchParams.storeInnerLabelId
				}
				this.loadingState = this.loadingState == 'first_loading' ? this.loadingState : 'loading';
				this.$request(param).then(res => {
					if (res.state == 200) {
						if (this.current == 1) {
							this.goodsList = res.data.list;
						} else {
							this.goodsList = this.goodsList.concat(res.data.list);
						}
						this.hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
						if (this.hasMore) {
							this.current++;
							this.loadingState = 'allow_loading_more';
						} else {
							this.loadingState = 'no_more_data';
						}
						uni.hideLoading()
					} else {
						uni.hideLoading()
						//错误提示
					}
					if (this.stopPullDownRefresh) {
						this.stopPullDownRefresh = false;
						uni.stopPullDownRefresh();
					}
				})
			},

			//加载更多事件
			getMoreData() {
				if (this.hasMore) {
					this.getGoodsList();
				}
			},
            getMoreStoreData(){
				if (this.store_info.hasMore) {
					this.getShopList();
				}
			},
			//切换页面展示风格
			tabShowStyle() {
				this.gridFlag = !this.gridFlag;
			},

			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more'
				}

				let goodsList = await this.$api.json('goodsList');
				if (type === 'refresh') {
					this.goodsList = [];
				}
				//筛选，测试数据直接前端筛选了
				if (this.filterIndex === 1) {
					goodsList.sort((a, b) => b.sales - a.sales)
				}
				if (this.filterIndex === 2) {
					goodsList.sort((a, b) => {
						if (this.priceOrder == 1) {
							return a.price - b.price;
						}
						return b.price - a.price;
					})
				}

				this.goodsList = this.goodsList.concat(goodsList);

				//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
				this.loadingType = this.goodsList.length > 20 ? 'nomore' : 'more';
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading()
					} else {
						uni.stopPullDownRefresh();
					}
				}
			},
			//筛选点击
			tabClick(index) {
				if (this.filterIndex === index) {
					return;
				}
				this.filterIndex = index;
				//根据筛选条件重新请求
				this.loadingState = 'first_loading';
				this.goodsList = [];
				this.current = 1;
				if (index == 2) {
					this.getShopList()
					this.showStoreList = true
				} else {
					this.getGoodsList();
					this.showStoreList = false
				}

			},

			//获取店铺列表
			getShopList(index) {
				uni.showLoading({
					title:'加载中',
					icon:'none'
				})
				let param = {};
				param.url = 'v3/seller/front/store/list';
				param.data = {};
				param.data.pageSize = this.store_info.pageSize;
				param.data.current = this.store_info.current;
				param.data.keyword = this.searchParams.keyword
				this.loadingState = this.loadingState == 'first_loading' ? this.loadingState : 'loading';
				this.$request(param).then(res => {
					if (res.state == 200) {
						if (this.store_info.current == 1) {
							this.store_list = res.data.list;
						} else {
							this.store_list = this.store_list.concat(res.data.list);
						}
						this.store_info.hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
						if (this.store_info.hasMore) {
							this.store_info.current++;
							this.loadingState = 'allow_loading_more';
						} else {
							this.loadingState = 'no_more_data';
						}
						uni.hideLoading()
					} else {
						uni.hideLoading()
						this.$api.msg(res.msg)
						//错误提示
					}
					if (this.stopPullDownRefresh) {
						this.stopPullDownRefresh = false;
						uni.stopPullDownRefresh();
					}
				})

			},

			showSelect() {
				const {
					pricearea
				} = this;
				this.pricearea = !pricearea
			},
			//显示分类面板
			toggleCateMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.cateMaskState = 2;
				setTimeout(() => {
					this.cateMaskState = state;
				}, timer)
			},

			//详情
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			stopPrevent() {},
			//点击顶部搜索事件
			search() {
				let pages = getCurrentPages(); //获取所有页面栈实例列
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				if(prevPage.route=='pages/search/search'){
					prevPage.$vm.input_val = this.keyword;
					uni.navigateBack({
						delta:1
					})
				}else{
					uni.navigateTo({
						url:'/pages/search/search'
					})
				}
				
				
				

				// url: '/pages/search/search'
				
				
				
			},
			navBack() {
				uni.navigateBack();
			},
			//查看更多品牌
			viewMoreBrand() {
				let curFlag = this.brandFlag;
				if (curFlag == '' || curFlag == 'down') {
					this.brandFlag = 'up';
				} else if (curFlag == 'up') {
					this.brandFlag = 'down';
				}
				this.brandLimit = this.brandLimit == 6 ? 999999 : 6
			},
			//查看更多分类
			viewMoreCate() {
				let curFlag = this.cateFlag;
				if (curFlag == '' || curFlag == 'down') {
					this.cateFlag = 'up';
				} else if (curFlag == 'up') {
					this.cateFlag = 'down';
				}
				this.cateLimit = this.cateLimit == 6 ? 999999 : 6
			},
			//查看更多属性
			viewMoreAttridute(attribute) {
				let curFlag = attribute.showFlag;
				if (curFlag == '' || curFlag == 'down') {
					attribute.showFlag = 'up';
				} else if (curFlag == 'up') {
					attribute.showFlag = 'down';
				}
				attribute.showLimit = attribute.showLimit == 6 ? 999999 : 6
			},

			//选择分类
			selCat(type, id, name) {
				this.selectCateText = name
				if (this.searchParams[type] == id) {
					//选中的话取消选中
					this.searchParams[type] = '';
				} else {
					this.searchParams[type] = id;
				}
			},
			//选择品牌
			selBrand(id, name) {
				let tmp_data = this.searchParams.brandId;
				let position = tmp_data.indexOf(id);
				if (position > -1) {
					//选中的话取消选中
					this.searchParams.brandId.splice(position, 1);
					this.selectBrandText.splice(position, 1)
				} else {
					if (this.searchParams.brandId == 5) {
						uni.showToast({
							title: '品牌最多选择五条',
							icon: 'none'
						})
						return
					}
					this.selectBrandText.push(name)
					this.searchParams.brandId.push(id);
				}
			},
			//选择属性
			selAttribude(attribute, attributeValue) {
				let attributedata = ''
				let position = attribute.select_text_list.indexOf(attributeValue);
				if (position > -1) {
					//选中的话取消选中
					attribute.select_text_list.splice(position, 1);
					attribute.select_list.splice(position, 1)
				} else {
					if (attribute.select_text_list.length == 5) {
						uni.showToast({
							title: '属性值最多选择五条',
							icon: 'none'
						})
						return
					}
					attributedata = attribute.attributeName + '_' + attributeValue
					attribute.select_list.push(attributedata)
					attribute.select_text_list.push(attributeValue)
				}
			},
			//根据二级分类获取三级分类
			getcateList(id) {
				this.$request({
					url: 'v3/goods/front/goods/category/screenList',
					data: {
						categoryId: id
					},
				}).then(res => {
					if (res.state == 200) {
						if (res.data.categoryList != null) {
							this.cateList = res.data.categoryList;
							this.cateList.map(item => {
								if (item.categoryId == this.searchParams.categoryIds) {
									this.selectCateText = item.categoryName
								}
							})
						}
						if (res.data.brandList != null) {
							this.brandList = res.data.brandList;
						}

						if (res.data.attributeList != null) {
							this.attributeList = res.data.attributeList;
							this.attributeList.map(item => {
								this.$set(item, 'select_list', [])
								this.$set(item, 'select_text_list', [])
								this.$set(item, 'showFlag', 'up')
								this.$set(item, 'showLimit', 6)
							})
						}
					} else {
						this.$api.msg(res.msg);
					}
				}).catch((e) => {
					//异常处理
				})
			},
			//重置筛选条件
			resetSel() {
				this.searchParams.cateId = '' || this.options.cateId; //路径里带过来的
				this.cateMaskState = 0
				this.searchParams.lowPrice = ''
				this.searchParams.highPrice = ''
				this.searchParams.brandId = []
				this.attributeList.map(item => {
					item.select_text_list = []
					item.select_list = []
				})
				this.getGoodsList();
			},
			//弹层的确认事件
			confirmSel() {
				//关闭弹层
				this.toggleCateMask();
				this.goodsList = [];
				this.current = 1;
				this.getGoodsList();
			},
			//价格输入事件
			inputPrice(e) {
				this.searchParams[e.currentTarget.dataset.key] = e.detail.value;
			},
			//清空输入框的值
			clearInput(e) {
				this.searchParams.keyword = '';
				this.$forceUpdate();
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];
				prevPage.$vm.input_val = '';
				uni.navigateBack({
					delta: 1
				})
			},

		},
	}
</script>

<style lang="scss">
	page,
	.content {
		background: $bg-color-split;
		display: flex;
		width: 750rpx;
		flex: 1;
		margin: 0 auto;
	}

	uni-page-body {
		display: flex;
		height: 100%;
	}

	.sea_input_part {
		position: fixed;
		display: flex;
		align-items: center;
		height: 88rpx;
		background-color: #fff;
		width: 750rpx;
		padding-right: 20rpx;
		top: 0;
		right: 0;
		left: 0;
		margin: 0 auto;
		/* #ifdef APP-PLUS  */
		top: var(--status-bar-height);

		/* #endif */
		.back_icon {
			padding-left: 20rpx;
		}

		.sea_input {
			flex: 1;
			height: 65rpx;
			font-size: 28rpx;
			color: #333;
		}

		.search_center {
			display: flex;
			align-items: center;
			border: none;
			flex: 1;
			height: 65rpx;
			margin-left: 20rpx;
			padding-left: 20rpx;
			border-radius: 32.5rpx;
			background-color: #f5f5f5;

			.search_icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 22rpx;
			}
		}

		.clear_content {
			width: 45rpx !important;
			height: 45rpx !important;
			margin-right: 15rpx !important;
		}

		.sea_btn {
			font-size: 28rpx;
			color: #2D2D2D;
			padding: 10rpx 25rpx;
			flex-shrink: 0;
		}

		&:after {
			position: absolute;
			content: '';
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1rpx;
			background-color: #eee;
			transform: scaleY(0.5);
		}
	}

	.top_part {
		top: var(--window-top);
		position: fixed;
		z-index: 9;
	}

	.navbar {
		position: fixed;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: var(--window-top);
		display: flex;
		width: 750rpx;
		height: 80rpx;
		background: #fff;
		z-index: 10;
		margin-top: 87rpx;
		/* #ifdef APP-PLUS  */
		margin-top: calc(var(--status-bar-height) + 87rpx);

		/* #endif */
		.complex .iconfont {
			font-size: 16rpx;
			transform: scale(0.5, 0.5);
		}

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: $font-color-dark;
			position: relative;

			.iconfont {
				color: $main-font-color;

				&.active {
					color: $main-color;
				}
			}

			.synthesize_icon {
				font-size: 16rpx;
				transform: scale(0.5, 0.5)
			}

			.filter_icon {
				font-size: 24rpx;
				margin-left: 9rpx;
				transform: scale(0.8, 0.8);
				margin-top: 6rpx;
			}

			&.current {
				// color: $main-color;
				color: #FC1C1C !important;

				.iconziyuan14 {
					color: #FC1C1C !important
				}

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
				}
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;
			font-size: 16rpx;
			transform: scale(0.3, 0.3);
			margin-left: -9rpx;

			.price_up {
				margin-bottom: 4rpx;
			}

			.price_down {
				margin-top: 4rpx;
			}
		}

		.cate_item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 55rpx;
			color: $main-font-color;

			&.grid_icon {
				font-size: 36rpx;
			}

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid rgba(0, 0, 0, .1);
				width: 0;
				height: 36upx;
			}
		}
	}

	.goods_part {
		position: absolute;
		top: 166rpx;
		height: calc(100vh - 168rpx);
		/* #ifdef APP-PLUS  */
		top: calc(var(--status-bar-height) + 168rpx);
		/* #endif */
		/* #ifdef APP-PLUS||MP-WEIXIN */
		padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
		/* #endif */
		
	}

	.goods_list {
		flex-wrap: wrap;
		width: 750rpx;
	}

	.goods_list_another {
		margin-top: 20rpx;
		flex-wrap: wrap;
		width: 750rpx;
	}


	/* 分类 */
	.wrap {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.cate-mask {
		position: fixed;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: var(--window-top);
		bottom: 0;
		width: 750rpx;
		background: rgba(0, 0, 0, 0);
		z-index: 95;
		transition: .3s;
		overflow: hidden;

		.cate-content {
			width: 600rpx;
			height: 100%;
			background: $bg-color-split;
			float: right;
			transform: translateX(100%);
			transition: .3s;

			.bottom {
				position: fixed;
				left: 0;
				bottom: 0;
				right: 0;
				height: 100rpx;
				background: #fff;
				box-shadow: 0px 0px 15rpx 0px rgba(86, 86, 86, 0.1);

				.btn {
					width: 150rpx;
					height: 50rpx;
					border-radius: 25rpx;
				}

				.reset {
					border: 1rpx solid #ADADAD;
					color: #333333;
					font-size: 26rpx;
				}

				.confirm {
					background: #F30300;
					// box-shadow: 0px 3rpx 15rpx 0px rgba(215, 163, 53, 0.2);
					color: #fff;
					font-size: 26rpx;
					margin-right: 30rpx;
					margin-left: 20rpx;
				}
			}
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.cate-content {
				transform: translateX(0);
			}
		}
	}

	.cate-list {
		height: calc(100vh - 98rpx - 100rpx);

		.part {
			padding: 30rpx;
			background: #fff;

			.title {
				margin-bottom: 10rpx;

				.left {
					color: $main-font-color;
					font-size: 28rpx;
					font-weight: bold;
				}

				.iconfont {
					font-size: 16rpx;
					transform: rotate(90deg);
					-ms-transform: rotate(90deg);
					/* IE 9 */
					-webkit-transform: rotate(90deg);

					/* Safari and Chrome */
					&.up {
						-webkit-animation: moveUp 0.6 ease-in-out 0.2s forwards;
					}

					&.down {
						-webkit-animation: moveDown 0.6 ease-in-out 0.2s forwards;
					}

					@-webkit-keyframes moveUp {
						0% {
							-webkit-transform: rotate(90deg);
						}

						100% {
							-webkit-transform: rotate(360deg);
						}
					}

					@-webkit-keyframes moveDown {
						0% {
							-webkit-transform: rotate(360deg);
						}

						100% {
							-webkit-transform: rotate(495deg);
						}
					}
				}
			}

			.detail {
				flex-wrap: wrap;
				position: relative;

				&.price_area:after {
					position: absolute;
					content: '';
					width: 25rpx;
					height: 1rpx;
					background-color: rgba(45, 45, 45, .4);
					margin: 10rpx 38rpx 0 258rpx;
				}

				.item {
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $bg-color-split;
					height: 70rpx;
					border-radius: 35rpx;
					width: 167rpx;
					color: #2D2D2D;
					font-size: 22rpx;
					margin-right: 20rpx;
					margin-top: 20rpx;
					line-height: 70rpx;
					overflow: hidden;

					.brand_name {
						max-width: 147rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					&:nth-child(3n+3) {
						margin-right: 0;
					}

					&.sel {
						color: $main-color;
						background-color: rgba(252, 28, 28, .05);
					}
				}

				.amount {
					margin-top: 20rpx;
					text-align: center;
					width: 220rpx;
					height: 70rpx;
					background: $bg-color-split;
					border-radius: 35rpx;
					font-size: 24rpx;
					color: #2D2D2D;

					&.hight {
						margin-left: 100rpx;
					}
				}

				.price_input_placeholder {
					color: $main-third-color;
					font-size: 22rpx;
					text-align: center;
				}
			}

			&.price_part {
				// flex: 1;
				// padding-bottom: 130rpx;
			}
		}
	}

	/* 商品列表 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		background: #fff;

		.goods-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;

			&:nth-child(2n+1) {
				margin-right: 4%;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}

		.price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10upx;
			font-size: 24upx;
			color: $font-color-light;
		}

		.price {
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;

			&:before {
				content: '￥';
				font-size: 26upx;
			}
		}
	}

	.empty_part {
		margin-top: 276rpx;
		width: 100%;

		image {
			width: 210rpx;
			height: 210rpx;
		}

		text {
			color: $main-third-color;
			font-size: 26rpx;
			margin-top: 57rpx;
		}

		button {
			width: 245rpx;
			height: 66rpx;
			background: rgba(252, 28, 28, .05);
			border-radius: 33rpx;
			color: $main-color;
			font-size: 30rpx;
			font-weight: bold;
			margin-top: 29rpx;
		}

		uni-button:after {
			border-radius: 200rpx;
			border-color: #fff;
		}
	}

	.fixed_top_status_bar {
		position: fixed;
		/* #ifdef APP-PLUS */
		height: var(--status-bar-height);
		/* #endif */
		/* #ifndef APP-PLUS */
		height: 0;
		/* #endif */
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		background: #fff;
	}

	.pricearea {
		position: fixed;
		/* #ifdef APP-PLUS */
		top: var(--status-bar-height);
		/* #endif */
		/* #ifndef APP-PLUS */
		top: 0;
		/* #endif */
		left: 0;
		right: 0;
		width: 750rpx;
		height: 100vh;
		padding-top: 159rpx;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 8;
		margin: 0 auto;
	}

	.pricearea .pri-content {
		padding: 25rpx 25rpx 15rpx 36rpx;
		background-color: #F8F8F8;
		border-radius: 0 0 14rpx 14rpx;
	}

	.pricearea .pri-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		color: #2D2D2D;
		font-size: 28rpx;
	}

	.pricearea .pri-item.current {
		color: #E1251B;
	}

	.pricearea .pri-item.current image {
		width: 23rpx;
		height: 16rpx;
	}

	.shop_lists {
		margin-top : 168rpx;
		width: 100%;
		background: #F5F5F5;
		padding: 20rpx 0;
		box-sizing: border-box;
		height: 100%;
		// #ifdef APP-PLUS
		padding: 60rpx 0;
		//#endif

	}



	.shop_pre {
		width: 710rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 15rpx;
		margin: 0 auto;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		padding: 0 21rpx;
	}

	.pre_top {
		display: flex;
		width: 100%;
		height: 140rpx;
		justify-content: space-between;
		align-items: center;
	}

	.shop_left {
		display: flex;
		align-items: center;
	}

	.shop_avatar_img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		background: #F8F8F8;
	}

	.shop_avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.shop_des {
		display: flex;
		flex-direction: column;
	}

	.des_top {
		display: flex;
		margin-bottom: 20rpx;
	}

	.shop_name {
		max-width: 323rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(45, 45, 45, 1);
		line-height: 32rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}

	.shop_type {
		width: 56rpx;
		height: 30rpx;
		background: #FB1B1B;
		border-radius: 15rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.des_bottom {
		display: flex;
	}

	.popularity {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #999999;
		line-height: 32rpx;
		margin-left: 10rpx;
	}

	.line {
		height: 24rpx;
		color: #999999;
		font-size: 24rpx;
		margin: 0 15rpx;
	}

	.payer_number {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #999999;
		line-height: 32rpx;
	}

	.go_shop {
		width: 100rpx;
		height: 50rpx;
		border: 1rpx solid #FF0000;
		border-radius: 25rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #FB1B1B;
		line-height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pre_content {
		display: flex;
	}

	.commodity {
		width: 216rpx;
		height: 216rpx;
		position: relative;
		margin-right: 10rpx;
		margin-bottom: 21rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
	}

	.commodity:nth-of-type(3) {
		margin-right: 0;
	}

	.commodity_images {
		width: 216rpx;
		height: 216rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		background: #F8F8F8;
	}

	.commodity_img {
		width: 216rpx;
		height: 216rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.commodity_price {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 24rpx;
		position: absolute;
		width: 100%;
		bottom: 0;
		z-index: 10;
		text-align: center;
		height: 36rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 0 0 10rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.commodity_price text:nth-child(1),
	.commodity_price text:nth-last-child(1) {
		font-size: 20rpx;
	}

	.filter_title {
		margin-top: 40rpx;
		margin: 28rpx;
	}

	.default {
		color: #dddddd !important;
	}

	.default .iconfont {
		color: #dddddd !important;
	}

	.attributr_sel_con {
		position: absolute;
		right: 65rpx;
		width: 370rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: red;
		text-align: right;
		font-size: 18rpx;

	}
</style>