hlm_pl_mall_h5/pages/member/voucher/VoucherPrivate.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>
		<view v-if="vouchertemplate.vouchertemplate_creator_id>0">
			<view class="vouchertemplate-wrapper">
				<image mode="aspectFit" class="img top" src="../../../static/image/member/vouchertemplate-top.png"></image>
				<image mode="aspectFit" class="img bottom" src="../../../static/image/member/vouchertemplate-bottom.png"></image>
				<view class="div vouchertemplate-info">
					<view class="div storename" >{{vouchertemplate.vouchertemplate_storename}}商品代金券</view>
					<view class="div time"><text class="left"></text><text class="middle"></text>有效期{{vouchertemplate.vouchertemplate_startdate}}-{{vouchertemplate.vouchertemplate_enddate}}<text class="right"></text></view>
					<view class="div price-wrapper">
						<view class="price">
							￥<text class="number">{{vouchertemplate.vouchertemplate_price}}</text>
							<view class="p">满{{vouchertemplate.vouchertemplate_limit}}元使用</view>
						</view>
						<view class="store-img">
							<image mode="aspectFit" class="img" src="../../../static/image/member/vouchertemplate-store.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="btn-wrapper" v-if='state == 0'><view class="div common-btn"  @click="exchangeVoucher(vouchertemplate)">确认领取</view></view>
			<view class="btn-wrapper" v-else><view class="div common-btn"  @click="goNavigate('/pages/home/storegoodslist/Goodslist',{ id: vouchertemplate.vouchertemplate_store_id })">领取成功,去使用</view></view>
		</view>
		<view class="div"  v-else>
			<empty-record></empty-record>
		</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>
    </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import MemberBase from '../MemberBase'
import { getVoucherPrivate } from '../../../api/memberVoucher'
import { exchangePointVoucher } from '../../../api/homePointsgoods'
import EmptyRecord from '../../EmptyRecord'
import { mapState } from 'vuex'
export default {
  name: 'VoucherPrivate',
  components:{
    TitleHeader,
    MemberBase,
    EmptyRecord
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
	...mapState({
	  token: state => state.member.token
	})
  },
  data(){
    return {
      navHeight: 0,
	  dialog:{},
	  vouchertemplate_id:0,
	  vouchertemplate:{},
	  state:0
    }
  },
  onLoad: function (option) {
	  this.vouchertemplate_id=option.id ? option.id : '0'
	  this.getVoucherPrivate()
  },
  methods:{
	closeDialog(){
	},
	confirmDialog(value){
	    exchangePointVoucher({ vid: this.dialog.data.vouchertemplate_id, key: this.token }).then(res => {
			uni.showToast({icon:'none',title: res.message})
			this.state = 1
	    }).catch(error => {
	      uni.showToast({icon:'none',title: error.message})
	    })
	},
	exchangeVoucher (vouchertemplate) {
	  this.dialog={content:'您确定需要使用' + vouchertemplate.vouchertemplate_points + '积分兑换代金券吗？',data:vouchertemplate}
	  this.$refs.confirm.open()
	},
	goNavigate(path,query=false){
	  uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
	},
    goBack () {
      uni.navigateBack({delta:1})
    },
    getVoucherPrivate () {
      getVoucherPrivate(this.vouchertemplate_id).then(res => {
		this.vouchertemplate = res.result.vouchertemplate_info
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
      })
    }
  }
}
</script>

<style scoped lang="scss">
.vouchertemplate-wrapper{
	background-color: #e6a117;
	position: relative;
	padding: 1rem $pageSpace;
	color: #fff;
	display: flex;
	justify-content: center;
	margin: .9rem;
	.img{
		position: absolute;
		width: 100%;
		height: .15rem;
		object-fit: cover;
	}
	.top{
		top: 0;
		left: 0;
	}
	.bottom{
		left: 0;
		bottom: 0;
	}
	.vouchertemplate-info{
		font-size: .7rem;
		.storename{
			text-align: center;
		}
		.time{
			display: flex;
			align-items: center;
			height: .8rem;
			margin-top: .7rem;
			.left{
				width: 2rem;
				height: 1px;
				background-color: rgba(255,255,255,.2);
				flex: 1 1 0%;
				margin-right: 1rem;
			}
			.right{
				width: 2rem;
				height: 1px;
				background-color: rgba(255,255,255,.2);
				flex: 1 1 0%;
				margin-left: 1rem;
			}
		}
		.price-wrapper{
			padding-top: 1rem;
			display: flex;
			.price{
				font-size: .9rem;
				.number{
					font-size: 1.9rem;
				}
				.p{
					font-size: .7rem;
				}
			}
			.store-img{
				width: 4.5rem;
				height: 4.5rem;
				margin-left: auto;
				margin-top: -1rem;
				.img{
					width: 4.5rem;
					height: 4.5rem;
				}
			}
		}
	}
}
.btn-wrapper{
	margin-top: 1rem;
	margin: 0 .8rem;
	.common-btn{
		background-image: linear-gradient(to right, rgb(255, 144, 0), rgb(255, 80, 0));
		color: #fff;
		font-size: .8rem;
		padding: .5rem 0;
		border-radius: .5rem;
		width: 100%;
	}
}
</style>