hlm_pl_mall_h5/pages/home/goodslist/GoodslistBody.vue

<template>
<view style="position: absolute;top:0;right:0;left:0;bottom:0"><view style="height:100%" 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 class="li item" @click="showPopup('showAttribute')" v-if="attribute.attr_array.length!=0 || attribute.brand_array.length!=0">
                        <text class="a">筛选</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>
            <view class="scroll-view div" style="position:relative">
            <!-- 无限加载滚动列表 -->
            <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div flex-wrapper" :class="showstate?'goodslist':'goodsimg'" @scrolltolower="getMore" scroll-y="true">
				<view class="product-list">
					<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" v-if="showstate == false" :style="'width:'+windowWidth+'px;height:'+windowWidth+'px'">
								<image mode="aspectFit" class="img product-img" :src="item.goods_image_url">
							</view>
							<view class="div ui-image-wrapper" v-else>
								<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">
									<view class="div p-price">
										¥<text class="span price">{{ item.goods_price }}</text>
									</view>
									<text v-if="item.is_platform_store" class="span platform_store">自营</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>
				<empty-record v-if='goodsList.length <= 0 && !isMore'></empty-record>
            </scroll-view>
        </view>
		<view class="show-wrapper" :class="showstate?'showlist':'showimg'" @click='Changeshow()'></view>
        </view>
        <!--属性筛选Begin-->
        <uni-popup background-color="#fff" ref="showAttribute" type="right">
            <view :style="'width:'+(screenWidth*.8)+'px'" class="common-popup-wrapper">
            <view class="div filter-attribute">
                <view class="dl" v-if="attribute.brand_array.length!=0">
                    <view class="dt">品牌</view>
                    <view class="dd clearfix">
                        <text class="a" v-for="(item, index) in attribute.brand_array" :key="index" :class="{'selected':params.b_id==item.brand_id}" @click="checkBrand(item)">{{item.brand_name}}</text>
                    </view>
                </view>
                <view class="dl" v-for="(attr_info, attr_info_key, attr_info_index) in attribute.attr_array" :key="attr_info_key">
                    <view class="dt">
                        {{attr_info.name}}
                    </view>
                    <view class="dd clearfix">
                        <text class="a" v-for="(item,index) in attr_info.value" :key="index" :class="{'selected':checked_attribute[attr_info_index]==item.attrvalue_id}"  @click="checkAttribute(attr_info_index,item)">{{item.attrvalue_name}}</text>
                    </view>
                </view>
                <view class="div common-btn ds-button-large mt-10" @click="confirmAttribute()">确定</view>
                <view class="div common-btn ds-button-large default mt-10"  @click="cancelAttribute()">重置</view>
            </view>
        </view>
        </uni-popup>
        <!--属性筛选End-->

    </view>
    </view>
</template>

