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 class="li">4. 使用时可抵扣按照当前电价进行预估计算</view>
				<view class="li">5. 实际结算价以具体充电时段为准</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>