You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
326 lines
7.5 KiB
326 lines
7.5 KiB
<template>
|
|
<!-- 商品分类 -->
|
|
<view>
|
|
<!-- #ifdef MP || APP-PLUS -->
|
|
<!-- <view :style="{height: (40+dataConfig.topConfig.val*2+dataConfig.bottomConfig.val*2) + 'rpx'}" v-if="!fromType"></view> -->
|
|
<!-- #endif -->
|
|
<view :class="{
|
|
tabNav1: dataConfig.styleConfig.tabVal == 0,
|
|
tabNav2: dataConfig.styleConfig.tabVal == 1,
|
|
tabNav3: dataConfig.styleConfig.tabVal == 2,
|
|
isFixed: isFixed
|
|
}">
|
|
<view :style="[tabNavStyle]">
|
|
<view :style="[tabNavBgColor]">
|
|
<scroll-view scroll-x="true" :scroll-left="tabLeft" scroll-with-animation>
|
|
<view class="list acea-row row-middle">
|
|
<view v-for="(item, index) in tabListConfig" :key="index" :class="{ on: index == tabClick }" :style="[
|
|
index == tabClick ? textStyle : {}
|
|
]" class="item" @click="longClick(item, index)">
|
|
{{ item.text.val }}
|
|
<text v-if="dataConfig.styleConfig.tabVal != 2" class="line" :style="[lineStyle]"></text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="isFixed" style="height: 80rpx"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getCategoryList
|
|
} from '@/api/store.js';
|
|
import {
|
|
getCategoryVersion
|
|
} from '@/api/api.js';
|
|
export default {
|
|
name: 'tabNav',
|
|
props: {
|
|
dataConfig: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
isFixed: {
|
|
type: Boolean | String | Number,
|
|
default: false
|
|
},
|
|
fromType: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tabTitle: [],
|
|
tabLeft: 0,
|
|
isWidth: 0, //每个导航栏占位
|
|
tabClick: 0, //导航栏被点击
|
|
isLeft: 0, //导航栏下划线位置
|
|
fixedTop: 0,
|
|
isTop: 0,
|
|
navHeight: 45,
|
|
tabList: 45,
|
|
};
|
|
},
|
|
computed: {
|
|
lineStyle() {
|
|
let styleObject = {};
|
|
if (this.dataConfig.toneConfig.tabVal) {
|
|
switch (this.dataConfig.styleConfig.tabVal) {
|
|
case 0:
|
|
styleObject['background'] = `linear-gradient(90deg, ${this.dataConfig.decorateColor.color[0].item} 0%, ${this.dataConfig.decorateColor.color[1].item} 100%)`;
|
|
break;
|
|
case 1:
|
|
styleObject['border-bottom-color'] = this.dataConfig.decorateColor2.color[0].item;
|
|
break;
|
|
}
|
|
}
|
|
return styleObject;
|
|
},
|
|
textStyle() {
|
|
let styleObject = {};
|
|
if (this.dataConfig.toneConfig.tabVal) {
|
|
switch (this.dataConfig.styleConfig.tabVal) {
|
|
case 0:
|
|
styleObject['color'] = this.dataConfig.textColor.color[0].item;
|
|
break;
|
|
case 1:
|
|
styleObject['color'] = this.dataConfig.textColor2.color[0].item;
|
|
break;
|
|
case 2:
|
|
styleObject['background'] = `linear-gradient(90deg, ${this.dataConfig.decorateColor.color[0].item} 0%, ${this.dataConfig.decorateColor.color[1].item} 100%)`;
|
|
styleObject['color'] = this.dataConfig.textColor3.color[0].item;
|
|
break;
|
|
}
|
|
}
|
|
return styleObject;
|
|
},
|
|
tabNavBgColor() {
|
|
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
|
if (this.dataConfig.fillet.type) {
|
|
borderRadius =
|
|
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx`;
|
|
}
|
|
return {
|
|
'border-radius': borderRadius,
|
|
'background': `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 100%)`,
|
|
};
|
|
},
|
|
tabNavStyle() {
|
|
return {
|
|
'padding': `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
|
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
|
};
|
|
},
|
|
tabListConfig() {
|
|
let tabList = this.dataConfig.tabListConfig.list;
|
|
tabList.unshift({
|
|
classPage: {
|
|
id: 0
|
|
},
|
|
dataType: {
|
|
tabVal: 0
|
|
},
|
|
microPage: {
|
|
id: 0
|
|
},
|
|
text: {
|
|
val: '首页'
|
|
},
|
|
});
|
|
return tabList
|
|
},
|
|
},
|
|
created() {
|
|
let that = this;
|
|
that.getAllCategory();
|
|
// 获取设备宽度
|
|
uni.getSystemInfo({
|
|
success(e) {
|
|
that.isWidth = e.windowWidth / 5
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
// 导航栏点击
|
|
longClick(item, index) {
|
|
if (this.tabTitle.length > 5) {
|
|
this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
|
|
}
|
|
this.tabClick = index //设置导航点击了哪一个
|
|
this.isLeft = index * this.isWidth //设置下划线位置
|
|
let data = {
|
|
type: item.dataType.tabVal, //0 商品分类 1 微页面
|
|
microPage: item.microPage.id,
|
|
classPage: item.classPage.id,
|
|
};
|
|
this.$emit('bindSortId', data);
|
|
},
|
|
setCategory(data) {
|
|
data.unshift({
|
|
"id": -99,
|
|
'cate_name': '首页'
|
|
})
|
|
this.tabTitle = data;
|
|
// #ifdef MP || APP-PLUS
|
|
this.isTop = (uni.getSystemInfoSync().statusBarHeight + 43) + 'px'
|
|
// #endif
|
|
// #ifdef H5
|
|
this.isTop = 0
|
|
// #endif
|
|
},
|
|
getCategory() {
|
|
getCategoryList().then(res => {
|
|
uni.setStorageSync('category', JSON.stringify(res.data));
|
|
this.setCategory(res.data);
|
|
})
|
|
},
|
|
// 获取导航
|
|
getAllCategory: function() {
|
|
let that = this;
|
|
let category = uni.getStorageSync('category');
|
|
if (category) {
|
|
getCategoryVersion().then(res => {
|
|
let categoryVersion = uni.getStorageSync('categoryVersion');
|
|
if (res.data.version === categoryVersion) {
|
|
this.setCategory(JSON.parse(category));
|
|
} else {
|
|
uni.setStorageSync('categoryVersion', res.data.version);
|
|
this.getCategory();
|
|
}
|
|
});
|
|
} else {
|
|
this.getCategory();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tabNav1 {
|
|
&.isFixed {
|
|
z-index: 45;
|
|
position: fixed;
|
|
left: 0;
|
|
width: 100%;
|
|
/* #ifdef H5 */
|
|
top: 0;
|
|
/* #endif */
|
|
}
|
|
|
|
.list {
|
|
flex-wrap: nowrap;
|
|
height: 80rpx;
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.item {
|
|
position: relative;
|
|
z-index: 2;
|
|
flex-shrink: 0;
|
|
height: 80rpx;
|
|
margin: 0 55rpx 0 0;
|
|
font-size: 28rpx;
|
|
line-height: 80rpx;
|
|
color: #333333;
|
|
|
|
&:last-child {
|
|
margin: 0 24rpx 0 0;
|
|
}
|
|
}
|
|
|
|
.on {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
|
|
.line {
|
|
position: absolute;
|
|
bottom: 22rpx;
|
|
left: 50%;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 8rpx;
|
|
border-radius: 4rpx;
|
|
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabNav2 {
|
|
.list {
|
|
flex-wrap: nowrap;
|
|
height: 80rpx;
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.item {
|
|
position: relative;
|
|
z-index: 2;
|
|
flex-shrink: 0;
|
|
height: 80rpx;
|
|
margin: 0 55rpx 0 0;
|
|
font-size: 28rpx;
|
|
line-height: 80rpx;
|
|
color: #333333;
|
|
|
|
&:last-child {
|
|
margin: 0 24rpx 0 0;
|
|
}
|
|
}
|
|
|
|
.on {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: var(--view-theme);
|
|
|
|
.line {
|
|
position: absolute;
|
|
bottom: 8rpx;
|
|
left: 50%;
|
|
z-index: -1;
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border: 4rpx solid var(--view-theme);
|
|
border-top-color: transparent;
|
|
border-right-color: transparent;
|
|
border-left-color: transparent;
|
|
border-radius: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabNav3 {
|
|
.list {
|
|
flex-wrap: nowrap;
|
|
height: 80rpx;
|
|
margin-left: 15rpx;
|
|
}
|
|
|
|
.item {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
height: 80rpx;
|
|
padding: 0 20rpx;
|
|
margin: 0 15rpx 0 0;
|
|
font-size: 28rpx;
|
|
line-height: 80rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.on {
|
|
height: 48rpx;
|
|
border-radius: 24rpx;
|
|
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
line-height: 48rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
</style> |