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/bindBank"},"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>