From 6a20878b9b1e3460531b055d72d5d671f761abc3 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期四, 16 十月 2025 15:36:20 +0800
Subject: [PATCH] 定制商品
---
components/custom-tabbar.vue | 228 ++++++++++++++++++++++++++++----------------------------
1 files changed, 114 insertions(+), 114 deletions(-)
diff --git a/components/custom-tabbar.vue b/components/custom-tabbar.vue
index 75aec2e..d4577e8 100644
--- a/components/custom-tabbar.vue
+++ b/components/custom-tabbar.vue
@@ -1,126 +1,126 @@
<!-- components/custom-tabbar.vue -->
<template>
- <view class="custom-tabbar" :style="{backgroundColor: bgColor}">
- <view
- v-for="(item, index) in list"
- :key="index"
- class="tabbar-item"
- @click="switchTab(item)"
- >
- <image
- :src="selected === item.key ? item.selectedIconPath : item.iconPath"
- :class="{'tabbar-icon': true, 'video-add': item.key == 'video'}"
- />
- <text class="tabbar-text" v-if="item.text" :style="{color: selected === item.key ? selectedTextColor : color}">
- {{item.text}}
- </text>
- </view>
- </view>
+ <view class="custom-tabbar" :style="{backgroundColor: bgColor, marginBottom: marginBottom + 'px'}">
+ <view v-for="(item, index) in list" :key="index" class="tabbar-item" @click="switchTab(item)">
+ <image :src="selected === item.key ? item.selectedIconPath : item.iconPath"
+ :class="{'tabbar-icon': true, 'video-add': item.key == 'video'}" />
+ <text class="tabbar-text" v-if="item.text"
+ :style="{color: selected === item.key ? selectedTextColor : color}">
+ {{item.text}}
+ </text>
+ </view>
+ </view>
</template>
<script>
-export default {
- name: "CustomTabbar",
- props: {
- selected: {
- type: String,
- default: 'index'
- },
- bgColor: {
- type: String,
- default: '#333333'
- },
- selectedTextColor: {
- type: String,
- default: '#ff573e'
- }
- },
- data() {
- return {
- color: '#999999',
- list: [
- {
- "pagePath": "/pages/tabbar/index/home",
- "iconPath": "/static/tabbar/home.png",
- "selectedIconPath": "/static/tabbar/home-s.png",
- "text": "棣栭〉",
- "key": 'index'
- },
- {
- // "pagePath": "/pages/tabbar/category/category",
- "pagePath": "/pages/commodity-square/commoditySquare",
-
- "iconPath": "/static/tabbar/category.png",
- "selectedIconPath": "/static/tabbar/category-s.png",
- "text": "鍟嗗煄",
- "key": 'shop'
- },
- {
- "pagePath": "/pages/tabbar/video/video",
- "iconPath": "/static/tabbar/video1.png",
- "selectedIconPath": "/static/tabbar/video1-selected.png",
- "key": 'video'
+ export default {
+ name: "CustomTabbar",
+ props: {
+ selected: {
+ type: String,
+ default: 'index'
},
- {
- "pagePath": "/pages/tabbar/cart/cartList",
- "iconPath": "/static/tabbar/cart.png",
- "selectedIconPath": "/static/tabbar/cart-s.png",
- "text": "璐墿杞�",
- "key": 'buyCar'
- },
- {
- "pagePath": "/pages/tabbar/user/my",
- "iconPath": "/static/tabbar/mine.png",
- "selectedIconPath": "/static/tabbar/mine-s.png",
- "text": "鎴戠殑",
- "key": 'my'
- }
- ]
- }
- },
- methods: {
- switchTab(item) {
- console.log("鎵ц鍔�", item);
- if (this.selected === item.key) return;
- uni.switchTab({
- url: item.pagePath
- });
- }
- }
-}
+ bgColor: {
+ type: String,
+ default: '#333333'
+ },
+ selectedTextColor: {
+ type: String,
+ default: '#ff573e'
+ }
+ },
+ data() {
+ return {
+ color: '#999999',
+ marginBottom: 0,
+ list: [{
+ "pagePath": "/pages/tabbar/index/home",
+ "iconPath": "/static/tabbar/home.png",
+ "selectedIconPath": "/static/tabbar/home-s.png",
+ "text": "棣栭〉",
+ "key": 'index'
+ },
+ {
+ // "pagePath": "/pages/tabbar/category/category",
+ "pagePath": "/pages/kitchen/KitchenVideo",
+
+ "iconPath": "/static/tabbar/category.png",
+ "selectedIconPath": "/static/tabbar/category-s.png",
+ "text": "绁炲帹",
+ "key": 'kitchen'
+ },
+ {
+ "pagePath": "/pages/cusbar/video/video",
+ "iconPath": "/static/tabbar/video1.png",
+ "selectedIconPath": "/static/tabbar/video1-selected.png",
+ "key": 'video'
+ },
+ {
+ "pagePath": "/pages/cusbar/cart/cartList",
+ "iconPath": "/static/tabbar/cart.png",
+ "selectedIconPath": "/static/tabbar/cart-s.png",
+ "text": "璐墿杞�",
+ "key": 'buyCar'
+ },
+ {
+ "pagePath": "/pages/tabbar/user/my",
+ "iconPath": "/static/tabbar/mine.png",
+ "selectedIconPath": "/static/tabbar/mine-s.png",
+ "text": "鎴戠殑",
+ "key": 'my'
+ }
+ ]
+ }
+ },
+ created() {
+ console.log("搴曢儴瀹夊叏鍖哄煙", uni.getSystemInfoSync().safeAreaInsets);
+ this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
+ },
+ methods: {
+ switchTab(item) {
+ console.log("鎵ц鍔�", item);
+ if (this.selected === item.key) return;
+ uni.redirectTo({
+ url: item.pagePath
+ });
+ }
+ }
+ }
</script>
<style>
-.custom-tabbar {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- height: 50px;
- display: flex;
- align-items: center;
- justify-content: space-around;
- border-top: 1px solid #ededed;
- box-sizing: border-box;
-}
+ .custom-tabbar {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ border-top: 1px solid #ededed;
+ box-sizing: border-box;
+ }
-.tabbar-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-}
-.video-add {
- width: 30px !important;
- height: 30px !important;
-}
-.tabbar-icon {
- width: 24px;
- height: 24px;
- margin-bottom: 4px;
-}
+ .tabbar-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
-.tabbar-text {
- font-size: 10px;
-}
+ .video-add {
+ width: 30px !important;
+ height: 30px !important;
+ }
+
+ .tabbar-icon {
+ width: 24px;
+ height: 24px;
+ margin-bottom: 4px;
+ }
+
+ .tabbar-text {
+ font-size: 10px;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.8.0