mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-03-25 14:53:52 +00:00
333 lines
8.9 KiB
Vue
333 lines
8.9 KiB
Vue
<template>
|
|
<!-- 底部导航 -->
|
|
<view v-if="showTabBar">
|
|
<view class="fixed-lb w-full pb-safe z-999" :style="[bgColor]">
|
|
<view class="page-footer-wrapper">
|
|
<view
|
|
class="page-footer"
|
|
:class="{
|
|
'page-footer2': newData.navStyleConfig.tabVal == 1,
|
|
'page-footer3': newData.navStyleConfig.tabVal == 2,
|
|
}"
|
|
id="target"
|
|
:style="[componentStyle]"
|
|
>
|
|
<view
|
|
class="foot-item flex-1 flex-col flex-center h-96 relative"
|
|
v-for="(item, index) in newData.menuList"
|
|
:key="index"
|
|
@click="goRouter(item)"
|
|
>
|
|
<template v-if="item.link.split('?')[0] == activeRouter">
|
|
<image
|
|
v-if="newData.navStyleConfig.tabVal != 1"
|
|
:src="item.imgList[0]"
|
|
></image>
|
|
<view
|
|
v-if="newData.navStyleConfig.tabVal != 2"
|
|
class="txt active"
|
|
:style="[txtActiveColor]"
|
|
>{{ item.name }}</view
|
|
>
|
|
</template>
|
|
<template v-else>
|
|
<image
|
|
v-if="newData.navStyleConfig.tabVal != 1"
|
|
:src="item.imgList[1]"
|
|
></image>
|
|
<view
|
|
v-if="newData.navStyleConfig.tabVal != 2"
|
|
class="txt"
|
|
:style="[txtColor]"
|
|
>{{ item.name }}</view
|
|
>
|
|
</template>
|
|
<BaseBadge
|
|
v-if="
|
|
item.link === '/pages/order_addcart/order_addcart' &&
|
|
cartNum > 0
|
|
"
|
|
class="uni-badge-left-margin"
|
|
:text="cartNum"
|
|
absolute="rightTop"
|
|
></BaseBadge>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view :style="{ height: `${footerHeight}px` }"></view>
|
|
<view class="safe-area-inset-bottom"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapGetters } from "vuex";
|
|
import { getNavigation } from "@/api/public.js";
|
|
// import {getCartCounts} from '@/api/order.js';
|
|
import { getDiyVersion } from "@/api/api.js";
|
|
import BaseBadge from "@/components/BaseBadge/index.vue";
|
|
export default {
|
|
name: "pageFooter",
|
|
components: { BaseBadge },
|
|
props: {
|
|
isTabBar: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
configData: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
},
|
|
computed: {
|
|
...mapGetters(["isLogin", "cartNum"]),
|
|
txtActiveColor() {
|
|
let styleObject = {};
|
|
if (this.newData.toneConfig && this.newData.toneConfig.tabVal) {
|
|
styleObject["color"] = this.newData.activeTxtColor.color[0].item;
|
|
}
|
|
return styleObject;
|
|
},
|
|
txtColor() {
|
|
let styleObject = {};
|
|
if (this.newData.toneConfig && this.newData.toneConfig.tabVal) {
|
|
styleObject["color"] = this.newData.txtColor.color[0].item;
|
|
}
|
|
return styleObject;
|
|
},
|
|
bgColor() {
|
|
let styleObject = {};
|
|
if (!this.newData.name) {
|
|
return styleObject;
|
|
}
|
|
if (!this.newData.navConfig.tabVal) {
|
|
styleObject["background"] = this.newData.bgColor.color[0].item;
|
|
}
|
|
return styleObject;
|
|
},
|
|
componentStyle() {
|
|
let styleObject = {};
|
|
let borderRadius = ``;
|
|
if (!this.newData.name) {
|
|
return styleObject;
|
|
}
|
|
if (this.newData.navConfig.tabVal) {
|
|
borderRadius = `${this.newData.fillet.val * 2}rpx`;
|
|
if (this.newData.fillet.type) {
|
|
borderRadius = `${this.newData.fillet.valList[0].val * 2}rpx ${this.newData.fillet.valList[1].val * 2}rpx ${this.newData.fillet.valList[3].val * 2}rpx ${
|
|
this.newData.fillet.valList[2].val * 2
|
|
}rpx`;
|
|
}
|
|
styleObject["right"] = `${this.newData.prConfig.val * 2}rpx`;
|
|
styleObject["bottom"] = `${this.newData.mbConfig.val * 2}rpx`;
|
|
styleObject["left"] = `${this.newData.prConfig.val * 2}rpx`;
|
|
styleObject["padding-top"] = `${this.newData.topConfig.val * 2}rpx`;
|
|
styleObject["padding-bottom"] =
|
|
`${this.newData.bottomConfig.val * 2}rpx`;
|
|
styleObject["border-radius"] = borderRadius;
|
|
styleObject["background"] = this.newData.bgColor2.color[0].item;
|
|
} else {
|
|
styleObject["padding-top"] = `${this.newData.topConfig.val * 2}rpx`;
|
|
styleObject["padding-bottom"] =
|
|
`${this.newData.bottomConfig.val * 2}rpx`;
|
|
styleObject["background"] = this.newData.bgColor.color[0].item;
|
|
}
|
|
return styleObject;
|
|
},
|
|
},
|
|
watch: {
|
|
configData: {
|
|
handler(newVal) {
|
|
console.log(newVal, "newVal");
|
|
if (newVal) {
|
|
let configData = newVal;
|
|
this.newData = configData;
|
|
this.showTabBar = configData.effectConfig.tabVal;
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
},
|
|
created() {
|
|
let routes = getCurrentPages(); //获取当前打开过的页面路由数组
|
|
let curRoute = routes[routes.length - 1].route; //获取当前页面路由
|
|
this.activeRouter = "/" + curRoute;
|
|
},
|
|
mounted() {
|
|
this.navigationInfo();
|
|
// if (this.isLogin) {
|
|
// this.getCartNum()
|
|
// }
|
|
},
|
|
data() {
|
|
return {
|
|
newData: {},
|
|
activeRouter: "",
|
|
showTabBar: false,
|
|
footerHeight: 0,
|
|
};
|
|
},
|
|
methods: {
|
|
setNavigationInfo(data) {
|
|
if (this.isTabBar) {
|
|
this.newData = data;
|
|
this.showTabBar = data.effectConfig.tabVal;
|
|
let pdHeight = data.topConfig.val + data.bottomConfig.val;
|
|
this.$emit(
|
|
"newDataStatus",
|
|
data.effectConfig.tabVal,
|
|
pdHeight,
|
|
data.mbConfig.val,
|
|
);
|
|
if (data.effectConfig.tabVal) {
|
|
uni.hideTabBar();
|
|
} else {
|
|
uni.showTabBar();
|
|
}
|
|
}
|
|
},
|
|
getNavigationInfo() {
|
|
getNavigation().then((res) => {
|
|
uni.setStorageSync("diyVersionNav", res.data);
|
|
this.setNavigationInfo(res.data);
|
|
});
|
|
},
|
|
navigationInfo() {
|
|
let footerNavigation = uni.getStorageSync("footerNavigation");
|
|
if (footerNavigation) {
|
|
getDiyVersion(0).then((res) => {
|
|
let diyVersion = uni.getStorageSync("diyVersionNav");
|
|
if (res.data.version + "0" === diyVersion) {
|
|
this.setNavigationInfo(footerNavigation);
|
|
} else {
|
|
uni.setStorageSync("diyVersionNav", res.data.version + "0");
|
|
this.getNavigationInfo();
|
|
}
|
|
});
|
|
} else {
|
|
this.getNavigationInfo();
|
|
}
|
|
},
|
|
goRouter(item) {
|
|
var pages = getCurrentPages();
|
|
var page = pages[pages.length - 1].$page.fullPath;
|
|
if (item.link == page) return;
|
|
if (
|
|
item.link == "/pages/short_video/appSwiper/index" ||
|
|
item.link == "/pages/short_video/nvueSwiper/index"
|
|
) {
|
|
//#ifdef APP
|
|
item.link = "/pages/short_video/appSwiper/index";
|
|
//#endif
|
|
//#ifndef APP
|
|
item.link = "/pages/short_video/nvueSwiper/index";
|
|
//#endif
|
|
}
|
|
uni.switchTab({
|
|
url: item.link,
|
|
fail(err) {
|
|
uni.redirectTo({
|
|
url: item.link,
|
|
});
|
|
},
|
|
});
|
|
},
|
|
// getCartNum: function() {
|
|
// getCartCounts().then(res => {
|
|
// this.$store.commit('indexData/setCartNum', res.data.count + '')
|
|
// }).catch(err=>{
|
|
// return this.$util.Tips({
|
|
// title: err.msg
|
|
// });
|
|
// })
|
|
// },
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.safe-area-inset-bottom {
|
|
height: 0;
|
|
height: constant(safe-area-inset-bottom);
|
|
height: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.page-footer-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.page-footer {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
|
|
.foot-item image {
|
|
display: block;
|
|
height: 48rpx;
|
|
width: 48rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.foot-item .txt {
|
|
margin-top: 4rpx;
|
|
font-size: 20rpx;
|
|
line-height: 28rpx;
|
|
color: #333333;
|
|
|
|
&.active {
|
|
color: var(--view-theme);
|
|
}
|
|
}
|
|
}
|
|
.page-footer /deep/.uni-badge--x {
|
|
position: absolute !important;
|
|
top: 0rpx;
|
|
}
|
|
.page-footer .uni-badge-left-margin {
|
|
position: absolute;
|
|
/* #ifdef MP */
|
|
margin-left: 40rpx;
|
|
top: -10rpx;
|
|
/* #endif */
|
|
}
|
|
.page-footer /deep/ .uni-badge-left-margin .uni-badge--error {
|
|
color: #fff !important;
|
|
background-color: var(--view-theme) !important;
|
|
z-index: 8;
|
|
}
|
|
.page-footer /deep/ .uni-badge {
|
|
right: unset !important;
|
|
top: unset !important;
|
|
}
|
|
.page-footer2 .foot-item .txt {
|
|
margin-top: 0;
|
|
font-size: 32rpx;
|
|
line-height: 44rpx;
|
|
color: #333333;
|
|
|
|
&.active {
|
|
color: var(--view-theme);
|
|
}
|
|
}
|
|
|
|
.page-footer2.float .foot-item::before,
|
|
.page-footer3.float .foot-item::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 2rpx;
|
|
height: 32rpx;
|
|
background: #cccccc;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.page-footer2.float .foot-item:first-child::before,
|
|
.page-footer3.float .foot-item:first-child::before {
|
|
display: none;
|
|
}
|
|
</style>
|