hlm_pl_mall_h5/pages/home/storegoodslist/GoodslistBody.vue

<template>
    <view class="scroll-view-wrapper div common-goods-list">

        <view class="scroll-view-wrapper scroll-view div goodslist-body show-goods-list" >
            <view class="div ui-goodslist-filter">
                <view class="ul filter-list">
                    <view class="li item"
                        v-for='(item, index) in sortkey'
                        v-bind:key='item.id'
                        v-on:click='setActiveSortkey(item, index)'
                        v-bind:class="{'sortactive': item.id == currentSortKey.id, 'sortnormal' : item.id != currentSortKey.id}">
                        <text class="a" v-if='!item.isMore'>{{item.name}}</text>
                        <text class="a" v-else>{{sort.name}}</text>
                        <text class="span iconfont" :class="isShowMore?'active':''" v-if="item.isMore">&#xe6ea;</text>
                    </view>
                </view>
                <view class="div sort-model" v-if='isShowMore' >
                    <view class="div" v-for='(item, index) in childSort' v-bind:key='item.id' v-on:click='getSortChild(item)' v-bind:class="{'active': item.id == sort.id}">
                        <text class="a">{{item.name}}</text>
                        <text class="span iconfont" v-if="item.id == sort.id">&#xe69b;</text>
                    </view>
                </view>
            </view>
            <!-- 无限加载滚动列表 -->
            <scroll-view class="scroll-view div flex-wrapper" @scrolltolower="getMore" scroll-y="true">
                <view class="div ui-product-body"
                     v-for='(item, index) in goodsList'
                     v-bind:key='index'
                >
                    <view class="div list" v-on:click='goDetail(item.goods_id)'>
                        <view class="div ui-image-wrapper">
                            <image mode="aspectFit" class="img product-img" :src="item.goods_image_url">
                        </view>
                        <view class="div flex-right">
                            <view class="div product-header">
                                <text class="h3 title clear-bottom">{{ item.goods_name }}</text>
                            </view>
                            <view class="div goods_salenum">销量:{{ item.goods_salenum }}</view>
                            <view class="div p-info">
                                <text class="span platform_store" v-if="item.is_platform_store">自营</text>
                                <view class="div p-price">￥<text class="span price">{{ item.goods_price }}</text></view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="div loading-wrapper" v-if="goodsList.length > 0">
                    <view  class="p common-no-more" v-if='!isMore'>没有更多了</view>
                    <uni-load-more status="loading" color='#e93b3d' v-if='isMore'></uni-load-more>
                </view>

            </scroll-view>
        </view>
        <empty-record v-if='goodsList.length <= 0 && !isMore'></empty-record>
    </view>
</template>

