angelo
/
web-store-retail-h5
forked from angelo/web-retail-h5
3
0
Fork 0
Code Pull Requests Activity

fix(cl-tabbar): 修复user.skin不存在时导致底部tab无法正确展示的问题

This commit is contained in:
yeweikangxx123 2025-04-02 23:10:59 +08:00
parent d79a69d5ad
commit f090c5dc63
3 changed files with 47 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
components/cl-tabbar.vue
View File

@ -6,111 +6,55 @@
-->
<template>
<view>
<u-tabbar :value="current?current:0"
v-if="user.skin==0"
@change="tabbarChange"
:fixed="true"
:placeholder="false"
:border="false"
:safeAreaInsetBottom="true"
inactiveColor="#666666"
activeColor="#333333">
<!-- v-if="user.skin == 0" -->
<u-tabbar :value="current ? current : 0" @change="tabbarChange" :fixed="true" :placeholder="false"
:border="false" :safeAreaInsetBottom="true" inactiveColor="#666666" activeColor="#333333">
<u-tabbar-item :text="'首页'">
<image class="u-page__item__slot-icon"
slot="active-icon"
src="@/static/images/one1.png"></image>
<image class="u-page__item__slot-icon"
slot="inactive-icon"
src="@/static/images/one2.png"></image>
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/one1.png"></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/one2.png"></image>
</u-tabbar-item>
<u-tabbar-item :text="'站内信'">
<image class="u-page__item__slot-icon"
slot="active-icon"
src="@/static/images/two1.png"></image>
<image class="u-page__item__slot-icon"
slot="inactive-icon"
src="@/static/images/two2.png"></image>
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/two1.png"></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/two2.png"></image>
</u-tabbar-item>
<u-tabbar-item :text="'会员专区'">
<image class="u-page__item__slot-icon"
slot="active-icon"
src="@/static/images/five1.jpg"></image>
<image class="u-page__item__slot-icon"
slot="inactive-icon"
src="@/static/images/five2.jpg"></image>
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/five1.jpg"></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/five2.jpg"></image>
</u-tabbar-item>
<u-tabbar-item :text="'购物车'"
:badge="shopCarLength">
<image class="u-page__item__slot-icon"
slot="active-icon"
src="@/static/images/three1.png"></image>
<image class="u-page__item__slot-icon"
slot="inactive-icon"
src="@/static/images/three2.png"></image>
<u-tabbar-item :text="'购物车'" :badge="shopCarLength">
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/three1.png"></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/three2.png"></image>
</u-tabbar-item>
<u-tabbar-item :text="'我的'">
<image class="u-page__item__slot-icon"
slot="active-icon"
src="@/static/images/fore1.png"></image>
<image class="u-page__item__slot-icon"
slot="inactive-icon"
src="@/static/images/fore2.png"></image>
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/fore1.png"></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/fore2.png"></image>
</u-tabbar-item>
</u-tabbar>
<u-tabbar :value="current?current:0"
class="greenEd"
v-if="user.skin==2"
@change="tabbarChange"
:fixed="true"
:placeholder="false"
:border="false"
:safeAreaInsetBottom="true"
inactiveColor="#666666"
activeColor="#333333">
<!-- <u-tabbar :value="current ? current : 0" class="greenEd" v-if="user.skin == 2" @change="tabbarChange" :fixed="true"
:placeholder="false" :border="false" :safeAreaInsetBottom="true" inactiveColor="#666666" activeColor="#333333">
<u-tabbar-item :text="'首页'">
<image class="u-page__item__slot-icon1"
slot="active-icon"
src="@/static/images/one11.jpg"></image>
<image class="u-page__item__slot-icon1"
slot="inactive-icon"
src="@/static/images/one11.jpg"></image>
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/one11.jpg"></image>
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/one11.jpg"></image>
</u-tabbar-item>
<u-tabbar-item :text="'站内信'">
<image class="u-page__item__slot-icon1"
slot="active-icon"
src="@/static/images/two11.jpg"></image>
<image class="u-page__item__slot-icon1"
slot="inactive-icon"
src="@/static/images/two11.jpg"></image>
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/two11.jpg"></image>
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/two11.jpg"></image>
</u-tabbar-item>
<u-tabbar-item :text="'会员专区'">
<image class="u-page__item__slot-icon2"
slot="active-icon"
src="@/static/images/five11.jpg"></image>
<image class="u-page__item__slot-icon2"
slot="inactive-icon"
src="@/static/images/five11.jpg"></image>
<image class="u-page__item__slot-icon2" slot="active-icon" src="@/static/images/five11.jpg"></image>
<image class="u-page__item__slot-icon2" slot="inactive-icon" src="@/static/images/five11.jpg"></image>
</u-tabbar-item>
<u-tabbar-item :text="'购物车'"
:badge="shopCarLength">
<image class="u-page__item__slot-icon1"
slot="active-icon"
src="@/static/images/three11.jpg"></image>
<image class="u-page__item__slot-icon1"
slot="inactive-icon"
src="@/static/images/three11.jpg"></image>
<u-tabbar-item :text="'购物车'" :badge="shopCarLength">
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/three11.jpg"></image>
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/three11.jpg"></image>
</u-tabbar-item>
<u-tabbar-item :text="'我的'">
<image class="u-page__item__slot-icon1"
slot="active-icon"
src="@/static/images/fore11.jpg"></image>
<image class="u-page__item__slot-icon1"
slot="inactive-icon"
src="@/static/images/fore11.jpg"></image>
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/fore11.jpg"></image>
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/fore11.jpg"></image>
</u-tabbar-item>
</u-tabbar>
</u-tabbar> -->
</view>
</template>
@ -148,7 +92,7 @@ export default {
}
},
computed: {
...mapGetters(['shopCarLength','user']),
...mapGetters(['shopCarLength', 'user']),
},
methods: {
tabbarChange(e) {
@ -165,24 +109,29 @@ export default {
width: 20px;
height: 20px;
}
.u-page__item__slot-icon1 {
width: 35px;
height: 35px;
// margin-bottom: 20px
}
.u-page__item__slot-icon2 {
width: 35px;
height: 35px;
// margin-bottom: 20px
}
.greenEd{
::v-deep .u-tabbar__content{
.greenEd {
::v-deep .u-tabbar__content {
background: linear-gradient(to bottom, #fff, #b6fdda);
}
::v-deep .u-tabbar__content__item-wrapper{
::v-deep .u-tabbar__content__item-wrapper {
height: 80px
}
::v-deep .u-tabbar-item{
::v-deep .u-tabbar-item {
// margin-bottom: 30px;
}
}

8
util/i18n/index.js
View File

@ -7,8 +7,8 @@
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zhCn from 'zhCN'
import enUS from 'enUS'
import zhTC from 'zhTC'
// import enUS from 'enUS'
// import zhTC from 'zhTC'
// import ruRU from 'ruRU'
// import frFR from 'frFR'
@ -23,8 +23,8 @@ const i18n = new VueI18n({
messages: {
'zh-CN': { ...zhCn },
'en-US': { ...enUS },
'zh-TC': { ...zhTC },
// 'en-US': { ...enUS },
// 'zh-TC': { ...zhTC },
// 'ru-RU': { ...ruRU },
// 'fr-FR': { ...frFR },
// 'ru-RU': { ...ruRu },

2
vue.config.js
View File

@ -10,7 +10,7 @@ module.exports = {
configureWebpack: {
externals: {
'zhCN': 'zhCN',
'enUS': 'enUS',
// 'enUS': 'enUS',
'zhTC': 'zhTC',
// 'ruRU':'ruRU',
// 'frFR':'frFR',