You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
220 lines
7.0 KiB
220 lines
7.0 KiB
<template>
|
|
<view class="dp-tabbar" v-if="urlList.indexOf(url) != -1">
|
|
<view class="dp-tabbar-bot"></view>
|
|
<view class="dp-tabbar-bar" :style="{backgroundColor:menudata.backgroundColor}">
|
|
<view @click='gotoFn("/pages/index/index")' class="dp-tabbar-item" >
|
|
<view class="dp-tabbar-image-box">
|
|
<image v-if="url==='pages/index/index'" class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar-selected1.svg'"></image>
|
|
<image v-else class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar1.svg'"></image>
|
|
</view>
|
|
<view class="dp-tabbar-text" :class="{'select-text': url==='pages/index/index'}">首页</view>
|
|
</view>
|
|
<view @click='gotoFn("/pages/shop/classify")' class="dp-tabbar-item" >
|
|
<view class="dp-tabbar-image-box">
|
|
<image v-if="url==='pages/shop/classify'" class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar-selected2.svg'">
|
|
</image>
|
|
<image v-else class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar2.svg'"></image>
|
|
</view>
|
|
<view class="dp-tabbar-text" :class="{'select-text': url==='pages/shop/classify'}">全部商品</view>
|
|
</view>
|
|
|
|
<view @click='gotoFn("/pages/shop/cart")' class="dp-tabbar-item">
|
|
<view class="dp-tabbar-image-box">
|
|
<image v-if="url==='pages/shop/cart'" class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar-selected4.svg'"></image>
|
|
<image v-else class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar4.svg'"></image>
|
|
</view>
|
|
<view class="dp-tabbar-text" :class="{'select-text': url==='pages/shop/cart'}">购物车</view>
|
|
</view>
|
|
<view @click='gotoFn("/pages/my/usercenter")' class="dp-tabbar-item">
|
|
<view class="dp-tabbar-image-box">
|
|
<image v-if="url==='pages/my/usercenter'" class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar-selected5.svg'"></image>
|
|
<image v-else class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar5.svg'"></image>
|
|
</view>
|
|
<view class="dp-tabbar-text" :class="{'select-text': url==='pages/my/usercenter'}">我的</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="dp-tabbar-bar" :style="{backgroundColor:menudata.backgroundColor}">
|
|
<view @click='gotoFn" :data-url="item.pagePath" :data-index="index" :data-opentype="index!=0&&getplatform()=='baidu'?'':opentype" class="dp-tabbar-item" v-for="(item,index) in menudata.list" :key="item.id">
|
|
<view class="dp-tabbar-image-box">
|
|
<image v-if="currentIndex===index" class="dp-tabbar-icon" :src="item.selectedIconPath"></image>
|
|
<image v-else class="dp-tabbar-icon" :src="item.iconPath"></image>
|
|
</view>
|
|
<view class="dp-tabbar-text" :style="{color:item.color}">{{item.text}}</view>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
<script>
|
|
var app = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
urlList:['diary/attention/attention','diary/evernote/evernote','diary/video/video','pages/index/index','pages/shop/classify','diary/live/live','pages/shop/cart','diary/index/index','pages/my/usercenter'],
|
|
menudata: {},
|
|
url: '',
|
|
currentIndex: -1,
|
|
i: 0,
|
|
opentype: 'reLaunch',
|
|
event_rul: app.globalData.event_url,
|
|
}
|
|
},
|
|
mounted: function() {
|
|
this.settabbar();
|
|
},
|
|
created() {
|
|
var pages = getCurrentPages()
|
|
console.log('ze s sm', pages[pages.length - 1].route)
|
|
// let currentPage = pages[pages.length - 1]['$page']['fullPath']
|
|
this.url = pages[pages.length - 1].route
|
|
},
|
|
props: {
|
|
opt: {}
|
|
},
|
|
methods: {
|
|
gotoFn(url){
|
|
if(url !== ('/'+this.url)){
|
|
app.goto(url,'reLaunch')
|
|
}
|
|
|
|
},
|
|
settabbar: function() {
|
|
var that = this
|
|
if (!app.globalData.isinit && this.i < 100) {
|
|
setTimeout(function() {
|
|
that.i++;
|
|
that.settabbar();
|
|
}, 100)
|
|
} else {
|
|
var opentype = 'reLaunch';
|
|
var currenturl = app._url();
|
|
var opt = this.opt;
|
|
if (this.opt && this.opt.id) {
|
|
currenturl += '?id=' + this.opt.id
|
|
} else if (this.opt && this.opt.cid) {
|
|
currenturl += '?cid=' + this.opt.cid
|
|
} else if (this.opt && this.opt.gid) {
|
|
currenturl += '?gid=' + this.opt.gid
|
|
} else if (this.opt && this.opt.bid) {
|
|
currenturl += '?bid=' + this.opt.bid
|
|
}
|
|
var currentIndex = -1;
|
|
var hastabbar = false;
|
|
var menudata = JSON.parse(JSON.stringify(app.globalData.initdata.menudata));
|
|
var tablist = menudata['list'];
|
|
for (var i = 0; i < tablist.length; i++) {
|
|
if (tablist[i]['pagePath'] == currenturl) {
|
|
currentIndex = i;
|
|
hastabbar = true;
|
|
menudata['list'][i].color = menudata['selectedColor']
|
|
} else {
|
|
menudata['list'][i].color = menudata['color']
|
|
}
|
|
}
|
|
if (hastabbar == false) {
|
|
var menu2data = JSON.parse(JSON.stringify(app.globalData.initdata.menu2data))
|
|
if (menu2data.length > 0) {
|
|
for (var i in menu2data) {
|
|
if (this.opt && this.opt.bid)
|
|
menu2data[i].indexurl = (menu2data[i].indexurl).replace('[bid]', this.opt.bid);
|
|
if (menu2data[i].indexurl == currenturl) {
|
|
hastabbar = true;
|
|
currentIndex = 10;
|
|
menudata = menu2data[i]
|
|
console.log(menudata);
|
|
console.log(this.opt)
|
|
for (var j in menudata.list) {
|
|
if (this.opt && this.opt.bid)
|
|
menudata.list[j].pagePath = (menudata.list[j].pagePath).replace('[bid]',
|
|
this.opt.bid);
|
|
if (menudata.list[j].pagePath == currenturl && menudata['selectedColor']) {
|
|
menudata['list'][j].color = menudata['selectedColor'];
|
|
if (menudata['list'][j]['selectedIconPath']) {
|
|
menudata['list'][j].iconPath = menudata['list'][j]['selectedIconPath'];
|
|
}
|
|
} else if (menudata['color']) {
|
|
menudata['list'][j].color = menudata['color'];
|
|
}
|
|
}
|
|
opentype = '';
|
|
console.log(menudata);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
that.opentype = opentype
|
|
that.currentIndex = currentIndex
|
|
that.menudata = menudata
|
|
//app.globalData.currentIndex = currentIndex;
|
|
console.log(currentIndex);
|
|
that.$emit('getmenuindex', currentIndex)
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.dp-tabbar {
|
|
height: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.dp-tabbar-icon {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.dp-tabbar-bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
padding: 10rpx 0 0 0;
|
|
background: #fff;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
border-top: 1px solid #e5e5e5;
|
|
z-index: 999999;
|
|
box-sizing: content-box
|
|
}
|
|
|
|
.dp-tabbar-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
align-items: center
|
|
}
|
|
|
|
.dp-tabbar-image-box {
|
|
height: 54rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.dp-tabbar-text {
|
|
line-height: 30rpx;
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
}
|
|
.select-text {
|
|
color: #0A5D3B;
|
|
}
|
|
|
|
.dp-tabbar-bot {
|
|
height: 110rpx;
|
|
width: 100%;
|
|
box-sizing: content-box
|
|
}
|
|
|
|
@supports(bottom: env(safe-area-inset-bottom)) {
|
|
|
|
.dp-tabbar-bot {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.dp-tabbar-bar {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|