<script>
import { urlencode,getFontSize } from '@/util/common'
import EmptyRecord from '../../EmptyRecord'
import { mapState } from 'vuex'
import { searchGoodsList, getAttribute } from '../../../api/homesearch'
export default {
  name: 'CommonGoodsList',
  props: [],
  components: {
    EmptyRecord
  },
  data(){
    return {
      query:{},
      screenWidth:0,
      sortkey: [
        {
          key: '',
          order: '',
          name: '综合排序',
          isMore: true,
          id: 0,
          child: [
            {
              key: '',
              order: '',
              name: '综合排序',
              isMore: false,
              id: 3
            },
            {
              key: 'goods_click',
              order: '',
              name: '人气最高',
              isMore: false,
              id: 4
            },
            {
              key: 'goods_price',
              order: '',
              name: '价格高到低',
              isMore: false,
              id: 5
            },
            {
              key: 'goods_price',
              order: 'asc',
              name: '价格低到高',
              isMore: false,
              id: 6
            }
          ]
        },
        {
          key: 'goods_salenum',
          order: '',
          name: '销量排序',
          isMore: false,
          id: 1
        },
        {
          key: 'goods_addtime',
          order: '',
          name: '新品',
          isMore: false,
          id: 2
        }
      ], // 排序数据
	  showstate: false, //显示状态
      currentSortKey: {}, // 当前选中的排序
      childSort: [], // 综合筛选
      sort: {}, // 综合筛选子集
      isShowMore: false, // 是否显示筛选模态框
      params: {
        b_id: '',
        cate_id: '',
        a_id: '', // 规格属性
        is_exchange: 0,
        is_hot: 0,
        activity: null,
        sort_key: '', // 排序键
        sort_order: '', // 排序键, //排序值
        page: 0,
        keyword: '',
        xianshi: ''
      },
      // 当前商品分类所对应的属性
      attribute: {
        brand_array: [],
        attr_array: []
      },
      checked_attribute: [], // 当前已选择的属性对应的值
      goodsList: [], // 商品列表
      loading: false, // 是否加载更多
      isMore: true // 是否有更多
    }
  },
  computed: {
    windowWidth: function () {
      const res = uni.getSystemInfoSync()
      var width=res.windowWidth
      var size=getFontSize()
      return (width-3*.6*size)/2
    },
  },
  mounted(){
    var pages = getCurrentPages()
    var page = pages[pages.length - 1]
    this.query = page.options

    this.params.b_id=this.query.b_id ? this.query.b_id : ''
    this.params.cate_id=this.query.cate_id ? this.query.cate_id : ''
    this.params.a_id=this.query.a_id ? this.query.a_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.keywords ? this.query.keywords : ''
    this.params.xianshi=this.query.xianshi ? this.query.xianshi : ''
    
    this.screenWidth=uni.getSystemInfoSync().screenWidth
    
    this.currentSortKey = this.sortkey[0]
    this.childSort = this.currentSortKey.child
    this.sort = this.childSort[0]
    // 获取属性参数
    getAttribute(this.params).then(res => {
      this.attribute = res.result
    })
    this.getMore()
  },
  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    // 品牌筛选
    checkBrand (item) {
      this.params.b_id = item.brand_id
    },
    // 属性筛选
    checkAttribute (index, item) {
      this.checked_attribute.splice(index, 1, item.attrvalue_id)
      this.params.a_id = this.checked_attribute.join('_')
    },
    confirmAttribute () {
      this.hidePopup('showAttribute')
      this.getGoodsList()
    },
    cancelAttribute () {
      this.checked_attribute = []
      this.params.a_id = ''
      this.params.b_id = ''
    },
    // 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.isMore = true
      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) {
      searchGoodsList(
        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 } )})
    },
	//切换商品展示
	Changeshow(){
		if(this.showstate == false){
			this.showstate = true
		}else{
			this.showstate = false
		}
	}
  }
}
</script>

