xpl/pages/money/phone.vue

<template>
	<view class="center">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="content-money">
			<view class="body-title">
				<view class="goback-box" @click="toBack"><image class="goback" src="../../static/icon/fanhui.png" mode=""></image></view>
				<view class="header">充值中心</view>
			</view>
			<view class="content-bg"></view>
			<view class="phone">
				<view class="phone-title">充值号码</view>
				<view class="input"><input type="text" value="phone" v-model="phone" placeholder="请输入充值号码" placeholder-class="input" /></view>
			</view>
		</view>
		<view class="main-box">
			<view class="main-title">请选择充值套餐</view>
			<view class="main">
				<view class="main-item" v-for="(item, index) in moneyList" :class="{ current: id === item.id }" :key="index" @click="change(item)">
					<view class="num">
						{{ item.get_money }}
						<text>元</text>
					</view>
					<view class="yuan">售价{{ item.price }}元</view>
				</view>
			</view>
			<view class="zj">
				<view class="zj-left">
					应付金额
				</view>
				<view class="zj-right">
					￥{{money}}元
				</view>
			</view>
		</view>
		<view class="list">
			<radio-group @change="tabRadio">
				<!-- #ifdef APP-PLUS -->
				<label>
					<view class="box">
						<view class="icon iconfont iconzhifubao"></view>
						<view class="title-box">
							<view class="title"><text>支付宝充值</text></view>
						</view>
						<view class="right"><radio value="ali" color="#EB001C" :checked="type == 'ali'" /></view>
					</view>
				</label>
				<!-- #endif -->
				<label>
					<view class="box">
						<view class="icon iconfont iconweixin1"></view>
						<view class="title-box">
							<view class="title"><text>微信充值</text></view>
						</view>
						<view class="right"><radio value="weixin" color=" #EB001C" :checked="type == 'weixin'" /></view>
					</view>
				</label>
			</radio-group>
		</view>
		<!-- <view class="explain">
			<view class="explain-left">
				充值说明
			</view>
			<view class="explain-right">
			</view>
		</view> -->
		<view class="btn" @click="!payLoding ? confirm() : ''">
			立即充值
		</view>
	</view>
</template>

<script>
// #ifdef H5
import { rechargePhoneWechat, getPhone } from '@/api/wallet.js';
// #endif
// #ifdef APP-PLUS
import { rechargePhontApp, rechargePhoneAli, getPhone } from '@/api/wallet.js';
// #endif
import { mapState } from 'vuex';
export default {
	data() {
		return {
			phone: '',
			id: '',
			money:'',
			payLoding: false, //是否加载中
			type: 'weixin',
			moneyList: []
		};
	},
	onLoad() {
		this.loadData();
	},
	computed: {
		// #ifdef H5
		...mapState(['weichatObj']),
		// #endif
	},
	methods: {
		// 点击返回 我的页面
		toBack() {
			uni.navigateBack({});
		},
		loadData() {
			getPhone({}).then(({data}) =>{
				this.moneyList = data.recharge_quota;
				this.id = data.recharge_quota[0].id;
				this.money = data.recharge_quota[0].price;
				console.log(data);
			})
		},
		change(money){
			this.money = money.price;
			this.id = money.id;
		},
		// 切换选中对象
		tabRadio(e) {
			this.type = e;
		},
		confirm() {
			let obj = this;
			if(obj.phone == ''){
				obj.$api.msg("请填写要充值的号码")
				return;
			}
			obj.payLoding = true;
			// #ifdef H5
			rechargePhoneWechat({ rechar_id: this.id, mobile: this.phone })
				.then(e => {
					let da = e.data.data;
					obj.weichatObj.chooseWXPay({
						timestamp: da.timestamp,
						nonceStr: da.nonceStr,
						package: da.package,
						signType: da.signType,
						paySign: da.paySign,
						success: function(res) {
							uni.showToast({
								title: '充值成功',
								duration: 2000,
								position: 'top'
							});
						}
					});
					obj.payLoding = false;
				})
				.catch(e => {
					obj.payLoding = false;
					console.log(e);
				});
			// #endif
			// #ifdef APP-PLUS
			if (this.type == 'weixin') {
				rechargePhontApp({ rechar_id: this.id, mobile: this.phone })
					.then(e => {
						let da = e.data;
						let data = {
							appid: da.appid,
							noncestr: da.noncestr,
							package: da.package,
							partnerid: da.partnerid,
							prepayid: da.prepayid,
							timestamp: da.timestamp,
							sign: da.sign
						};
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: data,
							success(res) {
								console.log(res);
							},
							fail(res) {
								console.log('微信掉起失败');
								console.log(res, '失败');
							}
						});
		
						obj.payLoding = false;
					})
					.catch(e => {
						obj.payLoding = false;
						console.log(e);
					});
			} else {
				rechargePhoneAli({ rechar_id: this.id, mobile: this.phone }).then(e => {
					console.log(e, 'url');
					const url = e.msg;
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: url,
						success: res => {
							console.log(res);
							uni.showToast({
								title: '支付成功',
								duration: 2000
							});
						},
						fail: e => {
							console.log(e);
						},
						complete: () => {}
					});
					obj.payLoding = false;
				}).catch(e =>{
					obj.payLoding = false;
				});
			}
			// #endif
		},
	}
};
</script>

