添加使用自定义tab栏

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` }">
-    <Layout :navShowNavBar="false" bgColor="#F7F7F7"  @getContentHeight="getContentHeight">
-      <template #content>
-        <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 class="h-[100vh] bg-[#9C032D]">
+	  
+	  <CustomTabBar />
   </view>
+  
 </template>
 
 <style scoped lang="scss">