charge_miniapp/pages/coupon-buy/coupon-buy.vue

<template>
	<ax-body>
		<view class="page-background"><image src="@/static/img/page-bg01.png" mode="widthFix"></image></view>
		<view class="body">
			<!-- 统计卡 -->
			<view class="app-flex c-between">
				<view class="sta-card">
					<view class="value">{{userinfo.integralNum}}</view>
					<view class="name">我的积分</view>
					<image src="@/static/img/my-sta-bg01.png" mode="heightFix" class="bg"></image>
				</view>
				<view class="sta-card">
					<view class="value">{{userinfo.params.balance}}</view>
					<view class="name">可抵扣余量</view>
					<image src="@/static/img/my-sta-bg03.png" mode="heightFix" class="bg"></image>
				</view>
			</view>
			<!-- 购券 -->
			<view class="card">
				<view class="title"><view>请选择抵扣券</view></view>
				<view class="coupons">
					<view v-for="(item,index) in coupons.data" :key="index" :class="{active:coupons.index==index}" @click="choose(item,index)" class="coupon-item">
						<view class="ticket">
							<view class="value"><text class="val">{{item.levelMoney}}</text><view class="unit">元</view></view>
							<view class="line-wrap"><view class="circle"></view><view class="line"></view><view class="circle"></view></view>
							<view class="margin"></view>
						</view>
						<view class="trapezium"></view>
						<view class="text">充电优惠券</view>
					</view>
				</view>
			</view>
			<!-- 提示 -->
			<view class="card tips">
				<view class="title">温馨提示</view>
				<view class="li">1. 抵扣券仅用于充电结算中抵扣资费，未使用完的余量，可手动发起退还</view>
				<view class="li">2. 抵扣券为专属专用不可转赠和出售</view>
				<view class="li">3. 抵扣券金额未抵扣完结,可累计到下次继续抵扣</view>
			</view>
			<view class="footer">
				<button @click="pay()" class="pay" :disabled="coupons.index<0">立即支付购买</button>
				<ax-ios-indicator></ax-ios-indicator>
			</view>
		</view>
	</ax-body>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:{},
				coupons:{
					index: -1,
					data: []
				}
			}
		},
		onShow() {
			this.getMyAccount()
			this.getLevel()
		},
		methods: {
			getLevel(){
				this.$api.base("post","/orderApi/getReChargeLevel",{},{}).then(res=>{
					this.coupons.data = res.levels;
				})
			},
			choose(item,index){
				this.coupons.index = this.coupons.index!=index ? index : -1;
			},
			pay(){
				
				if(!this.userinfo.phone){
					this.$app.url.goto('/pages/login/login')
					return;
				}
				
				
				this.$api.base("post","/orderApi/addOrder",{levelId:this.coupons.data[this.coupons.index].id},{}).then(addRes=>{
					if(addRes.orderId){
						this.$api.base("post","/orderApi/payOrder",{orderId:addRes.orderId},{}).then(res=>{
							var payInfo = JSON.parse(res.wx.wx.pay_info)
							uni.requestPayment({
							    provider: 'wxpay',
							    timeStamp: payInfo.timeStamp,
							    nonceStr: payInfo.nonceStr,
							    package: payInfo.package,
							    signType:  payInfo.signType,
							    paySign: payInfo.paySign,
							    success: (res)=> {
									console.log('success:',res);
									//注册一个用户支付成功后点确定的事件
									this.$app.popup.alert('支付成功','温馨提示',{showCancel:false}).then(()=>{
										this.$app.url.back()
									});
							    },
							    fail: (err)=> {
									 console.log('fail:',err);
									 //注册一个用户取消支付的事件
							       
							    }
							});
							
						})
					}
				})
				
			},
			getMyAccount(){
				this.$api.base("post","/userApi/getUserAccount",{},{}).then(res=>{
					this.userinfo = res.accountInfo
				})
			},
		}
	}
</script>

<style scoped>
@import url("coupon-buy.css");
</style>