myjtp/pages/recharge/pay.vue

<template>
	<view class="content">
		<view class="banner flex">
			<view class="moneyBox">
				<view class="money">{{ userInfo.now_money }}</view>
				<view class="moneyText">我的剩余金币</view>
			</view>
		</view>
		<view class="recharge">
			<view class="itemBox flex">
				<view class="item" :class="{ action: ls.num == money }" @click="money = ls.num" v-for="ls in moneyList">{{ ls.num }}元</view>
			</view>
			<u-form ref="uForm" label-width="180">
				<u-form-item label="金额"><u-input type="number" placeholder="请输入充值金额" v-model="money" /></u-form-item>
				<u-form-item left-icon='weixin-fill' :left-icon-style='{color:"#5dbc7c"}' label="微信支付">
					<view class="checkedBox flex"><image class="checked" src="../../static/img/checkedIcon.png" mode="scaleToFill"></image></view>
				</u-form-item>
			</u-form>
		</view>
		<view class="buttom" @click="confirm">
			充值
		</view>
	</view>
</template>

<script>
import { rechargeWechat } from '@/api/tp.js';
import { getUserInfo } from '@/api/login.js';
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			type: 'weixin',
			money: '', //充值金额
			payLoding: false, //是否加载中
			moneyList: [
				{
					num: 10
				},
				{
					num: 20
				},
				{
					num: 30
				},
				{
					num: 50
				},
				{
					num: 100
				},
				{
					num: 200
				},
				{
					num: 500
				},
				{
					num: 1000
				}
			]
		};
	},
	onLoad(options) {
		console.log(this.userInfo);
	},
	computed: {
		...mapState(['weichatObj']),
		...mapState('user', ['userInfo'])
	},
	methods: {
		...mapMutations('user',['setUserInfo']),
		getUserInfo(){
			
			getUserInfo().then((e) => {
				this.setUserInfo(e.data)
			}).catch((e) => {
				console.log(e);
			})
		},
		// 跳转
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		// 切换选中对象
		tabRadio(e) {
			this.type = e;
		},
		// 提交
		confirm() {
			if(!this.money){
				uni.showToast({
					title: '请填写金额！'
				});
				return
			}
			let obj = this;
			if(obj.payLoding ){
				return
			};
			obj.payLoding = true;
			rechargeWechat({ price: this.money, from: this.type })
				.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.getUserInfo()
							uni.showModal({
								title: '充值成功',
								content: '是否返回活动',
								success: res => {
									if(res.confirm){
										uni.navigateTo({
											url:'/pages/index'
										})
									}
								},
							});
						}
					});
					obj.payLoding = false;
				})
				.catch(e => {
					obj.payLoding = false;
					console.log(e);
				});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	height: 100%;
	background-color: #ffffff;
}
.buttom{
	position:fixed;
	left: 0;
	bottom: 30rpx;
	right: 0;
	margin: 0 30rpx;
	padding: 15rpx;
	background-color: #D7272B;
	color: #FFFFFF;
	text-align: center;
	font-size: 36rpx;
	font-weight:bold;
	border-radius: 10rpx ;
}
.banner {
	background-color: #ff9ba7;
	justify-content: center;
	padding: 50rpx;
	padding-bottom: 150rpx;
	.moneyBox {
		color: #ffffff;
		text-align: center;
		.money {
			font-size: 74rpx;
			font-weight: bold;
			color: #ffffff;
		}
	}
}
.recharge {
	border-top-right-radius: 50rpx;
	border-top-left-radius: 50rpx;
	margin-top: -100rpx;
	background-color: #ffffff;
	padding: 0 30rpx;
	.checkedBox {
		justify-content: flex-end;
		width: 100%;
		.checked {
			width: 36rpx;
			height: 36rpx;
		}
	}
	.itemBox {
		padding-top: 50rpx;
		flex-wrap: wrap;
		color: #ffffff;
		font-weight: bold;
		.item {
			border-radius: 10rpx;
			width: 20%;
			margin: 10rpx;
			color: #ff9ba7;
			background-color: #ffffff;
			border: 1px solid #ff9ba7;
			padding: 10rpx;
			text-align: center;
			&.action {
				color: #ffffff;
				background-color: #ff9ba7;
			}
		}
	}
}
</style>