hlm_pl_mall_h5/pages/home/groupbuy/GroupBuyList.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <home-base :show="false"><view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view-wrapper div container">
    <view class="div common-header-wrap">
      <view class="status-holder"></view>
      <view :style="'height:'+navHeight+'px'"></view>
      <view class="common-header-holder"></view>
      <view class="common-header-fixed">
      <title-header />
      <uni-nav-bar title="抢购活动" class="common-header" left-icon="back" @clickLeft="goBack()">
      </uni-nav-bar>
    </view>
    </view>

    <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}">
            {{item.name}}
        </view>
        <view class="li item" @click="showPopup('showAttribute')">
          <text class="a">筛选</text>
        </view>
      </view>
    </view>
    <view class="scroll-view div goodslist-body show-goods-list" style="position:relative">
      <!-- 无限加载滚动列表 -->
      <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div flex-wrapper" @scrolltolower="loadMore" scroll-y="true">
        <view class="div" v-if="groupbuyList">
          <view class="div ui-product-body"
               v-for='(item, index) in groupbuyList'
               v-bind:key='index'
          >
            <view class="div list" v-on:click='goDetail(item)'>
              <view class="div ui-image-wrapper">
                <image mode="aspectFit" class="img product-img" :src="item.groupbuy_image">
              </view>
              <view class="div flex-right">
                <view class="div product-header">
                  <text class="h3 title clear-bottom">{{ item.groupbuy_name }}</text>
                </view>

                <view class="div btn-wrapper">

                  <view class="div p-price">
                    <text class="span strong">￥{{ item.groupbuy_price }}</text><text class="span groupbuy_limit_number">￥{{item.goods_price}}</text>
                  </view>
                  <view class="div common-btn btn" :class="{'disable':!item.cancelable}">{{item.button_text}}</view>
                </view>
              </view>
            </view>
          </view>
          <view class="div loading-wrapper" v-if="groupbuyList.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='groupbuyList.length <= 0 && !isMore'></empty-record>
        </view>

      </scroll-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="groupbuy_classes">
          <view class="dt">分类</view>
          <view class="dd clearfix" v-if="params.class && groupbuy_classes.children[params.class]">
            <text class="a" :class="{'selected':classId==params.s_class}" v-for="(classId,index) in groupbuy_classes.children[params.class]" :key="index" @click="setFilter('s_class',classId)">{{groupbuy_classes.name[classId]}}</text>
          </view>
          <view class="dd clearfix" v-else>
            <text class="a" :class="{'selected':classId==params.class}" v-for="(classId,index) in groupbuy_classes.children[0]" :key="index" @click="setFilter('class',classId)">{{groupbuy_classes.name[classId]}}</text>
          </view>
        </view>
        <view class="dl" v-if="groupbuy_price">
          <view class="dt">价格</view>
          <view class="dd clearfix">
            <text class="a" :class="{'selected':priceItem.gprange_id==params.groupbuy_price}" v-for="(priceItem,index) in groupbuy_price" :key="index" @click="setFilter('groupbuy_price',priceItem.gprange_id)">{{priceItem.gprange_name}}</text>
          </view>
        </view>
        <view class="dl">
          <view class="dt">排序</view>
          <view class="dd clearfix">
            <text class="a" :class="{'selected':params.groupbuy_order_key==1}" @click="setFilter('groupbuy_order_key',1)">价格<text class="i" :class="{'up':params.groupbuy_order_key==1 && params.groupbuy_order==1}"></text></text>
            <text class="a" :class="{'selected':params.groupbuy_order_key==2}" @click="setFilter('groupbuy_order_key',2)">折扣<text class="i" :class="{'up':params.groupbuy_order_key==2 && params.groupbuy_order==1}"></text></text>
            <text class="a" :class="{'selected':params.groupbuy_order_key==3}" @click="setFilter('groupbuy_order_key',3)">销量<text class="i" :class="{'up':params.groupbuy_order_key==3 && params.groupbuy_order==1}"></text></text>
          </view>
        </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>
    </uni-popup>
    <!--属性筛选End-->
  </view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import HomeBase from '../HomeBase'
