brand-product-list.vue 2.28 KB
<template>
  <layout-app title="商品列表" class="brand-product-list">
    <LayoutScroll
      class="scroll-view"
      @scroll-end="scrollEndHandler">
      <div class="list-wrapper" v-if="brandProductList != null">
        <product-list ref="productList" :list="brandProductList" priceKey="price" :yas-params="recommendYasParams"/>
      </div>
    </LayoutScroll>
  </layout-app>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
import ScrollView from 'components/layout/scroll-view';
import ProductList from '../list/components/productList';

const STORE_PATH = 'product';
const { mapState } = createNamespacedHelpers(STORE_PATH);

export default {
  name: 'BrandProductList',
  props: ['productId'],
  components: {
    ProductList,
    ScrollView,
  },
  data() {
    return {
      inLoading: false,
      scrollOption: {
        pullDownRefresh: {
          threshold: 70,
          stop: 90,
          txt: '更新成功'
        },
        observeDOM: false,
        pullUpLoad: false,
      },

      /**
       * 商品详情页-推荐商品曝光时
       * XY_UFO_SHOW_EVENT
       * 1.P_NAME:页面名称,UFOProductDetail_LIST;
       * 2.P_PARAM:页面参数;
       * 3.I_INDEX:曝光顺序;
       * 4.PRD_SKN:商品id;
       * 5.POS_ID: 1:相关商品,2: 推荐推荐,3: 相关商品列表页面
       */
      recommendYasParams: {
        P_NAME: 'XY_UFOProductDetail',
        P_PARAM: this.$route.params.productId,
        POS_ID: 3,
      },
    };
  },
  computed: {
    ...mapState(['topLists']),
    brandProductList() {
      return this.topLists[this.$route.params.productId];
    },
  },
  asyncData({store, router}) {
    return store.dispatch(`${STORE_PATH}/fetchBrandTop`, {productId: router.params.productId});
  },
  activated() {
    this.$refs.productList && this.$refs.productList.yasShowEvent(0);
  },
  methods: {
    scrollEndHandler({y}) {
      const scrollTop = Math.abs(y);

      this.$refs.productList && this.$refs.productList.yasShowEvent(scrollTop);
    },
  },
};
</script>

<style lang="scss" scoped>
  .brand-product-list .scroll-view {
    background: #f5f5f5;
    height: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>