<script>
import { urlencode } from '@/util/common'
import EmptyRecord from '../../EmptyRecord'
import { mapState } from 'vuex'
import { getStoreGoodsList } from '../../../api/homestoredetail'
export default {
  name: 'CommonGoodsList',
  props: [],
  components: {
    EmptyRecord
  },
  data () {
    return {
      query:{},
      sortkey: [
        {
          key: '',
          order: '',
          name: '综合排序',
          isMore: true,
          id: 0,
          child: [
            {
              key: '5',
              order: '',
              name: '综合排序',
              isMore: false,
              id: 3
            },
            {
              key: '4',
              order: '',
              name: '人气最高',
              isMore: false,
              id: 4
            },
            {
              key: '2',
              order: '',
              name: '价格高到低',
              isMore: false,
              id: 5
            },
            {
              key: '2',
              order: '1',
              name: '价格低到高',
              isMore: false,
              id: 6
            }
          ]
        },
        {
          key: '3',
          order: '',
          name: '销量排序',
          isMore: false,
          id: 1
        },
        {
          key: '1',
          order: '',
          name: '新品',
          isMore: false,
          id: 2
        }
      ], // 排序数据
      currentSortKey: {}, // 当前选中的排序
      childSort: [], // 综合筛选
      sort: {}, // 综合筛选子集
      isShowMore: false, // 是否显示筛选模态框
      params: {
        store_id: '',
        gc_id: '',
        is_exchange: 0,
        is_hot: 0,
        activity: null,
        sort_key: '', // 排序键
        sort_order: '', // 排序键, //排序值
        page: 0,
        keyword: ''
      },
      goodsList: [], // 商品列表
      loading: false, // 是否加载更多
      isMore: true // 是否有更多
    }
  },
  computed: {
    ...mapState({

    })
  },
  mounted(){
    var pages = getCurrentPages()
    var page = pages[pages.length - 1]
    this.query = page.options

    this.params.store_id=this.query.id ? this.query.id : ''
    this.params.gc_id=this.query.gc_id ? this.query.gc_id : ''
    this.params.sort_key=this.query.sort_key ? this.query.sort_key : ''
    this.params.sort_order=this.query.sort_order ? this.query.sort_order : ''
    this.params.keyword=this.query.keyword ? this.query.keyword : ''
    
    this.currentSortKey = this.sortkey[0]
    this.childSort = this.currentSortKey.child
    this.sort = this.childSort[0]
    this.getMore()
  },
  methods: {
    // closeFiler: 关闭下拉筛选模态框
    closeFiler () {
      this.isShowMore = false
    },
    // isShowDroupMenu: 点击显示下拉框， 并且显示模态框
    isShowDroupMenu () {
      let item = this.currentSortKey
      if (item.isMore) {
        this.isShowMore = true
      } else {
        this.isShowMore = false
      }
    },
    /**
             *  setActiveSortkey: 点击切换数据并设置选中的样式
             *  @param: item 当前选中的item
             */
    setActiveSortkey (item, index) {
      this.currentSortKey = item
      if (item.isMore) {
        this.isShowMore = !this.isShowMore
      } else {
        this.closeFiler()
        this.getValue()
      }
    },
    /**
             *  getValue: 向父级组件发送改变列表事件， 并传递当前的sort_key， sort_order
             */
    getValue () {
      let data = this.getSortValue()
      let res = data
      this.params.page = 1
      this.goodsList = []
      this.loading = false
      this.params=this.setParamsByData(res)
      this.getGoodsList()
    },
    /**
             *  getSortValue: 获取排序值
             */
    getSortValue () {
      let sort = this.currentSortKey
      let value = { 'sort_key': '', 'sort_order': '' }
      if (sort.isMore) {
        value.sort_key = this.sort.key
        value.sort_order = this.sort.order
      } else {
        value.sort_key = sort.key
        value.sort_order = sort.order
      }
      return value
    },
    /**
             *  getSortChild: 获取综合筛选的子集， 关闭父级的阴影模态框， 关闭子集， 获取列表数据
             *  @param: item 模态框的item
             */
    getSortChild (item) {
      this.sort = item
      this.isShowMore = !this.isShowMore
      this.getValue()
    },
    /*
            * getMore: 无限滚动加载
            */
    getMore () {
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.loading = false
        this.getGoodsList(true)
      }
    },
    /**
             * getGoodsList: 获取商品列表
             * @param：  ispush ？ true ：false 是否需要向商品列表追加数据
             */
    getGoodsList (ispush) {
      getStoreGoodsList(
        this.params
      ).then(res => {
        this.buildData(ispush, res)
      })
    },
    /**
             * getList: 构建数据
             * @param: ispush 是否改变向元数据追加数据
             * @param: res 接口请求返回的数据
             */
    buildData (ispush, res) {
      if (res) {
        if (ispush) {
          this.goodsList = this.goodsList.concat(res.result.goods_list)
        } else {
          this.goodsList = res.result.goods_list
        }
        this.isMore = res.result.hasmore
      }
    },
    /**
             * 根据事件传递的值来对请求列表重新赋值
             * @param data 事件传递的参数
             */
    setParamsByData (data) {
      let params = this.params
      for (let item in params) {
        for (let list in data) {
          if (item === list) {
            params[item] = data[list]
          }
        }
      }
      return params
    },
    goDetail (goods_id) {
      uni.navigateTo({url: '/pages/home/goodsdetail/Goodsdetail'+'?'+urlencode( { 'goods_id': goods_id } )})
    }
  }
}
</script>

