384 lines
11 KiB
Vue
384 lines
11 KiB
Vue
<template>
|
||
<view class="pad-x180">
|
||
<!-- 状态栏 -->
|
||
<status-nav
|
||
:ifTitle="true"
|
||
:ifReturn="false"
|
||
:ifCenter="true"
|
||
:navBarTitle="'分类'"></status-nav>
|
||
<!-- 容器 -->
|
||
<container-subgroup>
|
||
<view slot="content">
|
||
<view class="pad30 sort-box mar-x20" style="margin-left: -30rpx;margin-right: -30rpx;" :style="{top: statusBarHeight+'px'}">
|
||
<view class="col0 fon38 disjbac">
|
||
<view>分类筛选</view>
|
||
<i @tap="clikScreenIcon" class="icon icon-screen" style="font-size: 50rpx;"></i>
|
||
</view>
|
||
<view v-if="chooseCateList.length" class="disac fw fon24">
|
||
<view class="disac pad-sx10 pad-zy20 radius20 bac0 colf mar-y20 mar-s20"
|
||
v-for="(item,index) in chooseCateList" :key="index"
|
||
@tap="delCate(index)">
|
||
{{item}}<i class="icon icon-del-white mar-z20" style="font-size: 20rpx;"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 列表 -->
|
||
<view class="disjbac fw">
|
||
<view @tap="goDetail(item.id)" class="width47 mar-s50 posir" v-for="(item,index) in dataList" :key="index">
|
||
<image :src="item.imgSrc" mode="aspectFill" style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
||
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item.title}}</view>
|
||
<view class="fon30 colpeili">￥{{item.price}}</view>
|
||
<view v-if="item.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
||
</view>
|
||
</view>
|
||
<!-- 无更多 -->
|
||
<pitera v-if="total==dataList.length"></pitera>
|
||
<!-- 筛选框 -->
|
||
<view v-show="isScreen" @tap="isScreen=false" class="screen-box" :style="{top:statusBarHeight+'px'}">
|
||
<view @tap.stop="isScreen=true" class="posir">
|
||
<view class="fon24">筛选</view>
|
||
<!-- 类型 -->
|
||
<view v-for="(item,index) in screenList" :key="index">
|
||
<view class="fon30 bold mar-sx20">{{item.mainTitle}}</view>
|
||
<view class="disac fw fon24">
|
||
<view class="disac pad-sx10 pad-zy20 radius20 mar-y20 mar-x20"
|
||
:class="childitem.isCheck ? 'bac0 colf' : 'colpeili'"
|
||
v-for="(childitem,childindex) in item.childrenList" :key="childindex"
|
||
@tap.stop="chooseCate(index,childindex,item.mainTitle)">
|
||
{{childitem.title}}<i v-if="childitem.isCheck" class="icon icon-check mar-z20" style="font-size: 30rpx;"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 价格 -->
|
||
<view class="sort-price">
|
||
<view class="fon30 bold mar-sx20">价格</view>
|
||
<view class="disac fon24">
|
||
<input class="radius20 pad-zy20" v-model="minPrice" type="number" placeholder="0" />
|
||
<view class="mar-zy20">~</view>
|
||
<input class="radius20 pad-zy20" v-model="maxPrice" type="number" placeholder="9999" />
|
||
</view>
|
||
</view>
|
||
<!-- 按钮 -->
|
||
<view class="disjbac fon30 screen-btn">
|
||
<view @tap.stop="isScreen=false" class="radius30 colpeili">取消</view>
|
||
<view @tap.stop="defineEv" class="radius30 colf">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 全局客服 -->
|
||
<public-customer :nbottom="520"></public-customer>
|
||
</view>
|
||
</container-subgroup>
|
||
<!-- 底部tab -->
|
||
<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='1'></foot-tab>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import pitera from '@/components/nothing/pitera.vue';
|
||
// 客服按钮组件
|
||
import publicCustomer from '@/components/public-customer.vue';
|
||
// 底部组件
|
||
import footTab from '@/components/foot-tab.vue';
|
||
export default {
|
||
components:{
|
||
footTab,
|
||
publicCustomer,
|
||
pitera
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
|
||
publicColor:uni.getStorageSync('publicColor'),
|
||
chooseCateList:[],//选中的分类列表
|
||
temporaryCate:[],//暂存分类数据
|
||
isScreen:false,//是否隐藏筛选弹框
|
||
// 筛选弹框内容
|
||
screenList:[
|
||
{
|
||
mainTitle:'类型',
|
||
childrenList:[
|
||
{
|
||
title:'全部',
|
||
isCheck:true,
|
||
},
|
||
{
|
||
title:'翡翠',
|
||
isCheck:false,
|
||
},
|
||
{
|
||
title:'白玉',
|
||
isCheck:false,
|
||
},
|
||
{
|
||
title:'彩宝',
|
||
isCheck:false,
|
||
},
|
||
{
|
||
title:'琥珀',
|
||
isCheck:false,
|
||
},
|
||
{
|
||
title:'其他',
|
||
isCheck:false,
|
||
}
|
||
]
|
||
},
|
||
{
|
||
mainTitle:'活动',
|
||
childrenList:[
|
||
{
|
||
title:'全部',
|
||
isCheck:true,
|
||
},
|
||
{
|
||
title:'折扣',
|
||
isCheck:false,
|
||
}
|
||
]
|
||
}
|
||
],
|
||
minPrice:'',//最低价格
|
||
maxPrice:'',//最高价格
|
||
dataList:[//数据列表
|
||
|
||
],
|
||
showTop:false,//是否显示返回顶部
|
||
page:1,
|
||
size:10,
|
||
total:'',//总数
|
||
titleList:uni.getStorageSync('footTitle'), // 底部导航文字
|
||
imgList:uni.getStorageSync('footimg'), // 底部导航图标
|
||
activityStr:'',
|
||
categoryId:''
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
||
},
|
||
onReachBottom() {//触底事件
|
||
if(this.total!=this.dataList.length){
|
||
this.page++
|
||
this.implementEv();
|
||
}
|
||
},
|
||
onShareAppMessage() {
|
||
var shareObj = {
|
||
path: `/pages/tabbar/cate/cate?invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
|
||
};
|
||
return shareObj;
|
||
},
|
||
onLoad(options) {
|
||
if(uni.getStorageSync('phone_active')){
|
||
this.$toolAll.tools.clearShare();
|
||
// 调用获取筛选条件列表事件
|
||
this.obtainScreen();
|
||
// 调用商品列表查询事件
|
||
this.implementEv();
|
||
} else {
|
||
uni.setStorageSync('existCode',options.invite_code);
|
||
uni.setStorageSync('transientUrl',`/pages/tabbar/cate/cate`);
|
||
uni.navigateTo({
|
||
url:'/pages/login/login'
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取筛选条件列表
|
||
obtainScreen(){
|
||
this.$requst.post('/api/spu/condition').then(res=>{
|
||
if(res.code==0){
|
||
this.screenList = [];
|
||
if(res.data.length){
|
||
res.data.forEach((item,index)=>{
|
||
let obj = {};
|
||
let newlist = [];
|
||
item.children.forEach((item1,index1)=>{
|
||
let childObj = {
|
||
id:item1.value,
|
||
title:item1.name,
|
||
isCheck:index1==0 ? true : false
|
||
}
|
||
newlist.push(childObj)
|
||
})
|
||
obj = {
|
||
mainTitle:item.title,
|
||
childrenList:newlist
|
||
}
|
||
this.screenList.push(obj)
|
||
})
|
||
}
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
}
|
||
}).catch(err=>{
|
||
this.$toolAll.tools.showToast(err.msg);
|
||
})
|
||
},
|
||
|
||
// 点击筛选按钮图标
|
||
clikScreenIcon(){
|
||
this.isScreen = true;
|
||
},
|
||
// 分类选择事件
|
||
chooseCate(mainIndex,childrenIndex,title){
|
||
// 清除分类所有选中项
|
||
this.screenList[mainIndex].childrenList.forEach((item,index)=>{
|
||
item.isCheck = false;
|
||
})
|
||
let screenIndex = this.screenList.findIndex(item=>item.mainTitle==title);
|
||
if(screenIndex==0){
|
||
// 设置分类id
|
||
if(childrenIndex==0){
|
||
this.categoryId = '';
|
||
} else {
|
||
this.categoryId = this.screenList[screenIndex].childrenList[childrenIndex].id;
|
||
}
|
||
}
|
||
if(screenIndex==1){
|
||
// 设置限时优惠
|
||
if(childrenIndex==0){
|
||
this.activityStr = '';
|
||
} else {
|
||
this.activityStr = this.screenList[screenIndex].childrenList[childrenIndex].id;
|
||
}
|
||
}
|
||
// 将当前选择的类别下的数组置空
|
||
this.temporaryCate[mainIndex] = [];
|
||
// 设置当前选中项为true
|
||
this.screenList[mainIndex].childrenList[childrenIndex].isCheck = true;
|
||
// 向二维数组存储选中项
|
||
this.screenList[mainIndex].childrenList.forEach((item,index)=>{
|
||
if(item.isCheck){
|
||
if(index!=0){
|
||
this.temporaryCate[mainIndex].push(item.title);
|
||
} else {
|
||
this.temporaryCate.splice(mainIndex,1);
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 删除选中的分类列表
|
||
delCate(index){
|
||
this.chooseCateList.splice(index,1);
|
||
if(index==0){//清空分类id
|
||
this.categoryId = '';
|
||
}
|
||
if(index==1){//清空活动限时字段
|
||
this.activityStr = '';
|
||
}
|
||
// 清除选中
|
||
this.screenList.forEach((item1,index1)=>{
|
||
item1.childrenList.forEach((item2,index2)=>{
|
||
if(index2!=0){
|
||
this.screenList[index1].childrenList[index2].isCheck = false;
|
||
}
|
||
})
|
||
})
|
||
if(this.chooseCateList.length){
|
||
this.chooseCateList.forEach((existItem,existIndex)=>{
|
||
// 设置存在的选中状态
|
||
this.screenList.forEach((item,mainIndex)=>{
|
||
let nameIndex = item.childrenList.findIndex((childItem)=>{
|
||
return childItem.title == existItem;
|
||
})
|
||
if(nameIndex!=-1){
|
||
this.screenList[mainIndex].childrenList[nameIndex].isCheck = true;
|
||
} else {
|
||
this.screenList[mainIndex].childrenList[0].isCheck = true;
|
||
}
|
||
})
|
||
// 变更暂存的分类数组
|
||
this.temporaryCate.forEach((temporaryItem,temporaryIndex)=>{
|
||
let newIndex = temporaryItem.findIndex(titem=>{
|
||
return titem == existItem;
|
||
})
|
||
if(newIndex==-1){
|
||
this.temporaryCate[temporaryIndex].splice(0,1);
|
||
}
|
||
})
|
||
})
|
||
} else {// 传递的分类数组长度为0
|
||
this.screenList.forEach((item1,index1)=>{
|
||
item1.childrenList.forEach((item2,index2)=>{
|
||
if(index2==0){
|
||
this.screenList[index1].childrenList[index2].isCheck = true;
|
||
}
|
||
})
|
||
})
|
||
this.temporaryCate = [];
|
||
// 设置分类id
|
||
this.categoryId = '';
|
||
// 设置限时优惠
|
||
this.activityStr = '';
|
||
// 调用搜索执行事件
|
||
this.implementEv();
|
||
}
|
||
},
|
||
// 分类筛选确认事件
|
||
defineEv(){
|
||
this.log(this.temporaryCate)
|
||
// 二维数组this.temporaryCate 降一维数组this.chooseCateList
|
||
let newChoose = this.temporaryCate.join().split(',');
|
||
// 置空选中的分类列表
|
||
this.chooseCateList = [];
|
||
newChoose.forEach(item=>{
|
||
if(item!=''){
|
||
this.chooseCateList.push(item);
|
||
}
|
||
})
|
||
this.isScreen = false;
|
||
this.page = 1;
|
||
// 调用搜索执行事件
|
||
this.implementEv();
|
||
},
|
||
// 搜索执行事件
|
||
implementEv(){
|
||
this.$toolAll.tools.showToast('搜索中...')
|
||
let params = {
|
||
keyword:'', //商品关键字 支持模糊搜索
|
||
page:this.page, // 页数
|
||
size: this.size, // 每页数量
|
||
activity:this.activityStr,// 活动类型 默认normal=普通商品；limit_time=限时促销
|
||
category_id:this.categoryId,// 分类ID 多个分类用英文逗号分割
|
||
price_from:this.minPrice,// 价格区间 最低价格 0不限
|
||
price_to:this.maxPrice,// 价格区间 最大价格 0不限
|
||
}
|
||
this.$requst.post('/api/spu/list',params).then(res=>{
|
||
if(res.code==0){
|
||
if(this.page==1) this.dataList = [];
|
||
// 设置商品总数
|
||
this.total = res.data.total;
|
||
if(res.data.list.length){
|
||
res.data.list.forEach(item=>{
|
||
let obj = {
|
||
id:item.id,
|
||
imgSrc:item.cover,
|
||
title:item.name,
|
||
// price:this.$toolAll.tools.changeNum(item.price*1),
|
||
price:item.price,
|
||
isActivity:item.tag == '' ? false : true,
|
||
}
|
||
this.dataList.push(obj);
|
||
})
|
||
}
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
}
|
||
}).catch(err=>{
|
||
this.$toolAll.tools.showToast(err.msg);
|
||
})
|
||
},
|
||
goDetail(id){//前往详情页
|
||
uni.navigateTo({
|
||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|