hlm_pl_mall_h5/pages/member/voucher/VoucherList.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>
        <!-- header -->
        <view class="div voucher-header">
            <view class="ul">
                <view
                    class="li item"
                    v-for="item in voucherNav"
                    v-bind:key="item.id"
                    v-bind:class="{ active: stateType == item.id }"
                    v-on:click="setvoucherNavActive(item.id)"
                    >
                    {{ item.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" @scrolltolower="loadMore" scroll-y="true">
            <view
                class="div list-wrapper"
                v-if="voucher_list && voucher_list.length"
                >
                <view class="div voucher_list"  v-for="(item,index) in voucher_list" :key="item.voucher_id" :class="(item.voucher_state != 1)?'disable':''">
                    <view class="div voucher-info">
                        <view class="div price">{{item.voucher_price}}<text class="span">元</text></view>
                        <view class="div info"><view class="p">订单满{{item.voucher_limit}}元</view><view class="p">有效期至{{item.voucher_end_date_text}}</view></view>
                        <view class="div use"   @click="goNavigate('/pages/home/storegoodslist/Goodslist',{ id: item.store_id })"><text class="span" v-if="item.voucher_state == 1">去使用</text></view>
                    </view>
                    <view class="div voucher-store" >“{{item.store_name}}” 店铺使用</view>
                </view>
            </view>
            <empty-record v-else-if="voucher_list && !voucher_list.length"></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 { getVoucherList } from '../../../api/memberVoucher'
import EmptyRecord from '../../EmptyRecord'
export default {
  name: 'BalanceHistory',
  components:{
    TitleHeader,
    MemberBase,
    EmptyRecord
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
  },
  data(){
    return {
      navHeight: 0,
      voucherNav: [

        {
          'name': '未使用',
          'id': '1'
        },
        {
          'name': '已使用',
          'id': '2'
        },
        {
          'name': '已过期',
          'id': '3'
        },
      ],
      params: { 'page': 0, 'per_page': 10 },
      stateType: '',
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      voucher_list: false
    }
  },
  onLoad: function (option) {
    this.stateType=option.index ? option.index : ''
    this.loadMore()
  },

  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
    this.wrapperHeight = uni.getSystemInfoSync().windowHeight - 130
  },
  methods:{
    goNavigate(path,query=false){
      uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
    },

    goBack () {
      uni.navigateBack({delta:1})
    },
    setvoucherNavActive (index) {
      this.stateType = index
      this.getVoucherList(true)
    },
    loadMore () {
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.loading = false
        this.getVoucherList(true)
      }
    },
    getVoucherList (ifReplace) {
      uni.showLoading({ title: '加载中' })
      if (ifReplace) {
        this.loading = false
        this.params.page = 1
        this.isMore = true
      }

      getVoucherList(this.params,this.stateType).then(res => {
        uni.hideLoading()
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }

        let voucher_list = res.result.voucher_list
        if (voucher_list) {
          if (ifReplace || !this.voucher_list) {
            this.voucher_list = voucher_list
          } else {
            this.voucher_list = this.voucher_list.concat(voucher_list)
          }
        }
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
      })
    }
  }
}
</script>

<style scoped lang="scss">
.scroll-view-wrapper{display: flex;flex-direction: column;}
.scroll-view{flex:1}
.container {
  height: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  .voucher-header {
            height: 2.2rem;
            width: 100%;
            .ul {
                list-style: none;
                width: auto;
                display: flex;
                justify-content: space-around;
                align-content: center;
                align-items: center;
                height: 100%;
                background: rgba(255, 255, 255, 1);
                border-bottom: 1px solid #e8eaed;
                .li {
                    font-size:$subFontSize;
                    color: #333;
                    height: 100%;
                    text-align: center;
                    line-height: 2.2rem;
                    border-bottom: 0.1rem solid transparent;
                    &.active {
                        color: $primaryColor;
                        border-bottom-color: $primaryColor;
                    }
                }
            }
	}
        .list-wrapper{
            position:relative;
            .voucher_list{
                margin: .5rem;
                -webkit-border-radius: .75rem;
                border-radius: .75rem;
                overflow: hidden;
                font-size: .6rem;
                .voucher-info{
                        position: relative;
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-box-align: center;
                        -webkit-align-items: center;
                        align-items: center;
                        -webkit-box-pack: justify;
                        -webkit-justify-content: space-between;
                        justify-content: space-between;
                        padding: 1.4rem 1rem;
                        background: -webkit-linear-gradient(
                        45deg
                        ,#ff8580,#ea5165);
                        background: linear-gradient(
                        45deg
                        ,#ff8580,#ea5165);
                        color: #fff;
                        border-bottom: 1px dashed #fff;
                        .price{
                            font-size: 1.3rem;
                            font-weight: 700;
                            .span{
                                font-size: .6rem;
                            }
                        }
                        .use .span{
                            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;
                            padding: .25rem .5rem;
                            background-color: #f9ccd1;
                            font-size: .6rem;
                            color: #ec5667;
                            -webkit-border-radius: .2rem;
                            border-radius: .2rem;
                        }
                }
                .voucher-info::before,.voucher-info::after{
                    position: absolute;
                    content: "";
                    bottom: -5px;
                    width: 12px;
                    height: 12px;
                    -webkit-border-radius: 50%;
                    border-radius: 50%;
                    background-color: #fff;
                    z-index: 2;
                }
                .voucher-info::before{
                    right: -6px;
                }
                .voucher-info::after{
                    left: -6px;
                }
                .voucher-store{
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                    align-items: center;
                    padding: .6rem 1rem;
                    background: -webkit-gradient(linear,left top,right top,from(#d6706b),to(#c44654));
                    background: -webkit-linear-gradient(left,#d6706b,#c44654);
                    background: linear-gradient(
                    90deg
                    ,#d6706b,#c44654);
                    color: #84292b;
                }
            }
            .disable .voucher-info{
                background: -webkit-linear-gradient(
                45deg
                ,#c1cdd8,#a2adbe);
                    background: linear-gradient(
                45deg
                ,#c1cdd8,#a2adbe);
            }
            .disable .voucher-store{
                background: -webkit-gradient(linear,left top,right top,from(#a2adbe),to(#c1cdd8));
                background: -webkit-linear-gradient(left,#a2adbe,#c1cdd8);
                background: linear-gradient(
                90deg
                ,#a2adbe,#c1cdd8);
                color: #5e6679;
            }
        }
}
.common-voucher{margin:0.5rem auto}
</style>