products/uni-shop/layout/layout-shop-screen/main.vue

<template>
  <view class="screen_all flex container">
    <view class="header row">
      <view class="header-aside flex-all-1"
            v-for="(item,index) in screenData"
            :key="index"
            :class="{
          'header-aside-active': screenOption.select === index
        }"
            @click="triggerScreen(index)"
      >
        <!--    排序    -->
        <view v-if="item.type==='order'" class="screen_all row center">
          <view>{{item.label}}</view>
          <view class="header-aside-order flex center"
                :class="['header-aside-'+screenOption.value]"
          >
            <text class="iconfont iconfont-up header-aside-icon"></text>
            <text class="iconfont iconfont-down header-aside-icon"></text>
          </view>
        </view>
        <view v-else class="screen_all center relative">{{item.label}}
          <view class="absolute header-aside-line center">
            <view></view>
          </view>
        </view>
      </view>
    </view>
    <view class="flex-all-1 shop-container">
      <flat-list
          @changeData="flatChangeData"
          background="#F6F6F6"
          @fetch="fetch"
          :mode="skeleton?'skeleton':undefined"
          :skeleton="skeleton"
          :ref="base_flat_id"
      >
        <view class="row wrap jSpaceBetween shop-padding">
          <layout-shop
              v-for="(item,index) in base_flat_data.data"
              :key="index"
              :item="item"
          ></layout-shop>
        </view>
      </flat-list>

    </view>

  </view>
</template>

<script>
import screenData from './data/screen';
import layoutShop from '@/layout/layout-shop/main.vue';
import flatList from '@/components/flat-list/src/main.vue';
import mixins from './mixins';
import Throttle from '@/utils/tool/throttle';
import props from './props';
export default {

  props,

  data(){
    return {
      screenData,
      screenOption:{
        select:0,
        value:0
      },
      skeleton:undefined
    }
  },

  mixins,

  methods:{
    triggerScreen(index){
      if (this.screenOption.select === index) {

        if (this.screenData[index].type === 'order') {
          this.screenOption.value = this.screenOption.value === 1 ? 2 : 1;
          this.reloadFetch();
        }

      } else {

        this.screenOption.select = index;


        if (this.screenData[index] && this.screenData[index].type === 'order') {
          this.screenOption.value = 1;
        }
        this.reloadFetch();
      }

    },
    fetch(obj){

      let params = {};

      let item = this.screenData[this.screenOption.select];

      if (item && item.key ) {
        params[item.key] = this.screenOption.value;
      }
      //
      return this.$request({
        url:'product/getProductList',
        data:{
          is_recommend:0,
          ...params,
          is_datebuy: this.dateBuy || 0
        },
        page:obj
      }).then((data)=>{

        if (this.skeleton === undefined) {
          this.skeleton = data.data.length;
        }

        return obj.success(data.data);
      }).catch(obj.fail);
    },

    reloadFetch(){
      return this.flatReload(1,true);
    }

  },

  components:{
    layoutShop,
    flatList
  },

  created(){
    this.throttle = new Throttle({
      delay:200,
      first:false,
      handle: this.reloadFetch,
      call: this
    });
    this.reloadFetch = this.throttle.supper;
  },

  beforeDestroy(){
    this.throttle && this.throttle.destroy();
  }

}
</script>

<style scoped lang="scss" src="./style.scss"></style>