H5_module/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 ddflex">
					我的余额(元)
					<view class="hy-code ddflex" @click="jumpUrl('/mine/payCode/payCode')">
						<image src="../static/wallet/images/hy_ma.png" class="hy-ma"></image>
						会员码
					</view>
				</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" /> -->
					<input placeholder="点击输入充值金额" placeholder-class="placeholder" disabled="true" v-model="pay" type="digit" @click="open()" />
				</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" v-if="hideKey" @tap="remainder">立即充值</view> -->
		<!-- <view class="card" @tap="goCard">激活卡充值</view> -->
		<!-- <view class="kong"></view> -->

		<cu-keyboard ref="cukeyboard" @change="change" @confirm="confirm" @hide="hide" confirmText="充值" confirmBgColor="background-color:#FD3A31"></cu-keyboard>
	</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,
			hideKey: false
		};
	},

	components: {},
	props: {},

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

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

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

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

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

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {},
	methods: {
		change(e) {
			this.pay = e;
			console.log('数字改变', e);
		},
		open() {
			console.log('打开键盘');
			this.hideKey = false;
			this.$refs.cukeyboard.open();
			this.$refs.cukeyboard.value = this.pay;
			this.TabList.map(it => {
				it.active = false;
				return it;
			});
			this.$forceUpdate();
		},

		confirm(e) {
			if (!this.pay && this.pay <= 0) {
				req.msg('请输入充值金额');
				return;
			}
			this.hide();
			this.remainder();
		},
		hide() {
			this.hideKey = true;
			this.TabList.map(it => {
				it.active = false;
				return it;
			});
			this.$forceUpdate();
			console.log('关闭键盘');
		},

		// 查询用户余额
		extendNew() {
			route.extendNew({}, res => {
				this.setData({
					money: res
				});
				console.log(res);
				this.$forceUpdate();
			});
		},

		// 查询余额充值策略
		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 = {};
			if (this.pay && this.pay > 0) {
				if(this.pay > 300000){
					return req.msg('输入的充值金额需小于30万元');
				}else{
					from.money = this.pay;
				}
			} else {
				return req.msg('输入的充值金额需大于0');
			}
			if (this.id) {
				from.rulesId = this.id;
				delete from.money;
			}
			route.remainder(from, data => {
				if (!data) {
					return req.msg('创建订单失败');
				} else {
					route.balancePay(data, '4', that.pay, res => {
						console.log('充值回调res==',res)
						if (res) {
							that.extendNew();
							that.active = false;
							if (that.TabList && that.TabList.length > 0) {
								that.TabList[0].active = true;
								that.id = that.TabList[0].id;
								that.pay = that.TabList[0].rechargeAmount;
							}else{
								that.pay = '';
							}
						}
					});
				}

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

		// 跳转余额明细
		toDetailed() {
			app.globalData.navigateTo('wallet/detailed/detailed');
		},
		onHide() {
			this.setData({
				active: false
			});
		},
		jumpUrl(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>
<style>
@import './index.css';
</style>