hlm_pl_mall_h5/pages/home/activity/Activitylist.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" 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 v-if="activityList" class="div bg_content">
                <view @click="goActivityDetail(item)" class="div brand_item" v-for="item in activityList" :key="item.activity_id">
                    <view class="div bg_banner">
                        <view class="div brand_other_mark">
                            <view class="div other_mark_title">
                                {{item.activity_title}}
                            </view>
                            <view class="div other_mark_info">
                                <text class="span mark_info">查看更多</text>
                                <view class="div wqvue-image mark_icon">
                                    <image mode="aspectFit" class="img" src="../../../static/image/home/activity-arrow.png" />
                                </view>
                            </view>
                        </view>
                        <view class="div timer">
                            <count-down :styletype="1" :timetype="2" :timelimithour="0" :timesurplus="item.activity_enddate"></count-down>
                        </view>
                        <view class="div bg_banner_img">
                            <view class="div wqvue-image banner_img_info">
                                <image mode="aspectFit" class="img" :src="item.activity_banner_mobile_url" />
                            </view>
                        </view>
                    </view>
                    <view class="div sku_list_3" v-if="item.goods_list && item.goods_list.length">
                        <view class="div li" v-for="goods in item.goods_list" :key="item.goods_id">
                            <view class="div cover">
                                <view class="div wqvue-image img" alt="">
                                    <image mode="aspectFit" class="img" :src="goods.goods_image_url" />
                                </view>
                            </view>
                            <view class="div sg_goodslist_3_info">
                                <view class="div main_line">
                                    <text class="span span">￥<text class="span em">{{parseFloat(goods.goods_price)}}</text></text>
                                    <text class="span span del" v-if="goods.goods_marketprice">￥{{parseFloat(goods.goods_marketprice)}}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-else class="div empty-data">暂时没有商品</view>
                </view>
            </view>
            <empty-record v-if='activityList && !activityList.length'></empty-record>
        </scroll-view>
		</view>
    </view></home-base>
</template>

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

        if (this.activityList) {
          this.activityList = this.activityList.concat(res.result.activity_list)
        } else {
          this.activityList = res.result.activity_list
        }
        this.loading = false
      }).catch(error => {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
        this.loading = false
      })
    },
    goActivityDetail (item) {
      uni.navigateTo({ url: '/pages/home/activity/Activitydetail'+'?'+urlencode( { 'activity_id': item.activity_id } )})
    }
  }
}
</script>

<style scoped lang="scss">

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

    .scroll-view{flex:1}

    .bg_content .bg_banner_img {
        width: 100%;
        height: 5.25rem;
        box-sizing: border-box;
        overflow: hidden;
        display: block
    }

    .bg_content .bg_banner_img .banner_img_info,.bg_content .bg_banner_img .banner_img_info .img {
        width: 100%;
        height: 5.25rem;
        border-radius: .4rem .4rem 0 0;
        box-sizing: border-box;
        display: block
    }

    .brand_item {
        position: relative;
        margin: .75rem;
        background: #fff;
        border-radius: .4rem;
        box-shadow: 0 0 1rem 0 rgba(0,0,0,.09)
    }

    .brand_item .brand_other_mark,.brand_item .desc {
        border-radius: .2rem;
        position: absolute;
        text-align: center
    }

    .brand_item .brand_other_mark {
        top: .5rem;
        left: .75rem;
        width: 8.2rem;
        height: 4.3rem;
        padding: .5rem;
        padding-top:1rem;
        box-sizing: border-box;
        background: hsla(0,0%,100%,.8);
        overflow: hidden;
        z-index: 1
    }

    .brand_item .brand_other_mark .other_mark_img {
        width: 2rem;
        height: 1rem;
        display: block;
        margin: 0 auto;
        border-radius: .1rem
    }

    .brand_item .brand_other_mark .other_mark_title {
        height: 1.4rem;
        line-height: 1.4rem;
        font-size:$h1;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center
    }

    .brand_item .brand_other_mark .other_mark_info {
        display: inline-block;
        background: #333;
        border-radius: .2rem;
        height: .9rem;
        line-height: .9rem;
        box-sizing: border-box;
        padding: 0 .25rem;
        font-size: 0;
    }

    .brand_item .brand_other_mark .other_mark_info .mark_info {
        max-width: 6rem;
        font-size:$fontSize;
        color: #fff;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .brand_item .brand_other_mark .other_mark_info .mark_icon {
        float: right;
        width: .5rem;
        height: .5rem;
        margin-left: .15rem;
        margin-top: .2rem
    }

    .brand_item .timer {
        position: absolute;
        width: 3.5rem;
        height: 1rem;
        padding: .1rem 0;
        line-height: 1.05rem;
        background: #333;
        box-shadow: 0 .15rem .45rem 0 rgba(51,51,51,.15);
        font-size:$fontSize;
        z-index: 2;
        right: 0;
        top: 0;
        color: #fff;
        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;
        border-radius: 0 .4rem
    }

    .brand_item .timer_info {
        height: .95rem;
        line-height: .95rem;
        display: block;
        box-sizing: border-box;
        border-radius: .125rem;
        font-size:$fontSize;
        color: #fff;
        text-align: center
    }

    .brand_item .timer_info:first-child {
        text-align: center
    }

    .brand_item .timer_mark {
        font-size:$fontSize;
        display: block;
        padding: 0 .1rem;
        height: .95rem;
        line-height: .95rem
    }

    .sku_list_3 {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        padding: .5rem .75rem;
        font-size: 0
    }

    .sku_list_3 .li {
        display: inline-block;
        width: 4.95rem;
        font-size: 0
    }

    .sku_list_3 .li .cover,.sku_list_3 .li .img {
        width: 4.95rem;
        height: 4.95rem;
        border-radius: .2rem
    }

    .sku_list_3 .li .cover {
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: cover
    }

    .sku_list_3 .li .hot {
        background: $primaryGradualColor;
        box-shadow: 0 .15rem .3rem $subColor;
        position: absolute;
        margin-left: .25rem;
        padding: 0 .3rem;
        width: 1.5rem;
        height: .8rem;
        line-height: .8rem;
        color: #fff;
        font-size:$fontSize;
        border-radius: .7rem .7rem 0
    }

    .sku_list_3 .main_line {
        padding: .5rem 0 0;
        color: #ec1d1d;
        text-align: center;
        overflow: hidden;
        font-size:$h6;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: baseline;
        -webkit-align-items: baseline;
        align-items: baseline;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .sku_list_3 .main_line .fxprice_unit {
        letter-spacing: 0
    }

    .sku_list_3 .main_line .em {
        font-size:$h1
    }

    .sku_list_3 .main_line .normal {
        font-size:$fontSize;
        margin-right: .25rem
    }

    .sku_list_3 .main_line .del {
        color: #999;
        text-decoration: line-through
    }

    .sku_list_3 .width-fxprice {
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center
    }

    .sku_list_3 .sub_line {
        text-align: center;
        overflow: hidden;
        color: #999;
        text-decoration: line-through;
        font-size:$fontSize;
        line-height: .9rem
    }
    .wqvue-image {
        display: inline-block;
        overflow: hidden;
        position: relative;
    }
    .wqvue-image .img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%,-50%,0);
    }
    .empty-data{font-size:$subFontSize;text-align: center;padding:1.6rem 0;color:#999;height: 4.2055rem;}
</style>