new files
This commit is contained in:
panchengyong
329
pro_v3.5.1/view/uniapp/pages/index/components/tabNav.vue
Normal file
329
pro_v3.5.1/view/uniapp/pages/index/components/tabNav.vue
Normal file
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<!-- 商品分类 -->
|
||||
<view v-if="!dataConfig.isHide">
|
||||
<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 : textNormalStyle]" 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" class="h-80"></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;
|
||||
styleObject['fontSize'] = this.dataConfig.activeFontSize?.val * 2 + 'rpx';
|
||||
break;
|
||||
case 1:
|
||||
styleObject['color'] = this.dataConfig.textColor2.color[0].item;
|
||||
styleObject['fontSize'] = this.dataConfig.activeFontSize?.val * 2 + 'rpx';
|
||||
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;
|
||||
},
|
||||
textNormalStyle(){
|
||||
return {
|
||||
'font-size': this.dataConfig.fontSize.val * 2 + 'rpx',
|
||||
'color': this.dataConfig.nameColor.color[0].item
|
||||
|
||||
}
|
||||
},
|
||||
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 {
|
||||
'background-color': this.dataConfig.bottomBgColor.color[0].item,
|
||||
'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.getWindowInfo().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">
|
||||
.isFixed {
|
||||
z-index: 45;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
.tabNav1 {
|
||||
.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>
|
||||
Reference in New Issue
Block a user