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

<template>
  <div class="page">
    <div class="page-top" @click="toActivity">
      <img class="logo" :src="logoImage" alt="" />
    </div>
    <div class="page-content">
      <keep-alive>
        <div class="list">
          <div
            class="section flex flex-col justify-center items-center rounded-md"
            v-for="item in list"
            :key="item.id"
          >
            <icon-image class="icon" :name="item.image"></icon-image>
            <div
              class="name mt-4"
              v-text="item.name"
              @click="toDetail(item)"
            ></div>
          </div>
        </div>
      </keep-alive>
    </div>
    <div class="page-footer flex flex-col justify-center">
      <div class="name mb-1">需要帮助吗？</div>
      <div class="contact">联系我们官方客服</div>
    </div>
  </div>
</template>

<script>
import { toAuthorization } from '~/utils'
import { isWeChat } from '~/utils/validator'
import { mapGetters } from 'vuex'
export default {
  layout: 'app-ldm',
  data() {
    return {
      logoImage: '',
      list: [],
      banner: {},
      screenWidth: ""
    }
  },
  asyncData({ store }) {
    const logoImage = store.getters.static + '/ldm-logo-rect-white.png'
    return {
      logoImage,
      list: [
        {
          id: 0,
          name: '正品授权',
          image: 'ldm-icon-approve.png',
          path: '/approve',
        },
        {
          id: 1,
          name: '云资料库',
          image: 'ldm-icon-database.png',
          path: '/docs/0',
        },
      ],
    }
  },

  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
    }
  },
  computed: {
    ...mapGetters(['authUserId', 'appId', 'routePrefix', 'accountType']),
  },
  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() {
      if(this.screenWidth > 768) {
        this.banner.jumpLink && window.open(this.banner.jumpLink)
        this.banner.jumpPcPicture && window.open(this.banner.jumpPcPicture)
      } else {
        this.banner.jumpLink && window.open(this.banner.jumpLink)
        this.banner.jumpAppPicture && window.open(this.banner.jumpAppPicture)
      }
    },
    toDetail(item) {
      // 保存登录重定向路由
      this.$setStorage(
        this.routePrefix,
        'login_redicret',
        this.routePrefix + item.path
      )
      const hasLogin = this.$store.getters.accessToken
      if (item.id > 1 && !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
      }
      const url = this.routePrefix + item.path
      this.$router.push(url)
    },
    // 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">
@media screen and (min-width: 768px) {
  .page-top {
    height: 596px;
    background: url(https://static.caimei365.com/www/authentic/pc/ldm-bg-home.png)
      no-repeat center;
    background-size: auto 596px;

    .logo {
      display: none;
    }
  }

  .page-content {
    width: 700px;
    margin: 0 auto;
    min-height: calc(100vh - 596px - 100px);
    overflow: hidden;
    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 124px;
      margin-bottom: 314px;
      .section {
        .icon {
          width: 120px;
          height: 120px;
        }

        .name {
          width: 241px;
          height: 73px;
          background: #000;
          text-align: center;
          line-height: 73px;
          color: #fff;
          font-size: 22px;
          cursor: pointer;
        }
      }
    }
  }

  .page-footer {
    position: relative;
    height: 100px;
    padding-left: 194px;
    background: linear-gradient(to bottom, #f1f1f1, #fdfdfd, #f1f1f1);
    .name {
      font-size: 24px;
      color: #9d9d9d;
    }
    .contact {
      font-size: 19px;
      color: #9d9d9d;
    }
    &::before {
      position: absolute;
      left: 120px;
      top: 50%;
      transform: translateY(-50%);
      content: '';
      display: block;
      width: 56px;
      height: 56px;
      background: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-contact1.png)
        no-repeat center;
      background-size: 56px auto;
    }
  }
}

@media screen and (max-width: 768px) {
  .page-top {
    position: relative;
    height: 59.6vw;
    background: url(https://static.caimei365.com/www/authentic/h5/ldm-bg-home.gif);
    background-size: auto 59.6vw;

    .logo {
      position: absolute;
      left: 50%;
      top: 13.7vw;
      width: 37.8vw;
      transform: translateX(-50%);
    }
  }

  .page-content {
    min-height: calc(100vh - 59.6vw - 15.4vw);
    overflow: hidden;
    .list {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10.9vw;
      .section {
        width: 80vw;
        height: 48vw;
        background: #f8f8f8;
        border: 0.1vw solid #bfbfbf;
        margin-bottom: 5.8vw;

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

        .name {
          width: 37.8vw;
          height: 11.4vw;
          background: #000;
          text-align: center;
          line-height: 11.4vw;
          color: #fff;
        }
      }
    }
  }

  .page-footer {
    position: relative;
    height: 15.4vw;
    padding-left: 12.5vw;
    background: linear-gradient(to bottom, #f1f1f1, #fdfdfd, #f1f1f1);
    .name {
      font-size: 3.2vw;
      color: #9d9d9d;
    }
    .contact {
      font-size: 2.6vw;
      color: #9d9d9d;
    }
    &::before {
      position: absolute;
      left: 2.4vw;
      top: 50%;
      transform: translateY(-50%);
      content: '';
      display: block;
      width: 7.5vw;
      height: 7.5vw;
      background: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-contact1.png)
        no-repeat center;
      background-size: 7.4vw auto;
    }
  }
}
</style>