lishang/pages/money/recharge.vue

<template>
	<view class="recharge">
		<view class="header">
			<text>{{ integral || '0.00' }}</text><br>
			<text>我的当前积分</text>
		</view>
		<view class="footer">
			<view class="item" v-for="l in list" @click="confirm(l)">
				<image :src="l.img" class="border"></image>
				<image :src="l.icon" class="i"></image>
				<view class="rechargetext">{{l.recharge}}<text>积分</text></view>
				<view class="pay">充{{l.pay}}</view>
				<view class="song" :style="{color: l.color}">送</view>
				<view class="button">充值{{l.pay}}元</view>
			</view>
		</view>
	</view>
</template>

<script>
// #ifdef H5
import { rechargeWechat } from '@/api/wallet.js';
// #endif
// #ifdef MP
import { rechargeRoutine } from '@/api/wallet.js';
// #endif
	export default {
		data() {
			return {
				type: 'weixin',
				list: 
					[{
						pay: 1000,
						recharge: 100,
						img: require('@/static/img/i1.png'),
						icon: require('@/static/img/ic1.png'),
						color: "#FF6000",
					},
					{
						pay: 500,
						recharge: 50,
						img: require('@/static/img/i2.png'),
						icon: require('@/static/img/ic2.png'),
						color: "#FF3115",
					},
					{
						pay: 200,
						recharge: 20,
						img: require('@/static/img/i3.png'),
						icon: require('@/static/img/ic3.png'),
						color: "#FF2C4F",
					},
					{
						pay: 100,
						recharge: 10,
						img: require('@/static/img/i4.png'),
						icon: require('@/static/img/ic3.png'),
						color: "#9525FE ",
					}]
			}
		},
		methods: {
			//充值
			confirm(item) {
				let obj = this
				uni.showModal({
					// title: "是否确认充值",
					content: "确认充值?",
					success:function(res){
						if(res.confirm) {
							obj.submit(item.pay)
						}else {
							console.log("xu")
						}
					}
				})
			},
			// 提交
			submit(money) {
				let obj = this;
				// obj.payLoding = true;
				// #ifdef H5
				rechargeWechat({ price: 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.payLoding = false;
					})
					.catch(e => {
						obj.payLoding = false;
						console.log(e);
					});
				// #endif
				// #ifdef MP
				rechargeRoutine({ price: money})
					.then(e => {
						let da = e.data;
							wx.requestPayment({
									timeStamp: da.timestamp,
									nonceStr: da.nonceStr,
									package: da.package,
									signType: da.signType,
									paySign: da.paySign,
									success: function(res) {
										uni.redirectTo({
											url: '/pages/money/paySuccess'
										});
									},
									
								})
						
						obj.payLoding = false;
					})
					.catch(e => {
						obj.payLoding = false;
						console.log(e);
					});
				// #endif
			}
		},
		computed: {
			//积分
			integral() {
				return this.$store.state.user.userInfo.integral
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #fff;
	}
	.recharge {
		background-color: #EBF3FF;
	}
	.header {
		padding: 80rpx;
		padding-top: 100rpx;
		color: #438BED;
		text-align: center;
		text:nth-child(1) {
			font-size: 80rpx;
		}
	}
	.footer {
		border-radius: 50rpx 50rpx 0 0;
		height: 70%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #fff;
		width: 100%;
		padding: 30rpx;
		.item {
			margin: 10rpx;
			width: 320rpx;
			height: 180rpx;
			margin-bottom: 30rpx;
			.border {
				position: absolute;
				width: 320rpx;
				height: 190rpx;
			}
			.i {
				width: 100rpx;
				height: 100rpx;
				position: relative;
				left: 30rpx;
				top: 20rpx;
			}
			view {
				position: relative;
			}
			.rechargetext {
				font-weight: bold;
				color: #fff;
				position: relative;
				left: calc(10% + 120rpx);
				font-size: 50rpx;
				bottom: 55rpx;
				text {
					font-weight: 500;
					margin-left: 5rpx;
					font-size: 28rpx;
				}
			}
			.pay {
				text-align: center;
				width: 150rpx;
				bottom: 162rpx;
				left: calc(50% - 75rpx);
				color: #fff;
				font-size: 28rpx;
			}
			.song {
				height: 20rpx;
				bottom: 156.8rpx;
				left: 64rpx;
				font-weight: bold;
				color: #FF6000;
				font-size: 36rpx;
			}
			.button {
				background-color: #FFF583;
				width: 200rpx;
				height: 50rpx;
				bottom: 95rpx;
				line-height: 50rpx;
				text-align: center;
				border-radius: 10rpx;
				color: #722E18;
				left: calc(50% - 100rpx);
				font-size: 26rpx;
				box-shadow: 0px 3px 8px #aaa,
			}
		}
	}
</style>