477 lines
12 KiB
Vue
477 lines
12 KiB
Vue
<template>
|
|
<view class="page">
|
|
<!-- <view class="cu-custom bg-white solid-bottom" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
|
|
<view class="cu-bar bg-white fixed solid-bottom" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
|
|
<view class="search-form round" @tap="navToSearch" style="height: 64rpx;">
|
|
<text class="cuIcon-search"><text class="padding-sm placeholderStyle">搜索你想要的商品</text></text>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<view style="height:100%;" class="content solid-top">
|
|
<!-- 左边tab栏开始 -->
|
|
<scroll-view class="left" scroll-y>
|
|
<view style="height: 10rpx;width: 100%;" :style="{background: currentIndex == 0?'#ffffff':''}"></view>
|
|
<block v-for="(item, index) in lists" :key="index">
|
|
|
|
<view class="item text-center" :class="{ active: index == currentIndex}" @click="handleSelect(item, index)">
|
|
{{ item.title }}
|
|
<view class="cuIconlujing226"></view>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
<!-- 左边tab栏结束 -->
|
|
<!-- 右边列表开始 -->
|
|
<view class="right">
|
|
<scroll-view class="classify-box" scroll-y :scroll-top="scrollTop" :scroll-into-view="scrollViewId"
|
|
@scroll="onScroll" :scroll-with-animation="true">
|
|
|
|
<block >
|
|
<view class="cateRightBox2" >
|
|
<view class="cateRightBox">
|
|
<!-- @click="navToList(item.name,item.aid)" -->
|
|
<view class="cu-list grid col-3 no-border flex flex-direction" v-if="lists[currentIndex].son_list.length>0">
|
|
<view @tap="chooseTap(item,i)" style="width: 100%;flex-direction: row;" class="cu-item flex justify-between align-center " v-for="(item, i) in lists[currentIndex].son_list" :key="item.id"
|
|
>
|
|
<text class="text-666 text-name">{{ item.title }}</text>
|
|
<image style="width: 32rpx;height: 32rpx;" :src="item.checked?STATIC_URL+'166.png':STATIC_URL+'165.png'"></image>
|
|
</view>
|
|
</view>
|
|
<fu-empty-ui v-if="lists[currentIndex].son_list.length==0"></fu-empty-ui>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- 右边列表结束 -->
|
|
</view>
|
|
<fu-notwork></fu-notwork>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
scrollViewId: '',
|
|
scrollTop: 0,
|
|
CustomBar: this.CustomBar, //状态栏高度
|
|
StatusBar: this.StatusBar, //状态栏高度
|
|
currentIndex: 0, //选中下标
|
|
lists: [], //列表
|
|
banners: [], //轮播图
|
|
ad: [],// 轮播图广告
|
|
topList: [],
|
|
isLeftClick:false,
|
|
cat_id:'',
|
|
listsData: [], //商品列表
|
|
};
|
|
},
|
|
// computed: {
|
|
// level2() {
|
|
// return (this.lists[this.currentIndex] && this.lists[this.currentIndex].child) || [];
|
|
// }
|
|
// },
|
|
onLoad() {
|
|
this.loadData();
|
|
this.setNavigationBarTitle(this.i18n['选择分类'])
|
|
// #ifdef APP-PLUS
|
|
var webView = this.$mp.page.$getAppWebview();
|
|
webView.setTitleNViewButtonStyle(0, {
|
|
text:this.i18n["确定"],
|
|
});
|
|
// #endif
|
|
// this.getAd();
|
|
},
|
|
onShow() {
|
|
this.setTabBarItem();
|
|
},
|
|
onNavigationBarButtonTap() {
|
|
this.sureBtn()
|
|
},
|
|
methods: {
|
|
getNodesInfo() {
|
|
this.$nextTick(() => {
|
|
//小程序没有doucument和window对象(undefined)
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.selectAll(".cateRightBox2").boundingClientRect().exec(res => {
|
|
let nodes = res[0];
|
|
let arr = [];
|
|
nodes.map(item => {
|
|
arr.push(item.top);
|
|
})
|
|
this.topList = arr;
|
|
})
|
|
});
|
|
},
|
|
onScroll(e) {
|
|
if(this.isLeftClick){
|
|
this.isLeftClick=false;
|
|
return;
|
|
}
|
|
// let tempTop = e.detail.scrollTop //scroll期间赋值
|
|
let tempTop = e.target.scrollTop;
|
|
for (let i = 0; i < this.topList.length; i++) {
|
|
let h1 = this.topList[i];
|
|
let h2 = this.topList[i + 1];
|
|
if (tempTop > h1 && tempTop < h2) {
|
|
this.currentIndex = i;
|
|
}
|
|
}
|
|
},
|
|
// /**
|
|
// * @event
|
|
// * @description 广告轮播图
|
|
// * @return {Boolean}
|
|
// * */
|
|
// getAd() {
|
|
// this.$api
|
|
// .post(global.apiUrls.postAdvert, {
|
|
// typeid: 10
|
|
// })
|
|
// .then(res => {
|
|
// console.log(res, '广告');
|
|
// if (res.data.code == 1) {
|
|
// this.ad = res.data.data;
|
|
// }
|
|
// });
|
|
// },
|
|
/**
|
|
* @event
|
|
* @description tab切换
|
|
* @param {Number} item -当前选中数据 //暂时没用
|
|
* @param {Number} index - 选中下标
|
|
* @return {Boolean}
|
|
* */
|
|
handleSelect(item, index) {
|
|
console.log(111111111)
|
|
if(this.currentIndex != index){
|
|
let list=this.lists;
|
|
list.forEach((item,i)=>{
|
|
if(item.son_list.length>0){
|
|
item.son_list.forEach(res=>{
|
|
res.checked=false
|
|
})
|
|
}
|
|
})
|
|
this.lists = list;
|
|
console.log(this.lists)
|
|
}
|
|
this.scrollViewId = "po" + index;
|
|
this.currentIndex = index;
|
|
this.isLeftClick=true;
|
|
this.cat_id=item.aid;
|
|
|
|
|
|
// this.getServiceList()
|
|
this.$nextTick(() => {
|
|
this.scrollTop = 0
|
|
});
|
|
|
|
},
|
|
chooseTap(item,index){
|
|
let list = this.lists;
|
|
list = list.map((item,i) => {
|
|
if(this.currentIndex==i){
|
|
if(item.son_list.length>0){
|
|
item.son_list.forEach((res,l)=>{
|
|
if(index==l){
|
|
res.checked=true
|
|
}else{
|
|
res.checked=false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return item;
|
|
})
|
|
this.lists = list
|
|
this.sureBtn()
|
|
},
|
|
sureBtn(){
|
|
// let proficiency=(this.lists.map((item,index)=>(item.checked ? `${item.id}` : '')).filter(item => item != '')).join(',');
|
|
let id=(this.lists.map((item,index)=>item.son_list.map((res,i)=>(res.checked ? `${res.aid}` : '')).filter(res => res != '')).filter(item => item != '')).join(',')
|
|
let name=(this.lists.map((item,index)=>item.son_list.map((res,i)=>(res.checked ? `${res.title}` : '')).filter(res => res != '')).filter(item => item != '')).join(',')
|
|
console.log(id)
|
|
console.log(name)
|
|
if(!id) return this.$message.info('请选择分类');
|
|
uni.$emit('CHOOSEMENU',{
|
|
id:id,
|
|
name:name
|
|
})
|
|
setTimeout(function(){
|
|
uni.navigateBack({})
|
|
},300)
|
|
},
|
|
/**
|
|
* @event
|
|
* @description 获取分类
|
|
* @return {Boolean}
|
|
* */
|
|
loadData() {
|
|
this.$api.post(global.apiUrls.shopCategorys).then(res => {
|
|
console.log(res);
|
|
if (res.data.code == 1) {
|
|
let list = res.data.data;
|
|
// 判断没有二级分类删除此分类
|
|
// list.forEach((item, index) => {
|
|
// if (!item.child) {
|
|
// list.splice(index, 1);
|
|
// }
|
|
// // 判断没有三级分类删除此分类
|
|
// if (this.filterEmpty(item.child)) {
|
|
// list.splice(index, 1);
|
|
// }
|
|
// });
|
|
// this.cat_id=list[0].id
|
|
list.forEach(item=>{
|
|
if(item.son_list.length>0){
|
|
item.son_list.forEach(res=>{
|
|
res.checked=false
|
|
})
|
|
}
|
|
})
|
|
this.lists = list;
|
|
console.log(this.lists)
|
|
// this.getServiceList()
|
|
// this.getNodesInfo();
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* @getServiceList 获取分类下商品
|
|
*/
|
|
getServiceList(){
|
|
this.listsData=[]
|
|
this.$api.post(global.apiUrls.getServiceList,{
|
|
cid:this.cat_id,
|
|
page:1,
|
|
pageSize:200
|
|
}).then(res=>{
|
|
console.log(res)
|
|
if(res.data.code==1){
|
|
this.listsData=res.data.data.data
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
* @description 判断是否有子分类
|
|
*/
|
|
filterEmpty(arr) {
|
|
if (!arr) {
|
|
return false;
|
|
}
|
|
let num = 0;
|
|
arr.forEach(item => {
|
|
if (!item.child) {
|
|
num++;
|
|
}
|
|
});
|
|
if (num == arr.length) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
/**
|
|
* @event
|
|
* @description 去分类列表页
|
|
* @return {Boolean}
|
|
* */
|
|
navToList(name,cid) {
|
|
this.$urouter.navigateTo({
|
|
url: '/pages/goods/goodsdetail/goods-detail/index',
|
|
params: {
|
|
goods_id: cid,
|
|
// keyWords:name
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* @event
|
|
* @description 去搜索页面
|
|
* @return {Boolean}
|
|
* */
|
|
navToSearch() {
|
|
this.$urouter.navigateTo('/pages/index/search/search/index');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
height: 100vh;
|
|
background: #f8f8f8;
|
|
overflow: hidden;
|
|
|
|
.content {
|
|
display: flex;
|
|
|
|
.left {
|
|
width: 168rpx;
|
|
min-width: 168rpx;
|
|
height: 100%;
|
|
.item {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
transition: all 0.2s;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.item.active {
|
|
font-size: 28rpx;
|
|
color: #FF9300;
|
|
font-weight: bold;
|
|
background: #FFFFFF;
|
|
position: relative;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 0;
|
|
width: 6rpx;
|
|
height: 24rpx;
|
|
float: left;
|
|
background: #FF9300;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
/* background-color: #FFFFFF; */
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.one-ad {
|
|
/* padding: 0 12px; */
|
|
height: 164rpx;
|
|
/* padding: 10rpx 20rpx 10rpx 20rpx; */
|
|
border-radius: 0rpx;
|
|
margin: 24rpx 0 32rpx;
|
|
|
|
.ad-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0rpx;
|
|
}
|
|
}
|
|
|
|
.swiper-box {
|
|
padding: 24rpx;
|
|
|
|
.swiper {
|
|
height: 180rpx;
|
|
|
|
.swiper-item {
|
|
.swiper-item-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.classify-box {
|
|
height: 100%;
|
|
padding: 0 12rpx;
|
|
background: #fff;
|
|
.block-120 {
|
|
width: 146rpx;
|
|
height: 146rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.cateRightBox {
|
|
overflow: hidden;
|
|
background: #fff;
|
|
// margin-bottom: 20rpx;
|
|
// border-radius: 16rpx;
|
|
padding: 0 20rpx;
|
|
|
|
/* &:nth-child(1) {
|
|
border-radius: 0;
|
|
} */
|
|
}
|
|
|
|
.cateRightBox2:last-child {
|
|
padding-bottom: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cu-bar .search-form {
|
|
line-height: 52rpx;
|
|
height: 52rpx;
|
|
}
|
|
|
|
.text-df {
|
|
justify-content: left;
|
|
align-items: left;
|
|
|
|
view {
|
|
width: 120rpx;
|
|
height: 3rpx;
|
|
background: #ccc;
|
|
margin: 0 15rpx;
|
|
}
|
|
}
|
|
|
|
.placeholderStyle {
|
|
font-size: 26rpx;
|
|
color: grey;
|
|
}
|
|
|
|
.block-24 {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.fu-cate-block {
|
|
justify-content: space-between !important;
|
|
padding-top: 32rpx;
|
|
font-size: 28rpx;
|
|
padding-left: 24rpx;
|
|
}
|
|
|
|
.text-name {
|
|
font-size: 24rpx;
|
|
}
|
|
.cu-list.grid.no-border>.cu-item{
|
|
padding-top: 24rpx;
|
|
padding-bottom: 0!important;
|
|
}
|
|
.cu-list.grid>.cu-item uni-text{
|
|
margin-top: 16rpx;
|
|
}
|
|
.cu-list.grid.no-border{
|
|
padding: 20rpx 0;
|
|
}
|
|
</style>
|