hlm_pl_mall_h5/pages/home/pointsgoods/PointMallVoucher.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <home-base :show="true"><view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view-wrapper div">
        <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 gc_list">
            <view class="ul">
                <view class="li" v-on:click='setgcid(0)' v-bind:class="{ active: gcid == 0 }">全部
                </view>
                <view class="li" v-bind:class="{ active: gcid == item.gc_id }" v-for="item in gc_list" :key="item.gc_id" v-on:click='setgcid(item.gc_id)'>{{item.gc_name}}</view>
            </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 list-wrap" @scrolltolower="loadMore" scroll-y="true">
            <index-mall-voucher-item class="list-wrap-item" v-for="item in mallvoucherlist" :key="item.mallvouchertemplate_id" :item="item">
            </index-mall-voucher-item>
        </scroll-view>
        <empty-record  v-if="mallvoucherlist.length === 0"></empty-record>
		</view>
    </view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import HomeBase from '../HomeBase'
import EmptyRecord from '../../EmptyRecord'
import IndexMallVoucherItem from './IndexMallVoucherItem'
import { getPointMallVoucherList } from '../../../api/homePointsgoods'
export default {
  name: 'index',
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      params: { 'page': 0, 'per_page': 10 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      pageTotal: 1, // 总页数
      gcid: 0,
      mallvoucherlist: [], // 平台代金券列表
      gc_list:[],//分类列表
    }
  },
  components:{
    TitleHeader,
    HomeBase,
    EmptyRecord,
    IndexMallVoucherItem
  },
  created () {
  this.loadMore()
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    getPointMallVoucherList (ispush) {
      uni.showLoading({ title: '加载中' })
      let params = this.params
      getPointMallVoucherList(params).then(res => {
        uni.hideLoading()

        if (ispush) {
          this.mallvoucherlist = this.mallvoucherlist.concat(res.result.mallvoucherlist)
        } else {
          this.mallvoucherlist = res.result.mallvoucherlist
        }
        this.pageTotal = res.result.page_total
        this.gc_list = res.result.gc_list
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }
      })
    },
    loadMore () {
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore && this.params.page <= this.pageTotal) {
        this.loading = false
        this.getPointMallVoucherList(true)
      }
    },
    setgcid(gcid){
        this.params.gc_id = gcid
        this.gcid = gcid
        this.getPointMallVoucherList(false)
    }
  }
}
</script>

<style scoped lang="scss">
    .gc_list{width: 100%;overflow: hidden;padding: 0 3%;box-sizing: border-box;background-color: #fff;}
    .gc_list .ul{overflow-x: overlay;display: flex;}
    .gc_list .ul::-webkit-scrollbar{width:0;}
    .gc_list .ul .li{margin-right: 1rem;white-space: nowrap;font-size: .7rem;line-height: 2.2rem;    border-bottom: 0.1rem solid transparent;}
    .gc_list .ul .li.active{    color: #FB2630;border-bottom-color: #FB2630;}
    .scroll-view-wrapper{display: flex;flex-direction: column;}
    .scroll-view{flex:1}
    .list-wrap {padding:0 15px;box-sizing: border-box;}
    .list-wrap .list-wrap-item {display: inline-block;margin-top: 10px;width:50%;}
    .list-wrap .list-wrap-item:nth-child(2n+2) {text-align: right}
</style>