|
|
<template>
|
|
|
<view class="category " :class="['theme', themeObj.name]">
|
|
|
<!-- 搜索 -->
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
|
<div class="status-bar" :style="{height:statusBarHeight+'px'}"></div>
|
|
|
<!-- #endif -->
|
|
|
<view class="search">
|
|
|
<search class="w-100"></search>
|
|
|
</view>
|
|
|
|
|
|
<view class="VerticalBox">
|
|
|
<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation
|
|
|
:scroll-top="verticalNavTop" style="height:calc(100vh - 140px)">
|
|
|
<view class="cu-item text-sm"
|
|
|
:class="index==tabCur?'text-green cur':''"
|
|
|
v-for="(categoryType_item,index) in categoryType" :key="index" @tap="TabSelect"
|
|
|
:data-id="index">
|
|
|
{{categoryType_item.name}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
</scroll-view>
|
|
|
<scroll-view class="padding-sm" scroll-y scroll-with-animation style="width: calc(100% - 110px); height:calc(100vh - 140px)"
|
|
|
:scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
|
|
|
<view class="type_head">
|
|
|
<view class="type_head_item text-center text-xs"
|
|
|
v-for="(type,index) in subPoiCategories"
|
|
|
:class="type.id==tabTypeCur?'type_head_item_cur':''"
|
|
|
@tap="TabTypeSelect" :key="index":data-id="type.id">
|
|
|
<view class="">{{type.name}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="type_good">
|
|
|
<goodList :has-token="hasToken" style="width: 100%; background-color: #FFFFFF;" :propsList = "cateGood" ></goodList>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getGoodsList } from '@/api/index.js'
|
|
|
import search from "../../commponent/public/search";
|
|
|
import goodList from '../../commponent/home/goodList';
|
|
|
import jsonData from "../../../json.js"
|
|
|
import { getCart, getToken } from '@/utils/auth';
|
|
|
import { setTabBarBadge } from '@/utils/util.js'
|
|
|
var app = getApp();
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
|
|
|
mainCur: 0,
|
|
|
tabCur: 0,
|
|
|
categoryType:[], //分类
|
|
|
verticalNavTop: 0,
|
|
|
|
|
|
subPoiCategories:[], //二级分类
|
|
|
tabTypeCur:0, //二级分类选中id
|
|
|
|
|
|
cateGood:[],
|
|
|
|
|
|
|
|
|
bottoms: '100',
|
|
|
showHeader: false, //判断当前终端是APP还是h5
|
|
|
classLevel: true, //控制显示分类菜单 true：二级分类菜单 false：三级分类菜单
|
|
|
current: "",
|
|
|
scrollTop: "",
|
|
|
statusBarHeight: 20,
|
|
|
|
|
|
|
|
|
currentTwo: 0,
|
|
|
currentThere: 0,
|
|
|
_goods: [],
|
|
|
hasToken: true,
|
|
|
themeObj: app.globalData.themeObj
|
|
|
};
|
|
|
},
|
|
|
|
|
|
components: {
|
|
|
search,
|
|
|
goodList
|
|
|
},
|
|
|
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面加载
|
|
|
*/
|
|
|
onLoad: function(options) {
|
|
|
// #ifdef APP-PLUS
|
|
|
this.showHeader = true //在APP端对样式进行调整
|
|
|
this.bottoms = '0' //在APP下 规格弹窗的位置发生变化
|
|
|
// #endif
|
|
|
this.getGoodsList()
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
*/
|
|
|
onReady: function() {},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面显示
|
|
|
*/
|
|
|
onShow: function() {
|
|
|
if (getToken()) {
|
|
|
this.hasToken = true
|
|
|
const carts = getCart()
|
|
|
setTabBarBadge(carts.length)
|
|
|
} else {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/login/index1'
|
|
|
})
|
|
|
this.hasToken = false
|
|
|
setTabBarBadge(0)
|
|
|
}
|
|
|
this.themeObj = app.globalData.themeObj
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面隐藏
|
|
|
*/
|
|
|
onHide: function() {},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面卸载
|
|
|
*/
|
|
|
onUnload: function() {},
|
|
|
|
|
|
/**
|
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
|
*/
|
|
|
onPullDownRefresh: function() {},
|
|
|
|
|
|
/**
|
|
|
* 页面上拉触底事件的处理函数
|
|
|
*/
|
|
|
onReachBottom: function() {},
|
|
|
|
|
|
/**
|
|
|
* 用户点击右上角分享
|
|
|
*/
|
|
|
onShareAppMessage: function() {},
|
|
|
methods: {
|
|
|
getGoodsList() {
|
|
|
const s = [
|
|
|
{
|
|
|
"rule": "eq",
|
|
|
"type": "string",
|
|
|
"dictCode": "",
|
|
|
"val": "1",
|
|
|
"field": "ifSale"
|
|
|
}
|
|
|
]
|
|
|
const params = {
|
|
|
pageNo:1,
|
|
|
pageSize: 100,
|
|
|
superQueryParams: encodeURI(JSON.stringify(s)),
|
|
|
superQueryMatchType: 'and'
|
|
|
}
|
|
|
getGoodsList(params).then(res => {
|
|
|
const result = res.result.records.reduce((c,v) => {
|
|
|
c[v.category] = c[v.category] || []
|
|
|
c[v.category].push(v)
|
|
|
return c
|
|
|
}, {})
|
|
|
const data = Object.keys(result).map((v, index) => {
|
|
|
return {
|
|
|
name: v,
|
|
|
id: index,
|
|
|
children: result[v],
|
|
|
"leaf": 0,
|
|
|
"type": 100,
|
|
|
"subPoiCategories": []
|
|
|
}
|
|
|
})
|
|
|
this._goods = data
|
|
|
this.categoryType = data
|
|
|
|
|
|
this.subPoiCategories = []
|
|
|
this.cateGood = data[this.tabCur].children
|
|
|
|
|
|
})
|
|
|
},
|
|
|
TabSelect(e) {
|
|
|
this.tabCur = e.currentTarget.dataset.id;
|
|
|
this.mainCur = e.currentTarget.dataset.id;
|
|
|
this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50;
|
|
|
|
|
|
this.subPoiCategories = []
|
|
|
this.cateGood = this._goods[this.tabCur].children
|
|
|
},
|
|
|
TabTypeSelect(e) {
|
|
|
this.tabTypeCur = e.currentTarget.dataset.id;
|
|
|
},
|
|
|
|
|
|
VerticalMain(e) {
|
|
|
|
|
|
// #ifdef MP-ALIPAY
|
|
|
return false //支付宝小程序暂时不支持双向联动
|
|
|
// #endif
|
|
|
let that = this;
|
|
|
let tabHeight = 0;
|
|
|
if (this.load) {
|
|
|
for (let i = 0; i < this.categoryType.length; i++) {
|
|
|
let view = uni.createSelectorQuery().select("#main-" + this.categoryType[i].id);
|
|
|
view.fields({
|
|
|
size: true
|
|
|
}, data => {
|
|
|
this.categoryType[i].top = tabHeight;
|
|
|
tabHeight = tabHeight + data.height;
|
|
|
this.categoryType[i].bottom = tabHeight;
|
|
|
}).exec();
|
|
|
}
|
|
|
this.load = false
|
|
|
}
|
|
|
let scrollTop = e.detail.scrollTop + 10;
|
|
|
for (let i = 0; i < this.categoryType.length; i++) {
|
|
|
if (scrollTop > this.categoryType[i].top && scrollTop < this.categoryType[i].bottom) {
|
|
|
this.verticalNavTop = (this.categoryType[i].id - 1) * 50
|
|
|
this.tabCur = this.categoryType[i].id
|
|
|
console.log(scrollTop)
|
|
|
return false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.fixed {
|
|
|
position: fixed;
|
|
|
z-index: 99;
|
|
|
}
|
|
|
|
|
|
.VerticalNav.nav {
|
|
|
width: 200upx;
|
|
|
white-space: initial;
|
|
|
background-color: #f1f1f1;
|
|
|
}
|
|
|
|
|
|
.VerticalNav.nav .cu-item {
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
background-color: #f1f1f1 ;
|
|
|
margin: 0;
|
|
|
border: none;
|
|
|
height: 50px;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.VerticalNav.nav .cu-item.cur {
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
|
|
|
.VerticalNav.nav .cu-item.cur::after {
|
|
|
content: "";
|
|
|
width: 8upx;
|
|
|
height: 50upx;
|
|
|
border-radius: 0 10upx 10upx 0 ;
|
|
|
position: absolute;
|
|
|
background-color: #4BDA4D;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
margin: auto;
|
|
|
}
|
|
|
|
|
|
.VerticalBox {
|
|
|
display: flex;
|
|
|
}
|
|
|
|
|
|
.VerticalMain {
|
|
|
background-color: #fff;
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
|
|
|
.category {
|
|
|
background-color: #ffffff;
|
|
|
position: fixed;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
box-sizing: border-box;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
.search {
|
|
|
height: 70px;
|
|
|
padding: 10upx 10upx;
|
|
|
padding-left: 10upx;
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.type_head{
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(3,33.33%);
|
|
|
grid-gap: 10rpx;
|
|
|
}
|
|
|
.type_head_item{
|
|
|
line-height: 65rpx;
|
|
|
color: #000000;
|
|
|
background-color: #F5F6F7;
|
|
|
border-radius: 15rpx;
|
|
|
}
|
|
|
.type_head_item_cur{
|
|
|
line-height: 65rpx;
|
|
|
color: #1E9C3D;
|
|
|
background-color: #E4FCDE;
|
|
|
border-radius: 15rpx;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
