forked from angelo/web-retail-h5
fix(cl-tabbar): 修复user.skin不存在时导致底部tab无法正确展示的问题
This commit is contained in:
parent
d79a69d5ad
commit
f090c5dc63
|
|
@ -6,111 +6,55 @@
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<u-tabbar :value="current?current:0"
|
<!-- v-if="user.skin == 0" -->
|
||||||
v-if="user.skin==0"
|
<u-tabbar :value="current ? current : 0" @change="tabbarChange" :fixed="true" :placeholder="false"
|
||||||
@change="tabbarChange"
|
:border="false" :safeAreaInsetBottom="true" inactiveColor="#666666" activeColor="#333333">
|
||||||
:fixed="true"
|
|
||||||
:placeholder="false"
|
|
||||||
:border="false"
|
|
||||||
:safeAreaInsetBottom="true"
|
|
||||||
inactiveColor="#666666"
|
|
||||||
activeColor="#333333">
|
|
||||||
<u-tabbar-item :text="'首页'">
|
<u-tabbar-item :text="'首页'">
|
||||||
<image class="u-page__item__slot-icon"
|
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/one1.png"></image>
|
||||||
slot="active-icon"
|
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/one2.png"></image>
|
||||||
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>
|
||||||
<u-tabbar-item :text="'站内信'">
|
<u-tabbar-item :text="'站内信'">
|
||||||
<image class="u-page__item__slot-icon"
|
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/two1.png"></image>
|
||||||
slot="active-icon"
|
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/two2.png"></image>
|
||||||
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>
|
||||||
<u-tabbar-item :text="'会员专区'">
|
<u-tabbar-item :text="'会员专区'">
|
||||||
<image class="u-page__item__slot-icon"
|
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/five1.jpg"></image>
|
||||||
slot="active-icon"
|
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/five2.jpg"></image>
|
||||||
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>
|
||||||
<u-tabbar-item :text="'购物车'"
|
<u-tabbar-item :text="'购物车'" :badge="shopCarLength">
|
||||||
: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"
|
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/three2.png"></image>
|
||||||
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>
|
||||||
|
|
||||||
<u-tabbar-item :text="'我的'">
|
<u-tabbar-item :text="'我的'">
|
||||||
<image class="u-page__item__slot-icon"
|
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/fore1.png"></image>
|
||||||
slot="active-icon"
|
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/fore2.png"></image>
|
||||||
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-item>
|
||||||
</u-tabbar>
|
</u-tabbar>
|
||||||
<u-tabbar :value="current?current:0"
|
<!-- <u-tabbar :value="current ? current : 0" class="greenEd" v-if="user.skin == 2" @change="tabbarChange" :fixed="true"
|
||||||
class="greenEd"
|
:placeholder="false" :border="false" :safeAreaInsetBottom="true" inactiveColor="#666666" activeColor="#333333">
|
||||||
v-if="user.skin==2"
|
|
||||||
@change="tabbarChange"
|
|
||||||
:fixed="true"
|
|
||||||
:placeholder="false"
|
|
||||||
:border="false"
|
|
||||||
:safeAreaInsetBottom="true"
|
|
||||||
inactiveColor="#666666"
|
|
||||||
activeColor="#333333">
|
|
||||||
<u-tabbar-item :text="'首页'">
|
<u-tabbar-item :text="'首页'">
|
||||||
<image class="u-page__item__slot-icon1"
|
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/one11.jpg"></image>
|
||||||
slot="active-icon"
|
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/one11.jpg"></image>
|
||||||
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>
|
||||||
<u-tabbar-item :text="'站内信'">
|
<u-tabbar-item :text="'站内信'">
|
||||||
<image class="u-page__item__slot-icon1"
|
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/two11.jpg"></image>
|
||||||
slot="active-icon"
|
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/two11.jpg"></image>
|
||||||
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>
|
||||||
<u-tabbar-item :text="'会员专区'">
|
<u-tabbar-item :text="'会员专区'">
|
||||||
<image class="u-page__item__slot-icon2"
|
<image class="u-page__item__slot-icon2" slot="active-icon" src="@/static/images/five11.jpg"></image>
|
||||||
slot="active-icon"
|
<image class="u-page__item__slot-icon2" slot="inactive-icon" src="@/static/images/five11.jpg"></image>
|
||||||
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>
|
||||||
<u-tabbar-item :text="'购物车'"
|
<u-tabbar-item :text="'购物车'" :badge="shopCarLength">
|
||||||
: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"
|
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/three11.jpg"></image>
|
||||||
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>
|
||||||
|
|
||||||
<u-tabbar-item :text="'我的'">
|
<u-tabbar-item :text="'我的'">
|
||||||
<image class="u-page__item__slot-icon1"
|
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/fore11.jpg"></image>
|
||||||
slot="active-icon"
|
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/fore11.jpg"></image>
|
||||||
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-item>
|
||||||
</u-tabbar>
|
</u-tabbar> -->
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -139,7 +83,7 @@ export default {
|
||||||
text: '购物车',
|
text: '购物车',
|
||||||
path: 'pages/shoppingCar/index',
|
path: 'pages/shoppingCar/index',
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
text: '我的',
|
text: '我的',
|
||||||
path: 'pages/mine/index',
|
path: 'pages/mine/index',
|
||||||
|
|
@ -148,7 +92,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(['shopCarLength','user']),
|
...mapGetters(['shopCarLength', 'user']),
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
tabbarChange(e) {
|
tabbarChange(e) {
|
||||||
|
|
@ -165,24 +109,29 @@ export default {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-page__item__slot-icon1 {
|
.u-page__item__slot-icon1 {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
// margin-bottom: 20px
|
// margin-bottom: 20px
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-page__item__slot-icon2 {
|
.u-page__item__slot-icon2 {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
// margin-bottom: 20px
|
// margin-bottom: 20px
|
||||||
}
|
}
|
||||||
.greenEd{
|
|
||||||
::v-deep .u-tabbar__content{
|
.greenEd {
|
||||||
background: linear-gradient(to bottom, #fff, #b6fdda);
|
::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
|
height: 80px
|
||||||
}
|
}
|
||||||
::v-deep .u-tabbar-item{
|
|
||||||
|
::v-deep .u-tabbar-item {
|
||||||
// margin-bottom: 30px;
|
// margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,8 +7,8 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import VueI18n from 'vue-i18n'
|
import VueI18n from 'vue-i18n'
|
||||||
import zhCn from 'zhCN'
|
import zhCn from 'zhCN'
|
||||||
import enUS from 'enUS'
|
// import enUS from 'enUS'
|
||||||
import zhTC from 'zhTC'
|
// import zhTC from 'zhTC'
|
||||||
// import ruRU from 'ruRU'
|
// import ruRU from 'ruRU'
|
||||||
// import frFR from 'frFR'
|
// import frFR from 'frFR'
|
||||||
|
|
||||||
|
|
@ -23,8 +23,8 @@ const i18n = new VueI18n({
|
||||||
|
|
||||||
messages: {
|
messages: {
|
||||||
'zh-CN': { ...zhCn },
|
'zh-CN': { ...zhCn },
|
||||||
'en-US': { ...enUS },
|
// 'en-US': { ...enUS },
|
||||||
'zh-TC': { ...zhTC },
|
// 'zh-TC': { ...zhTC },
|
||||||
// 'ru-RU': { ...ruRU },
|
// 'ru-RU': { ...ruRU },
|
||||||
// 'fr-FR': { ...frFR },
|
// 'fr-FR': { ...frFR },
|
||||||
// 'ru-RU': { ...ruRu },
|
// 'ru-RU': { ...ruRu },
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ module.exports = {
|
||||||
configureWebpack: {
|
configureWebpack: {
|
||||||
externals: {
|
externals: {
|
||||||
'zhCN': 'zhCN',
|
'zhCN': 'zhCN',
|
||||||
'enUS': 'enUS',
|
// 'enUS': 'enUS',
|
||||||
'zhTC': 'zhTC',
|
'zhTC': 'zhTC',
|
||||||
// 'ruRU':'ruRU',
|
// 'ruRU':'ruRU',
|
||||||
// 'frFR':'frFR',
|
// 'frFR':'frFR',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue