renshou/wallet/index/index.vue

<template>
	<view>
		<!--mine/wallet/wallet.wxml-->
		<view class="bodry mt20">
			<image src="/wallet/static/wallet/images/topbg.png" class="walletbg"></image>
			<view class="balance">
				<view class="mywallet">我的余额(元)</view>
				<view class="bottm dflex">
					<view class="money">
						<!-- ￥ --><text class="num">{{money.all?money.all:'0'}}</text>
					</view>
					<view class="detailed" @tap="toDetailed">余额明细</view>
				</view>
			</view>
			<!-- <view class="dflex top">
      <label style="font-size:32rpx;font-weight:bold;">我的余额</label>
      <view style="font-size:32rpx">
        <text class="qian"
          style="font-size:52rpx;font-weight:bold;margin-right: 10rpx;">{{money.all?money.all:'0'}}</text>元
        <view class="dflex yueDetaile " @tap="toDetailed">余额明细<image src="/static/pages/images/more.png" role="img"
            class="more"></image>
        </view>
      </view>
    </view> -->
			<!-- 充值金额 -->
			<view class="recharge">
				<view :class="'dflex rechargeId' + (isInt ? ' on' : '')">
					<text>￥</text>
					<input placeholder="点击输入充值金额" placeholder-class="placeholder" v-model="pay" @input="amount"
						@focus="focus" @blur="onBlur" />
				</view>
				<view class="rechargeMoney" v-if="TabList&&TabList.length>0">快捷充值</view>
				<view class="rechargeul dflex" v-if="TabList&&TabList.length>0">
					<view v-for="(item, index) in TabList" :key="index"
						:class="'rechargeli ' + (item.active?'active':'')" @tap="switchTab(item,index)">
						<view :class="'wealth ' + (item.active?'awealth':'')">充{{item.rechargeAmount}}元</view>
						<view :class="'give ' + (item.active?'awealth':'')" v-if="item.donationAmount>0">
							送{{item.donationAmount}}元
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kong"></view>
		<view class="chongzhi" @tap="remainder">立即充值</view>
		<view class="card" @tap="goCard">激活卡充值</view>
		<view class="kong"></view>
	</view>
</template>

<script>
	// mine/wallet/wallet.js
	const route = require("../../utils/route.js");
	const req = require("../../utils/request");
	const app = getApp();

	export default {
		data() {
			return {
				TabList: [],
				money: "",
				id: "",
				pay: "",
				active: false,
				isInt: false,
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.extendNew();
			this.balance();
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		methods: {
			// 查询用户余额
			extendNew() {
				route.extendNew({}, res => {
					this.setData({
						money: res
					});
					console.log(res);
				});
			},

			// 查询余额充值策略
			balance() {
				route.balance({}, res => {
					// res=res.map(it=>{
					//   it.active=false
					//   return it
					// })
					if (!res) {} else if (res.length > 0) {
						this.setData({
							TabList: res,
							// ['TabList[0].active']: true,
							// id: res[0].id,
							// pay: res[0].rechargeAmount
						});
					}

					console.log(this.TabList);
				});
			},

			switchTab(item, index) {
				// let index = event.currentTarget.dataset.index;
				// let id = event.currentTarget.dataset.id;
				// let money = event.currentTarget.dataset.money;
				let def = this.TabList.findIndex(it => it.active || it.actives);
				let d = {};
				console.log(def, index);
				d['TabList[' + def + '].active'] = false;
				d['TabList[' + def + '].actives'] = false;
				d['TabList[' + index + '].active'] = true;
				d['pageList'] = []; // this.data.form.states=this.data.TabList[index].state.toString();
				// this.data.form.state = this.data.TabList[index].state;
				console.log(item)
				this.setData({
					id: item.id,
					active: false,
					pay: item.rechargeAmount
				});
				this.setData(d);
			},

			switchTab1() {
				let def = this.TabList.findIndex(it => it.active);
				let d = {};
				if (def == -1) return;
				d['TabList[' + def + '].active'] = false;
				d['TabList[' + 0 + '].actives'] = true;
				this.setData({
					active: true,
					id: ''
				});
				this.setData(d);
			},

			// 输入金额根据输入金额获取赠送多少金额
			amount(e) {
				console.log(e.detail.value);
				let money = e.detail.value;
				this.setData({
					pay: money,
					id: ''
				});
			},

			focus(e) {
				this.setData({
					pay: ""
				})
				this.isInt = true;
				let def = this.TabList.findIndex(it => it.active);
				let d = {};
				console.log(def)
				if (!e.detail.value) {

				} else {
					let money = e.detail.value
					this.setData({
						pay: money
					})
				}
				if (def == -1) return
				d['TabList[' + def + '].active'] = false;
				d['TabList[' + 0 + '].actives'] = true;
				console.log(e, "111111111111", e.detail.value)
				this.setData(d);
				this.setData({
					id: ''
				})
			},
			onBlur() {
				this.isInt = false;
			},
			//跳充值卡
			goCard() {
				app.globalData.navigateTo('wallet/rechargeCard/index')
			},

			// 余额充值
			remainder(id) {
				let that = this;
				let from = {};
				console.log(that.pay);

				if (this.pay && this.pay > 0) {
					from.money = this.pay;
				} else {
					return req.msg('输入的充值金额需大于0');
				}

				if (this.id) {
					from.rulesId = this.id;
					delete from.money;
				}

				console.log(from);
				route.remainder(from, data => {
					if (!data) {
						return req.msg('创建订单失败');
					} else {
						route.balancePay(data, '4', that.pay, res => {
							if (res) {
								// app.openPage('product/pay/pay?isSuccess=true' + '&balance=' + true)
								that.extendNew();
								that.active = false;
								if(TabList && TabList.length > 0){
									that.TabList[0].active = true;
									that.id = that.TabList[0].id;
									that.pay = that.TabList[0].rechargeAmount;
								}
								// this.setData({
								// 	active: false,
								// 	['TabList[0].active']: true,
								// 	id: this.TabList[0].id,
								// 	pay: this.TabList[0].rechargeAmount
								// });
							}
						});
					}

					console.log(data);
				});
			},

			// 跳转余额明细
			toDetailed() {
				app.globalData.navigateTo('wallet/detailed/detailed');
			},
			onHide() {
				this.setData({
					active: false
				})
			}

		}
	};
</script>
<style>
	@import "./index.css";
</style>