uk_front/pages/category/_firstCategory/index.vue

<template>
  <div
    class="com-main"
    element-loading-text="Loading"
    v-loading="listLoading">
    <a v-if="productsList.cate_img">
      <img
        :src="
          productsList.cate_img && !$mediaRegExp.test(productsList.cate_img)
            ? $OSS_PREFIX + productsList.cate_img
            : productsList.cate_img
        " />
    </a>
    <div class="com-width-1400 com-margin-auto">
      <div
        class="select-category"
        v-if="cate.length">
        <p class="select-category-title">Select a Category</p>
        <ul>
          <li
            v-for="item in cate"
            :key="item.id">
            <nuxt-link
              :to="{
                name: 'category-firstCategory-secondCategory',
                params: {
                  firstCategory: $route.params.firstCategory,
                  secondCategory: item.name
                    .replace(/\s+/g, '-')
                    .replace('-&', '')
                    .toLowerCase(),
                },
              }">
              <div class="image">
                <img
                  :src="
                    item.style && !$mediaRegExp.test(item.style)
                      ? $OSS_PREFIX + item.style
                      : item.style
                  " />
              </div>
              <p>{{ item.name }}</p>
            </nuxt-link>
          </li>
        </ul>
      </div>
      <div class="metal-hardPlastic">
        <div class="metal-title">
          <p>{{ cate[0]?.name }}</p>
          <div>
            <div class="sort">
              <el-dropdown
                trigger="click"
                @command="handleCommand">
                <span class="el-dropdown-link">
                  Sort by {{ command }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="command in commandList"
                    :command="command.value"
                    :key="command.label"
                    >{{ command.label }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div class="metal-content">
          <div class="metal-content-left">
            <category-filter
              :leadTimeList="leadTimeList"
              :colourList="colourList"
              :collectionsList="collectionsList"
              :complianceList="complianceList"
              :featureList="featureList"
              :decorationList="decorationList"
              :priceRange1="priceRange1"
              :priceRange2="priceRange2"
              @reset="reset"
              @getList="getList"
              @handleChangeColor="handleChangeColor"
              @handleChangeFeature="handleChangeFeature"
              @handleChangePrice="handleChangePrice"
              @handleChangeCollection="handleChangeCollection"
              @handleChangeCompliance="handleChangeCompliance"
              @handleChangeDecoration="handleChangeDecoration"
              @handleChangeLeadtime="handleChangeLeadtime"
              @handleChangeQuantity="handleChangeQuantity"></category-filter>
          </div>

          <div
            v-if="listLoading"
            class="metal-content-right"></div>
          <div
            class="metal-content-right"
            v-show="cardList.length > 0 && !listLoading">
            <div class="metal-content-right-item">
              <card
                class="card"
                v-for="(item, index) in cardList"
                :key="parseInt(index)"
                :cardData="item"
                @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>
            <!-- <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.limit"
              @pagination="getList"
            /> -->
            <infinite-loading
              spinner="spiral"
              @infinite="infiniteHandler"
              :identifier="computedProductList"
              :distance="200"
              class="infinite-loading-wrap">
              <div
                v-loading="true"
                slot="spinner"
                element-loading-text="Loading"
                element-loading-spinner="el-icon-loading"></div>
              <div
                class="loading-text"
                slot="no-more"></div>
              <div
                slot="error"
                slot-scope="{ trigger }">
                Error Data, click
                <a
                  href="javascript:;"
                  @click="trigger"
                  >here</a
                >
                toretry
              </div>
            </infinite-loading>
          </div>
          <div
            class="metal-content-right-item empty"
            v-show="cardList.length === 0 && !listLoading">
            <category-no-data></category-no-data>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'
import categoryMixin from '@/mixins/category'
export default {
  components: {
    InfiniteLoading,
  },
  mixins: [categoryMixin],
  data() {
    return {
      total: 0,
      listQuery: {
        page: 1,
        limit: 12,
      },
      listLoading: true,
      shopCarBall: false,
      shopCarBallEl: null,
      ss: null,
    }
  },
  watch: {},

  async created() {},
  methods: {
    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>
.com-main a img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}
@import '../category.scss';
</style>