From c86bceb64003ed30cc03c3f63bf0bf5fc202e3a6 Mon Sep 17 00:00:00 2001
From: kylin L <452061493@qq.com>
Date: Tue, 23 Jan 2024 18:55:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=A0=E5=B0=8F=E7=A8=8B=E5=BA=8F=E4=B8=8D?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81uni=E9=BB=98=E8=AE=A4=E7=9A=84=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81tabbar,=20=E5=9B=A0=E6=AD=A4=E5=B0=86tabbar=E5=8D=95?=
 =?UTF-8?q?=E7=8B=AC=E6=8A=BD=E7=A6=BB=E5=87=BA=E6=9D=A5=E5=81=9A=E6=88=90?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                       |   1 +
 components/tabbar/tabbar.vue  | 130 ++++++++++++
 pages.json                    |  24 +--
 pages/index/index.vue         |  67 +-----
 pages/knowledge/knowledge.vue |  11 +-
 pages/my/my.vue               | 374 ++++++++++++++++++----------------
 pages/scan/scan.vue           |  11 +-
 7 files changed, 366 insertions(+), 252 deletions(-)
 create mode 100644 components/tabbar/tabbar.vue

diff --git a/App.vue b/App.vue
index ee288b1..726e150 100644
--- a/App.vue
+++ b/App.vue
@@ -6,6 +6,7 @@
 		},
 		onShow: function() {
 			console.log('App Show')
+			uni.hideTabBar();
 		},
 		onHide: function() {
 			console.log('App Hide')
diff --git a/components/tabbar/tabbar.vue b/components/tabbar/tabbar.vue
new file mode 100644
index 0000000..0176850
--- /dev/null
+++ b/components/tabbar/tabbar.vue
@@ -0,0 +1,130 @@
+<template>
+	<view class="tab_bar">
+		<view class="tabbarBox">
+			<view class="handleBox" v-for="(item,index) in tabBarList" :key="index">
+				<view class="menuBox" @click="goPages(item.pageIndex)">
+					<view class="menuIcon">
+						<image v-if="item.type!=selectIndex" class="img"                 :src="item.iconPath"></image>
+						<image v-else class="img" :src="item.selectIconPath"></image>
+					</view>
+					<view class="menuName">
+						<text :class="item.type==selectIndex?'TextColor':'Text'" >{{item.tabbarName}}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+ 
+<script>
+export default {
+	props: {
+		page: {
+			type: String,
+			default: "homeIndex"
+		}
+	},
+	watch: {
+		page: {
+			handler(value) {
+				this.selectIndex = value;
+			},
+			immediate: true,
+			deep: true
+		}
+	},
+	data() {
+		return {
+			selectIndex: "",
+			tabBarList: [],
+		}
+		
+	},
+	//uniapp子组件不支持应用生命周期，所以只能用vue生命周期
+	created() {
+ 
+        //tabbar数据，这儿也支持后台定义通过接口获取数据
+    //     this.tabBarList = [{
+    // 			"tabbarName":"", //tababr名称
+				// "iconPath":"", //tabbar icon
+				// "selectIconPath":"", //tabbar 选择icon
+				// "pageIndex":"" //页面路径
+    //         }]
+	this.listTabbar();
+	},methods: {
+		listTabbar() {
+			this.$api.listTabbar({})
+				.then(res => {
+					console.log(res)
+					for (var i = 0; i < res.data.length; i++) {
+						if (res.data[i].hide == 1) {
+							this.tabBarList.push({
+								"tabbarName": res.data[i].title, 
+								"iconPath": res.data[i].selectedIconPath, 
+								"selectIconPath": res.data[i].selectedIconPath,
+								"pageIndex": res.data[i].pagePath,
+								"type": res.data[i].type
+							});
+						}
+					}
+				}).catch((e) => console.log(e)); //捕获异常
+		},
+		//进入tabble页
+		goPages(pageIndex) {
+			uni.switchTab({
+				url:"/"+pageIndex
+			})
+		},
+		
+	},
+}
+</script>
+<style lang="scss">
+.tab_bar {
+	width: 100vw;
+	height: 120rpx;
+	position: fixed;
+	bottom: 30rpx;
+	/* 模糊大小就是靠的blur这个函数中的数值大小 */
+	backdrop-filter: blur(10px);
+	border-radius: 60rpx;
+		
+.tabbarBox {
+	display: flex;
+	margin-top: 10rpx;
+	justify-content: space-evenly;
+	
+	
+.handleBox {
+	width: 20vw;
+	height: 110rpx;
+	
+ 
+.menuBox {
+	padding: 0rpx 20rpx;
+	width: 120rpx;
+	height: 98%;
+	text-align: center;
+ 
+.img {
+	width: 50rpx;
+	height: 50rpx;
+	}
+}
+	}
+}
+	}
+ 
+.Text {
+	font-size: 24rpx;
+	font-family: Cochin, serif;
+	font-weight: 900;
+}
+ 
+.TextColor {
+	@extend .Text;
+	color: #d81e06;
+}
+ 
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 6a3c6a6..0605dd0 100644
--- a/pages.json
+++ b/pages.json
@@ -60,23 +60,23 @@
 	"tabBar": {
 		"selectedColor": "#009eff",
 		"list": [{
-				"pagePath": "pages/index/index",
-				"text": "首页",
-				"iconPath": "static/tab_icons/home.png"
+				"pagePath": "pages/index/index"
+				// "text": "首页",
+				// "iconPath": "static/tab_icons/home.png"
 			},
 			{
-				"pagePath": "pages/scan/scan",
-				"text": "扫一扫",
-				"iconPath": "static/tab_icons/cate.png"
+				"pagePath": "pages/scan/scan"
+				// "text": "扫一扫",
+				// "iconPath": "static/tab_icons/cate.png"
 			},
 			{
-				"pagePath": "pages/knowledge/knowledge",
-				"text": "知识库",
-				"iconPath": "static/tab_icons/knownledge.png"
+				"pagePath": "pages/knowledge/knowledge"
+				// "text": "知识库",
+				// "iconPath": "static/tab_icons/knownledge.png"
 			}, {
-				"pagePath": "pages/my/my",
-				"text": "我的",
-				"iconPath": "static/tab_icons/my.png"
+				"pagePath": "pages/my/my"
+				// "text": "我的",
+				// "iconPath": "static/tab_icons/my.png"
 			}
 		]
 	}
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 45b4694..b26a285 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -16,15 +16,19 @@
 				<image :src="item" class="scene-img"></image>
 			</view>
 		</view>
+		
+		<tabbar :page="page"></tabbar>
 	</view>
 </template>
 
 <script>
+	import tabbar from "@/components/tabbar/tabbar.vue";
 	import { mapMutations, mapState } from 'vuex'
 	export default {
 		
 		data() {
 			return {
+				page: "",
 				//顶部图片
 				topImg: "",
 				leftImg: "",
@@ -39,65 +43,13 @@
 		  ...mapState('m_user', ['token'])
 		},
 		onLoad() {
-			uni.setTabBarItem({
-				index: 1,
-				"visible": false
-			});
-			uni.setTabBarItem({
-				index: 2,
-				"visible": false
-			});
-			uni.setTabBarItem({
-				index: 3,
-				"visible": false
-			});
-			uni.setTabBarItem({
-				index: 4,
-				"visible": false
-			});
-			this.listTabbar();
 			this.getSwiperList();
-			this.checkLogin()
+			// this.checkLogin()
+		},
+		onShow() {
+			this.page= "home"
 		},
 		methods: {
-			listTabbar() {
-				this.$api.listTabbar({})
-					.then(res => {
-						console.log(res)
-						for (var i = 0; i < res.data.length; i++) {
-							if (res.data[i].hide == 1) {
-								if (res.data[i].type == "home") {
-									uni.setTabBarItem({
-										index: 0,
-										text: res.data[i].title,
-										"visible": true
-									});
-								}
-								if (res.data[i].type == "scan") {
-									uni.setTabBarItem({
-										index: 1,
-										text: res.data[i].title,
-										"visible": true
-									});
-								}
-								if (res.data[i].type == "know") {
-									uni.setTabBarItem({
-										index: 2,
-										text: res.data[i].title,
-										"visible": true
-									});
-								}
-								if (res.data[i].type == "my") {
-									uni.setTabBarItem({
-										index: 3,
-										text: res.data[i].title,
-										"visible": true
-									});
-								}
-							}
-						}
-					}).catch((e) => console.log(e)); //捕获异常
-			},
 
 			async getSwiperList() {
 
@@ -132,7 +84,8 @@
 			   }
 			},
 			
-		}
+		},
+		components: {tabbar}
 	}
 </script>
 
