1 Star 0 Fork 7

xcy188/畅阳教培 在线教育 在线视频教育+在线试题+在线题库+在线考试源码Java+SpringBoot+MySql+vue+uni-app

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
tabbar.vue 5.93 KB
一键复制 编辑 原始数据 按行查看 历史
褚存龙 提交于 2023-03-30 14:41 . 1
<template>
<view class="tabbar-bg">
<view class="item" v-if="courseState == true" @click="goPage(1)" style="padding-right: 30rpx;">
<!-- <view class="img icon1" :class="{'item__img_active ':index == 1}"> </view> -->
<img src="../static/tabBarIcon/home.png" alt="" v-show="index != 1">
<img src="../static/tabBarIcon/home-h.png" alt="" v-show="index == 1">
<view class="text" :class="{'active-text' : index == 1}">
课程
</view>
</view>
<view class="item" v-if="courseState == true" @click="goPage(2)" style="padding:0 30rpx;">
<!-- <view class="img icon2" :class="{'item__img_active ':index == 2}"> </view>] -->
<img src="../static/tabBarIcon/learn.png" alt="" v-show="index != 2">
<img src="../static/tabBarIcon/learn-h.png" alt="" v-show="index == 2">
<view class="text" :class="{'active-text' : index == 2}">
学习
</view>
</view>
<view class="item" v-if="questionState == true" @click="goPage(3)" style="padding:0 30rpx;">
<!-- <view class="img icon3" :class="{'item__img_active ':index == 3}"> </view> -->
<img src="../static/tabBarIcon/tiku1.png" alt="" v-show="index != 3">
<img src="../static/tabBarIcon/tiku2.png" alt="" v-show="index == 3">
<view class="text" :class="{'active-text' : index == 3}">
题库
</view>
</view>
<view class="item" @click="goPage(4)" style="padding-left: 30rpx;">
<!-- <view class="img icon4" :class="{'item__img_active ':index == 4}"> </view> -->
<img src="../static/tabBarIcon/mine.png" alt="" v-show="index != 4">
<img src="../static/tabBarIcon/mine-h.png" alt="" v-show="index == 4">
<view class="text" :class="{'active-text' : index == 4}">
我的
</view>
</view>
</view>
</template>
<script>
import {
findDistributionl
} from '@/api/homeAudition.js'
export default {
props: {
index: {
type: Number,
default: 0
}
},
data() {
return {
questionState: uni.getStorageSync('questionState'), // 小程序题库权限
courseState: uni.getStorageSync('courseState'), // 小程序课程权限
}
},
created() {
let data = {}
//#ifdef H5
data.appId = this.$appid;
data.clientType = 'OA';
//#endif
//#ifdef MP-WEIXIN
data.appId = uni.getAccountInfoSync().miniProgram.appId;
data.clientType = 'MP';
// #endif
findDistributionl(data).then((res) => {
console.log('获取权限和开课模式', res)
if (res.code == 200) {
// 小程序课程价格是否显示,false不显示价格
if (res.result.isDisplayPrice === true || res.result.isDisplayPrice === false) {
console.log(res.result.isDisplayPrice, '存储是否显示价格')
uni.setStorageSync('isDisplayPrice', res.result.isDisplayPrice)
this.isDisplayPrice = res.result.isDisplayPrice
}
// 小程序是否能继续使用,0不能使用
if (res.result.validityFlg === 0 || res.result.validityFlg === 1) {
console.log(res.result.validityFlg, '存储小程序是否能使用,0不能,1能')
uni.setStorageSync('validityFlg', res.result.validityFlg)
this.validityFlg = res.result.validityFlg
}
// uni.setStorageSync('isDisplayPrice', true);
// uni.setStorageSync('validityFlg', 0);
// 开课模式
if (res.result.courseControl) {
console.log(res.result.courseControl, '存储开课方式')
uni.setStorageSync('courseControl', res.result.courseControl)
}
// 机构权限
if (res.result.authority) {
if (res.result.authority.indexOf('question') != -1) {
this.questionState = true
uni.setStorageSync('questionState', true)
}
if (res.result.authority.indexOf('course') != -1) {
this.courseState = true
uni.setStorageSync('courseState', true)
}
}
}
})
},
methods: {
goPage(num) {
if (num == this.index) {
console.log('重复点击')
return
} else {
if (num == 1) {
// uni.redirectTo({
// url: '/pages/index/home'
// })
// uni.setStorageSync('tabbarIndex', 1) // 小程序题库权限
this.$emit('changeTabbarIndex', 1)
} else if (num == 2) {
// uni.redirectTo({
// url: '/pages/learn/index'
// })
// uni.setStorageSync('tabbarIndex', 2) // 小程序题库权限
this.$emit('changeTabbarIndex', 2)
} else if (num == 3) {
// uni.redirectTo({
// url: '/pages/indexs/index'
// })
// uni.setStorageSync('tabbarIndex', 3) // 小程序题库权限
this.$emit('changeTabbarIndex', 3)
} else if (num == 4) {
// uni.redirectTo({
// url: '/pages/mine/index'
// })
// uni.setStorageSync('tabbarIndex', 4) // 小程序题库权限
this.$emit('changeTabbarIndex', 4)
}
}
}
}
}
</script>
<style scoped lang="scss">
.tabbar-bg {
background: #fff;
position: fixed;
z-index: 50;
left: 0;
bottom: 0;
box-sizing: border-box;
width: 100%;
// padding: 13rpx 65rpx 30rpx 65rpx;
padding: 13rpx 0 50rpx 0;
display: flex;
justify-content: space-around;
// justify-content: space-between;
box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(0, 0, 0, 0.2);
.item {
display: flex;
flex-direction: column;
justify-content: space-between;
// height: 70rpx;
.icon1 {
background-image: url('../static/tabBarIcon/home-q.png');
}
.icon2 {
background-image: url('../static/tabBarIcon/learn-q.png');
}
.icon3 {
background-image: url('../static/tabBarIcon/tiku-q.png');
}
.icon4 {
background-image: url('../static/tabBarIcon/mine-q.png');
}
.img {
width: 46rpx;
height: 43rpx;
background-repeat: no-repeat;
background-size: 200% 100%;
}
img {
width: 46rpx;
height: 43rpx;
}
.text {
margin-top: 9rpx;
text-align: center;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: bold;
color: #666666;
}
.active-text {
color: #F1592A;
}
.item__img_active {
background-position: -40rpx !important;
}
}
}
</style>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/xcy1888/changyangEducation.git
git@gitee.com:xcy1888/changyangEducation.git
xcy1888
changyangEducation
畅阳教培 在线教育 在线视频教育+在线试题+在线题库+在线考试源码Java+SpringBoot+MySql+vue+uni-app
master

搜索帮助