优化项目

components/CustomTabBar.vue

@@ -1,108 +1,125 @@
 <template>
-  <view class="custom-tab-bar">
+
-    <view 
+	<view class="custom-tab-bar">
-      v-for="(item, index) in tabList" 
+		<!-- 首页 -->
-      :key="index" 
+		<view class="tab-bar-item" @click="switchTab(homeTab.pagePath)">
-      class="tab-bar-item"
+			<image class="icon" :src="currentPath === homeTab.pagePath ? homeTab.selectedIconPath : homeTab.iconPath"></image>
-      @click="switchTab(item.pagePath)"
+			
-    >
+			<text class="text" :style="{color: currentPath === homeTab.pagePath ? selectedColor : color}">
-      <!-- 图标 -->
+				{{ homeTab.text }}
-      <image 
+			</text>
-        class="icon" 
+		</view>
-        :src="currentPath === item.pagePath ? item.selectedIconPath : item.iconPath"
+		<!-- 发现页 -->
-      ></image>
+		<view class="tab-bar-item relative" @click="switchTab(findTab.pagePath)">
-      <!-- 文字 -->
+			<image class="absolute top-[-10px] w-[36px] h-[36px]" :src="currentPath === findTab.pagePath ? findTab.selectedIconPath : findTab.iconPath"></image>
-      <text 
+			
-        class="text" 
+			<!-- <text class="text" :style="{color: currentPath === findTab.pagePath ? selectedColor : color}">
-        :style="{color: currentPath === item.pagePath ? selectedColor : color}"
+				{{ findTab.text }}
-      >
+			</text> -->
-        {{ item.text }}
+		</view>
-      </text>
+		<!-- 个人页面 -->
-    </view>
+		<view class="tab-bar-item" @click="switchTab(mineTab.pagePath)">
-  </view>
+			<image class="icon" :src="currentPath === mineTab.pagePath ? mineTab.selectedIconPath : mineTab.iconPath"></image>
+			
+			<text class="text" :style="{color: currentPath === mineTab.pagePath ? selectedColor : color}">
+				{{ mineTab.text }}
+			</text>
+		</view>
+	</view>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+	import {
-import { onLoad } from '@dcloudio/uni-app'
+		ref,
+		onMounted
+	} from 'vue'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
 
-// ========== 配置数据 ==========
+	// ========== 配置数据 ==========
-// 从你原来的配置迁移过来的数据
+	// 从你原来的配置迁移过来的数据
-const color = '#999999'
+	const color = '#999999'
-const selectedColor = '#AB002D'
+	const selectedColor = '#000'
-const tabList = ref([
+	//首页配置
-  {
+	const homeTab = {
-    pagePath: "pages/index/index",
+		pagePath: "pages/index/index",
-    iconPath: "/static/tabbar/home.png",
+		iconPath: "/static/tabbar/home.png",
-    selectedIconPath: "/static/tabbar/active-home.png",
+		selectedIconPath: "/static/tabbar/active-home.png",
-    text: "首页"
+		text: "首页"
-  },
+	}
-  {
-    pagePath: "pages/order/index",
-    iconPath: "/static/tabbar/order.png",
-    selectedIconPath: "/static/tabbar/active-order.png",
-    text: "订单"
-  },
-  {
-    pagePath: "pages/mine/index",
-    iconPath: "/static/tabbar/mine.png",
-    selectedIconPath: "/static/tabbar/active-mine.png",
-    text: "我的"
-  }
-])
 
-// ========== 逻辑处理 ==========
+	//发现页
-const currentPath = ref('')
+	const findTab = {
+		pagePath: "pages/order/index",
+		iconPath: "/static/tabbar/find.png",
+		selectedIconPath: "/static/tabbar/active-find.png",
+		text: "发现"
+	}
+	//个人页
+	const mineTab = {
+		pagePath: "pages/mine/index",
+		iconPath: "/static/tabbar/mine.png",
+		selectedIconPath: "/static/tabbar/active-mine.png",
+		text: "我的"
+	}
 
-// 获取当前页面路径，用于匹配高亮
+	// ========== 逻辑处理 ==========
-const updateSelected = () => {
+	const currentPath = ref('')
-  const pages = getCurrentPages()
-  const currentPage = pages[pages.length - 1]
-  currentPath.value = currentPage.route
-}
 
-// 切换页面
+	// 获取当前页面路径，用于匹配高亮
-const switchTab = (url) => {
+	const updateSelected = () => {
-  // 如果点击的是当前页，不执行跳转
+		const pages = getCurrentPages()
-  if (currentPath.value === url) return
+		const currentPage = pages[pages.length - 1]
-  
+		currentPath.value = currentPage.route
-  uni.switchTab({ url: '/' + url })
+	}
-}
 
-// 组件挂载后获取当前路径
+	// 切换页面
-onMounted(() => {
+	const switchTab = (url) => {
-  updateSelected()
+		// 如果点击的是当前页，不执行跳转
-})
+		if (currentPath.value === url) return
+
+		uni.switchTab({
+			url: '/' + url
+		})
+	}
+
+	// 组件挂载后获取当前路径
+	onMounted(() => {
+		updateSelected()
+	})
 </script>
 
 <style scoped>
-.custom-tab-bar {
+	.custom-tab-bar {
-  display: flex;
+		display: flex;
-  position: fixed;
+		position: fixed;
-  bottom: 0;
+		bottom: 0;
-  left: 0;
+		left: 0;
-  right: 0;
+		right: 0;
-  height: 50px; /* 根据需要调整高度 */
+		height: 50px;
-  background-color: #ffffff;
+		/* 根据需要调整高度 */
-  border-top: 1px solid #000000; /* 对应 borderStyle: black */
+		background-color: #ffffff;
-  z-index: 999;
+		
-}
+		/* 对应 borderStyle: black */
+		z-index: 999;
+	}
 
-.tab-bar-item {
+	.tab-bar-item {
-  flex: 1;
+		flex: 1;
-  display: flex;
+		display: flex;
-  flex-direction: column;
+		flex-direction: column;
-  justify-content: center;
+		justify-content: center;
-  align-items: center;
+		align-items: center;
-}
+	}
 
-.icon {
+	.icon {
-  width: 24px;
+		width: 24px;
-  height: 24px;
+		height: 24px;
-  margin-bottom: 2px;
+		margin-bottom: 2px;
-}
+	}
 
-.text {
+	.text {
-  font-size: 12px;
+		font-size: 12px;
-}
+	}
 </style>

manifest.json

@@ -88,7 +88,7 @@
     },
     "proxy" : {
         "/sale" : {
-            "target" : "http://110.v2-app.devcn.dabapiao.com",
+            "target" : "",
             "changeOrigin" : true,
             "secure" : false,
             "pathRewrite" : {

pages.json

@@ -30,13 +30,6 @@
         "navigationStyle": "custom"
       }
     },
-    
-   
-   
-    
-   
-    
-  
     {
       "path": "pages/product/index",
       "style": {

pages/index/index.vue

@@ -79,7 +79,7 @@ const handleBook = (productId) => {
 </script>
 
 <template>
-  <view class="h-[100vh] bg-[#9C032D]">
+  <view class="h-[100vh] bg-[#fff]">
 	  
 	  <CustomTabBar />
   </view>