hlm_pl_mall_h5/pages/home/storedetail/StoreVoucher.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
<home-base :show="false" ><view class="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 class="div common-popup-content">
        <view class="div common-voucher common-voucher02"  v-for="(item,index) in voucher" :key="item.vouchertemplate_id"  @click="receiveVoucher(item.vouchertemplate_id)">
            <view class="div par"><view class="p">订单满{{item.vouchertemplate_limit}}元</view><text class="sub sign">￥</text><text class="span">{{item.vouchertemplate_price}}</text></view>
            <view class="div copy">有效期至<view class="p">{{$moment.unix(item.vouchertemplate_enddate).format('YYYY年MM月DD日')}}</view><view class="p">兑换需{{item.vouchertemplate_points}}积分</view><view class="p">立即兑换</view></view>
            <text class="i"></text>
        </view>
    </view>
</view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import HomeBase from '../HomeBase'
import { mapState, mapMutations } from 'vuex'
import { receiveVoucher } from '../../../api/homestoredetail'
export default {
  name:'HomeStoreVoucher',
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().height
  // #endif
  },
  data(){
    return {

    navHeight: 0,

    }
  },
  components:{

  TitleHeader,

  HomeBase,

  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      voucher: state => state.goodsdetail.voucher
    })
  },
  created () {

  },
  methods:{

    goBack(){uni.navigateBack({delta:1})},

    receiveVoucher (tid) {
      receiveVoucher(
        tid
      ).then((res) => {
        uni.showToast({icon:'none',title: res.message})
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  }

}
</script>

<style scoped lang="scss">
    .common-voucher{margin:.5rem auto}
</style>