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 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>
			<!-- 提示 -->
			<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">
				<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 {
				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("post", "/orderApi/getReChargeLevel", {}, {}).then(res => {
					this.coupons.data = res.levels;
				})
			},
			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", "/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);
									//注册一个用户取消支付的事件
								}
							});

						})
					}
				})

			},
			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("post", "/userApi/getUserAccount", {}, {}).then(res => {
					this.userinfo = res.accountInfo
				})
			},
		}
	}
</script>

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