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

<template>
	<ax-body blank="0">
		<view class="page-background">
			<image :src="pageBg" mode="widthFix"></image>
		</view>
		<view style="height: 324rpx;"></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.balance }}</view>
					<view class="name">可抵扣余量</view>
					<image src="@/static/img/my-sta-bg03.png" mode="heightFix" class="bg"></image>
					<view class="overflow-payment" v-if="order_info != null" @click="topage_order">
						<text v-if="order_info.maspStatus === 1">超{{ (order_info.maspAmount +
							order_info.maspRealAmount).toFixed(2) || '0.00' }}元</text>
						<text class="ax ax-iconline i-arrow-right icon"></text>
					</view>
				</view>
			</view>
			<!-- 购券 -->
			<view class="card">
				<view class="title">
					<view>请选择抵扣券</view>
					<template v-if="order_info != null">
						<view class="title-text" v-if="order_info.maspStatus === 1">
							至少充值{{ (3 + ((order_info.maspAmount + order_info.maspRealAmount))).toFixed(2) || '0.00'
							}}元(超充{{ (order_info.maspAmount + order_info.maspRealAmount).toFixed(2) || '0.00'
							}}元，余量需大于3元才能启动)
						</view>
					</template>
				</view>
				<!-- 				<view class="coupons">
					<view v-for="(item,index) in coupons.data" :key="index"
						:style="{opacity:`${(3+(order_info.maspAmount+order_info.maspRealAmount)).toFixed(2)>item.levelMoney?'0.4':''}`}"
						: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 class="new-coupons-box">
					<view v-for="(item, index) in coupons.data" :key="index"
						:class="{ newCouponsActive: coupons.index == index }" class="new-coupons"
						@click="choose(item, index)">
						<!-- :style="{ opacity: `${(3 + (order_info.maspAmount + order_info.maspRealAmount)).toFixed(2) > item.levelMoney ? '0.4' : ''}` }" -->
						<view class="new-coupons-price">{{ item.money }}<text style="font-size: 22rpx;">元</text>
						</view>
						<view class="new-coupons-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 style="height: 100rpx;"></view>
			<view class="footer">
				<template v-if="order_info != null">
					<view class="payment-tips" v-if="coupons.index >= 0">
						购买{{ select_num }}元，补缴{{ (order_info.maspAmount + order_info.maspRealAmount).toFixed(2) }}元，剩余{{
							(select_num - (order_info.maspAmount + order_info.maspRealAmount)).toFixed(2) }}元
					</view>
				</template>
				<button @click="pay()" class="pay" :disabled="coupons.index < 0">立即支付购买</button>
				<ax-ios-indicator></ax-ios-indicator>
			</view>
		</view>
	</ax-body>
</template>

<script>
import app from '../../static/js/app'
export default {
	data() {
		return {
			pageBg: 'https://charge.hub.zswlgz.com/apifile//2025/11/17/X8YskVhD8AvJ9ac83ff9418869e4eec3c40fe1fd9146_20251117102852A001.png',
			userinfo: {},
			select_num: null,
			payment: null,
			order_info: null,
			order_status: [],
			coupons: {
				index: -1,
				data: []
			}
		}
	},
	onShow() {
		this.getMyAccount()
		this.getLevel()
		this.select_orderstatus()
		this.get_orderPayment()
	},
	onLoad(options) {
		this.payment = options.payment
	},
	methods: {
		getLevel() {
			this.$api.base("get", "/applet/v1/order/getReChargeLevel", {}, {}).then(res => {
				this.coupons.data = res.data;
			})
		},
		choose(item, index) {
			if (this.order_info != null) {
				let num = ((this.order_info.maspAmount + this.order_info.maspRealAmount) + 3).toFixed(2)
				if (num > item.levelMoney) {
					this.$app.popup.toast(`购买金额必须大于${num}元`)
					return
				}
			}
			this.coupons.index = this.coupons.index != index ? index : -1;
			this.select_num = item.levelMoney
		},
		pay() {
			if (!this.userinfo.phone) {
				this.$app.url.goto('/pages/login/login')
				return;
			}
			if (this.order_status.length > 0) {
				this.$app.popup.confirm('您当前有正在进行中的订单，请结束订单后再进行充值并重新发起操作', '提示', {
					showCancel: true,
					confirmText: "查看订单"
				}).then((res) => {
					if (res) {
						this.$app.url.goto('/pages/order/order?index=' + 1);
					}
				})
				return
			}
			this.$api.base("post", "/applet/v1/order/createOrder", {
				levelId: this.coupons.data[this.coupons.index].id
			}, {}).then(addRes => {
				console.log(addRes, '创建订单返回');
				if (addRes.data.orderId) {
					this.$api.base("put", `/applet/v1/order/payOrder/${addRes.data.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);
								//注册一个用户取消支付的事件
							}
						});

					})
				}
			})

		},
		select_orderstatus() {
			this.$api.base("post", "/chargeApi/queryOrderList", {
				type: 1
			}, {}).then(res => {
				this.order_status = res.table.rows
			})
		},
		get_orderPayment() {
			// maspStatus（1:待补缴，2：已补缴）realPredictServiceCost平台；maspAmount第三方
			this.$api.base("post", "/chargeApi/queryOrderList-arrearage", {}, {}).then(res => {
				this.order_info = res.data
			})
		},
		topage_order() {
			this.$app.url.goto('/pages/order-detail/order-detail?orderId=' + this.order_info.id);
		},
		getMyAccount() {
			this.$api.base("get", "/applet/v1/user/getUserInfo", {}, {}).then(res => {
				this.userinfo = res.data
			})
		},
	}
}
</script>

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