wangguoyu 1 tháng trước cách đây
mục cha
commit
cf023f6f71

+ 0 - 0
components/custom-tabbar/custom-tabbar copy.vue → components/custom-tabbar/123.vue


+ 38 - 3
components/custom-tabbar/custom-tabbar.vue

@@ -87,7 +87,16 @@
 					url: '/pages/login/index'
 				});
 			},
-
+			// 新增:判断是否是目标页面的方法
+			isTargetPage(route, tabIndex) {
+				const routeMap = {
+					0: 'pages/chanpinXuanze/index',
+					1: 'pages/chanpinneirong/index',
+					2: 'pages/game/index',
+					3: 'pages/chanpinMy/my'
+				};
+				return route === routeMap[tabIndex];
+			},
 			switchTab(path, index) {
 
 				if (index == this.currentTab) {
@@ -99,8 +108,34 @@
 					this.$refs.popupRef.open();
 					return false
 				}
-				this.currentTab = index;
-				this.navigateToEditPage(path)
+				// 新增:检查目标页面是否已经在页面栈中
+				const pages = getCurrentPages();
+				console.log('pages1', pages);
+				let targetPage = null;
+
+				for (let i = pages.length - 1; i >= 0; i--) {
+					const page = pages[i];
+					console.log('pages2', page);
+					// 判断是否是目标页面(这里需要根据你的页面路径判断)
+					if (page.route && this.isTargetPage(page.route, index)) {
+						targetPage = page;
+						break;
+					}
+				}
+				this.currentTab = index
+				console.log('targetPage', targetPage);
+				if (targetPage) {
+					// 如果页面已经在栈中,使用 navigateBack 返回
+					const delta = pages.length - pages.indexOf(targetPage) - 1;
+					console.log('delta', delta);
+					uni.navigateBack({
+						delta: delta
+					});
+				} else {
+					console.log('11111');
+
+					this.navigateToEditPage(path);
+				}
 
 			},
 			navigateToEditPage(path) {

+ 125 - 0
components/custom-tabbar/index.vue

@@ -0,0 +1,125 @@
+<!-- custom-tab-bar/index.vue -->
+<template>
+  <view class="custom-tab-bar" v-if="show">
+    <view class="tab-bar-item" v-for="(item, index) in list" :key="index" @click="switchTab(item, index)">
+      <text class="tab-text" :class="{ active: selectedIndex == index }">
+        {{ item.text }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    props: {
+      show: {
+        type: Boolean,
+        default: true
+      },
+      currentIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    data() {
+      return {
+        selectedIndex: 0, // 改个名字避免混淆
+        list: [{
+            pagePath: '/pages/chanpinXuanze/index',
+            text: "版本0",
+            iconPath: 'static/images/tabbar/unselect/xuanke-sj.png',
+            selectedIconPath: 'static/images/tabbar/select/xuanke-sj.png'
+          },
+          {
+            pagePath: '/pages/chanpinneirong/index',
+            text: "学习1",
+            iconPath: 'static/images/tabbar/unselect/xuexi-sj.png',
+            selectedIconPath: 'static/images/tabbar/select/xuexi-sj.png'
+          },
+          {
+            pagePath: '/pages/game/index',
+            text: "游戏2",
+            iconPath: 'static/images/tabbar/unselect/faxian-sj.png',
+            selectedIconPath: 'static/images/tabbar/select/faxian-sj.png'
+          },
+          {
+            pagePath: '/pages/chanpinMy/my',
+            text: "我的3",
+            iconPath: 'static/images/tabbar/unselect/wode-sj.png',
+            selectedIconPath: 'static/images/tabbar/select/wode-sj.png'
+          }
+        ]
+      };
+    },
+    watch: {
+      currentIndex: {
+        handler(newVal) {
+          console.log('接收到父组件传递的currentIndex:', newVal);
+          this.selectedIndex = newVal;
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      switchTab(item, index) {
+        console.log('点击Tab,index:', index, '当前选中的selectedIndex:', this.selectedIndex);
+        
+        // 如果点击的是当前已选中的Tab,不执行跳转
+        if (this.selectedIndex === index) {
+          console.log('点击的是当前已选中的Tab,不跳转');
+          return;
+        }
+
+        console.log('执行跳转到:', item.pagePath);
+        // 注意:这里不要更新 selectedIndex,因为跳转后目标页面会传递新的currentIndex
+        uni.switchTab({
+          url: item.pagePath
+        });
+      }
+    },
+    // 可以添加mounted生命周期,打印初始状态
+    mounted() {
+      console.log('TabBar组件mounted,初始currentIndex:', this.currentIndex);
+    }
+  };
+</script>
+
+<style scoped>
+  /* 样式保持不变 */
+  .custom-tab-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100rpx;
+    background: #FFFFFF;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    border-top: 1rpx solid #F0F0F0;
+    z-index: 999;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .tab-bar-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tab-icon {
+    width: 44rpx;
+    height: 44rpx;
+    margin-bottom: 6rpx;
+  }
+
+  .tab-text {
+    font-size: 20rpx;
+    color: #7A7E83;
+  }
+
+  .tab-text.active {
+    color: #007AFF;
+  }
+</style>

+ 10 - 6
pages/chanpinMy/my.vue

@@ -26,8 +26,7 @@
 			</view>
 		</view>
 		<!-- 底部 -->
-		<CustomTabBar :currentTabNumber="3"></CustomTabBar>
-		
+			<custom-tab-bar :show="true" :current-index="currentTabIndex" />
 	</view>
 </template>
 
@@ -39,9 +38,11 @@
 		myCardList,
 		commonCardList
 	} from '@/api/my.js'
-	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
+	import CustomTabBar from '@/components/custom-tabbar/index.vue';
+	
 	import {
-		onLoad
+		onLoad,
+		onShow
 	} from '@dcloudio/uni-app';
 	import {
 		reactive,
@@ -49,7 +50,7 @@
 	} from "vue";
 	import danyuanMuluVue from '@/pages/xinshuxue/components/danyuanMulu.vue';
 	
-
+	let currentTabIndex = ref(3)
 	let myInfoData = reactive({
 		userImg: '',
 		userName: '',
@@ -58,7 +59,10 @@
 		nickName: '',
 		icon: '',
 	});
-	
+
+	onShow(() => {
+		currentTabIndex.value = 3
+	})
 	/***************** 测试 ******************/ 
 	const testRef = ref(null)
 	function handleTest() {

+ 1 - 1
pages/chanpinXuanze/banben.vue

@@ -58,7 +58,7 @@
 	  if (cacheManager.get('xuexi-shuxue')) {
 	  	cacheManager.remove("xuexi-shuxue")
 	  }
-    uni.redirectTo({
+    uni.rediresctTos({
       url: `/pages/chanpinneirong/index?banbenId=${item.id}&danyuanId=1&customType=3&chanpinId=${item.chanpinId}&dengjiId=${item.dengjiId}`
     })
   }

+ 21 - 15
pages/chanpinXuanze/index.vue

@@ -8,10 +8,11 @@
 			<!-- 头部区域 -->
 			<view class="xuanke-tab-box">
 				<view v-for="item in data.list" :key="item.value" class="tab-item"
-				:class="{active: item.value == data.chanpinActiveSelect}" @click="handleSelectChanpin(item)">{{item.name}}</view>
+					:class="{active: item.value == data.chanpinActiveSelect}" @click="handleSelectChanpin(item)">
+					{{item.name}}</view>
 			</view>
 			<!-- 英语列表 -->
-			<template v-if="data.chanpinActiveSelect == 1"> 
+			<template v-if="data.chanpinActiveSelect == 1">
 				<view class="ezy-no-sj" v-if="data.list.length">
 					<icon></icon>
 					<text>暂无数据</text>
@@ -28,19 +29,23 @@
 			</template>
 		</view>
 	</view>
-		<CustomTabBar :currentTabNumber="0"></CustomTabBar>
+	<custom-tab-bar :show="true" :current-index="currentTabIndex" />
 </template>
 
 <script setup>
-	import {reactive} from "vue";
+	import {
+		reactive, ref
+	} from "vue";
 	import shuxueListVue from "./components/shuxueList.vue";
-	import {onLoad} from "@dcloudio/uni-app"
+	import {
+		onLoad,
+		onShow
+	} from "@dcloudio/uni-app"
 	import * as shuxueHttp from "@/api/chanpinShuxue.js"
-	import CustomTabBar from "@/components/custom-tabbar/custom-tabbar.vue";
-	
+	import CustomTabBar from "@/components/custom-tabbar/index.vue";
+	let currentTabIndex = ref(0)
 	const data = reactive({
-		list: [
-			{
+		list: [{
 				name: '英语',
 				value: 1
 			},
@@ -54,22 +59,23 @@
 			},
 		],
 		chanpinActiveSelect: 2,
-		
+
 		shuxueList: [],
 	})
-	
+
 	function getShuxueList() {
 		shuxueHttp.getShuxueChanpinList().then(res => {
 			data.shuxueList = res.data;
 		})
 	}
-	
+
 	function handleSelectChanpin(item) {
 		data.chanpinActiveSelect = item.value
 	}
-	
+	onShow(() => {
+			currentTabIndex.value = 0;
+	})
 	onLoad(() => {
 		getShuxueList()
 	})
-</script>
-
+</script>

+ 9 - 2
pages/chanpinneirong/index.vue

@@ -61,17 +61,21 @@
 
 		</view>
 		<danyuanInfoVue ref="dyRef" v-if="isShow" @close="isShow= false"></danyuanInfoVue>
-		<CustomTabBar :currentTabNumber="1"></CustomTabBar>
+		<custom-tab-bar :show="true" :current-index="currentTabIndex" />
 	</view>
 </template>
 
 <script>
-	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
+	import CustomTabBar from '@/components/custom-tabbar/index.vue';
 	import cacheManager from "@/utils/cacheManager.js";
 	import {
 		shuxueChanpinBanbenInfo,
 		shuxueSave
 	} from "@/api/chanpinneirong.js"
+	import {
+		onLoad,
+		onShow
+	} from "@dcloudio/uni-app"
 	import danyuanInfoVue from '@/pages/xinshuxue/components/danyuanInfo.vue';
 	import {
 		toast
@@ -89,6 +93,7 @@
 				chanpinId: '',
 				dengjiId: '',
 				curProcess: '',
+				currentTabIndex: 1,
 				cacheManagerLocal: null,
 				hasCache: false, // 是否有缓存的标志
 				needRefresh: false // 是否需要刷新数据的标志
@@ -99,9 +104,11 @@
 			danyuanInfoVue
 		},
 		onShow() {
+			uni.$emit('pageShown');
 			console.log('学习页面显示,使用缓存数据')
 			console.log('this.needRefresh',this.needRefresh)
 			console.log('this.hasCache',this.hasCache)
+			this.currentTabIndex = 1
 			// 如果从其他页面返回需要刷新数据
 			if (this.needRefresh) {
 				this.needRefresh = false;

+ 9 - 4
pages/game/index.vue

@@ -31,17 +31,22 @@
 			</view>
 		</commonDialogVue>
     <!--  导航  -->
-    <CustomTabBar :currentTabNumber="2"></CustomTabBar>
+    <CustomTabBar :current-index="2"></CustomTabBar>
+	
 	</view>
 </template>
 
-<script setup>
+<script setup>
+	import {
+		onLoad,
+		onShow
+	} from "@dcloudio/uni-app"
 	import {ref,reactive} from "vue";
 	import foodVue from "./components/food.vue";
 	import gooseVue from "./components/goose.vue";
 	import foodSelectVue from "./components/foodSelect.vue";
-	import commonDialogVue from "@/components/dialog/commonDialog.vue";
-  import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
+	import commonDialogVue from "@/components/dialog/commonDialog.vue";
+  	import CustomTabBar from "@/components/custom-tabbar/index.vue";
 	import {
 		toast,
 		getUserIdentity