mall-laonong/pagesA/recharge/recharge.vue

<template>
	<view class="pad-x170" v-if="isLoading">
		<status-nav :ifReturn="true" navBarTitle="我的余额" :marginBottom="0"></status-nav>
		<!-- 余额概况 -->
		<view class="recharge border-box">
			<view class="recharge-msg radius30 border-box">
				<view class="txt flex">
					<text class="font30">我的余额</text>
					<text class="font24">余额可用于购物使用</text>
				</view>
				<view class="price font60"><text class="font48">￥</text>{{balance}}</view>
			</view>
		</view>
		<!-- 充值金额 -->
		<view class="recharge-amount border-box pad-all20 mar-s20">
			<view class="recharge-title font30 flex">
				<view class="line background-orange"></view>
				<text>充值金额</text>
			</view>
			<view class="amount-list flex">
				<view class="amount-item border-box radius20 mar-s25" @tap="changeAmount(index)" :class="index==amountIndex?'checked':''" v-for="(item,index) in amountList" :key="index">
					<view class="font48 mar-s15">{{parseInt(item.money)}}元</view>
					<text class="font24">售价{{parseInt(item.price)}}元</text>
				</view>
			</view>
		</view>
		<!-- 明细 -->
		<view class="recharge-detailed border-box pad-all20 mar-s20">
			<view class="recharge-title font30 flex">
				<view class="line background-orange"></view>
				<text>消费明细</text>
			</view>
			<view class="detailed-list">
				<view class="detailed-item font30 border-box pad-sx20 flex" v-for="(item,index) in detailedList" :key="index">
					<view class="txt">
						<view class="name mar-x10">{{item.title}}</view>
						<view class="time font24 color-99">{{item.create_time}}</view>
					</view>
					<view class="price" :class="parseFloat(item.money)<0?'color-red':''">{{item.money}}</view>
				</view>
			</view>
		</view>
		<!-- 尾部 -->
		<view class="pull-footer-bg background-white pad-all20 radius30 border-box">
			<view class="pull-footer background-grey radius30 pad-all20 border-box flex">
				<view class="price color-ff" style="margin-left: 24rpx;">
					<view class="font60 flex">￥{{amountPrice}}</view>
				</view>
				<view class="btn font36 color-48 background-orange radius30 flex" @tap="submitEv">确认充值</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amountList:[],//充值模板
				amountIndex:0, //充值选中
				amountPrice:'', //充值金额
				detailedList:[],//明细列表
				balance:'', //用户余额
				flag:true,
				isLoading:false,
			}
		},
		onShow() {
			// 获取用户信息
			this.getUserInfo();
			// 获取充值模板
			this.getAmountMode();
		},
		methods: {
			// 获取个人信息
			getUserInfo(){
				this.$requst.post('/api/user/info').then(res=>{
					if(res.code == 0){
						console.log(res,'用户信息');
						this.balance = res.data.balance;
						// 获取余额消费记录
						this.getPeiceDetailed();
					}
				})
			},
			
			// 获取充值模板
			getAmountMode(){
				this.$requst.post('/api/user/recharge-template-list').then(res=>{
					if(res.code == 0){
						console.log(res,'充值模板');
						let amountArr = [];
						res.data.forEach(item=>{
							let amountObj = {
								id:item.id,
								name:item.name,
								money:item.money,
								price:item.price,
								status:item.status
							}
							amountArr.push(amountObj);
						})
						this.amountList = amountArr;
						this.amountPrice = this.$toolAll.tools.addXiaoShu(this.amountList[0].price);
					}
				})
			},
			
			// 获取余额消费记录
			getPeiceDetailed(){
				uni.showLoading({
					title:'加载中'
				})
				this.$requst.post('/api/user/balance-log-list',{template_id:this.amountList[this.amountIndex].id}).then(res=>{
					if(res.code == 0){
						console.log(res,'余额记录');
						this.detailedList = res.data;
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			
			// 选择充值金额
			changeAmount(index){
				if(index!==this.amountIndex){
					this.amountIndex = index;
					this.amountPrice = this.$toolAll.tools.addXiaoShu(this.amountList[index].price);
				}
			},
			
			// 发起充值
			submitEv(){
				if(this.flag){
					this.$requst.post('/api/recharge/create',{template_id:this.amountList[this.amountIndex].id}).then(res=>{
						if(res.code == 0){
							console.log(res,'发起充值');
							// 调用微信支付
							this.callPayMent(res.data);
						}else{
							this.$toolAll.tools.showToast(res.msg);
						}
					})
				}
			},
			
			// 调用微信支付
			callPayMent(data){
				//调起支付
				wx.requestPayment({ 
					'timeStamp': data.timeStamp,
					'nonceStr': data.nonceStr,
					'package': data.package,
					"signType": data.signType,
					'paySign': data.sign,
					'success': (res)=> { // 接口调用成功的回调函数
						console.log('支付成功:',res);
						this.amountConfirm(data.coding);
					},
					'fail': function (res) { // 接口调用失败的回调函数
						console.log('支付失败:' + JSON.stringify(res));
					}
				  })
			},
			
			// 确认充值
			amountConfirm(coding){
				this.$requst.post('/api/recharge/paid',{order_coding:coding}).then(res=>{
					if(res.code == 0){
						console.log(res,'充值成功');
						this.$toolAll.tools.showToast('充值成功');
						// 重新获取用户信息
						this.getUserInfo();
						setTimeout(()=>{
							this.flag = true;
						},1200)
					}else{
						this.$toolAll.tools.showToast(res.msg);
						setTimeout(()=>{
							this.flag = true;
						},1200)
					}
				})
			}
		}
	}
</script>

<style>
	
</style>