mh/pages/me/recharge.vue

<template>
	<view class="chongzhi">
		<view class="chongzhitop">
			<view class="appleczsb">
				<view class="appleczsb-img"><image src="https://www.chaomangdao.com/image/me/appleczsb.jpg"></image></view>
				<view class="appleczsb-font">
					<text>当前金币</text>
					<span>{{ capital.coin }}</span>
				</view>
				<!-- #ifdef H5 -->
				<a href="https://www.chaomangdao.com/image/me/czsp.mp4">
					<view class="appleczsb-czjc">
						<text>充值教程</text>
						<span></span>
					</view>
				</a>
				<!-- #endif -->
			</view>
			<view class="chongzhitop-font flex">
				<text>选择充值金额</text>
				<text>
					实际到账金币：
					<text class="money">{{ realCoin }}</text>
				</text>
			</view>
			<view class="main flexs">
				<view class="main-item center" :class="{ active: index == i }" @click="changeMoney(index)" v-for="(item, index) in rechargeList" :key="index">
					<text>￥</text>
					<text>{{ item.coin }}</text>
				</view>
			</view>
		</view>
		<view class="choose">
			<view class="choose-title">选择支付方式</view>
			<view class="choose-main">
				<view class="choose-main-item flex" v-for="(item, index) in payList" :key="index" @click="changePay(item.type)">
					<view class="choose-main-bg flexs">
						<image :src="item.image" mode=""></image>
						<text>{{ item.name }}</text>
					</view>
					<view class="choose-main-radio">
						<image :src="item.type == payIndex ? '/static/image/publice/xuanzhong1@2x.png' : '/static/image/publice/weixuanzhong@2x.png'" mode=""></image>
					</view>
				</view>
			</view>
			<view class="choose-font"><u-parse :content="message"></u-parse></view>
		</view>
		<button class="pay-btn" hover-class="hover-view" @click="pay">支付</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			capital: {
				box: 0,
				coin: 0
			},
			i: 0, //选择金额
			message: '',
			tips: '',
			payIndex: 1, //支付方式
			rechargeList: [], //
			bili: 0, //充值比例
			payList: [
				// #ifndef APP-PLUS
				{
					name: '微信支付',
					type: '0',
					image: '/static/image/me/weixin@2x.png'
				},
				// #endif
				// #ifdef APP-PLUS
				{
					name: '支付宝支付',
					type: '1',
					image: '/static/image/me/zhifubao@2x.png'
				}
				// #endif
			] //支付列表
		};
	},
	computed: {
		realCoin() {
			if (!this.rechargeList || this.rechargeList.length < 1) {
				return 0;
			}
			let recharge = this.rechargeList[this.i];
			console.log(recharge.rmb * this.bili * 1, '123456');
			return recharge.rmb * (this.bili * 1);
		}
	},
	created() {
		this.$api.getUserCapital().then(({ code, data }) => {
			if (code == 1) {
				this.capital = data;
			}
		});
	},
	methods: {
		//提交支付
		pay() {
			console.log(this.rechargeList[this.i].coin);
			this.$api.createRechargeOrder({ amount: this.rechargeList[this.i].coin * 1 }).then(res => {
				if (res.code === 1) {
					console.log(res, '1111');
					if (this.payIndex == 0) {
						// #ifdef MP
						this.$http.post(res.data.wechat).then(res => {
							let da = res.jsConfig;
							let data = {
								// #ifdef MP
								timeStamp: da.timeStamp,
								// #endif
								nonceStr: da.nonceStr,
								package: da.package,
								signType: da.signType,
								paySign: da.paySign,
								success: function(res) {
									uni.showToast({ title: '支付成功' });
									setTimeout(() => {
										uni.redirectTo({ url: '/pages/me/wallet' });
									}, 800);
								},
								fail: () => {
									uni.showToast({ title: '支付失败' });
								}
							};
							console.log(data);
							wx.requestPayment(data);
						});
						// #endif
					} else if (this.payIndex == 1) {
						res.data.alipay = res.data.alipay.slice(28, res.data.alipay.length);
						console.log(res.data.alipay);
						this.$http
							.post(res.data.alipay)
							.then(res => {
								console.log(res, '123456');
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: res,
									success: res => {
										console.log(res);
										uni.showToast({
											title: '支付成功',
											duration: 2000
										});
									},
									fail: e => {
										console.log(e);
									},
									complete: () => {}
								});
							})
							.catch(err => {
								console.log(err, 'err');
							});
					}
				}
			});
		},
		//选择金额
		changeMoney(index) {
			this.i = index;
		},
		//切换支付方式
		changePay(index) {
			this.payIndex = index;
		},
		//获取充值列表
		loadData() {
			this.$api.rechargeList().then(res => {
				if (res.code === 1) {
					this.tips = res.data.tips;
					this.message = res.data.notice;
					this.rechargeList = res.data.list;
					this.bili = res.data.bili;
					console.log(this.rechargeList);
				}
			});
		}
	},
	onLoad() {
		this.loadData();
	}
};
</script>