diff --git a/pages/knowledge/knowledge.vue b/pages/knowledge/knowledge.vue
index 901c839..4add765 100644
--- a/pages/knowledge/knowledge.vue
+++ b/pages/knowledge/knowledge.vue
@@ -1,16 +1,23 @@
 <template>
 	<view>
 		知识库页面
+		
+		<tabbar :page="page"></tabbar>
 	</view>
 </template>
 
 <script>
+	import tabbar from "@/components/tabbar/tabbar.vue";
 	export default {
 		data() {
 			return {
-				
+				page: "",
 			};
-		}
+		},
+		onShow() {
+			this.page= "know"
+		},
+		components: {tabbar}
 	}
 </script>
 
diff --git a/pages/my/my.vue b/pages/my/my.vue
index d7c09cf..9498f10 100644
--- a/pages/my/my.vue
+++ b/pages/my/my.vue
@@ -1,208 +1,224 @@
 <template>
 	<view class="my-userinfo-container">
-	  <!-- 头像和昵称区域 -->
-	  <view class="top-box">
-	    <image :src="avatarUrl" class="avatar"></image>
-	    <view class="nickname">盛大鹏</view>
-	  </view>
-	
-	  <!-- 面板区域 -->
-	  <view class="panel-list">
-	    <!-- 第1个面板 -->
-	    <view class="panel">
-	      <view class="panel-body">
-	        <view class="panel-item">
-	          <text>0</text>
-	          <text>勋章</text>
-	        </view>
-	        <view class="panel-item">
-	          <text>0</text>
-	          <text>挑战历史</text>
-	        </view>
-	      </view>
-	    </view>
-	
-	    <!-- 第2个面板 -->
-	    <view class="panel">
-			<!-- 轮播图 -->
-			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
-				<swiper-item v-for="(item, i) in swiperList" :key="i">
-					<navigator class="swiper-item">
-						<image :src="item"></image>
-					</navigator>
-				</swiper-item>
-			</swiper>
-	    </view>
-	
-	    <!-- 第3个面板 -->
-	    <view class="panel">
-		 <view class="function-list">
-			   <view class="panel-list-item" v-for="(item,i) in functionList" :key="i">
-				   <image class="function-img" :src="item.uploadPath"></image>
-			       <text style="margin-right: 220px;">{{item.name}}</text>
-			       <uni-icons type="arrowright" size="15"></uni-icons>
-			   </view>	
-		  </view>
-	    </view>
-	  </view>
+		<!-- 头像和昵称区域 -->
+		<view class="top-box">
+			<image :src="avatarUrl" class="avatar"></image>
+			<view class="nickname">盛大鹏</view>
+		</view>
+
+		<!-- 面板区域 -->
+		<view class="panel-list">
+			<!-- 第1个面板 -->
+			<view class="panel">
+				<view class="panel-body">
+					<view class="panel-item">
+						<text>0</text>
+						<text>勋章</text>
+					</view>
+					<view class="panel-item">
+						<text>0</text>
+						<text>挑战历史</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 第2个面板 -->
+			<view class="panel">
+				<!-- 轮播图 -->
+				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
+					<swiper-item v-for="(item, i) in swiperList" :key="i">
+						<navigator class="swiper-item">
+							<image :src="item"></image>
+						</navigator>
+					</swiper-item>
+				</swiper>
+			</view>
+
+			<!-- 第3个面板 -->
+			<view class="panel">
+				<view class="function-list">
+					<view class="panel-list-item" v-for="(item,i) in functionList" :key="i">
+						<image class="function-img" :src="item.uploadPath"></image>
+						<text style="margin-right: 220px;">{{item.name}}</text>
+						<uni-icons type="arrowright" size="15"></uni-icons>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<tabbar :page="page"></tabbar>
 	</view>
 </template>
 
 <script>
