自定义tabbar

components/course/courseSection.vue

@@ -482,6 +482,13 @@ export default {
 						return;
 					}
 				} else if (this.menuItem.liveEndTime < nowTime) {
+					if (!data) {
+						uni.showToast({
+							title: '直播已结束',
+							icon: 'none'
+						});
+						return;
+					}
 					if (data.watchStatus == "end" || data.watchStatus == "playback") {
 						this.clickLock = false;
 						uni.showToast({

components/tabbar/TabBar.vue

@@ -0,0 +1,16 @@
+<template>
+    <view class="tab_bar">
+        <u-tabbar v-model="current" :list="list" :mid-button="true" :mid-button-size="60" class="tab_items"></u-tabbar>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            current: 0,
+            list: this.$store.state.tabLists
+        }
+    },
+}
+</script>

pages.json

@@ -1031,34 +1031,34 @@
 		"borderStyle": "black",
 		"backgroundColor": "#fff",
 		"list": [{
-				"pagePath": "pages/index/index",
-				"iconPath": "static/nav1.png",
-				"selectedIconPath": "static/nav1_on.png",
-				"text": "首页"
+				"pagePath": "pages/index/index"
+				// "iconPath": "static/nav1.png",
+				// "selectedIconPath": "static/nav1_on.png",
+				// "text": "首页"
 			},
 			{
-				"pagePath": "pages/course/index",
-				"iconPath": "static/nav2.png",
-				"selectedIconPath": "static/nav2_on.png",
-				"text": "选课"
+				"pagePath": "pages/course/index"
+				// "iconPath": "static/nav2.png",
+				// "selectedIconPath": "static/nav2_on.png",
+				// "text": "选课"
 			},
             {
-				"pagePath": "pages/learn/index",
-				"iconPath": "static/nav6.png",
-				"selectedIconPath": "static/nav6_on.png",
-				"text": "学习"
+				"pagePath": "pages/learn/index"
+				// "iconPath": "static/nav6.png",
+				// "selectedIconPath": "static/nav6_on.png",
+				// "text": "学习"
 			},
 			{
-				"pagePath": "pages/shopping/shoppingCart",
-				"iconPath": "static/nav3.png",
-				"selectedIconPath": "static/nav3_on.png",
-				"text": "购物车"
+				"pagePath": "pages/shopping/shoppingCart"
+				// "iconPath": "static/nav3.png",
+				// "selectedIconPath": "static/nav3_on.png",
+				// "text": "购物车"
 			},
 			{
-				"pagePath": "pages/wd/index",
-				"iconPath": "static/nav5.png",
-				"selectedIconPath": "static/nav5_on.png",
-				"text": "我的"
+				"pagePath": "pages/wd/index"
+				// "iconPath": "static/nav5.png",
+				// "selectedIconPath": "static/nav5_on.png",
+				// "text": "我的"
 			}
 		]
 	},

pages/course/index.vue

@@ -136,15 +136,17 @@
 				</view>
 			</view>
 		</view>
+
+		<tab-bar></tab-bar>
 	</view>
 </template>
 
 <script>
