新增店员修改名称

zxl

7 天以前 b303b6945a139153688e86635346a621fe0c29b3

 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>