caimei-authentic-www/pages/_template/ph/index.vue

<template>
  <div class="page">
    <div class="page-top flex flex-col justify-center items-center" @click="toActivity">
      <!-- <img class="logo" :src="supplierInfo.logo" /> -->
      <div class="name mt-2" v-text="supplierInfo.shopName"></div>
    </div>
    <div class="page-content">
      <keep-alive>
        <div class="list">
          <div
            class="section flex flex-col justify-center items-center mt-6 mb-6"
            v-for="item in list"
            :key="item.id"
            @click="toDetail(item)"
            @mouseover="onMouseover(item)"
            @mouseleave="onMouselevel(item)"
          >
            <div class="icon-image" :class="'item' + item.id"></div>
            <div class="name mt-4" v-text="item.name"></div>
          </div>
        </div>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { toAuthorization } from '~/utils'
import { isWeChat } from '~/utils/validator'
export default {
  layout: 'app-ph',
  data() {
    return {
      list: [],
      banner: {},
      screenWidth: ""
    }
  },
  computed: {
    ...mapGetters([
      'supplierInfo',
      'authUserId',
      'appId',
      'routePrefix',
      'accountType',
    ]),
  },
  watch: {
    screenWidth: {
      handler(val) {
        const changeBanner = document.getElementsByClassName('page-top')[0]
        if (changeBanner) {
          if (val > 768) {
            if(this.banner.headPcBanner) {
              changeBanner.style.backgroundImage = 'url('+ this.banner.headPcBanner+ ')'
            }
          }else {
            if(this.banner.headAppBanner) {
              changeBanner.style.backgroundImage = 'url('+ this.banner.headAppBanner+ ')'
            }
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.initEntryItems()
  },
  mounted() {
    window.addEventListener('scroll', () => {
      this.scrollTop = document.documentElement.scrollTop
    })
    this.getBanner() // 获取轮播图
    // 监听页面尺寸变化
    this.screenWidth = document.body.clientWidth
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
  },
  beforeDestroy() {
    this.$removeStorage(this.routePrefix, 'login_redicret')
  },
  methods: {
    // 抖音挑战赛
    toActivity() {
      this.banner.jumpLink && this.$router.push(this.banner.jumpLink)
    },
    // 初始化入口图标
    initEntryItems() {
      this.list = [
        {
          id: 0,
          name: '正品授权申请入口',
          path: '/form/club-register',
          active: false,
        },
        {
          id: 1,
          name: '正品授权',
          path: '/approve',
          active: false,
        },
        {
          id: 2,
          name: '资料库',
          path: '/docs/0',
          active: false,
        },
        {
          id: 3,
          name: '意见反馈',
          path: '/feedback',
          active: false,
        },
      ]
    },

    toDetail(item) {
      const hasLogin = this.$store.getters.accessToken
      // 保存登录重定向路由
      this.$setStorage(
        this.routePrefix,
        'login_redicret',
        this.routePrefix + item.path
      )
      if (item.id > 2 && !hasLogin) {
        // 在微信浏览器中使用微信授权登录
        if (isWeChat() && this.appId && this.accountType === 2) {
          const payload = {
            authUserId: this.authUserId,
            routePrefix: this.routePrefix,
          }
          return toAuthorization(this.appId, payload)
        }
        this.$toast({ message: '请先登录', duration: 1000 })
        this.$store.commit('app/SHOW_LOGIN')
        return
      }

      if (item.id === 0) {
        const url = this.routePrefix + item.path
        this.$router.push(url)
      } else {
        const url = this.routePrefix + item.path
        this.$router.push(url)
      }
    },
    onMouseover(item) {
      const isPc = this.$store.getters.isPc
      if (!isPc) return
      item.active = true
    },
    onMouselevel(item) {
      const isPc = this.$store.getters.isPc
      if (!isPc) return
      item.active = false
    },
    // banner
    async getBanner() {
      const { data } = await this.$http.api.bannerImg(this.authUserId)
      this.banner = data
      const changeBanner = document.getElementsByClassName('page-top')[0]
      if (this.screenWidth > 768) {
        this.banner.headPcBanner && (changeBanner.style.backgroundImage = 'url('+ this.banner.headPcBanner+ ')')
      }else {
        this.banner.headAppBanner && (changeBanner.style.backgroundImage = 'url('+ this.banner.headAppBanner+ ')')
      }
    },
  },
}
</script>

<style scoped lang="scss">
// pc 端
@media screen and (min-width: 768px) {
  .page {
    @include useTheme() {
      .page-top {
        height: 360px;
        background: fetch('pc-banner-home');
        background-size: auto 360px;
        .logo {
          display: block;
          width: 120px;
          height: 120px;
          border-radius: 50%;
          background: #fff;
        }
        .name {
          font-size: 30px;
          color: #fff;
        }
      }

      .page-content {
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;

        .list {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .section {
          width: 284px;
          height: 260px;
          margin-left: auto;
          margin-right: auto;
          background-color: #fff;
          transition: all 0.4s;
          cursor: pointer;
          border-radius: 4px;

          .icon-image {
            width: 86px;
            height: 86px;
            background-size: 86px 86px;
            background-repeat: no-repeat;
            background-position: center;

            &.item0 {
              background-image: fetch('pc-icon-home-edit');
            }

            &.item1 {
              background-image: fetch('pc-icon-home-approve');
            }

            &.item2 {
              background-image: fetch('pc-icon-home-doc');
            }

            &.item3 {
              background-image: fetch('pc-icon-home-feedback');
            }
          }

          &:hover {
            transform: translateY(-10px);
            background-color: fetch('color');

            .icon-image {
              &.item0 {
                background-image: url(~assets/theme-images/common/pc-icon-edit-active.png) !important;
              }

              &.item1 {
                background-image: url(~assets/theme-images/common/pc-icon-approve-active.png) !important;
              }

              &.item2 {
                background-image: url(~assets/theme-images/common/pc-icon-doc-active.png) !important;
              }

              &.item3 {
                background-image: url(~assets/theme-images/common/pc-icon-feedback-active.png) !important;
              }
            }

            .name {
              color: #fff;
            }
          }

          .icon {
            width: 86px;
            height: 86px;
          }

          .name {
            font-size: 24px;
            color: #404040;
          }
        }
      }
    }
  }
}

// 移动 端
@media screen and (max-width: 768px) {
  .page {
    @include useTheme() {
      .page-top {
        height: 46vw;
        background: fetch('h5-banner-home');
        background-size: auto 46vw;
        .logo {
          display: block;
          width: 14.8vw;
          height: 14.8vw;
          border-radius: 50%;
          background: #fff;
        }
        .name {
          font-size: 4vw;
          color: #fff;
        }
      }

      .page-content {
        .section {
          width: 85.6vw;
          height: 58vw;
          margin-left: auto;
          margin-right: auto;
          box-shadow: 0px 0.4vw 2vw rgba(0, 6, 32, 0.08);
          border-radius: 4px;

          .icon {
            width: 20vw;
            height: 20vw;
          }

          .name {
            font-size: 4.8vw;
            color: #404040;
          }

          .icon-image {
            width: 86px;
            height: 86px;
            background-size: 86px 86px;
            background-repeat: no-repeat;
            background-position: center;

            &.item0 {
              background-image: fetch('h5-icon-home-edit');
            }

            &.item1 {
              background-image: fetch('h5-icon-home-approve');
            }

            &.item2 {
              background-image: fetch('h5-icon-home-doc');
            }

            &.item3 {
              background-image: fetch('h5-icon-home-feedback');
            }
          }
        }
      }
    }
  }
}
</style>