311 lines
7.3 KiB
Vue
311 lines
7.3 KiB
Vue
<template>
|
|
<view
|
|
:style="{
|
|
'background-image': 'url(' + webUrl + '/home/tabbar-bg.png);'
|
|
}"
|
|
class="xdd-tabbar-wrap"
|
|
>
|
|
<view class="center-img" id="quweiIcon" @click="switchTabFn('/pages/cloud/haveFun')">
|
|
<image
|
|
:src="webUrl + '/home/tabbar-center.png'"
|
|
class="img"
|
|
/>
|
|
<view
|
|
:class="currIndex === 4 ? 'curr' : ''"
|
|
class="name"
|
|
>吃喝玩乐</view>
|
|
</view>
|
|
<view class="tabbar-list">
|
|
<view
|
|
v-for="(tabbarItem, tabbarIndex) in tabbar"
|
|
:key="tabbarIndex"
|
|
class="tabbar-item"
|
|
>
|
|
<view
|
|
v-for="(item, index) in tabbarItem"
|
|
:key="index"
|
|
:class="currIndex === item.index ? 'curr' : ''"
|
|
:id="'icon' + index"
|
|
class="item"
|
|
@click="gotoPage(item.url, item.type, item.index)"
|
|
>
|
|
<view class="img-wrap">
|
|
<image
|
|
:src="item.onIcon"
|
|
class="img on"
|
|
/>
|
|
<image
|
|
:src="item.offIcon"
|
|
class="img off"
|
|
/>
|
|
</view>
|
|
<view class="name">{{ item.name }}</view>
|
|
<view
|
|
v-if="item.name === '消息' && showUnreadBadge"
|
|
class="badge"
|
|
>
|
|
{{ unreadCountText }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import store from '@/store'
|
|
import { getUnreadMessageCount, getUnreadMessageCountForSeller } from '@/api/rooms'
|
|
export default {
|
|
name: 'XddTabbar',
|
|
props: {
|
|
currIndex: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
tabbar: [[
|
|
{
|
|
name: '首页',
|
|
onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-01-on.png',
|
|
offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-01-off.png',
|
|
url: '/pages/home/index',
|
|
type: 1,
|
|
index: 0
|
|
},
|
|
{
|
|
name: '消息',
|
|
onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-02-on.png',
|
|
offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-02-off.png',
|
|
url: '/pkg_common/views/roomLogs',
|
|
type: 2,
|
|
index: 1
|
|
}
|
|
],[
|
|
{
|
|
name: '购物车',
|
|
onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-03-on.png',
|
|
offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-03-off.png',
|
|
url: '/pages/cart',
|
|
type: 1,
|
|
index: 2
|
|
},
|
|
{
|
|
name: '我的',
|
|
onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-04-on.png',
|
|
offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-04-off.png',
|
|
url: '/pages/user/User/index',
|
|
type: 1,
|
|
index: 3
|
|
}
|
|
]],
|
|
unreadCount: 0
|
|
}
|
|
},
|
|
computed: {
|
|
isLogin() {
|
|
return store.getters.isLogin
|
|
},
|
|
showUnreadBadge() {
|
|
return this.isLogin && this.unreadCount > 0
|
|
},
|
|
unreadCountText() {
|
|
if (this.unreadCount > 99) {
|
|
return '99+'
|
|
}
|
|
return this.unreadCount
|
|
}
|
|
},
|
|
watch: {
|
|
isLogin(val) {
|
|
if (val) {
|
|
this.fetchUnreadCount()
|
|
} else {
|
|
this.unreadCount = 0
|
|
uni.$emit('updateUnreadMessageCount', 0)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getElementData('#quweiIcon')
|
|
this.getIconData('#icon1')
|
|
if (this.isLogin) {
|
|
this.fetchUnreadCount()
|
|
}
|
|
uni.$on('updateUnreadMessageCount', this.handleUpdateUnreadMessageCount)
|
|
},
|
|
beforeDestroy() {
|
|
uni.$off('updateUnreadMessageCount', this.handleUpdateUnreadMessageCount)
|
|
},
|
|
methods: {
|
|
handleUpdateUnreadMessageCount(count) {
|
|
if (!this.isLogin) {
|
|
this.unreadCount = 0
|
|
return
|
|
}
|
|
if (typeof count === 'number') {
|
|
this.unreadCount = count
|
|
} else {
|
|
this.fetchUnreadCount()
|
|
}
|
|
},
|
|
getElementData(el) {
|
|
const query = uni.createSelectorQuery().in(this)
|
|
query.select(el).boundingClientRect().exec((res)=> {
|
|
if(res[0]) {
|
|
this.$emit('getElementData', res[0])
|
|
}
|
|
})
|
|
},
|
|
getIconData(el) {
|
|
const query = uni.createSelectorQuery().in(this)
|
|
query.select(el).boundingClientRect().exec((res)=> {
|
|
if(res[0]) {
|
|
this.$emit('getIcon', res[0])
|
|
}
|
|
})
|
|
},
|
|
fetchUnreadCount() {
|
|
uni.request({
|
|
url: this.$SERVICE_API_URL + '/unread-num',
|
|
method: 'POST',
|
|
data: {
|
|
uid: store.getters.userInfo.uid
|
|
},
|
|
success:(res)=>{
|
|
if(res.data.status_code === 200) {
|
|
const count = res.data.content || 0
|
|
getUnreadMessageCount().then(res => {
|
|
const { success, data } = res
|
|
if (success) {
|
|
const _count = data || 0
|
|
this.unreadCount = count + _count
|
|
uni.$emit('updateUnreadMessageCount', this.unreadCount)
|
|
} else {
|
|
this.unreadCount = 0
|
|
uni.$emit('updateUnreadMessageCount', 0)
|
|
}
|
|
}).catch(() => {
|
|
this.unreadCount = 0
|
|
uni.$emit('updateUnreadMessageCount', 0)
|
|
})
|
|
} else {
|
|
this.unreadCount = 0
|
|
}
|
|
},
|
|
})
|
|
|
|
},
|
|
gotoPage(url, type = 1, index) {
|
|
if (this.currIndex === index) return
|
|
if (type === 1) {
|
|
this.switchTabFn(url)
|
|
}
|
|
if (type === 2) {
|
|
uni.navigateTo({ url })
|
|
}
|
|
},
|
|
switchTabFn(url) {
|
|
uni.switchTab({ url })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.xdd-tabbar-wrap {
|
|
position: fixed;
|
|
bottom: 21rpx;
|
|
left: 21rpx;
|
|
right: 21rpx;
|
|
z-index: 99;
|
|
height: 164rpx;
|
|
background-size: 708rpx 164rpx;
|
|
background-repeat: no-repeat;
|
|
.center-img {
|
|
position: absolute;
|
|
top: -20rpx;
|
|
left: 50%;
|
|
z-index: 5;
|
|
transform: translateX(-50%);
|
|
.img {
|
|
width: 136rpx;
|
|
height: 136rpx;
|
|
}
|
|
.name {
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #9a9a9a;
|
|
transform: translateY(-4rpx);
|
|
&.curr {
|
|
color: #C52733;
|
|
}
|
|
}
|
|
}
|
|
.tabbar-list {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 70rpx 0 0 0;
|
|
.tabbar-item {
|
|
display: flex;
|
|
align-items: center;
|
|
width: calc(50% - 78rpx);
|
|
.img-wrap {
|
|
.img {
|
|
display: block;
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin: 0 auto;
|
|
&.on {
|
|
display: none;
|
|
}
|
|
&.off {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
.name {
|
|
padding: 10rpx 0 0 0;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #9a9a9a;
|
|
}
|
|
.item {
|
|
width: 140rpx;
|
|
position: relative;
|
|
&.curr {
|
|
.name {
|
|
color: #C52733;
|
|
}
|
|
.on {
|
|
display: block;
|
|
}
|
|
.off {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.badge {
|
|
position: absolute;
|
|
top: -4rpx;
|
|
right: 32rpx;
|
|
min-width: 28rpx;
|
|
padding: 0 6rpx;
|
|
height: 28rpx;
|
|
line-height: 28rpx;
|
|
border-radius: 14rpx;
|
|
background-color: #FF564A;
|
|
color: #ffffff;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|