first/pages/menu/recharge/index.vue

<template>
	<view class="content">
		<navigation>
			Recharge
			<view class="bread" slot="bread" @click="invMore=true,msShow=true">
				<image src="../../../static/promo/[email protected]" mode=""></image>
			</view>
		</navigation>
		<view class="rech-body">
			<view class="pro-body-p1">Balance:<span data-v-642729fd=""
					class="category-sigh">{{currencySymbol}}</span><span class="s1">{{currentBalance}}</span></view>
			<view class="input-item flex">
				<view class="login-sigh login-sigh2  flex">
					<view class="imgcon">
						<image src="../../../static/login/[email protected]" mode=""></image>
					</view>
				</view>
				<input type="text" value="" placeholder="Enter or Select Recharge Amount"
					placeholder-style="color: #BFC2CCFF;font-size:14px;" v-model="tranAmt" />
			</view>


		</view>

		<view class="rech-mount flex" v-show="pd==0">
			<view class="mount" v-for="(item,index) in recharge_amount" :key="item" @click="getMonVal(item)">
				{{currencySymbol}} {{item}}
			</view>
		</view>

		<view class="rech-capy">
			<view class="payment">
				payment
			</view>
			<view class="paymentType">
				<u-radio-group @change="radioGroupChange" class="payTypenName"  v-model="payType">
					<u-radio @change="radioChange(item)" :name="item.payType" v-for="(item, index) in paymentType" :key="index"
						active-color="#954DE3FF">
						{{item.typeName}}
					</u-radio>
				</u-radio-group>

			</view>
		</view>
		<view class="rech-btn-con" v-show="pd==0">
			<view class="rech-btn" @click="PayTo()">
				Confirm
			</view>
		</view>
		<view class="offline-text" v-show="pd==1">
			You can follow the steps to pay:
			<view class="">
				1. Go to your M-Pesa menu or App on your phone.
			</view>
			<view class="">
				2. Go to Lipa na M-Pena then select "Pay Bill" option.
			</view>
			<view class="">
				3. Enter business number: {{mobile}} <button type="default" class="offline-button"
					@click="copyTextMethod()">Copy</button> Account number: Enter your ID : {{userId}}
			</view>
			<view class="">
				5. Enter the amount
			</view>
			<view class="">
				6. Enter your M-Pesa PIN.
			</view>
			<view class="">
				7. Confirm that all details are correct and submit.
			</view>

		</view>


		<view class="invite-more" v-show="invMore">
			<view class="invite-con">
				<view class="more-a" @click="goRecod()">
					recharge record
				</view>
				<view class="more-a" @click="goRerule()">
					recharge rules
				</view>
			</view>
			<view class="invite-con2">
				<view class="more-a" @click="invMore=false,msShow=false">
					cancel
				</view>
			</view>
		</view>
		<view class="msg-box-bg" v-show="msShow" @click="invMore=false,msShow=false,appl=false">
		</view>



	</view>

</template>

<script>
	import api from '@/utils/api'
	import utils from '@/utils'
	import cont from "@/components/navigation/navigation.vue"
	export default {
		data() {
			return {
				copyText: '',
				pd: 0,
				mobile: '',
				areacode: '',
				tranAmt: '',
				rechangeInfo: [],
				recharge_amount: [],
				paymentType: [],
				payType: 'pay.online.paxs',
				currencySymbol: '',
				currentBalance: '',
				userId: '',
				invMore: false,
				appl: false,
				msShow: false,
			}
		},

		onLoad() {
			this.ba();
			this.copyText = uni.getStorageSync('loginMobile');
			this.mobile = uni.getStorageSync('loginMobile');
			this.currentBalance = uni.getStorageSync('currentBalance');
			this.areacode = uni.getStorageSync('siteInfo').areaCode;
			this.currencySymbol = uni.getStorageSync('siteInfo').currencySymbol;
			this.userId = uni.getStorageSync('MyInfo').userId;
			const post3 = api.withdrawConfig({
				"ticket": uni.getStorageSync('logInfo').data,
			})
			post3.then(res => {
				if (res.data) {
					this.currentBalance = res.data.currentBalance;
					this.currentBalance = parseFloat(this.currentBalance).toFixed(2)
					uni.setStorage({
						key: 'currentBalance',
						data: this.currentBalance,
						success: function() {
							console.log('success')
						}
					});
				}

			})




			const post = api.rechargeConfig({
				"ticket": uni.getStorageSync('logInfo').data,
			})
			post.then(res => {
					uni.setStorage({
						key: 'rechargeInfo',
						data: res.data,
						success: function() {
							console.log('success')
						}
					});
					this.rechangeInfo = res.data;
					this.recharge_amount = this.rechangeInfo.recharge_amount.split(',');
					console.log(res.data, 9990);
				})
				.catch(e => {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 2500
					})
				})

			const post2 = api.getPayType({
				"ticket": uni.getStorageSync('logInfo').data,
			})
			post2.then(res => {
					this.paymentType = res.data;
					if(res.data.length>0){
						this.payType=res.data[0].payType
					}
				})
				.catch(e => {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 2500
					})
				})


		},
		methods: {
			goRecod() {
				uni.navigateTo({
					url: 'record/index'
				})
			},
			ba() {
				//更新余额
				const post3 = api.withdrawConfig({
					"ticket": uni.getStorageSync('logInfo').data,
				})
				post3.then(res => {

					res.data.currentBalance = parseFloat(res.data.currentBalance).toFixed(2)
					uni.setStorage({
						key: 'currentBalance',
						data: res.data.balance,
						success: function() {
							console.log('success')
						}
					});
				})
			},
			goRerule() {
				uni.navigateTo({
					url: './rechargeRule'
				})
			},
			copyTextMethod() {
				this.$copyText(this.copyText).then(res => {
					uni.showToast({
						title: 'Copy succeeded',
						icon: 'success'
					})
				})
			},
			PayTo() {
				uni.showLoading({
					title: 'loading'
				})
				if (this.payType == '') {
					uni.showToast({
						title: 'Please choose the payment method',
						icon: 'none',
						duration: 1500
					})
					return;
				}


				if (this.tranAmt == '') {
					uni.showToast({
						title: 'Please input recharge amount',
						icon: 'none',
						duration: 1500
					})
					return;
				}
				if (this.tranAmt < 0) {
					uni.showToast({
						title: 'Recharge amount cannot be less than 0',
						icon: 'none',
						duration: 1500
					})
					return;
				}
				const post2 = api.recharge({
					"ticket": uni.getStorageSync('logInfo').data,
					"payType": this.payType,
					"tranAmt": this.tranAmt,
				})
				post2.then(res => {
						if (res.success == true && res.data.msg) {
							uni.showToast({
								title: 'Recharge success',
								icon: 'success',
								duration: 1500
							})
							// #ifdef H5
							window.location.href = res.data.msg;
							// #endif
							// #ifdef APP-PLUS
							plus.runtime.openURL(res.data.msg);
							// #endif




						} else {
							uni.showToast({
								title: res.errMsg,
								icon: 'none',
								duration: 1500
							})
						}
					})
					.catch(e => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2500
						})
					})
			},

			radioChange(e) {

			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(this.payType)
			},
			getMonVal(m) {
				this.tranAmt = m
				console.log(this.tranAmt, 222)
			}

		},
	}
</script>

<style scoped lang="scss">
	@import './index.css';

	/* #ifdef APP-PLUS */
	.bread image {
		width: 28rpx;
		height: 24rpx;
		position: absolute;
		right: 36rpx;
		top: 60%;
		transform: translateY(-50%);
	}

	/* #endif */
</style>