YXGJ/pages/index/modules/bottomSuspensionFrame.vue

<template>
  <swiper
    class="box"
    :current-item-id="current"
    circular
    vertical
    disable-touch
  >
    <swiper-item class="swiper-item" item-id="index">
      <view
        class="item"
        v-for="item in index"
        :key="item.name"
        @click="
          item.name == showPageName ? update() : onClick('index', item.name)
        "
      >
        <u-loading-icon v-if="item.loading" mode="circle" />
        <text
          v-else
          :style="{ fontWeight: item.name == showPageName ? 'bold' : 'normal' }"
        >
          {{ item.name }}
        </text>
      </view>
      <image
        v-if="!sightseer"
        class="image"
        src="/static/c+selected.svg"
        mode="widthFix"
        @click="onClick('cloud', '工作台')"
      />
    </swiper-item>

    <swiper-item v-if="!sightseer" class="swiper-item" item-id="cloud">
      <image
        class="image"
        :src="
          showPageName == '工作台'
            ? '/static/c+unselected.svg'
            : '/static/c+selected.svg'
        "
        mode="widthFix"
        @click="onClick('cloud', '工作台')"
      />
      <block v-for="item in cloud" :key="item.name">
        <block v-if="item.name == '工作台'" />
        <view
          v-else
          class="item"
          @click="
            item.name == showPageName ? update() : onClick('cloud', item.name)
          "
        >
          <u-loading-icon v-if="item.loading" mode="circle" />
          <text
            v-else
            :style="{
              fontWeight: item.name == showPageName ? 'bold' : 'normal',
            }"
          >
            {{ item.name }}
          </text>
        </view>
      </block>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      sightseer: true,
      current: "index",
      showPageName: "",
      indexLastPage: "",
      cloudLastPage: "",
      index: [
        {
          name: "首页",
        },
        {
          name: "活动",
        },
        {
          name: "案例",
        },
        {
          name: "视频",
        },
      ],
      cloud: [
        {
          name: "工作台",
        },
        {
          name: "资料库",
        },
        {
          name: "商学院",
        },
        {
          name: "单品",
        },
        {
          name: "首页",
        },
      ],
      countDown: null,
    };
  },
  props: {
    onChange: {
      type: Function,
    },
  },
  mounted() {
    this.init();
    // #ifdef !MP-WEIXIN
    this.onClick(this.$parent.$parent.swiperItemID, this.$parent.$parent.page);
    // #endif
  },
  methods: {
    init() {
      this.isInitializeLogin(render.bind(this));
      function render() {
        let sightseer = uni.getStorageSync("userMsg").usertype == 99;
        this.sightseer = sightseer;
        if (sightseer && !this.index.some((v) => v.name == "我的"))
          this.index = this.index.concat({ name: "我的" });
      }
    },
    onClick(current, name, update = false, params = null) {
      if (name == "首页") current = "index";
      const item = this[current].find((v) => v.name == name),
        that = this;
      if (typeof item.loading != "boolean" || update) {
        item.loading = true;
        update = true;
      }
      this[current + "LastPage"] = name;
      this.current = current;
      this.showPageName = name;
      this.$emit("onChange", {
        current,
        name,
        update,
        callBack,
        params,
      });
      function callBack(loading = false) {
        item.loading = loading;
        that[current] = JSON.parse(JSON.stringify(that[current]));
      }
    },
    update() {
      if (this.countDown) {
        this.onClick(this.current, this.showPageName, true);
      } else {
        this.countDown = setTimeout(() => {
          clearTimeout(this.countDown);
          this.countDown = null;
        }, 300);
      }
    },
  },
};
</script>

<style lang="scss">
.box {
  position: fixed;
  width: 355px;
  height: 50px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
  border-radius: 50px;
  left: 10px;
  bottom: 20px;
  z-index: 3;

  .swiper-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 355px;
    height: 50px;
    padding: 0 30px;
    box-sizing: border-box;

    .item {
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-size: 16px;
      color: #666666;
      padding: 10px;
    }

    .image {
      width: 40px;
      padding: 4px;
    }
  }
}
</style>