import EmptyRecord from '../../EmptyRecord'
import { getGroupbuyList, getGroupbuyFilter } from '../../../api/homesearch'
export default {
  name: 'GroupbuyList',
  components:{
    TitleHeader,
    HomeBase,
    EmptyRecord
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      screenWidth:0,
      sortkey: [
        {
          key: 'online',
          name: '正在进行',
          isMore: true,
          id: 0
        },
        {
          key: 'soon',
          name: '即将开始',
          isMore: false,
          id: 1
        },
        {
          key: 'history',
          name: '已经结束',
          isMore: false,
          id: 2
        }
      ], // 排序数据
      currentSortKey: { id: 0 }, // 当前选中的排序
      groupbuyList: false,
      params: { 'page': 0, 'per_page': 10 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      groupbuy_price: false,
      groupbuy_classes: false
    }
  },
  created: function () {
    getGroupbuyFilter().then(res => {
      this.groupbuy_price = res.result.groupbuy_price
      this.groupbuy_classes = res.result.groupbuy_classes
    })
    this.loadMore()
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().height
    // #endif
    this.screenWidth=uni.getSystemInfoSync().screenWidth
  },
  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    loadMore () {
      if (this.loading) {
        return
      }
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.getGroupbuyList(true)
      }
    },
    reload () {
      // 重新加载数据
      this.params.page = 0
      this.isMore = true
      this.loading = false
      this.groupbuyList = false
      this.loadMore()
    },
    getGroupbuyList () {
      this.loading = true
      getGroupbuyList(this.params).then(res => {
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }
        if (this.groupbuyList) {
          this.groupbuyList = this.groupbuyList.concat(res.result.groupbuy_list)
        } else {
          this.groupbuyList = res.result.groupbuy_list
        }
        this.loading = false
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
        this.loading = false
      })
    },
    goDetail (item) {
      uni.navigateTo({ url: '/pages/home/goodsdetail/Goodsdetail'+'?'+urlencode( { 'goods_id': item.goods_id } )})
    },
    setActiveSortkey (item, index) {
      this.currentSortKey = item
      this.getValue()
    },
    getValue () {
      let data = this.getSortValue()
      this.params = data
      this.reload()
    },
    getSortValue () {
      let sort = this.currentSortKey
      let value = { 'sort_key': '' }
      value.sort_key = sort.key
      return value
    },
    setFilter (name, value) {
      if (name == 'groupbuy_order_key') {
        if (value == this.params[name]) {
          this.params['groupbuy_order'] = this.params['groupbuy_order'] == 2 ? 1 : 2
        } else {
          this.params['groupbuy_order'] = 2
        }
      }
      this.params[name] = value
      this.$forceUpdate()
    },
    confirmAttribute () {
      this.hidePopup('showAttribute')
      this.params.page = 0
      this.params.per_page = 10
      this.reload()
    },
    cancelAttribute () {
      this.params = { 'page': 0, 'per_page': 10 }
      this.reload()
    }
  }
}
</script>

<style scoped lang='scss'>
  .scroll-view-wrapper{display: flex;flex-direction: column;}
  .scroll-view{flex:1}
  .ui-goodslist-filter {
    width: auto;
    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 {color:$primaryColor;
        &::after{background-color:$primaryColor;width:1rem;height: 2px;content:'';display: block;margin: 0 auto;}
        .a {
          color:$primaryColor;
        }
        .iconfont{color:$primaryColor;}
        .iconfont.active{transform: rotate(180deg);}
      }
      .li.sortnormal {
        border-bottom-color: transparent;
        .a {
          color: #333;
        }
      }
    }
  }
  .ui-product-body {
    background:#fff;
    margin-bottom:.5rem;
    .list {
      display: flex;
      width: auto;
      align-items: center;
      justify-content: space-between;
      padding:0.5rem;
      position: relative;
      .div.ui-image-wrapper {
        width: 5.5rem;
        height: 5.5rem;
        position: relative;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        flex-basis: 5.5rem;
        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:5.5rem;
          height:5.5rem;
          border-radius:.4rem;
          flex-basis:5.5rem;
          flex-shrink: 0;
        }
        .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:5.5rem;
          height:5.5rem;
          flex-basis:5.5rem;
          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:5.5rem;
          bottom: 0;
          left: 0;
        }
      }
      .flex-right {
        padding-left:0.7rem;
        flex: 1;
        overflow: hidden;
        position:relative;
        height: 5.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .title {
          color: #333;
          font-size:$subFontSize;
          line-height:1rem;
          font-weight: normal;
          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:.4rem;
          display: flex;
          align-items: center;
        }
        .p-price {font-size:$fontSize;color:#999;
          .strong{
            color: $primaryColor;
            font-size:$h2;
            line-height:.8rem;
            margin-right:.2rem;
          }
        }
        .groupbuy_limit_number{font-size:$fontSize;color:#999;text-decoration: line-through}
        .btn-wrapper{display: flex;justify-content: space-between;margin-top:1rem;}
        .btn{color: #fff;background: $primaryColor;
          &.disable{background: #eee;}
        }
      }
    }
  }
  .filter-attribute{padding:0.5rem;}
  .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;}

  .filter-attribute .dd .a .i {
    width: 0px; /*  宽高设置为0，很重要，否则达不到效果 */
    height: 0px;
    border-width:5px;
    border-style: solid;
    border-top-color:transparent;
    border-bottom-color: #999; /* 设置透明背景色 */
    border-left-color: transparent;
    border-right-color: transparent;
    top: -.5rem;
    position: relative;
    margin-left: .2rem;
  }
  .filter-attribute .dd .a.selected .i.up{
    border-bottom-color: transparent;
    border-top-color: $primaryColor;
    top: .6rem;

  }
  .filter-attribute .dd .a.selected .i{
    border-bottom-color:$primaryColor;
    border-top-color: transparent;
  }
</style>