hlm_pl_mall_h5/pages/home/presell/PresellList.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
<home-base :show="false">
  <view class="div container">
    <view class="div common-header-wrap">
        <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>
    </view>
    <view class="div time-list">
      <text v-for="(item,index) in timeList" :key="index" class="span time-item" @click="setTime(index)" :class="{'time-active':timeActive==index}">{{item.text}}</text>
    </view>
    <view class="div goodslist-body show-goods-list" >
      <!-- 无限加载滚动列表 -->
      <scroll-view class="scroll-view div flex-wrapper" @scrolltolower="loadMore" scroll-y="true">
        <view class="div" v-if="presellList">
          <view class="div ui-product-body"
               v-for='(item, index) in presellList'
               v-bind:key='index'
               v-on:click='goDetail(item)'
          >
            <view class="div list">
              <view class="div ui-image-wrapper">
                <image 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 btn-wrapper">
                  <view class="div p-price">
                    <text class="span strong">￥{{ item.presell_price }}</text><text class="span presell_limit_number">￥{{item.goods_price}}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="div bottom-btn">
              <view class="div bottom-content" v-if="currentSortKey.id">
                <view class="div bottom-title">预付定金</view>
                <view class="div bottom-desc">￥{{item.presell_deposit_amount}}</view>
              </view>
              <view class="div bottom-content" v-else>
                <view class="div bottom-title">发货时间</view>
                <view class="div bottom-desc">{{ $moment.unix(item.presell_shipping_time).format('YYYY-MM-DD') }}</view>
              </view>
              <view class="div triangle-bottomright"></view>
              <view class="div big-btn">立刻购买</view>
            </view>
          </view>
          <view class="div loading-wrapper" v-if="presellList.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='presellList.length <= 0 && !isMore'></empty-record>
        </view>
      </scroll-view>
    </view>

  </view>
</home-base>
</template>

<script>
import {getFontSize,urlencode} from '@/util/common'
import HomeBase from '../HomeBase'
import EmptyRecord from '../../EmptyRecord'
import TitleHeader from '../../TitleHeader'
import { getPresellList,getPresellTime } from '../../../api/homesearch'
export default {
  name: 'GroupbuyList',
  components: {
    HomeBase,
    TitleHeader,
    EmptyRecord
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data () {
    return {
      navHeight: 0,
      sortkey: [
        {
          name: '全款预售',
          id: 0
        },
        {
          name: '定金预售',
          id: 1
        }
      ], // 排序数据
      currentSortKey: { id: 0 }, // 当前选中的排序
      presellList: false,
      params: { 'page': 0, 'per_page': 10 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      timeList:false,
      timeActive:0,
    }
  },
  created: function () {
    this.getPresellTime()
    this.loadMore()
  },
  methods: {
    goBack(){uni.navigateBack({delta:1})},
    getPresellTime(){
      getPresellTime({presell_type:this.currentSortKey.id?2:1}).then(res=>{
        this.timeList=res.result.time_list
        this.reload()
      })
    },
    setTime(index){
      this.timeActive=index
      this.reload()
    },
    loadMore () {
      if(!this.timeList){
        return
      }
      if (this.loading) {
        return
      }
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.getPresellList(true)
      }
    },
    reload () {
      // 重新加载数据
      this.params.page = 0
      this.isMore = true
      this.loading = false
      this.presellList = false
      this.loadMore()
    },
    getPresellList () {
      this.loading = true
      getPresellList(Object.assign(this.params,{start_time:this.timeList.length?this.timeList[this.timeActive].time:'',presell_type:this.currentSortKey.id?2:1})).then(res => {
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }
        if (this.presellList) {
          this.presellList = this.presellList.concat(res.result.presell_list)
        } else {
          this.presellList = res.result.presell_list
        }
        this.loading = false
      }).catch((error)=>{
        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.getPresellTime()
      this.timeActive=0
    },
  }
}
</script>

<style scoped lang='scss'>
  .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: 4rem;
        height: 4rem;
        position: relative;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        flex-basis: 4rem;
        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:4rem;
          height:4rem;
          border-radius:.4rem;
          flex-basis:4rem;
          flex-shrink: 0;
        }
      }
      .flex-right {
        padding-left:0.7rem;
        flex: 1;
        overflow: hidden;
        position:relative;
        height: 4rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .title {
          color: #333;
          font-size:$subFontSize;
          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;
          }
        }
        .presell_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;}
        }
      }
    }
  }
.bottom-btn{
  border-top:1px dashed #eee;
  display: flex;
  align-items: center;
  .bottom-content{
    flex:1;
    padding-left:$pageSpace;
    .bottom-title{
      font-size:.7rem;
      padding-bottom:.3rem;
    }
    .bottom-desc{
      font-size:.65rem;
      color:#999
    }
  }
  .big-btn{
    font-size:.9rem;
    width:5rem;
    padding-left:.5rem;
    background: $primaryColor;
    color:#fff;
    line-height: 3rem;
  }
  .triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 3rem solid $primaryColor;
    border-left: 3rem solid transparent;
  }
}
  .time-list{
    padding:1rem 0;
    background: #fff;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
    .time-item{
      padding:0 $pageSpace;
      font-size:.9rem;
      &.time-active{
        color:$primaryColor;
        font-size: 1.1rem;
      }
    }
  }
  .time-list::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
</style>