hlm_pl_mall_h5/pages/home/pintuan/PintuanList.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="scroll-view div 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 item" v-for='(item, index) in pintuanList' :key='index'>
                    <view class="div goods-list-top">
                        <view class="div img">
                            <view class="div img-content">
                                <image mode="aspectFit" class="img" :src="item.pintuan_image" />
                            </view>
                        </view>
                        <view class="div goods-info">
                            <view class="div info">
                                <view class="div goods_nameBox">
                                    <view class="div goods_nameText">
                                        <text class="span">{{item.pintuan_goods_name}}</text>
                                    </view>
                                </view>
                                <view class="div p">
                                    已开团{{item.pintuan_count}}组
                                </view>
                                <view class="div goods_price_wrap">
                                    <view class="div now_price">
                                        <text class="span small_price">
                                            <text class="span">￥</text>
                                        </text>
                                        <text class="span big_price">
                                            <text class="span">{{item.pintuan_zhe_price}}</text>
                                        </text>
                                    </view>
                                    <view class="div old_price">
                                        ￥{{item.pintuan_goods_price}}
                                    </view>
                                </view>
                                <view class="div navigator" @click="goDetail(item)">
                                    <view class="div group_num_wrap">
                                        <view class="div iconImg">
                                            <text class="span iconfont icon-text">&#xe6f0;</text>
                                        </view>
                                        <view class="div text-content">
                                            <text class="span">{{item.pintuan_limit_number}}人团</text>
                                        </view>
                                    </view>
                                    <view class="div go_to_group">
                                        去拼团
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="div loading-wrapper" v-if="pintuanList.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='pintuanList.length <= 0 && !isMore'></empty-record>
            </scroll-view>
        </view>

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

<script>
import {getFontSize,urlencode} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import HomeBase from '../HomeBase'
import EmptyRecord from '../../EmptyRecord'
import CountDown from '../../CountDown'
import { getPintuanList } from '../../../api/homesearch'
export default {
  name: 'PintuanList',
  components:{
    TitleHeader,
    HomeBase,
    EmptyRecord,
    CountDown
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      pintuanList: [],
      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.getPintuanList(true)
      }
    },
    getPintuanList () {
      uni.showLoading({ title: '加载中' })
      getPintuanList(this.params).then(res => {
        uni.hideLoading()
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }

        if (this.pintuanList) {
          this.pintuanList = this.pintuanList.concat(res.result.pintuan_list)
        } else {
          this.pintuanList = res.result.pintuan_list
        }
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
      })
    },
    goDetail (item) {
      uni.navigateTo({ url: '/pages/home/goodsdetail/Goodsdetail'+'?'+urlencode( { 'goods_id': item.pintuan_goods_id } )})
    }
  }
}
</script>

<style scoped lang='scss'>

    .scroll-view-wrapper{display: flex;flex-direction: column;}

    .scroll-view{flex:1}

    .goods-list {padding: 0 10px;}
    .goods-list *{flex-direction: column;}
    .goods-list .item {display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;flex-direction: column;border-radius: 7px;box-sizing: border-box;background-color: #fff;font-size:$fontSize;color: #999;margin-top: 10px;padding: 10px 10px 20px 10px}
    .goods-list-top .img {position: relative;width: 135px;height: 135px;margin-right: 10px;background-color: #f8f8f8;border-radius: 7px}
    .img .img-content {width: 135px;height: 135px;border-radius: 7px}
    .img .img-content >img{display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    .goods-list .item {display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;flex-direction: column}
    .goods-list-top {display: -webkit-box;display: -webkit-flex;display: flex;flex-direction: row;}
    .goods-info {display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;flex-direction: column;position: relative}
    .goods-info .info .goods_nameBox {margin-bottom: 2px}
    .goods-info .goods_price_wrap {display: flex;margin-top: 15px;flex-direction: row;align-items: baseline;}
    .goods_price_wrap .now_price {font-size:$fontSize;font-weight: 600;color: #fc1c1c;font-weight: 700}
    .now_price .big_price {font-size:$h1}
    .goods-info .info .old_price {color: #9a9a9a;font-size:$h6;margin-left: 5px;text-decoration: line-through;padding-bottom: 2px}
    .goods-info .info .p {font-size:$fontSize;color: #666;display: -webkit-box;display: -webkit-flex;display: flex;}
    .goods-info .p .line {display: block;width: 1px;height: 10px;margin: 0 7px;background-color: #999}
    .goods-info .navigator {display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;width: 140px;height: 25px;color: #fff;font-size:$subFontSize;border-radius: 19px;position: absolute;bottom: 0;left: 0;flex-direction: row;}
    .group_num_wrap {display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-webkit-align-items: center;align-items: center;width: 75px;height: 23px;color: #fc1c1c;font-size:$fontSize;border-radius: 12px 0 0 12px;border: 1px solid #fc1c1c;padding-right: 10px;flex-direction: row;}
    .goods-info .iconImg {width: 15px;height: 13px;margin-right: 5px;position: relative;}
    .goods-info .iconImg .icon-text{display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;font-size:$h2;line-height: 13px;}
    .go_to_group {display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;width: 74px;height: 25px;font-size: $subFontSize;color: #fff;background-color: #fc1c1c;border-radius: 0 12px 12px 12px;margin-left: -15px}
    .goods_nameBox {margin-top: 10px}
    .goods_nameText {color: #2e2e2e;font-size:$subFontSize;font-weight: 600;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical}
    .group_bottom_text {white-space: nowrap;text-overflow: ellipsis;overflow: hidden}
</style>