partnerApp/pages/wallet/wallet.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 银行卡信息Start -->
		<view class="wallet-head">
			<view class="bank-det d-flex flex-column">
				<view class="d-flex">
					<image class="bank-icon flex-shrink" src="/static/image/wallet/bankcard.png" mode="widthFix">
					</image>
					<view class="bank-name d-flex flex-1">
						<p>{{bankname}}</p>
						<p style="font-size: 24upx;line-height: 40upx;">储蓄卡</p>
					</view>
					<view class="changebank" @tap="changeBank">卡包</view>
				</view>
				<view class="bank-num d-flex">
					<!-- <span>*****</span>
					<span>*****</span>
					<span>*****</span>
					0179 -->
					<span class="d-flex a-center j-center">{{accountno}}</span>
				</view>
			</view>
		</view>
		<!-- 银行卡信息End -->

		<!-- 钱包金额Start -->
		<view class="wallet-money d-flex">
			<view class="d-flex flex-1 flex-column" @tap="toBillDetails(1)">
				<view class="d-flex a-center j-center">预收账户</view>
				<view class="d-flex a-center j-center">¥{{advanceMoney}}</view>
			</view>
			<view class="d-flex flex-1 flex-column" @tap="toBillDetails(2)">
				<view class="d-flex a-center j-center">可提现现金</view>
				<view class="d-flex a-center j-center">¥{{withdrawal}}</view>
			</view>
			<view class="d-flex flex-1 flex-column" @tap="toBillDetails(3)">
				<view class="d-flex a-center j-center">推广费</view>
				<view class="d-flex a-center j-center">¥{{extendMoney}}</view>
			</view>
		</view>
		<!-- 钱包金额End -->

		<!-- 钱包数据Start -->
		<view class="wallet-data">
			<view class="bg1">
				<view>{{monthCost}}</view>
				<hr>
				<view>本月累计推广费（元）</view>
			</view>
			<view class="bg2">
				<view>{{yearCost}}</view>
				<hr>
				<view>今年累计推广费（元）</view>
			</view>
			<view class="bg3">
				<view>{{monthPremium}}</view>
				<hr>
				<view>本月推广订单保费（元）</view>
			</view>
			<view class="bg4">
				<view>{{yearPremium}}</view>
				<hr>
				<view>今年推广订单保费（元）</view>
			</view>
			<view class="bg5">
				<view>{{monthExNumber}}</view>
				<hr>
				<view>本月累计推广人数</view>
			</view>
			<view class="bg6">
				<view>{{historyNumber}}</view>
				<hr>
				<view>历史累计推广人数</view>
			</view>
		</view>
		<!-- 钱包数据End -->
		<view style="height: 100upx;"></view>

		<view class="wallet-btn d-flex">
			<view @tap="toSpread" class="d-flex a-center j-center flex-1">推广</view>
			<view @tap="toWithdraw" class="d-flex a-center j-center flex-1">提现</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				bankname: '',
				accountno: '',
				advanceMoney: '0', // 预收账户金额
				withdrawal: '0', //可提现金额
				extendMoney: '0', //推广费

				monthCost: '0',
				yearCost: '0',
				monthPremium: '0',
				yearPremium: '0',
				monthExNumber: '0',
				historyNumber: '0'

			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		async onShow() {
			await this.getAdvanceMoney(); //预收金额
			await this.getPayAccount(); //可提现余额
			await this.getExtendMoney(); //推广费

			await this.getQuerywallet(); //查询推广
		},
		// onLoad() {
		// 	this.bankname=this.userInfo.esmUserInternal.bankname;
		// 	this.accountno = this.formatBankNo({"value":this.userInfo.esmUserInternal.accountno});
		// },
		onShow() {
			this.bankname = this.userInfo.esmUserInternal.bankname;
			this.accountno = this.formatBankNo({
				"value": this.userInfo.esmUserInternal.accountno
			});
		},
		methods: {

			// 预收账户金额查询
			async getAdvanceMoney() {
				let res = await this.$http.get('/insPayApply/advanceAccount?userid=' + this.userInfo.sysUser.id, {}, {
					load: false
				});
				this.advanceMoney = res.data;
			},

			// 可提现余额查询
			async getPayAccount() {
				let res = await this.$http.get('/insPayApply/payAccount?userid=' + this.userInfo.sysUser.id, {}, {
					load: false
				});
				this.withdrawal = res.data.accountBalance;
			},

			//推广费
			async getExtendMoney() {
				let res = await this.$http.get('/insPayApply/extendAccount?userid=' + this.userInfo.sysUser.id, {}, {
					load: false
				});
				this.extendMoney = res.data.accountBalance;
			},

			//推广费
			async getQuerywallet() {
				let res = await this.$http.get('/insPayApply/querywallet?userid=' + this.userInfo.sysUser.id, {}, {
					load: false
				});
				this.monthCost = res.data.monthCost; //本月累计推广费
				this.yearCost = res.data.yearCost; //今年累计推广费
				this.monthPremium = res.data.monthPremium; //本月推广订单保费
				this.yearPremium = res.data.yearPremium; //今年推广订单保费
				this.monthExNumber = res.data.monthExNumber; //本月累计推广人数
				this.historyNumber = res.data.historyNumber; //历史累计推广人数
			},

			// 去账单明细
			toBillDetails(type) {
				this.navigate({
					url: "/pages/wallet/billDetails" + type
				}, "navigateTo", true)
			},

			// 绑定银行卡界面
			changeBank() {
				this.navigate({
					url: "/pages/wallet/bankCard"
				}, "navigateTo", true);
			},
			// 推广界面
			toSpread() {
				this.navigate({
					url: "/pages/tools/poster/poster"
				}, "navigateTo", true);
			},
			//提现界面
			toWithdraw() {
				this.navigate({
					url: "/pages/wallet/withdraw"
				}, "navigateTo", true);
			},

			//格式化银行卡号
			formatBankNo(BankNo) {
				if (BankNo.value == "") return;
				var account = new String(BankNo.value);
				account = account.substring(0, 22); /*帐号的总数, 包括空格在内 */
				if (account.match(".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null) {
					/* 对照格式 */
					if (account.match(".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" + ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" +
							".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" + ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null) {
						var accountNumeric = "";
						var accountChar = "";
						var i;
						for (i = 0; i < account.length; i++) {
							accountChar = account.substr(i, 1);
							if (!isNaN(accountChar) && (accountChar != " ")) accountNumeric = accountNumeric + accountChar;
						}
						account = "";
						for (i = 0; i < accountNumeric.length; i++) {
							/* 可将以下空格改为-,效果也不错 */
							if (i == 4) account = account + " "; /* 帐号第四位数后加空格 */
							if (i == 8) account = account + " "; /* 帐号第八位数后加空格 */
							if (i == 12) account = account + " "; /* 帐号第十二位后数后加空格 */
							if (i == 16) account = account + " "; /* 帐号第十二位后数后加空格 */
							account = account + accountNumeric.substr(i, 1)
						}
					}
				} else {
					account = " " + account.substring(1, 5) + " " + account.substring(6, 10) + " " + account.substring(14,
						18) + "-" + account.substring(18, 25);
				}
				if (account != BankNo.value) BankNo.value = account;

				return account;
			}
		}
	}
</script>


<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	/* 银行卡信息Start */
	.wallet-head {
		position: relative;
		width: 100%;
		height: 264upx;
		background: url('/static/image/wallet/imgbg.jpg') no-repeat 50%;
		background-size: 100% 100%;
	}

	.wallet-head .bank-det {
		position: absolute;
		color: #FFFFFF;
		left: 5%;
		top: 32upx;
		width: 90%;
		height: 232upx;
	}

	.wallet-head .bank-det .bank-icon {
		margin-left: 5.5%;
		margin-top: 48upx;
		height: 70upx;
		width: 70upx;
		vertical-align: top;
	}

	.wallet-head .bank-det .bank-name {
		display: inline-block;
		vertical-align: top;
		padding: 46upx 0 0 20upx;
		font-size: 36upx;
		line-height: 45upx;
	}

	.wallet-head .bank-det .changebank {
		float: right;
		display: inline-block;
		vertical-align: top;
		width: 110upx;
		padding-top: 0;
		margin-top: 48upx;
		margin-right: 6%;
		height: 50upx;
		line-height: 50upx;
		border: 1px solid #fff;
		border-radius: 30upx;
		text-align: center;
		font-size: 30upx;
	}

	.wallet-head .bank-det .bank-num {
		/* width: 86%; */
		width: 100%;
		display: inline-block;
		vertical-align: top;
		padding-top: 20upx;
		font-size: 36upx;
		text-align: right;
		line-height: 40upx;
	}

	.wallet-head .bank-det .bank-num span {
		vertical-align: middle;
		/* margin-right: 10%; */
		opacity: .5;
		font-size: 42upx;
		line-height: 50upx;
	}

	/* 银行卡信息End */

	/* 钱包金额Start */
	.wallet-money {
		width: 100%;
		height: 130upx;
		background: #343740;
		color: #fff;
	}

	.wallet-money>view>view:nth-of-type(1) {
		font-size: 24upx;
		opacity: 0.4;
		margin-top: 27upx;
		line-height: 30upx;
	}

	.wallet-money>view>view:nth-of-type(2) {
		font-size: 28upx;
		margin-top: 10upx;
		line-height: 40upx;
	}

	/* 钱包金额End */

	/* 钱包数据Start */
	.wallet-data {
		width: 100%;
		height: auto;
		padding: 2upx 0 100upx;
		background: #fefefe;
	}

	.wallet-data>view {
		display: inline-block;
		vertical-align: top;
		width: 330upx;
		height: 160upx;
		padding-left: 50upx;
		box-sizing: border-box;
		margin: 30upx 0 0 30upx;
		border-radius: 5upx;
		box-shadow: 3upx 8upx 30upx #efeff4, -3upx 8upx 30upx #efeff4;
		background: #fff;
	}

	.wallet-data .bg1 {
		background: url('/static/image/wallet/bg1.png') no-repeat 50%;
		background-size: 100% 100%;
	}

	.wallet-data .bg2 {
		background: url('/static/image/wallet/bg2.png') no-repeat 50%;
		background-size: 100% 100%;
	}

	.wallet-data .bg3 {
		background: url('/static/image/wallet/bg3.png') no-repeat 50%;
		background-size: 100% 100%;
	}

	.wallet-data .bg4 {
		background: url('/static/image/wallet/bg4.png') no-repeat 50%;
		background-size: 100% 100%;
	}

	.wallet-data .bg5 {
		background: url('/static/image/wallet/bg5.png') no-repeat 50%;
		background-size: 100% 100%;
	}

	.wallet-data .bg6 {
		background: url('/static/image/wallet/bg6.png') no-repeat 50%;
		background-size: 100% 100%;
	}

	.wallet-data>view>view:nth-of-type(1) {
		padding-top: 20upx;
		line-height: 60upx;
		font-size: 32upx;
		color: #333;
	}

	.wallet-data>view hr {
		width: 35upx;
	}

	.wallet-data>view>view:nth-last-of-type(1) {
		font-size: 20upx;
		color: #999;
		line-height: 54upx;
	}

	/* 钱包数据End */

	.wallet-btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 100upx;
		line-height: 100upx;
	}

	.wallet-btn>view {
		font-size: 36upx;
		flex-shrink: 1;
		height: 100%;
		font-weight: bold;
		box-sizing: border-box;
		width: 100%;
	}

	.wallet-btn>view:nth-of-type(1) {
		color: $themeColor;
		background: #fff;
		border-top: 1px solid #d4d4d4;
	}

	.wallet-btn>view:nth-of-type(2) {
		color: #fff;
		background: $themeColor;
		border-top: 1px solid $themeColor;
	}
</style>