-	import { mapState, mapMutations } from 'vuex'
+	import tabbar from "@/components/tabbar/tabbar.vue";
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex'
 	export default {
 		data() {
 			return {
-				avatarUrl : uni.$http.baseUrl+"/profile//2024/01/18/6147d64a3b94d7b3d3cc35aaf8cbfe06.png",
+				page: "",
+				avatarUrl: uni.$http.baseUrl + "/profile//2024/01/18/6147d64a3b94d7b3d3cc35aaf8cbfe06.png",
 				//轮播图数据列表
 				swiperList: [],
 				//主页功能列表
-				functionList:[]
+				functionList: []
 			};
 		},
 		onLoad() {
 			this.getSwiperList()
 			this.getFunctionList()
 		},
+		onShow() {
+			this.page = "my"
+		},
 		computed: {
-		  ...mapState('m_user', ['userinfo'])
+			...mapState('m_user', ['userinfo'])
 		},
 		methods: {
-		  ...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken']),
-		  async logout() {
-		    const [err, succ] = await uni.showModal({
-		      title: '提示',
-		      content: '确认退出登录吗？'
-		    }).catch(err => err)
-		
-		    if (succ && succ.confirm) {
-		      this.updateAddress({})
-		      this.updateUserInfo({})
-		      this.updateToken('')
-		    }
-		  },
-		  async getSwiperList() {
-		  	
-		  	const {
-		  		data: res
-		  	} = await uni.$http.post('/small/customImage/listAll',{page:"my"})
-		  	if (!res.success) return uni.$showMsg()
-		  
-		  	res.data.forEach(item=>{
-		  		item.uploadPath =  uni.$http.baseUrl +item.uploadPath
-		  		this.swiperList.push(item.uploadPath)
-		  	})
-		  	uni.$showMsg('数据请求成功！')
-		  },
-		  async getFunctionList() {
-		  	
-		  	const {
-		  		data: res
-		  	} = await uni.$http.post('/small/project/home/listAll')
-		  	if (!res.success) return uni.$showMsg()
-		  
-		  	res.data.forEach(item=>{
-		  		item.uploadPath = uni.$http.baseUrl +item.uploadPath
-		  	})
-		  	 this.functionList = res.data;
-		  	uni.$showMsg('数据请求成功！')
-		  }
+			...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken']),
+			async logout() {
+				const [err, succ] = await uni.showModal({
+					title: '提示',
+					content: '确认退出登录吗？'
+				}).catch(err => err)
+
+				if (succ && succ.confirm) {
+					this.updateAddress({})
+					this.updateUserInfo({})
+					this.updateToken('')
+				}
+			},
+			async getSwiperList() {
+
+				const {
+					data: res
+				} = await uni.$http.post('/small/customImage/listAll', {
+					page: "my"
+				})
+				if (!res.success) return uni.$showMsg()
+
+				res.data.forEach(item => {
+					item.uploadPath = uni.$http.baseUrl + item.uploadPath
+					this.swiperList.push(item.uploadPath)
+				})
+				uni.$showMsg('数据请求成功！')
+			},
+			async getFunctionList() {
+
+				const {
+					data: res
+				} = await uni.$http.post('/small/project/home/listAll')
+				if (!res.success) return uni.$showMsg()
+
+				res.data.forEach(item => {
+					item.uploadPath = uni.$http.baseUrl + item.uploadPath
+				})
+				this.functionList = res.data;
+				uni.$showMsg('数据请求成功！')
+			}
 		},
 		navClickHandler(item) {
-		  
+
 		},
+		components: {
+			tabbar
+		}
 	}
 </script>
 
 <style lang="scss">