-
+import TabBar from '../../components/tabbar/TabBar.vue';
 import { mapGetters } from 'vuex';
 export default {
 	components: {
-		
+		TabBar
 	},
 	data() {
 		return {

pages/index/index.vue

@@ -180,14 +180,17 @@
 				</navigator> 
 			</view>
 		</view>
+
+		<tab-bar></tab-bar>
 	</view>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import { socket_url, version} from '@/common/request.js';
+import TabBar from '../../components/tabbar/TabBar.vue';
 export default {
-	components: {},
+	components: { TabBar },
 	data() {
 		return {
 			tabNum: 0,
@@ -285,7 +288,7 @@ export default {
 		this.appCommonConfig({
 			version
 		});
-		
+		console.log('999999999999999')
 		if(this.$method.isLogin()){
 			this.$store.state.allowLoading = false;
 			this.$api.getinfoAttached().then(res => {

pages/learn/index.vue

@@ -429,6 +429,8 @@
 				
 			</view>
 		</u-modal>
+
+		<tab-bar></tab-bar>
     </view>
 </template>
 
@@ -436,7 +438,9 @@
 var curTime = new Date().getTime() // 当前时间的时间戳
 import {mapGetters,mapActions} from 'vuex'
 import { WEBVIEW_URL } from '@/common/request.js'
+import TabBar from '../../components/tabbar/TabBar.vue'
 export default {
+	components: { TabBar },
     data() {
         return {
 			leftDays: 0,

pages/shopping/shoppingCart.vue

@@ -154,12 +154,16 @@
 				<view style="margin-top: 30rpx;"><u-button type="primary" @click="login">去登录</u-button></view>
 			</view>
 		</view>
+
+		<tab-bar></tab-bar>
 	</view>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import TabBar from '../../components/tabbar/TabBar.vue'
 export default {
+	components: { TabBar },
 	data() {
 		return {
 			gradeValue: -1,

pages/wd/index.vue

@@ -43,7 +43,7 @@
 						个学习任务
 					</view>
 				</navigator> -->
-				<view class="two_menu">
+				<!-- <view class="two_menu">
 					<navigator  hover-class="none" url="/pages2/wd/class" class="small_menu">
 						<image src="/static/icon/my_icon3.png" class="my_icon"></image>
 						<view>我的网课</view>
@@ -63,7 +63,7 @@
 						<text>{{ total2 }}</text>
 						个课程直播中
 					</view>
-				</navigator>
+				</navigator> -->
 				<navigator  hover-class="none" url="/pages2/learn/my_learn" class="menu_box" >
 					<view class="box_left">
 						<image src="/static/icon/my_icon2.png" class="my_icon"></image>
@@ -132,14 +132,17 @@
 		<!-- <u-navbar :is-back="false" title="我的" :border-bottom="false" background="{ background: '#ffffff',opacity:0.4; }" title-color="#ffffff" back-icon-color="#ffffff">
 			<view class="slot-wrap"><image src="/static/logo.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image></view>
 		</u-navbar> -->
+
+		<tab-bar></tab-bar>
 	</view>
 </template>
 
 <script>
 // import { websocket } from '@/common/socket.js';
 import { mapGetters } from 'vuex';
+import TabBar from '../../components/tabbar/TabBar.vue';
 export default {
-	components: {},
+	components: {TabBar},
 	data() {
 		return {
 			list: [23, 24, 25, 26, 27, 28, 29],

pages2/wd/course.vue

@@ -36,7 +36,7 @@
               :percent="((item.stuAllNum + item.recordNum) / (item.secAllNum + item.examNum)) * 100"
             ></u-line-progress
           ></view>
-          <view class="learing_bt" @click="jump(item, index)">
+          <view class="learing_bt" @click.stop="jump(item, index)">
             进入学习
             <!-- <u-button
               type="warning"
@@ -113,6 +113,7 @@ export default {
       });
     },
     jump(item, index) {
+      console.log('00000000')
       this.itemIndex = index;
 
       if (index == 0) {

store/index.js

@@ -24,7 +24,40 @@ const store = new Vuex.Store({
 		playChannelId: 0, //正在播放的直播频道号
 		playVID: 0, //正在播放的保利威视频ID
 		liveLast:null,
-		sysTime:0 //系统时间
+		tabNums: 0, // '我的'右上角的数字
+		sysTime:0, //系统时间
+		tabLists: [{
+			iconPath: "/static/nav1.png",
+			selectedIconPath: "/static/nav1_on.png",
+			text: '首页',
+			pagePath: "/pages/index/index"
+		},
+		{
+			iconPath: "/static/nav2.png",
+			selectedIconPath: "/static/nav2_on.png",
+			text: '选课',
+			pagePath: "/pages/course/index"
+		},
+		{
+			iconPath: "/static/nav6.png",
+			selectedIconPath: "/static/nav6_on.png",
+			text: '学习',
+			midButton: true,
+			pagePath: "/pages/learn/index"
+		},
+		{
+			iconPath: "/static/nav3.png",
+			selectedIconPath: "/static/nav3_on.png",
+			text: '购物车',
+			pagePath: "/pages/shopping/shoppingCart"
+		},
+		{
+			iconPath: "/static/nav5.png",
+			selectedIconPath: "/static/nav5_on.png",
+			text: '我的',
+			count: 0,
+			pagePath: "/pages/wd/index"
+		}]
 	},
 	getters: {
 		sysTime: state => {
@@ -95,16 +128,17 @@ const store = new Vuex.Store({
 			state.sysTime = time;
 		},
 		tabNum(state, nums) {
-			if (nums) {
-				uni.setTabBarBadge({
-					index: 4,
-					text: nums + ''
-				})
-			} else {
-				uni.removeTabBarBadge({
-					index: 4
-				})
-			}
+			state.tabLists[4].count = nums
+			// if (nums) {
+			// 	uni.setTabBarBadge({
+			// 		index: 4,
+			// 		text: nums + ''
+			// 	})
+			// } else {
+			// 	uni.removeTabBarBadge({
+			// 		index: 4
+			// 	})
+			// }
 		},
 		updateLiveLast(state,liveLast) {
 			state.liveLast = liveLast