<style lang="scss">
page,.center {
	background: #f1f1f1;
	height: 100%;
	padding-bottom: 30rpx;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.content-money {
	padding-bottom: 30rpx;
	position: relative;
	height: 520rpx;
	.content-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 520rpx;
		background: linear-gradient(30deg, #2e58ff, #33eeff);
		border-bottom-right-radius: 35%;
		border-bottom-left-radius: 35%;
	}
	.body-title {
		height: 80rpx;
		text-align: center;
		font-size: 35rpx;
		position: relative;
		.header {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fffeff;
			height: 80rpx;
			font-size: 36rpx;
			font-weight: 700;
			z-index: 9;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.goback-box {
			position: absolute;
			left: 18rpx;
			top: 0;
			height: 80rpx;
			display: flex;
			align-items: center;
		}

		.goback {
			z-index: 100;
			width: 34rpx;
			height: 34rpx;
		}
	}
}
.phone {
	position: relative;
	z-index: 10;
	padding: 50rpx 27rpx 0;
	.phone-title {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
	.input {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #e5e5e5;
	}
}
.main-box {
	position: relative;
	z-index: 10;
	width: 694rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	margin: -200rpx auto 0;
	padding: 30rpx;
	.main-title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #010101;
	}
	.main {
		padding-top: 14rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		.current {
			background: linear-gradient(0deg, #2e58ff, #32c6ff) !important;
			.num,.yuan{
				color: #FFFFFF !important;
			}
		}
		.main-item {
			margin-top: 14rpx;
			line-height: 1;
			width: 204rpx;
			height: 130rpx;
			background: #d6e9ff;
			border-radius: 7rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.num {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #2e58ff;
				text {
					display: inline-block;
					padding-left: 8rpx;
					font-size: 26rpx;
				}
			}
			.yuan {
				margin-top: 18rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #999999;
			}
		}
	}
	.zj {
		margin-top: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.zj-left {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.zj-right {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FF0000;
		}
	}
}
.list {
	padding-left: 30rpx;
	margin-top: 30rpx;
	background-color: #ffffff;
	.box {
		display: flex;
		align-items: center;
		width: 100%;
		height: 120rpx;
		border-bottom: 1px solid $border-color-light;
		.icon {
			font-size: 48rpx;
			padding-right: 20rpx;
		}
		.iconweixin1 {
			color: #18bf16;
		}
		.iconzhifubao {
			color: #08aaec;
		}
		.title-box {
			flex-grow: 1;
			text-align: left;
			.title {
				font-size: $font-base + 2rpx;
				color: $font-color-base;
			}
			.node {
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}
}
.btn {
	margin: 200rpx auto 0;
	width: 696rpx;
	height: 84rpx;
	background: linear-gradient(0deg, #2E58FF, #32C6FF);
	border-radius: 42rpx;
	text-align: center;
	line-height: 84rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
}
</style>