-  .my-userinfo-container {
-    height: 100%;
-    background-color: #F4F4F4;
-
-    .top-box {
-      height: 400rpx;
-      background-color: #aba9d0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-
-      .avatar {
-        width: 90px;
-        height: 90px;
-        border-radius: 45px;
-        border: 2px solid #FFF;
-        box-shadow: 0 1px 5px black;
-      }
-
-      .nickname {
-        font-size: 16px;
-        color: black;
-        font-family: Georgia, 'Times New Roman', Times, serif;
-        margin-top: 10px;
-      }
-    }
-  }
-
-  .panel-list {
-    padding: 0 10px;
-    position: relative;
-    top: -10px;
-
-    .panel {
-      background-color: white;
-      border-radius: 3px;
-      margin-bottom: 8px;
-
-      .panel-title {
-        line-height: 45px;
-        padding-left: 10px;
-        font-size: 15px;
-        border-bottom: 1px solid #F4F4F4;
-      }
-
-      .panel-body {
-        display: flex;
-        justify-content: space-around;
-
-        .panel-item {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: space-around;
-          padding: 10px 0;	
-          font-size: 13px;
-
-          .icon {
-            width: 35px;
-            height: 35px;
-          }
-        }
-      }
-    }
-  }
-  .function-img{
-	  width: 30px;
-	  height: 30px;
-  }
-
-  .panel-list-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 15px;
-    padding: 0 10px;
-    line-height: 45px;
-  }
-  swiper {
-  	height: 230rpx;
-  
-  	.swiper-item,
-  	image {
-  		width: 100%;
-  		height: 100%;
-  		border-radius: 4px;
-  	}
-  }
-</style>
+	.my-userinfo-container {
+		height: 100%;
+		background-color: #F4F4F4;
+
+		.top-box {
+			height: 400rpx;
+			background-color: #aba9d0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-direction: column;
+
+			.avatar {
+				width: 90px;
+				height: 90px;
+				border-radius: 45px;
+				border: 2px solid #FFF;
+				box-shadow: 0 1px 5px black;
+			}
+
+			.nickname {
+				font-size: 16px;
+				color: black;
+				font-family: Georgia, 'Times New Roman', Times, serif;
+				margin-top: 10px;
+			}
+		}
+	}
+
+	.panel-list {
+		padding: 0 10px;
+		position: relative;
+		top: -10px;
+
+		.panel {
+			background-color: white;
+			border-radius: 3px;
+			margin-bottom: 8px;
+
+			.panel-title {
+				line-height: 45px;
+				padding-left: 10px;
+				font-size: 15px;
+				border-bottom: 1px solid #F4F4F4;
+			}
+
+			.panel-body {
+				display: flex;
+				justify-content: space-around;
+
+				.panel-item {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: space-around;
+					padding: 10px 0;
+					font-size: 13px;
+
+					.icon {
+						width: 35px;
+						height: 35px;
+					}
+				}
+			}
+		}
+	}
+
+	.function-img {
+		width: 30px;
+		height: 30px;
+	}
 
+	.panel-list-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 15px;
+		padding: 0 10px;
+		line-height: 45px;
+	}
+
+	swiper {
+		height: 230rpx;
+
+		.swiper-item,
+		image {
+			width: 100%;
+			height: 100%;
+			border-radius: 4px;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/scan/scan.vue b/pages/scan/scan.vue
index 52e624e..ac54b36 100644
--- a/pages/scan/scan.vue
+++ b/pages/scan/scan.vue
@@ -2,20 +2,26 @@
 	<view>
 		<view class="video-wrapper" id="video-container">
 		</view>
+		
+		<tabbar :page="page"></tabbar>
 	</view>
 </template>
 
 <script>
+	import tabbar from "@/components/tabbar/tabbar.vue";
 	export default {
 		
 		data() {
 			return {
-				
+				page: "",
 			};
 		},
 		onReady(){
 			this.QR();
 		},
+		onShow() {
+			this.page= "scan"
+		},
 		methods:{
 		    QR() {
 				uni.scanCode({
@@ -28,7 +34,8 @@
 				}
 			 })
 			},	
-		}
+		},
+		components: {tabbar}
 	}
 </script>