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': true, 'scan-item': item.isScan }">
        <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-icon3': item.photo.includes('footer_richScan.png'), 'foot-icon2': !item.photo.includes('footer_richScan.png') }"
            :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>

import { NavgateTo } from "../../utils";

export default {
  name: "nav",
  props: {
    current: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    foot_width() {
      // 动态计算导航项宽度，确保均匀分布
      return (100 / this.navList.length).toFixed(2) + '%';
    }
  },
  data() {
    return {
      navList: [
        {
          photo:
            "https://static.hshuishang.com/property-img-file/footer_home.png",
          photoAc:
            "https://static.hshuishang.com/property-img-file/footer_homeAc.png",
          nav_name: "智慧首页",
          url: "/pages/index/index",
        },
        {
          photo:
            "https://static.hshuishang.com/property-img-file/footer_facility.png",
          photoAc:
            "https://static.hshuishang.com/property-img-file/footer_facilityAc.png",
          nav_name: "智能设备",
          url: "/packages/smartDevice/index/index",
        },
        {
          photo:
            "https://static.hshuishang.com/property-img-file/footer_richScan.png",
          photoAc:
            "https://static.hshuishang.com/property-img-file/footer_richScan.png",
          url: "",
          isScan: true,
        },
        {
          photo:
            "https://static.hshuishang.com/property-img-file/footer_community.png",
          photoAc:
            "https://static.hshuishang.com/property-img-file/footer_communityAc.png",
          nav_name: "我的小区",
          url: "/packages/community/index/index",
        },
        // {
        //   photo: "https://static.hshuishang.com/property-img-file/footer_localLife.png",
        //   photoAc: "https://static.hshuishang.com/property-img-file/footer_localLifeAc.png",
        //   nav_name: "本地生活",
        //   url: "/packages/localLife/index/index",
        // },
        // {
        //   photo:
        //     "https://static.hshuishang.com/property-img-file/footer_shop.png",
        //   photoAc:
        //     "https://static.hshuishang.com/property-img-file/footer_shopAc.png",
        //   nav_name: "优选商城",
        //   url: "/packages/shop/index/index",
        // },
        // {
        //   photo:
        //     "https://static.hshuishang.com/property-img-file/footer_door.png",
        //   photoAc:
        //     "https://static.hshuishang.com/property-img-file/footer_communityAc.png",
        //   nav_name: "到家服务",
        //   url: "/packages/homeServer/index/index",
        // },
        {
          photo:
            "https://static.hshuishang.com/property-img-file/footer_mine.png",
          photoAc:
            "https://static.hshuishang.com/property-img-file/footer_mineAc.png",
          nav_name: "个人中心",
          url: "/pages/user/index",
        },
      ],
    }
  },
  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 url = e.currentTarget.dataset.url;
      const index = e.currentTarget.dataset.idx;
      const item = this.navList[index];

      // 检查是否为扫码功能
      if (item.isScan) {
        // 调用uni-app的扫码API
        uni.scanCode({
          success: (res) => {
            // 扫码成功后的处理逻辑
            console.log('扫码结果:', res);

            // 检查res中是否包含path字段
            if (res.path) {
              console.log('扫码结果中的path:', res.path);

              // 解析path字段，提取scene参数的值
              const pathParts = res.path.split('?');
              if (pathParts.length > 1) {
                const queryParams = pathParts[1].split('&');
                for (const param of queryParams) {
                  const [key, value] = param.split('=');
                  if (key === 'scene') {
                    const params = {
                      id: value
                    }
                    uni.setStorageSync('merchantInfo', params);
                    NavgateTo('/packages/localLife/detail/index')
                    break;
                  }
                }
              }
            }
          },
          fail: (err) => {
            console.log('扫码失败:', err);
          }
        });
        return;
      }

      // 检查url是否存在且不为空
      if (!url || url.trim() === '') {
        this.NotOpen();
        return;
      }

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

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

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