From b303b6945a139153688e86635346a621fe0c29b3 Mon Sep 17 00:00:00 2001 From: zxl <763096477@qq.com> Date: 星期四, 17 七月 2025 18:07:18 +0800 Subject: [PATCH] 新增店员修改名称 --- components/custom-tabbar.vue | 226 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 114 insertions(+), 112 deletions(-) diff --git a/components/custom-tabbar.vue b/components/custom-tabbar.vue index 5d2cf8b..5fb34e7 100644 --- a/components/custom-tabbar.vue +++ b/components/custom-tabbar.vue @@ -1,124 +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", - "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/tabbar/video/video", + "iconPath": "/static/tabbar/video1.png", + "selectedIconPath": "/static/tabbar/video1-selected.png", + "key": 'video' + }, + { + "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' + } + ] + } + }, + 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.switchTab({ + 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