first/pages/menu/recharge/index.vue

<template>
	<view class="content">
		<navigation>
			Recharge
			<view class="bread" slot="bread">
				<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 class="rech-input-con">
		<!-- 		<view class="input-item flex">
					<input type="text" value="" placeholder="Name"
						placeholder-style="color: #BFC2CCFF;font-size:14px;" />
				</view> -->
				<view class="input-item flex" v-show="pd==0">
					<view class="login-sigh flex">
						<span class="quhao">+{{areacode}}</span>
					</view>
					<input type="text" value="" placeholder="mobile number"
						placeholder-style="color: #BFC2CCFF;font-size:14px;" v-model="mobile" />
				</view>
			<!-- 	<view class="input-item flex">
					<input type="text" value="" placeholder="email"
						placeholder-style="color: #BFC2CCFF;font-size:14px;" />
				</view> -->
			</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 v-model="payType" @change="radioGroupChange" class="payTypenName">
					<u-radio @change="radioChange(item)" v-for="(item, index) in paymentType" :key="index"
						:name="item.typeName" :disabled="item.disabled" 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>

</template>

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

		onLoad() {
            this.mobile=uni.getStorageSync('loginMobile');
			this.currentBalance=uni.getStorageSync('currentBalance');
			this.areacode = uni.getStorageSync('siteInfo').areaCode;
            this.currencySymbol=uni.getStorageSync('siteInfo').currencySymbol;
			uni.request({
				url: '/start/api/recharge/rechargeConfig',
				data: {
					"ticket": uni.getStorageSync('logInfo').data,
				},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
				},
				method: 'POST', //请求方式  或GET，必须为大写
				success: (res) => {
					uni.setStorage({
						key: 'rechargeInfo',
						data: res.data.data,
						success: function() {
							console.log('success')
						}
					});
					this.rechangeInfo = res.data.data;
					this.recharge_amount = this.rechangeInfo.recharge_amount.split(',');
					console.log(res.data, 9990);


				},
				fail: (res) => {

					console.log(res.data);
				}
			});

			uni.request({
				url: '/start/api/recharge/getPayType',
				data: {
					"ticket": uni.getStorageSync('logInfo').data,
				},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
				},
				method: 'POST', //请求方式  或GET，必须为大写
				success: (res) => {
					this.paymentType = res.data.data;
					console.log(res.data.data);
				},
				fail: (res) => {
					console.log(res.data);
				}
			});

		},
		methods: {
			PayTo(){
				if(this.payType==''){
					uni.showToast({
						title: 'Please choose the payment method',
						 icon: 'none',
						duration: 1500
					})
					return;
				}
				if(this.mobile==''){
					uni.showToast({
						title: 'Please input mobile phone number',
						 icon: 'none',
						duration: 1500
					})
					return;
				}
				var a= /^[0-9]{4,14}$/;
				if(!a.test(this.mobile)){
				uni.showToast({
					title: 'Wrong format of mobile phone number',
					 icon: 'none',
					duration: 1500
				})
				return;
				}
				if(this.tranAmt==''){
					uni.showToast({
						title: 'Please input recharge amount',
						 icon: 'none',
						duration: 1500
					})
					return;
				}
				if(this.tranAmt<100){
					uni.showToast({
						title: 'Recharge amount cannot be less than 100',
						 icon: 'none',
						duration: 1500
					})
					return;
				}
				uni.request({
					url: '/start/api/recharge/recharge',
					data: {
						"ticket": uni.getStorageSync('logInfo').data,
						"payType":this.payType,
						"tranAmt":this.tranAmt,
						"mobile":this.mobile,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
					},
					method: 'POST', //请求方式  或GET，必须为大写
					success: (res) => {
						
						if(res.data.errCode=='SUCCESS'){
							uni.request({
								url: '/start/api/recharge/toPay',
								data: {
									"ticket": uni.getStorageSync('logInfo').data,
									'orderNo': res.data.data.orderNo,
								},
								header: {
									'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
								},
								method: 'POST', //请求方式  或GET，必须为大写
								success: (res) => {
									if(res.data.success==true){
										uni.showToast({
											title: 'Recharge success',
											 icon: 'success',
											duration: 1500
										})
										setTimeout(function(){
											location.reload()
										},1000)
									}else{
										uni.showToast({
											title: 'Payment failed',
											 icon: 'none',
											duration: 1500
										})
									}
							
									console.log(res.data);
								},
								fail: (res) => {
									uni.showToast({
										title: res.data.errMsg,
										 icon: 'none',
										duration: 1500
									})
									console.log(res.data);
								},
							});
							}else{
							uni.showToast({
								title: res.data.errMsg,
								 icon: 'none',
								duration: 1500
							})
						}
						console.log(res.data,666666666);
						console.log(res.data.data.orderNo,666666666);
					},
					fail: (res) => {
						uni.showToast({
							title: res.data.errMsg,
							 icon: 'none',
							duration: 1500
						})
						console.log(res.data);
					}
						
				});
			},
			radioChange(e) {
				if(e.payType=='pay.offline'){
					this.pd=1;
				}else{
					this.pd=0;
				}
				console.log(e)
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			
			},
			getMonVal(m) {
				this.tranAmt = m
			}

		},
	}
</script>

<style>
	@import './index.css';
</style>