196 lines
3.7 KiB
Vue
196 lines
3.7 KiB
Vue
<template>
|
|
<view class="page-total">
|
|
<view class="tab-list">
|
|
<view class="list" v-for="(item,index) in TabBarList" @click="onTabBar(item,index)" :key="index">
|
|
<image :src="item.acImg" mode="widthFix" v-show="tabBarShow === index" :style="{width:'24px'}"></image>
|
|
<image :src="item.img" mode="widthFix" v-show="tabBarShow != index" :style="{width: '24px'}"></image>
|
|
|
|
<!-- background: (index == 2) ? 'red' : '' -->
|
|
<text :class="{'action':tabBarShow === index}">{{item.name}}</text>
|
|
</view>
|
|
<span class="badge" v-if="number != 0">
|
|
<u-badge type="warning " max="99" :value="number"></u-badge>
|
|
</span>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapGetters
|
|
} from 'vuex'
|
|
export default {
|
|
computed: {
|
|
...mapGetters(['number']),
|
|
},
|
|
data() {
|
|
return {
|
|
TabBarList: [{
|
|
index: 0,
|
|
name: '首页',
|
|
img: '/static/index.png',
|
|
acImg: '/static/index1.png',
|
|
},
|
|
{
|
|
index: 1,
|
|
name: '选课中心',
|
|
img: '/static/center.png',
|
|
acImg: '/static/center1.png',
|
|
},
|
|
{
|
|
index: 2,
|
|
name: '活动中心',
|
|
img: '/static/activity.png',
|
|
acImg: '/static/activity1.png',
|
|
},
|
|
{
|
|
index: 3,
|
|
name: '我的',
|
|
img: '/static/my.png',
|
|
acImg: '/static/my1.png',
|
|
},
|
|
|
|
],
|
|
codeheight: 0,
|
|
isOverall: 0,
|
|
phoneModel: '',
|
|
|
|
};
|
|
},
|
|
props: {
|
|
tabBarShow: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
try {
|
|
const res = uni.getSystemInfoSync();
|
|
let that = this;
|
|
// 获取系统信息
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
// console.log(res.brand) //手机牌子
|
|
// console.log(res.model) //手机型号
|
|
// console.log(res.screenWidth) //屏幕宽度
|
|
// console.log(res.screenHeight) //屏幕高度
|
|
that.codeheight = Math.round(res.screenHeight);
|
|
that.phoneModel = res.model
|
|
if (res.model.search('iPhone')) {
|
|
that.isOverall = 0;
|
|
} else if (Math.round(res.screenHeight) > 740) {
|
|
that.isOverall = 1;
|
|
}
|
|
}
|
|
});
|
|
} catch (e) {
|
|
// error
|
|
}
|
|
},
|
|
watch: {
|
|
number(newVal) {
|
|
this.TabBarList[3].unread_number = newVal;
|
|
},
|
|
deep: true
|
|
|
|
},
|
|
methods: {
|
|
|
|
/**
|
|
* @param {Object} item
|
|
* @param {Number} index
|
|
*/
|
|
onTabBar(item, index) {
|
|
this.$emit('tabBarShow', index);
|
|
console.log('index', index)
|
|
switch (index) {
|
|
case 0:
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
break;
|
|
case 1:
|
|
uni.switchTab({
|
|
url: '/pages/center/index'
|
|
})
|
|
break;
|
|
case 2:
|
|
uni.switchTab({
|
|
url: '/pages/activity/index'
|
|
})
|
|
break;
|
|
case 3:
|
|
uni.switchTab({
|
|
url: '/pages/my/index'
|
|
})
|
|
break;
|
|
case 3:
|
|
uni.switchTab({
|
|
url: '/pages/activity/index'
|
|
})
|
|
break;
|
|
}
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
/* 主要颜色 */
|
|
$base: #181818; // 基础颜色
|
|
|
|
.page-total {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
// height: 166rpx;
|
|
}
|
|
|
|
.tab-list {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 130rpx;
|
|
padding-bottom: 10px;
|
|
background-color: #FFFFFF;
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 200rpx;
|
|
height: 130rpx;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
background-color: white;
|
|
}
|
|
|
|
text {
|
|
color: #333333;
|
|
font-size: 24rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.action {
|
|
color: $base;
|
|
font-weight: 800;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.badge {
|
|
position: absolute;
|
|
right: 3%;
|
|
top: 0;
|
|
}
|
|
</style> |