<style lang="scss">
.appleczsb {
	margin-top: 1%;
	overflow: hidden;
	width: 100%;
	background: rgb(255, 255, 255);
	box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 20px 0px;
	border-radius: 32rpx;
}
.appleczsb .appleczsb-img {
	height: 175rpx;
	width: 100%;
	position: relative;
	uin-image {
		width: 100%;
		height: 100%;
	}
}
.appleczsb .appleczsb-font {
	position: absolute;
	width: 100%;
	height: 175rpx;
	left: 0;
	top: 0;
	padding: 30rpx 65rpx;
	uni-text {
		font-size: 32rpx;
		color: #ff2947;
		display: block;
	}
	span {
		font-size: 46rpx;
		font-weight: bold;
		color: #ff2947;
		display: block;
		margin-top: 20rpx;
	}
}
.appleczsb .appleczsb-czjc {
	padding: 11px 15px;
	span {
		width: 29px;
		height: 29px;
		float: right;
		background: url(../../static/image/me/czjc.png);
		display: block;
		background-size: 100% 100%;
	}
	uni-text {
		font-weight: 600;
		line-height: 48rpx;
	}
}
.chongzhi {
	min-height: calc(100vh - 44px);
	position: relative;
	padding: 0 30rpx;
	.chongzhitop {
		.chongzhitop-font {
			padding: 20rpx 0 20rpx 0;
			text {
				&:first-child {
					font-size: 32rpx;
					font-weight: bold;
				}
				&:last-child {
					color: #999999;
				}
				.money {
					color: #ff0000;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
	.main {
		flex-wrap: wrap;
		.main-item {
			margin: 0 24rpx 20rpx 0;
			width: 214rpx;
			height: 160rpx;
			background: #ffffff;
			border: 2rpx solid #ebebeb;
			border-radius: 10rpx;
			&:nth-child(3n) {
				margin-right: 0;
			}
			text {
				color: #66a6ff;
				font-size: 30rpx;
				&:last-child {
					font-size: 44rpx;
				}
			}
		}
		.active {
			border: 2rpx solid #66a6ff;
		}
	}
}
.choose {
	padding-bottom: 30rpx;
	.choose-title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 10rpx 0 30rpx 10rpx;
	}
	.choose-main {
		background: #ffffff;
		.choose-main-item {
			padding: 30rpx 20rpx;
			border: 1px solid #66a6ff;
			border-radius: 60rpx;
			.choose-main-bg {
				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
				text {
					font-size: 28rpx;
				}
			}
			.choose-main-radio {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.choose-font {
		padding: 30rpx 0;
	}
}
.pay-btn {
	/*position: absolute;
	left: 50%;
	transform: translateX(-50%);
	*/
	width: 690rpx;
	bottom: 34rpx;

	color: #fff;

	height: 88rpx;
	background: -webkit-linear-gradient(0deg, #89f7fe 0%, #66a6ff 100%);
	box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(220, 220, 220, 0.2);
	border-radius: 8rpx;
}
.password_btn {
	height: 44px;
}
</style>