perry-mall/pages/tabbar/cate/cate.vue

354 lines
10 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="pad-x180">
<!-- 状态栏 -->
<status-nav
:ifTitle="true"
:ifReturn="false"
:ifCenter="true"
:navBarTitle="'分类'"></status-nav>
<!-- 容器 -->
<container-subgroup>
<view class="pad30 sort-box mar-x20" style="margin-left: -30rpx;margin-right: -30rpx;" :style="{top: statusBarHeight+'px'}">
<view class="col0 fon38 disjbac fon50">
<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)">
{{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>
</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) {
// 调用获取筛选条件列表事件
this.obtainScreen();
// 调用商品列表查询事件
this.implementEv();
},
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){
// 清除分类所有选中项
this.screenList[mainIndex].childrenList.forEach((item,index)=>{
item.isCheck = false;
})
// 设置分类id
this.categoryId = this.screenList[0].childrenList[childrenIndex].id;
// 设置限时优惠
this.activityStr = this.screenList[1].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);
// 清除选中
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>