hlm_pl_mall_store/pages/seller/voucher/VoucherList.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <seller-base :show="false" class="scroll-view-wrapper">
  <view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view-wrapper scroll-view div container">
    <view class="div common-header-wrap">
      <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 v-if="!seller.is_platform_store" class="div notice">
      <text class="span">套餐过期时间：<text v-if="current_quota" class="span red">{{$moment.unix(current_quota.voucherquota_endtime).format('YYYY.MM.DD')}}</text><text class="span red" v-else>您还没购买套餐</text></text>
      <view class="div common-btn ds-button-small btn" @click="addQuota(current_quota)"><text class="span" v-if="current_quota">续期</text><text class="span" v-else>购买</text></view>
    </view>
	<view class="scroll-view div pb-30" style="position:relative">
	<scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div pb-30" @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" >
			    <view class="div voucher-info">
			        <view class="div price">{{item.vouchertemplate_price}}<text class="span">元</text></view>
			        <view class="div info">
						<view class="p">订单满{{item.vouchertemplate_limit}}元</view>
						<view class="p">可领取总数{{item.vouchertemplate_total}}张</view>
						<view class="p">已领取{{item.vouchertemplate_giveout}}张</view>
						<view class="p">有效期至{{$moment.unix(item.vouchertemplate_enddate).format('YYYY.MM.DD')}}</view>
					</view>
			        <view class="div use" @click="goVoucerEdit(item)"><text class="span" :style="(item.vouchertemplate_state == 1 && !item.vouchertemplate_giveout) ? 'opacity:1':'opacity:0'">编辑</text></view>
			    </view>
			    <view class="div voucher-title" >“{{item.vouchertemplate_title}}”</view>
			</view>
	    </view>
	    <empty-record v-else-if="voucher_list && !voucher_list.length"></empty-record>
	  </scroll-view>
	  <view class='common-add-btn-wrapper' v-if="current_quota"><view class="div common-btn common-add-btn"  @click="goNavigate('/pages/seller/voucher/VoucherForm',{mode:'add'})">新增</view></view>
	</view>
</view>
<uni-popup background-color="#fff" ref="confirm" type="dialog">
    <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
</uni-popup>
</seller-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'

import SellerBase from '../SellerBase'
import { getVoucherList, addQuota } from '../../../api/sellerVoucher'

import EmptyRecord from '../../EmptyRecord'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'BalanceHistory',
  components:{
    TitleHeader,
    SellerBase,
    EmptyRecord
  },
  data(){
    return {
      navHeight: 0,
      dialog:{},
      params: { 'page': 0, 'per_page': 10 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      voucher_list: false,
      current_quota: false,
      voucher_storetimes_limit: false,
      promotion_voucher_price: false,
    }
  },
  onShow () {
	this.reload()
  },

  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().height
    // #endif
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      seller: state => state.seller.info
    })

  },
  methods:{
    closeDialog(){
    },
    confirmDialog(value){
        addQuota(value).then(res => {
          uni.showToast({icon:'none',title: res.message})
          this.current_quota = { voucherquota_endtime: res.result.voucherquota_endtime }
        }).catch(function (error) {
          uni.showToast({icon:'none',title: error.message})
        })
    },
    goNavigate(path,query=false){
      uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
    },
    goBack(){uni.navigateBack({delta:1})},
    loadMore () {
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.loading = false
        this.getVoucherList(true)
      }
    },
    reload () {
      // 重新加载数据
      this.params.page = 0
      this.isMore = true
      this.voucher_list = false
      this.loadMore()
    },
    goVoucerEdit (item) {
      if (item.vouchertemplate_state == 1 && !item.vouchertemplate_giveout) {
        uni.navigateTo({url:'/pages/seller/voucher/VoucherForm'+'?'+urlencode({ mode: 'edit', tid: item.vouchertemplate_id })})
      } else {
		uni.showToast({icon:'none',title: '当前代金券不可编辑'})
      }
    },
    addQuota (type) {
      this.dialog={mode:'input',title:(type ? '续期' : '购买') + '套餐',content:'购买单位为月（30天），一次最多购买12个月，每月您需要支付' + this.promotion_voucher_price + '元，相关费用会在店铺的账期结算中扣除，每月最多发布活动' + this.voucher_storetimes_limit + '次',data:type,inputType: 'number'}
      this.$refs.confirm.open()
      
    },
    getVoucherList () {
      uni.showLoading({ title: '加载中' })

          getVoucherList(this.params).then(res => {
            uni.hideLoading()
            if (res.result.hasmore) {
              this.isMore = true
            } else {
              this.isMore = false
            }
            this.current_quota = res.result.current_quota
            this.promotion_voucher_price = res.result.promotion_voucher_price
            this.voucher_storetimes_limit = res.result.voucher_storetimes_limit
            let temp = res.result.vouchertemplate_list
            if (temp) {
              if (!this.voucher_list) {
                this.voucher_list = temp
              } else {
                this.voucher_list = this.voucher_list.concat(temp)
              }
            }
          }).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;

}
.common-voucher{margin:0.5rem auto}
  .notice{font-size:.7rem;padding:.5rem;background:#FCF8E3;color:#C09853;line-height: 1.6rem;
    .red{color:#F00}
    .btn{float:right}
  }
  .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: .8rem 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-title{
          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;
      }
  }
</style>