warewms-PDA/pages/index/tabbar/tabbar.vue

<template>
  <view>
    <!-- <view class="status_bar" :style="{ height: height + 30 + 'px' }"></view> -->
    <uni-nav-bar
      left-icon="settings "
      backgroundColor="#ff0505"
      color="rgb(255, 255, 255)"
      style="font-size: 16px"
      right-icon="person-filled"
      @clickRight="backRight"
      :title="text" />
    <!--  @clickLeft="backLeft" -->
    <view v-for="(item, index) in pageData" :key="index">
      <component :is="item.component" v-if="PageCur == index"></component>
    </view>
    <view class="tabber bg-white padding-tb-xs flex text-center text-sm">
      <view
        class="tabber-item flex-sub"
        v-for="(item, index) in pageData"
        :key="index"
        @click="NavChange(index)">
        <image
          class="tabber-image"
          :src="
            PageCur == index ? item.selectedIconPath : item.iconPath
          "></image>
        <view :class="PageCur == index ? 'text-black' : 'text-gray'">
          {{ item.text }}
        </view>
      </view>
    </view>
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog
        ref="inputClose"
        title="切换车间"
        value="对话框预置提示内容!"
        placeholder="请输入内容"
        @confirm="dialogInputConfirm">
        <u-radio-group
          placement="column"
          :borderBottom="true"
          v-model="value"
          iconPlacement="right">
          <u-radio
            :customStyle="{ marginBottom: '8px' }"
            v-for="(item, index) in radiolist1"
            :key="index"
            :label="item.name"
            :name="item.name"
            @change="radioChange"></u-radio>
        </u-radio-group>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>
<script>
import index from "../index.vue";
import search from "../search/search.vue";
import news from "../news/news.vue";
import me from "../me/me.vue";
export default {
  components: {
    index,
    search,
    news,
    me,
  },
  data() {
    return {
      text: "入库管理",
      value: "测试仓库",
      height: "",
      radiolist1: [
        {
          name: "测试仓库",
          disabled: false,
        },
      ],
      pageData: [
        {
          pagePath: "pages/index/index",
          iconPath: "/static/tabBar/index.png",
          selectedIconPath: "/static/tabBar/index_cur.png",
          text: "入库管理",
          component: "index",
        },
        {
          pagePath: "pages/search/search",
          iconPath: "/static/tabBar/shop.png",
          selectedIconPath: "/static/tabBar/shop_cur.png",
          text: "出库管理",
          component: "search",
        },
        {
          pagePath: "pages/news/news",
          iconPath: "/static/tabBar/order.png",
          selectedIconPath: "/static/tabBar/order_cur.png",
          text: "仓内管理",
          component: "news",
        },
        {
          pagePath: "pages/me/me",
          iconPath: "/static/tabBar/me.png",
          selectedIconPath: "/static/tabBar/me_cur.png",
          text: "日常管理",
          component: "me",
        },
      ],
      PageCur: 0,
    };
  },
  onLoad() {
    var _this = this;
    // uni.hideBackButton();
    // 获取手机状态栏高度
    uni.getSystemInfo({
      success: function (data) {
        // 将其赋值给this
        _this.height = data.statusBarHeight;
      },
    });
  },

  methods: {
    NavChange: function (e) {
      this.PageCur = e;
      this.text = this.pageData[e].text;
      console.log("e", e);
    },
    backLeft() {
      this.$refs.inputDialog.open();
    },
    dialogInputConfirm(e) {
      console.log("e", e);
    },
    backRight() {
      uni.navigateTo({
        url: "/pages/person",
      });
    },
  },
};
</script>
<style scoped>
.status_bar {
  /* height: var(--status-bar-height); */
  /* background-color: #ff0505; */
  position: fixed;
  z-index: 1;

  width: 100%;
  top: 0;
  left: 0;
}
>>> .uni-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  font-size: 17px !important;
  font-weight: 500;
  text-overflow: ellipsis;
}
</style>
<style scoped lang="scss">
.tabber {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;

  .tabber-image {
    width: 20px;
    height: 20px;
  }
}
</style>