uk_front/pages/index.vue

<template>
  <div class="com-main">
    <carousel
      v-if="indexBanner.length"
      :banner="indexBanner"
      :height="'538px'"></carousel>
    <sub-nav :secondaryBanner="secondaryBanner"></sub-nav>
    <section class="com-width-1200 com-margin-auto">
      <pc-title :title="'Trending Products'"></pc-title>
      <div class="card-wrap com-margin-auto">
        <card
          v-for="(item, k) in indexGoodsRankLists"
          :key="k"
          :cardData="item"
          ref="card"
          @addCompare="addCompareList"></card>
        <transition
          @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter">
          <div
            class="ball"
            v-show="shopCarBall"
            ref="ball">
            <div class="linner_ball"></div>
          </div>
        </transition>
      </div>
    </section>
    <a
      :href="midBanner[0]?.link"
      target="_target"
      v-if="midBanner.length">
      <el-image
        lazy
        :src="midBanner[0]?.image"
        alt="why choose us"
        class="middle_banner"
        fit="cover"></el-image>
    </a>
    <section class="com-width-1400 com-margin-auto row-card">
      <row-card
        v-for="(item, k) in articleList"
        :key="k"
        :data="item"></row-card>
      <!-- <subscription></subscription> -->
    </section>
    <no-ssr>
      <div
        class="cookie-dialog"
        v-show="!canUseCookie">
        <div class="cookie-dialog-wrap">
          <div class="cookie-dialog-title">Our Cookies</div>
          <div class="cookie-dialog-content">
            We use cookies to provide website functionality, to analyze traffic
            on our website, personalize content, serve targeted advertisements
            and to enable social media functionality.
          </div>
          <div class="flex center">
            <button
              class="btn"
              @click="dialogAskCookieVisible = true">
              Privacy policy
            </button>
            <button
              class="btn"
              @click="allowCookie">
              Allow all
            </button>
          </div>
        </div>
      </div>
    </no-ssr>
    <el-dialog
      :visible.sync="dialogAskCookieVisible"
      width="400"
      title="Privacy policy">
      We use cookies to provide website functionality, to analyze traffic on our
      website, personalize content, serve targeted advertisements and to enable
      social media functionality. Our cookie statement provides more information
      in our Privacy Policy page.
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  layout: 'default',

  async asyncData({ $axios, req }) {
    // type:1、首页顶部banner，2、首页小图推荐，3、中部banner，4、，5、推荐文章栏目，6、底部banner，7、社交链接
    const indexBanner = await $axios.post('/uk-api/home/indexBanner', {
      type: 1,
    })
    const secondaryBanner = await $axios.post('/uk-api/home/indexBanner', {
      type: 2,
    })
    const indexGoodsRankLists = await $axios.post(
      '/uk-api/home/indexGoodsRankList'
    )
    const midBanner = await $axios.post('/uk-api/home/indexBanner', {
      type: 3,
    })
    const articleList = await $axios.post('/uk-api/home/indexBanner', {
      type: 5,
    })

    return {
      indexBanner: indexBanner.result.data,
      secondaryBanner: secondaryBanner.result.data,
      indexGoodsRankLists: indexGoodsRankLists.result,
      midBanner: midBanner.result.data,
      articleList: articleList.result.data,
    }
  },
  data() {
    return {
      indexBanner: [],
      secondaryBanner: [],
      indexGoodsRankLists: [],
      midBanner: [],
      articleList: [],
      shopCarBall: false,
      shopCarBallEl: null,
      ss: null,
      canUseCookie: false,
      dialogAskCookieVisible: false,
    }
  },
  beforeMount() {
    this.canUseCookie = !!this.$cookies.get('can-use-cookie') || false
  },
  methods: {
    allowCookie() {
      this.$cookies.set('can-use-cookie', true)
      this.$nextTick(() => {
        this.canUseCookie = this.$cookies.get('can-use-cookie') || false
      })
    },
    addCompareList(target) {
      this.shopCarBallEl = target
      this.shopCarBall = true
    },

    // 动画开始
    beforeEnter(el) {
      // 获取元素的大小及其相对于视口的位置
      if (process.client) {
        const dom = this.shopCarBallEl.getBoundingClientRect()
        const comparePosition = document
          .querySelector('.compare-list')
          .getBoundingClientRect()
        const offsetX = comparePosition.left - dom.left
        const offsetY = dom.top - comparePosition.top - 20
        el.style.display = ''
        // y轴是曲直向上的，x轴是蜿蜒的向右的
        el.style.transform = `translate3D( -${offsetX}px,${offsetY}px,0)`
      }
    },
    enter(el, done) {
      // 触发重绘，来实现动画的移动过程
      if (process.client) {
        this.ss = document.body.offsetHeight
        el.style.transform = `translate3D( 0,0,0)`
        el.addEventListener('transitionend', done)
      }
    },
    afterEnter(el) {
      this.shopCarBall = false
      el.style.display = 'none'
    },
  },
}
</script>

<style lang="scss" scoped>
.card-wrap {
  display: grid;
  justify-items: center;
  justify-content: space-evenly;
  // grid-template-columns: repeat(5,1fr);
}
.middle_banner {
  width: 100%;
  height: 580px;
  margin: 0 0 30px;
}
.ball {
  position: fixed;
  top: 86px;
  right: 19%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e90000;
  transition: all 0.5s linear;
  z-index: 9999;
  .linner_ball {
    transition: all 0.5s linear;
  }
}
.cookie-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(#222, 0.3);
  color: #fff;
  font-size: 14px;
  z-index: 1000;
  padding-top: 15vh;
  .cookie-dialog-wrap {
    border-radius: 5px;
    background-color: rgba(#000, 0.7);
    width: 25%;
    min-width: 350px;
    padding: 40px 60px;
    // position: absolute;
    // left: 50%;
    // top: 50%;
    // transform: translate(-50%, -50%);
    width: 450px;
    margin: 0 auto;
    text-align: center;
    .cookie-dialog-title {
      font-size: 20px;
    }
    .cookie-dialog-content {
      line-height: 1.6;
      text-align: left;
      padding: 20px 0 30px;
    }
    .btn {
      font-size: 16px;
      border: none;
      color: #fff;
      padding: 5px 10px;
      margin: 0 5px;
      cursor: pointer;
      font-size: 16px !important;
      width: 140px;
      padding: 10px 0;
      background-color: rgba(0, 0, 0, 0);
      border: 1px solid #fff;
      &:nth-of-type(2) {
        background-color: #fff;
        color: #222;
      }
    }
  }
}
</style>