hlm_pl_mall_h5/pages/member/bargain/Bargainlist.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-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="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 ui-product-body"
                     v-for='(item, index) in bargainList'
                     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.bargain_goods_image_url">
                        </view>
                        <view class="div flex-right">
                            <view class="div product-header">
                                <text class="h3 title clear-bottom">{{ item.bargain_name }}</text>
                            </view>
                            <view class="div p-price">
                                当前价：￥{{ item.bargainorder_current_price }}
                            </view>

                        </view>
                    </view>
                </view>
                <view class="div loading-wrapper" v-if="bargainList.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='bargainList.length <= 0 && !isMore'></empty-record>
            </scroll-view>
        </view>

    </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import MemberBase from '../MemberBase'
import EmptyRecord from '../../EmptyRecord'
import { getBargainList } from '../../../api/memberBargain'
export default {
  name: 'PintuanList',
  components:{
    TitleHeader,
    MemberBase,
    EmptyRecord
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      bargainList: [],
      params: { 'page': 0, 'per_page': 10 },
      loading: false, // 是否加载更多
      isMore: true // 是否有更多
    }
  },
  created () {
  this.loadMore()
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    loadMore () {
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.loading = false
        this.getBargainList(true)
      }
    },
    getBargainList () {
      uni.showLoading({ title: '加载中' })
      getBargainList(this.params).then(res => {
        uni.hideLoading()
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }

        if (this.bargainList) {
          this.bargainList = this.bargainList.concat(res.result.bargainorder_list)
        } else {
          this.bargainList = res.result.bargain_list
        }
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
      })
    },
    goDetail (item) {
      uni.navigateTo({ url: '/pages/home/bargain/Bargainshare'+'?'+urlencode( { 'bargainorder_id': item.bargainorder_id } )})
    }
  }
}
</script>

<style scoped lang='scss'>
    .scroll-view-wrapper{display: flex;flex-direction: column;}
    .scroll-view{flex:1}
    .ui-product-body {
        background: #fff;
        .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;
                width: 100%;
                position:relative;
                .title {
                    color: #333;
                    font-size:$subFontSize;
                    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:.2rem;
                    display: flex;
                    align-items: center;
                }
                .p-price {
                    color: $primaryColor;
                    font-size:$h2;
                    line-height:.8rem;
                }
                .p-info {
                    margin-bottom:0.4rem;
                    .platform_store{font-size:$h2;color: red;border: 1px solid red;border-radius:0.15rem;padding:0 .2rem;}
                    .bargain_limit_number{font-size:$h2;color:#999;}
                }
            }
        }
    }
</style>