partnerApp/pages/wallet/wallet.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 银行卡信息Start -->
		<view class="wallet-head dis f-c j-end">
			<view class="dis a-start" style="position: absolute;top:13%;left: 9.5%;">
				<image src="/static/image/my/avatar1.png" mode=""></image>
				<!-- <text style="font-size: 14px;">admin</text> -->
			</view>
			<view class="dis a-c j-s mt-2">
				<text style="font-size: 15px;color: #333333;font-weight: bold;">我的资产</text>
				<u-tag @click="changeBank" text="卡包" mode="dark"
					style="background: linear-gradient( 270deg, #0052FF 0%, #6899FF 100%);" />
			</view>
			<view class="dis a-c j-s mt-2 amount">
				<view class="dis f-c a-c" @click="toBillDetails(1)">
					<text>手续金额</text>
					<text v-if="MoneyData.handlingFee" class="sum" style="color: #0052FF;">￥ <text
							style="font-size: 14px;">{{MoneyData.handlingFee.toFixed(2)}}</text> </text>
					<text v-else class="sum" style="color: #0052FF;">￥ <text style="font-size: 14px;">0.00</text>
					</text>
				</view>
				<view class="dis f-c a-c" @click="toBillDetails(2)">
					<text>跟单金额</text>
					<text v-if="MoneyData.documentary" class="sum" style="color: #FF5600;">￥ <text
							style="font-size: 14px;">{{MoneyData.documentary.toFixed(2)}}</text> </text>
					<text v-else class="sum" style="color: #FF5600;">￥ <text style="font-size: 14px;">0.00</text>
					</text>
				</view>
				<view class="dis f-c a-c" @click="toBillDetails(3)">
					<text>推广金额</text>
					<text v-if="MoneyData.promotion" class="sum" style="color: #229805;">￥ <text
							style="font-size: 14px;">{{MoneyData.promotion.toFixed(2)}}</text> </text>
					<text v-else class="sum" style="color: #229805;">￥ <text style="font-size: 14px;">0.00</text>
					</text>
				</view>
			</view>
		</view>
		<view class="walletData dis a-c j-s f-wrap">
			<view class="fee-sector ">
				<text>手续金额预收</text>
				<text v-if="MoneyData.willHalding">￥ <text style="font-size: 13px;">{{MoneyData.willHalding}}</text>
				</text>
				<text v-else>￥ <text style="font-size: 13px;">0.00</text> </text>
			</view>
			<view class="copyTrade-sector ">
				<text>跟单金额预收</text>
				<text v-if="MoneyData.willDocumentary">￥<text
						style="font-size: 13px;">{{MoneyData.willDocumentary}}</text></text>
				<text v-else>￥<text style="font-size: 13px;">0.00</text></text>
			</view>
			<view class="promotion-sector ">
				<text>推广金额预收</text>
				<text v-if="MoneyData.willPromotion">￥<text
						style="font-size: 13px;">{{MoneyData.willPromotion}}</text></text>
				<text v-else>￥<text style="font-size: 13px;">0.00</text></text>
			</view>
			<view class="fee-sector ">
				<text>手续金额提现中</text>
				<text v-if="MoneyData.withdrawalHalding">￥<text
						style="font-size: 13px;">{{MoneyData.withdrawalHalding}}</text></text>
				<text v-else>￥<text style="font-size: 13px;">0.00</text></text>
			</view>
			<view class="copyTrade-sector ">
				<text>跟单金额提现中</text>
				<text v-if="MoneyData.withdrawalDocumentary">￥<text
						style="font-size: 13px;">{{MoneyData.withdrawalDocumentary}}</text></text>
				<text v-else>￥<text style="font-size: 13px;">0.00</text></text>
			</view>
			<view class="promotion-sector ">
				<text>推广金额提现中</text>
				<text v-if="MoneyData.withdrawalPromotion">￥<text
						style="font-size: 13px;">{{MoneyData.withdrawalPromotion}}</text></text>
				<text v-else>￥<text style="font-size: 13px;">0.00</text></text>
			</view>
			<view class="fee-sector">
				<text>手续金额已提现</text>
				<text v-if="MoneyData.approvedHalding">￥<text
						style="font-size: 13px;">{{MoneyData.approvedHalding}}</text></text>
				<text v-else>￥<text style="font-size: 13px;">0.00</text></text>
			</view>
			<view class="copyTrade-sector">
				<text>跟单金额已提现</text>
				<text v-if="MoneyData.approvedDocumentary">￥<text
						style="font-size: 13px;">{{MoneyData.approvedDocumentary}}</text></text>
				<text v-else>￥<text style="font-size: 13px;">0.00</text></text>
			</view>
			<view class="promotion-sector">
				<text>推广金额已提现</text>
				<text v-if="MoneyData.approvedPromotion">￥<text
						style="font-size: 13px;">{{MoneyData.approvedPromotion}}</text></text>
				<text v-else>￥<text style="font-size: 13px;">0.00</text></text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				MoneyData: {},

			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		async onShow() {
			await this.getAdvanceMoney(); //金额
		},
		async onLoad() {
			await this.getAdvanceMoney(); //手续费金额
		},
		onShow() {},
		methods: {
			// 预收账户金额查询
			async getAdvanceMoney() {
				let res = await this.$http.get('/sysUserAccount/getSysAllAmount');
				this.MoneyData = res.data;
			},
			// 去账单明细
			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 {
		width: 100%;
		height: 165px;
		// background-color: #0052FF;
		background-image: url("/static/image/my/1.png");
		background-size: 100% 100%;
		padding: 22px 34px;
		position: relative;

		image {
			width: 31px;
			height: 31px;
		}

		.amount {
			>view {
				font-size: 12px;
				color: #333333;
			}

			.sum {
				font-size: 20rpx;
				font-weight: bold;
				font-family: DIN, DIN;
			}
		}
	}

	.walletData {
		width: 100%;
		height: auto;
		padding: 0 16px;

		.fee-sector,
		.copyTrade-sector,
		.promotion-sector {
			position: relative;
			width: 32%;
			height: 56px;
			background: #FFFFFF;
			box-shadow: 0px 4px 10px 0px #DAE3F4;
			border-radius: 4px;
			margin-bottom: 12px;
			padding-left: 12px;
			display: flex;
			flex-direction: column;
			justify-content: center;

			text:first-child {
				font-size: 12px;
				color: rgba(51, 51, 51, 0.8);
			}

			text:last-child {
				font-family: DIN, DIN;
				font-size: 20rpx;
				font-weight: bold;
				color: #333333;
			}
		}
	}

	.fee-sector::before {

		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 6%;
		height: 100%;
		background-color: #0052FF;
		border-radius: 4px 0 0 4px;
		/* 按需设置颜色 */
	}

	.copyTrade-sector::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 6%;
		height: 100%;
		background-color: #FF5600;
		border-radius: 4px 0 0 4px;
	}

	.promotion-sector::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 6%;
		height: 100%;
		background-color: #229805;
		border-radius: 4px 0 0 4px;
	}
</style>