<style lang='scss' scoped>
    .scroll-view-wrapper{display: flex;flex-direction: column;}
    .scroll-view{flex:1}
    .goodslist-body{background: #fff;}
    .ui-goodslist-filter {
        width: auto;
        padding-top:.5rem;
        .ul.filter-list{
            display: flex;
            width: auto;
            justify-content: space-around;
            align-content: center;
            align-items: center;
            border: 0;
            .li{
                font-size:$subFontSize;
                color: #333;
                border-bottom:0.1rem solid transparent;
                position: relative;
                flex-basis:5rem;
                text-align: center;
                height:2.1rem;
                padding: 0;
                line-height:2.1rem;
                .a {
                    height:2.1rem;
                    display: inline-block;
                }
                .img {
                    height:0.2rem;
                    width:0.4rem;
                    vertical-align: middle;
                }
                .iconfont{display: inline-block}
            }
            .li.sortactive {
                .a {
                    color:$primaryColor;
                }
                .iconfont{color:$primaryColor;}
                .iconfont.active{transform: rotate(180deg);}
            }
            .li.sortnormal {
                border-bottom-color: transparent;
                .a {
                    color: #333;
                }
            }
            .arrow-icon {
                width: 0.6rem;
                height: 0.6rem;
            }
        }
        .sort-model {
            position: absolute;
            left: 0;
            width: 100%;
            z-index: 10;
            .div {
                color: #333;
                padding:0.75rem;
                font-size:$fontSize;
                background-color: #fff;
                margin: 0;
                border-bottom: 1px solid #E8EAED;
                cursor: pointer;
                display: flex;
                width: auto;
                justify-content: space-between;
                align-content: center;
                align-items: center;
                .img {
                    float: right;
                    width:0.8rem;
                    height:0.8rem;
                }
                &.active {
                    color: $primaryColor;
                }
            }
        }
    }
    .ui-product-body {
        .list {
            display: flex;
            width: auto;
            align-items: center;
            justify-content: space-between;
            margin:0.55rem $pageSpace;
            position: relative;
            box-shadow: 0px 4px 4px #f7f7f7;
            .div.ui-image-wrapper {
                width:6rem;
                height:6rem;
                position: relative;
                display: flex;
                justify-content: center;
                align-content: center;
                align-items: center;
                flex-basis: 6rem;
                flex-shrink: 0;
                background-position:center center!important;
                background-size:5rem 5rem;
                background-repeat:no-repeat;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                .img.product-img{
                    width: 6rem;
                    height: 6rem;
                    flex-basis: 6rem;
                    flex-shrink: 0;
                    border-radius: .4rem;
                }
                .img.product-img[lazy=loading] {
                    width: 1.5rem;
                    height: 1.5rem;
                }
                .img.product-im[lazy=error] {
                    width: 1.5rem;
                    height: 1.5rem;
                }
                .img.product-img[lazy=loaded] {
                    width: 6rem;
                    height: 6rem;
                    flex-basis: 6rem;
                    flex-shrink: 0;
                    background:rgba(255,255,255,1);
                }

                .span {
                    position: absolute;
                    height:1rem;
                    background:rgba(243,244,245,1);
                    line-height: 1rem;
                    text-align: center;
                    font-size:$subFontSize;
                    color:$primaryColor;
                    width: 6rem;
                    bottom: 0;
                    left: 0;
                }
            }
            .flex-right {
                padding-left: 0.7rem;
                width: 100%;
                position:relative;
                .title {
                    color: #333;
                    font-size:$subFontSize;
                    height:2rem;
                    line-height:1rem;
                    font-weight: normal;
                    display:-moz-box;
                    display:-webkit-box;
                    -webkit-line-clamp: 2;
                    -moz-line-clamp: 2;
                    -moz-box-orient:vertical;
                    -webkit-box-orient:vertical;
                    box-orient:vertical;
                    overflow: hidden;
                    margin-bottom:0.4rem;
                    &.clear-bottom {
                        margin-bottom: 0;
                    }
                }
                .product-header {
                    margin-bottom: .5rem;
                    display: flex;
                    align-items: center;
                }
                .p-price {
                    color: $primaryColor;
                    font-size:$fontSize;
                    flex:1;
                    .price{font-size:$mainFontSize}
                }
                .goods_salenum{font-size:$fontSize;color:$descTextColor;}
                .p-info {
                    display: flex;
                    align-items: center;
                    margin-top:.5rem;
                    .platform_store{font-size:$h6;color: #fff;background: $primaryColor;border-radius: .13rem;padding:.1rem .2rem;margin-right: .2rem;}
                }
                .add-cart{
                    background: $primaryColor;border-radius: 50%;text-align:center;position: absolute;right: .8rem;bottom:.2rem;width:2rem;height:2rem;line-height:2rem;
                    .i{font-size:$h1;color:#fff;}
                }
            }
        }
    }
</style>