365 lines
9.7 KiB
Vue
365 lines
9.7 KiB
Vue
<template>
|
||
<view class="category">
|
||
<view class="category-wrapper" v-if="oneList.length>0">
|
||
<!-- 左边导航 -->
|
||
<scroll-view :style="{height:swiperHeight+'px'}" scroll-y="true" class="left-wrapper" scroll-with-animation="true" :scroll-top="left_scroll">
|
||
<view class="left-content">
|
||
<view
|
||
v-for="(title, index) in oneList"
|
||
:key="index"
|
||
class="title-content"
|
||
:class="select_index == index ? 'onSelected' : ''"
|
||
@tap="choose(index)">
|
||
{{ title.name }}
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 右边内容 -->
|
||
<scroll-view :style="{height:swiperHeight+'px'}" scroll-y="true" class="right-wrapper" scroll-with-animation="true" :scroll-top="right_scroll" @scroll="myscroll">
|
||
<view class="right-content">
|
||
<view class="product-wrapper">
|
||
<block v-for="(a_item, a_index) in catrgoryList" :key="a_index">
|
||
<view class="category-item" :id="'list-' + a_item.id" v-if="a_item.type === 1">
|
||
<!-- banner区域 -->
|
||
<view class="banner" v-if="a_item.mainImage">
|
||
<image class="banner-img" :src="a_item.mainImage"></image>
|
||
</view>
|
||
<!-- 产品区 -->
|
||
<block v-for="(b_item, b_index) in catrgoryList" :key="b_index">
|
||
<block v-if="b_item.type === 2 && b_item.pid === a_item.id">
|
||
<view class="flex flex-between" @click="twoJumpTo(a_item, b_item)">
|
||
<text class="blod" style="padding-left: 30rpx;">{{b_item.name}}</text>
|
||
<text class="iconfont color-9" style="padding-right: 30rpx;"></text>
|
||
</view>
|
||
<view class="category-content">
|
||
<block v-for="(c_item, c_index) in catrgoryList" :key="c_index">
|
||
<view class="product-item" v-if="c_item.type === 3 && c_item.pid === b_item.id" @click="jumpTo(c_item)">
|
||
<image class="product-img" :src="c_item.mainImage"></image>
|
||
<text class="product-title">{{c_item.name}}</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view style="width: 100%;height: 180upx;"></view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 弹框 -->
|
||
<modal v-if="showModal">
|
||
<image :src="advertData.ossUrl" mode="widthFix" @click="imgJump"></image>
|
||
<text class="iconfont color-w font60" style="margin-top: 20rpx;" @click="showModal = false"></text>
|
||
</modal>
|
||
|
||
<!-- <tabbar></tabbar> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import url from '@/common/http/url.js';
|
||
import publics from "@/common/utils/public.js"
|
||
import modal from "@/components/modal.vue"
|
||
import tabbar from "@/components/tabbar.vue"
|
||
export default {
|
||
components: { modal, tabbar },
|
||
data() {
|
||
return {
|
||
swiperHeight: "900",
|
||
windows_height: 0, //屏幕高度
|
||
swiperList: [],
|
||
catrgoryList: [],
|
||
oneList: [],
|
||
select_index: 0,
|
||
right_height: [], //右侧每个内容的高度集合
|
||
right_scroll: 0, //右侧的滑动值
|
||
left_height: 0, //左侧总高度
|
||
left_scroll: 0, //左侧滑动值
|
||
last: 0,
|
||
showModal: false,
|
||
advertData: {}
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.swiperHeight = uni.getSystemInfoSync().windowHeight
|
||
this.windows_height = uni.getSystemInfoSync().windowHeight;
|
||
this.init();
|
||
// 广告弹框
|
||
if (e.classIndex) this.choose(e.classIndex)
|
||
this.$http("GET", url.cms.advertisingMap, {position: 4}).then(res =>{
|
||
if (res.data && res.data.length > 0) {
|
||
this.advertData = res.data[0]
|
||
if (this.advertData.popupMode === 2) {
|
||
if (!publics.advertShowToStorage(this.advertData.id)) {
|
||
this.showModal = true
|
||
}
|
||
} else {
|
||
this.showModal = true
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// onBackPress(){
|
||
// //隐藏到后台，不退出app
|
||
// let main = plus.android.runtimeMainActivity();
|
||
// main.moveTaskToBack(false);
|
||
// return true;
|
||
// },
|
||
// 点击搜索时触发事件
|
||
onNavigationBarSearchInputConfirmed(e){
|
||
let value = e.text
|
||
this.$navigateTo(`../home/productList?goodsName=${value}`)
|
||
},
|
||
methods: {
|
||
init() {
|
||
let _this = this
|
||
this.oneList = []
|
||
this.$http("GET", url.goods.getGoodsClass).then(res =>{
|
||
this.catrgoryList = res.data
|
||
res.data.map(v => {
|
||
if (v.type === 1) {
|
||
this.oneList.push(v)
|
||
}
|
||
})
|
||
this.$nextTick(() => {
|
||
setTimeout(()=>{
|
||
_this.getHeightList()
|
||
}, 500)
|
||
})
|
||
uni.stopPullDownRefresh();
|
||
|
||
})
|
||
},
|
||
getHeightList() {
|
||
let _this = this;
|
||
let selectorQuery = uni.createSelectorQuery();
|
||
selectorQuery.select('.left-content').boundingClientRect(function(rects) {
|
||
_this.left_height = rects.height;
|
||
});
|
||
selectorQuery.selectAll('.category-item').boundingClientRect(function(rects) {
|
||
_this.right_height = rects.map((item) => item.top-60);
|
||
}).exec();
|
||
},
|
||
choose(index) {
|
||
console.log(index)
|
||
if (this.select_index == index) {
|
||
return;
|
||
}
|
||
console.log('222')
|
||
this.select_index = index;
|
||
// 加入防抖
|
||
if (this.timeout) {
|
||
clearTimeout(this.timeout); //清除计时器
|
||
}
|
||
this.timeout = setTimeout(() => {
|
||
this.right_scroll = this.right_height[index];
|
||
}, 300)
|
||
},
|
||
myscroll(e) {
|
||
//引入节流
|
||
let right_content_height = e.detail.scrollHeight - this.windows_height;
|
||
if (right_content_height == e.detail.scrollTop) {
|
||
return;
|
||
}
|
||
let scroll_top = e.detail.scrollTop; //110是banner图的高度
|
||
//判断当前的scrollTop在哪个区间内;
|
||
let now = +new Date();
|
||
if (now - this.last > 100) {
|
||
this.last = now;
|
||
// let active_index = this.right_height.findIndex((value, index, arr) => value <= scroll_top && scroll_top < arr[index]);
|
||
let active_index = this.right_height.findIndex((value, index, arr) => {
|
||
let i = index + 1
|
||
if (index === this.right_height.length - 1) {
|
||
return this.right_height.length - 1
|
||
} else {
|
||
return value <= scroll_top && scroll_top < arr[index+1]
|
||
}
|
||
});
|
||
let oldSelectIndex = this.select_index
|
||
if (active_index < 0) {
|
||
this.select_index = oldSelectIndex
|
||
} else{
|
||
this.select_index = active_index;
|
||
}
|
||
if (this.left_height - this.windows_height) {
|
||
//如果有超出部分
|
||
let diff = this.left_height - this.windows_height
|
||
this.left_scroll = Math.round((active_index * diff) / (this.catrgoryList.length - 1))
|
||
}
|
||
}
|
||
},
|
||
twoJumpTo(pRow, row){
|
||
this.$navigateTo("/pages/home/productClassList?pTitle="+pRow.name+"&&title="+row.name+"&&categoryTwoId="+row.id)
|
||
},
|
||
jumpTo(row){
|
||
this.$navigateTo("/pages/home/productClassList?title="+row.name+"&&categoryThreeId="+row.id)
|
||
},
|
||
imgJump(){
|
||
this.showModal = false
|
||
this.$http("POST", url.cms.clickAdvertisingMap, {id: this.advertData.id})
|
||
publics.advertOption(this.advertData.operationCode, this.advertData.operationValue)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.category {
|
||
height: 100%;
|
||
background-color: #FFFFFF;
|
||
.tabs {
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 9999;
|
||
background-color: #FFFFFF;
|
||
.tab{
|
||
padding: 10rpx 0;
|
||
.icon{
|
||
font-size: 48rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
.name{
|
||
font-size: 32rpx;
|
||
color: #555;
|
||
}
|
||
}
|
||
.active{
|
||
border-bottom: 6rpx solid #F8D247;
|
||
.name{
|
||
color: #000;
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
.category-wrapper {
|
||
// width: 100%;
|
||
// display: flex;
|
||
// flex-direction: row;
|
||
// position: absolute;
|
||
// top: 0;
|
||
// bottom: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
overflow-y: scroll;
|
||
.left-wrapper {
|
||
width: 200rpx;
|
||
flex: 0 0 200rpx;
|
||
background-color: #FFFFFF;
|
||
|
||
.left-content {
|
||
|
||
.title-content {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
cursor: pointer;
|
||
|
||
&:last-child {
|
||
// border-bottom: 0;
|
||
}
|
||
|
||
&.onSelected {
|
||
background-color: #fff;
|
||
position: relative;
|
||
color: #F8D247;
|
||
font-weight: bold;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 5rpx;
|
||
height: 100%;
|
||
background: #F8D247;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-wrapper {
|
||
flex: 1;
|
||
height: 100%;
|
||
.right-content {
|
||
width: 100%;
|
||
padding: 20rpx 0;
|
||
// border-left: 1rpx solid #efefef;
|
||
box-sizing: border-box;
|
||
overflow-y: scroll;
|
||
|
||
.product-wrapper {
|
||
.category-item {
|
||
.banner{
|
||
width: 94%;
|
||
height: 180upx;
|
||
border-radius: 20upx;
|
||
margin-left: 3%;
|
||
margin-bottom: 30rpx;
|
||
.banner-img{
|
||
width: 100%;
|
||
height: 180upx;
|
||
border-radius: 20upx;
|
||
overflow: hidden;
|
||
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.3);
|
||
}
|
||
}
|
||
.category-title {
|
||
height: 60rpx;
|
||
font-size: 26rpx;
|
||
line-height: 60rpx;
|
||
font-weight: 500;
|
||
background-color: #f6f6f6;
|
||
padding-left: 20rpx;
|
||
color: #000;
|
||
}
|
||
|
||
.category-content {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-flow: wrap;
|
||
padding: 20rpx 20rpx 50rpx;
|
||
.product-item {
|
||
width: 33%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.product-img {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
margin-bottom: 10rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #f6f4f7;
|
||
}
|
||
|
||
.product-title {
|
||
font-size: 28rpx;
|
||
color: #777;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|