mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-03-25 14:53:52 +00:00
397 lines
9.4 KiB
Vue
397 lines
9.4 KiB
Vue
<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,
|
|
on: isFixed && special,
|
|
}"
|
|
>
|
|
<common-wrapper :config="configData">
|
|
<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>
|
|
</common-wrapper>
|
|
</view>
|
|
<view v-if="isFixed" style="height: 80rpx"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import commonWrapper from "./commonWrapper.vue";
|
|
import { getCategoryList } from "@/api/store.js";
|
|
import { getCategoryVersion } from "@/api/api.js";
|
|
export default {
|
|
components: { commonWrapper },
|
|
name: "tabNav",
|
|
props: {
|
|
dataConfig: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
isFixed: {
|
|
type: Boolean | String | Number,
|
|
default: false,
|
|
},
|
|
fromType: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
special: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
tabTitle: [],
|
|
tabLeft: 0,
|
|
isWidth: 0, //每个导航栏占位
|
|
tabClick: 0, //导航栏被点击
|
|
isLeft: 0, //导航栏下划线位置
|
|
fixedTop: 0,
|
|
isTop: 0,
|
|
navHeight: 45,
|
|
tabList: 45,
|
|
};
|
|
},
|
|
computed: {
|
|
configData() {
|
|
return {
|
|
...this.dataConfig,
|
|
paddingConfig: this.dataConfig.paddingConfig || {
|
|
isAll: false,
|
|
valList: [
|
|
{
|
|
val: this.dataConfig.topConfig
|
|
? this.dataConfig.topConfig.val
|
|
: 0,
|
|
},
|
|
{
|
|
val: this.dataConfig.prConfig ? this.dataConfig.prConfig.val : 0,
|
|
},
|
|
{
|
|
val: this.dataConfig.bottomConfig
|
|
? this.dataConfig.bottomConfig.val
|
|
: 0,
|
|
},
|
|
{
|
|
val: this.dataConfig.prConfig ? this.dataConfig.prConfig.val : 0,
|
|
},
|
|
],
|
|
},
|
|
marginConfig: this.dataConfig.marginConfig || {
|
|
isAll: false,
|
|
valList: [
|
|
{
|
|
val: this.dataConfig.mbConfig ? this.dataConfig.mbConfig.val : 0,
|
|
},
|
|
{
|
|
val: 0,
|
|
},
|
|
{
|
|
val: 0,
|
|
},
|
|
{
|
|
val: 0,
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
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.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");
|
|
this.getCategory();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tabNav1 {
|
|
&.isFixed {
|
|
z-index: 45;
|
|
position: fixed;
|
|
left: 0;
|
|
width: 100%;
|
|
/* #ifdef H5 */
|
|
top: 0;
|
|
/* #endif */
|
|
}
|
|
&.on {
|
|
top: 0;
|
|
}
|
|
|
|
.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>
|