<style lang='scss' scoped>
    .scroll-view-wrapper{display: flex;flex-direction: column;}
    .scroll-view{flex:1}
    .common-goods-list{}
    .ui-goodslist-filter {
        width: auto;
        padding-top:.5rem;
        background: #fff;
        .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: .1rem solid transparent;
                position: relative;
                flex-basis: 4.54rem;
                text-align: center;
                height: 1.9rem;
                padding: 0;
                line-height: 1.9rem;
                .a {
                    height: 1.9rem;
                    display: inline-block;
                }
                .img {
                    height: .18rem;
                    width: .36rem;
                    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: .54rem;
                height: .54rem;
            }
        }
        .sort-model {
            position: absolute;
            left: 0;
            width: 100%;
            z-index: 10;
            .div {
                color: #333;
                padding: .68rem;
                font-size: $fontSize;
                background-color: #fff;
                margin: 0;
                border-bottom: .045rem solid #E8EAED;
                cursor: pointer;
                display: flex;
                width: auto;
                justify-content: space-between;
                align-content: center;
                align-items: center;
                .img {
                    float: right;
                    width: .7rem;
                    height: .7rem;
                }
                &.active {
                    color: $primaryColor;
                }
            }
        }
    }
    .goodslist-body{background: #fff}
	.flex-wrapper.goodslist{
		.product-list{
			padding-right: .6rem;
			.ui-product-body {
				.list {
					display: flex;
					width: auto;
					align-items: center;
					justify-content: space-between;
					margin: .5rem $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:4.54rem 4.54rem;
						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.36rem;
							height: 1.36rem;
						}
						.img.product-im[lazy=error] {
							width: 1.36rem;
							height: 1.36rem;
						}
						.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:.9rem;
							background:rgba(243,244,245,1);
							line-height: .9rem;
							text-align: center;
							font-size:$fontSize;
							color:$primaryColor;
							width: 6rem;
							bottom: 0;
							left: 0;
						}
					}
					.flex-right {
						padding-left: .63rem;
						width: 100%;
						position:relative;
						.title {
							color: #333;
							font-size:$subFontSize;
							height:2rem;
							line-height:1rem;
							height:2rem;
							font-weight: normal;
							overflow: hidden;
							margin-bottom: .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: .5rem;}
						}
					}
				}
			}
		}
	}
	
	.flex-wrapper.goodsimg{
		.product-list{
			display: flex;
			flex-wrap: wrap;
			padding-right: .6rem;
			.ui-product-body{
				flex-direction: column;
				justify-content: flex-end;
				width:50%;box-sizing:border-box;
				.list{
					box-shadow: 0px 2px 4px #ececec;
					margin-left:$pageSpace;
					margin-bottom:.5rem;
					border-radius:.4rem;
					.ui-image-wrapper{
						.product-img{
							align-self: center;
							width:100%;
							box-sizing:border-box;
							border-radius:.4rem;
						}
					}
					.flex-right{
						padding:0 .3rem;
						.product-header{
							color: $formInputColor;
							font-size: $subFontSize;
							line-height:.8rem;
							height:1.6rem;
							margin-top: 0.4rem;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}
						.goods_salenum{
							color: #A2A6AD;
							font-size: 0.6rem;
							margin: .2rem 0;
						}
						.p-info{
							display: flex;
							justify-content: space-between;
							padding-bottom:.5rem;
							.p-price{
								color: $primaryColor;
								font-size:$fontSize;
								.price{
									font-size:$mainFontSize
								}
							}
							.platform_store{
								font-size: 0.5rem;
								color: #fff;
								background: #FB2630;
								border-radius: 0.13rem;
								padding: 0.1rem 0.2rem;
								margin-right: 0.5rem;
							}
						}
					}
				}
			}
		}
		
	}
	
    .filter-attribute{padding:0.5rem;height: 100%;overflow: hidden;overflow-y: scroll}
    .filter-attribute .dl{width:100%;}
    .filter-attribute .dt{height:1.2rem;width:100%;overflow: hidden;font-size:$h2;color: #333;}
    .filter-attribute .dd{}
    .filter-attribute .dd .a{position: relative;display:inline-block;color: #666;font-size:$fontSize;text-align:center;background-color: #f7f7f7;border-radius:0.2rem;height:1.5rem;line-height:1.5rem;margin:0.5rem 1.5%;width:30%;}
    .filter-attribute .dd .a.selected{color: $primaryColor;background-color: #fdf0f0;}
    .filter-attribute .dd .a.selected::after{content: "";position: absolute;right: 0;bottom: 0;width: 15px;height: 15px;border-radius: 0 0 2px 0;background: url("../../../static/image/home/attribute_selected.png") no-repeat;background-size: 15px auto;overflow: hidden;z-index: 1;}

    .loading-wrapper{text-align: center}
	.show-wrapper{
		position: fixed;
		right: 10px;
		bottom: 100px;
		z-index: 101;
		width: 1.6rem;
		height: 1.6rem;
		background: #000;
		line-height: 1.6rem;
		background: hsla(0,0%,100%,.9) no-repeat 50%;
		border: 1px solid #ccc;
		border-radius: 50%;
		overflow: hidden;
		clear: both;
	}
	.showimg{
		background-image: url("../../../static/image/home/row.png");
		background-size: 16px;
	}
	.showlist{
		background-image: url("../../../static/image/home/square.png");
		background-size: 16px;
	}
</style>