添加使用自定义tab栏

components/CustomTabBar.vue

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

pages.json

@@ -59,23 +59,9 @@
     "borderStyle": "black",
     "backgroundColor": "#ffffff",
     "list": [
-      {
+      {"pagePath": "pages/index/index"},
-        "pagePath": "pages/index/index",
+	  {"pagePath": "pages/order/index"},
-        "iconPath": "/static/tabbar/home.png",
+      {"pagePath": "pages/mine/index"}
-        "selectedIconPath": "/static/tabbar/active-home.png"
-      },
-     
-      
-      {
-        "pagePath": "pages/order/index",
-        "iconPath": "/static/tabbar/order.png",
-        "selectedIconPath": "/static/tabbar/active-order.png"
-      },
-      {
-        "pagePath": "pages/mine/index",
-        "iconPath": "/static/tabbar/mine.png",
-        "selectedIconPath": "/static/tabbar/active-mine.png"
-      }
     ]
   }
 }

pages/index/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
 import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
-
+import CustomTabBar from '@/components/CustomTabBar.vue'
 import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
 import LoginPopup from '@/components/login-popup.vue';
 import { getProducts } from './api.js';
@@ -79,7 +79,11 @@ const handleBook = (productId) => {
 </script>
 
 <template>
-  <view class="h-[140rpx]">hello</view>
+  <view class="h-[100vh] bg-[#9C032D]">
+	  
+	  <CustomTabBar />
+  </view>
+  
 </template>
 
 <style scoped lang="scss">

pages/mine/index.vue

@@ -1,13 +1,113 @@
-<template>
-	<view>
-		
-	</view>
-</template>
-
 <script setup>
+import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
+import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
+import CustomTabBar from '@/components/CustomTabBar.vue'
+import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
+import LoginPopup from '@/components/login-popup.vue';
+import { getProducts } from './api.js';
+import { useUserStore } from '@/store/user.js';
+
+import { useI18n } from 'vue-i18n';
+const { t, locale } = useI18n();
+
+const props = defineProps(['status']);
+const { proxy } = getCurrentInstance();
+
+const userStore = useUserStore();
+
+const tabList = ref([]); //tab列表
+const tabsIndex = ref(0); //当前选中的tab索引
+// const modelTypeList = ref([]);
+const tabsLeft = ref(0); //下划线移动的距离
+const finished = ref(false); //数据是否全部加载完成
+const windowWidth = ref(0); //tab元素的宽度
+const orderRows = ref([]); //订单列表
+const showLogin = ref(false); //显示登录
+const triggered = ref(false); //是否下拉刷新状态，true为是
+const loading = ref(false); // 添加loading状态
+const productData = ref();
+const scrollHeight = ref(0); //scroll-view滚动高度
+
+const pageView = ref({});
+/**
+ * @desc 获取可视内容高度
+ */
+const getContentHeight = (e) => {
+  pageView.value = e;
+};
+
+
+
+
+
+
+/**
+ * @desc 跳转至详情页面
+ */
+const toDetailPage = (productId) => {
+  uni.navigateTo({
+    url: '/pages/product/detail',
+  });
+};
+//获取首页数据
+const getProductList = async()=>{
+	const res = await getProducts();
 	
+	productData.value=res.data;
+	console.log("商品数据",productData.value);
+}
+
+
+onLoad(()=>{
+	// getProductList();
+	
+});
+
+// 模拟数据
+
+
+/**
+ * @desc 处理预订事件
+ */
+const handleBook = (productId) => {
+  // 这里可以添加预订逻辑，比如跳转到详情页
+  uni.navigateTo({
+    url: `/pages/product/detail?id=${productId}`,
+  });
+};
+
 </script>
 
-<style>
+<template>
-	       
+  <view class="h-[100vh] bg-[#9C032D]">
+	  
+	  <CustomTabBar />
+  </view>
+  
+</template>
+
+<style scoped lang="scss">
+:deep(.u-count-down__text) {
+  color: #ab002d !important;
+  font-size: 13px !important;
+}
+
+.navigation {
+  border-bottom: 1px solid #f2f2f2;
+}
+
+.navi-title-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.line {
+  transition: 0.3s all;
+}
+
+.search {
+  :deep(.u-search) {
+    flex: 1;
+  }
+}
 </style>

pages/order/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
 import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
-
+import CustomTabBar from '@/components/CustomTabBar.vue'
 import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
 import LoginPopup from '@/components/login-popup.vue';
 import { getProducts } from './api.js';
@@ -79,7 +79,11 @@ const handleBook = (productId) => {
 </script>
 
 <template>
-  <view class="h-[140rpx]">hello</view>
+  <view class="h-[100vh] bg-[#9C032D]">
+	  
+	  <CustomTabBar />
+  </view>
+  
 </template>
 
 <style scoped lang="scss">

pages/product/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
 import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
-
+import CustomTabBar from '@/components/CustomTabBar.vue'
 import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
 import LoginPopup from '@/components/login-popup.vue';
 import { getProducts } from './api.js';
@@ -79,26 +79,11 @@ const handleBook = (productId) => {
 </script>
 
 <template>
-  <view class="overflow-hidden" :style="{ height: `${pageView.pageHeight}px` }">
+  <view class="h-[100vh] bg-[#9C032D]">
-    <Layout :navShowNavBar="false" bgColor="#F7F7F7"  @getContentHeight="getContentHeight">
+	  
-      <template #content>
+	  <CustomTabBar />
-        <view class="w-full flex flex-col gap-[15px] p-[15px]">
-          <view class="flex p-[10px] gap-[15px] border border-round-theme rounded-[10px]" v-for="(product,index) in productData" :key="index">
-          	<image :src="product.image" class="w-[80px] h-[80px] rounded-[10px]"></image>
-			<view class="flex-1 flex flex-col gap-[4px]">
-				<text class="text-[15px] text-[#333333] font-bold">{{product.name}}</text>
-				<text class="text-[12px] text-[#1D9EF8] font-Medium">{{product.description}}</text>
-				
-				<view class="flex gap-[10px]">
-					<text class="text-price">售价：{{product.price}}</text>
-				</view>
-			</view>
-          </view>
-		  
-        </view>
-      </template>
-    </Layout>
   </view>
+  
 </template>
 
 <style scoped lang="scss">