uk_front/pages/category/searchResult/index.vue

<template>
  <div
    class="com-main"
    element-loading-text="Loading"
    v-loading="listLoading">
    <div
      class="com-width-1400 com-margin-auto"
      v-loading="listLoading">
      <div
        class="select-category"
        v-if="cate.length">
        <p class="select-category-title">Select a Category</p>
        <ul>
          <li
            v-for="item in cate.filter(i => i.pid !== 0)"
            :key="item.id">
            <nuxt-link
              v-if="item.pid == 0"
              :to="{
                name: 'category-firstCategory',
                params: {
                  firstCategory: 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>
            <nuxt-link
              v-else-if="item.pid > 0 && item.parent?.pid == 0"
              :to="{
                name: 'category-firstCategory-secondCategory',
                params: {
                  firstCategory: item.parent.name
                    .replace(/\s+/g, '-')
                    .replace('-&', '')
                    .toLowerCase(),
                  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>
            <nuxt-link
              v-else
              :to="{
                name: 'category-firstCategory-secondCategory-thirdCategory',
                params: {
                  firstCategory: item.parent?.parent?.name
                    .replace(/\s+/g, '-')
                    .replace('-&', '')
                    .toLowerCase(),
                  secondCategory: item.parent.name
                    .replace(/\s+/g, '-')
                    .replace('-&', '')
                    .toLowerCase(),
                  thirdCategory: 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>
            Search Results<span v-show="$route.query.keyword">
              for "{{ decodeURIComponent($route.query.keyword) }}"</span
            >
          </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 class="arrangement">
              <span class="iconfont">&#xe920;</span>
              <span class="iconfont">&#xe600;</span>
            </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>
            <no-ssr>
              <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>
            </no-ssr>
          </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 {
      listLoading: true,
      activeNames: ['1'],
      cardList: [],
      shopCarBall: false,
      shopCarBallEl: null,
      ss: null,
    }
  },
  watch: {},

  async mounted() {
    // await this.getGoodsFilterList()
  },
  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;
}
@import '../category.scss';
</style>