uniapp-ZHSQ/components/nav/nav.vue

<template>
  <view class="foot-fixed">
    <view v-for="(item, index) in navList" :key="index">
      <view
        id="navIndex"
        :style="{ width: foot_width }"
        @click="jump"
        :data-idx="index"
        :data-url="item.url"
        class="foot-item"
      >
        <view class="foot-icon-box">
          <image
            class="foot-icon"
            :src="item.photo"
            mode="widthFix"
            v-if="current != index"
            :style="{
              width: item.photo.includes('footer_localLife.png')
                ? '70rpx'
                : '',
            }"
          ></image>
          <image
            class="foot-icon2"
            :src="item.photoAc"
            mode="widthFix"
            v-if="current == index"
          ></image>
        </view>

        <text class="foot-label" id="navIndexLabel">{{ item.nav_name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "nav",
  props: {
    current: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      navList: [
        {
          photo:
            "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_home.png",
          photoAc:
            "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_homeAc.png",
          nav_name: "首页",
          url: "/pages/index/index",
        },
        {
          photo:
            "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_community.png",
          photoAc:
            "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png",
          nav_name: "我的小区",
          url: "/packages/community/index/index",
        },
        {
          photo: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_localLife.png",
          photoAc: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_localLifeAc.png",
          nav_name: "本地生活",
          url: "/packages/localLife/index/index",
        },
        {
          photo:
            "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shop.png",
          photoAc:
            "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shopAc.png",
          nav_name: "优选商城",
          url: "/packages/shop/index/index",
        },
        {
          photo:
            "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_door.png",
          photoAc:
            "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png",
          nav_name: "到家服务",
          url: "/packages/homeServer/index/index",
        },
        {
          photo:
            "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_mine.png",
          photoAc:
            "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_mineAc.png",
          nav_name: "我的",
          url: "/pages/user/index",
        },
      ],
      foot_width: "16.5%",
    };
  },
  methods: {
    getFootnav() {
      let _that = this;
      uni.request({
        url: "https://zhsq.hshuishang.com/Miniapi/Index/footer_nav_list",
        method: "post",
        header: {
          "Content-type": "application/x-www-form-urlencoded",
        },
        data: {},
        dataType: "json",
        success: (result) => {
          result.data[0].url = "/pages/index/index";
          result.data[1].url = "/pages/device/device";
          result.data[2].nav_name = "手机通行";
          result.data[2].url = "/pages/phoneGo/phoneGo";

          result.data[3].url = `/packages/community/index/index`;
          result.data[4].url = "/pages/user/index";

          result.data.splice(1, 2);
          let footWidth = (100 / result.data.length).toFixed(2) + "%";
          this.navList = result.data;
          this.foot_width = footWidth;
        },
      });
    },

    //暂未开通
    NotOpen() {
      uni.showModal({
        title: "提示",
        content: "此功能暂未开通！",
        showCancel: false,
        complete: (res) => {
          if (res.cancel) {
          }
        },
      });
    },

    jump(e) {
      const ctoken = uni.getStorageSync("ctoken");
      const authen = [
        "/pages/index/index",
        "/pages/user/index",
        "/pages/user/index",
      ];
      // 除首页及个人中心页不需要鉴定ctoken， 其他tab页均需存在登录态才可访问
      if (authen.includes(e.currentTarget.dataset.url)) {
        uni.redirectTo({
          url: e.currentTarget.dataset.url,
        });
        return;
      }
      if (!ctoken) {
        uni.redirectTo({
          url: "/pages/login/login",
        });
        return;
      }

      uni.redirectTo({
        url: e.currentTarget.dataset.url,
      });
    },
  },
  mounted() {
    // this.getFootnav();
  },
};
</script>

<style>
@import url("./nav.css");
</style>