vue-insagent-app/pages/wallet/wallet.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<view style="z-index: 99;">
			<view class="search dis  a-c j-s">
				<u-icon name="arrow-left" size="40" @tap="back"></u-icon>
				<text class="center">钱包</text>
				<text class="bank" @click="changeBank">卡包</text>
			</view>
		</view>
		<view class="" style="padding:0 16px 16px;">
			<view class="assets dis f-c j-s">
				<view class="dis f-c j-s a-c">
					<text>我的资产(元)</text>
					<text> <text style="font-size: 16px;">￥</text> {{totalAssetAmount}}</text>
					<u-button size="medium" type="primary"
						style="background: linear-gradient( 270deg, #0052FF 0%, #6899FF 100%);"
						@click="toWithdraw">提现</u-button>
				</view>
				<view class="yushou dis f-c">
					<view class="dis j-s a-start" @click="details('/pages/wallet/preReceivedDetails')">
						<image src="/static/image/wallet/yushou.png" mode=""></image>
						<view class="dis f-c " style="width: 90%;">
							<view class="dis a-c j-s">
								<text style="font-size: 15px;color: #333;font-weight: bold;">预收明细</text>
								<u-icon name="arrow-right" size="30" color="#C7C6CA"></u-icon>
							</view>
							<text style="font-size: 12px;color: rgba(51,51,51,0.8);">车牌订单明细内容</text>
						</view>
					</view>
					<view class="dis j-s a-start" style="margin-top: 16px;"
						@click="details('/pages/wallet/transactionDetails')">
						<image src="/static/image/wallet/yushou.png" mode=""></image>
						<view class="dis f-c " style="width: 90%;">
							<view class="dis a-c j-s">
								<text style="font-size: 15px;color: #333;font-weight: bold;">收支明细</text>
								<u-icon name="arrow-right" size="30" color="#C7C6CA"></u-icon>
							</view>
							<text style="font-size: 12px;color: rgba(51,51,51,0.8);">收入/提现中/已提现明细内容</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				totalAssetAmount: null,
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow() {
			this.getAdvanceMoney(); //金额
		},
		onLoad() {
			this.getAdvanceMoney(); //手续费金额
			this.$http.get('/sysMenuRecord/add?type=1&menuType=3')
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			// 预收账户金额查询
			async getAdvanceMoney() {
				let res = await this.$http.get('/sysUserAccount/getUserSumAmountByUserId?userId=' + this.userInfo
					.sysUser.id);
				this.totalAssetAmount = res.data;
			},
			// 绑定银行卡界面
			async changeBank() {
				let res = await this.$http.post('/userBank/getUserBankList', {
					auditStatus: "",
				});
				if (res.data.length) {
					this.navigate({
						url: "/pages/wallet/bankCard"
					}, "navigateTo", true);
				} else {
					this.navigate({
						url: '/pages/wallet/bindBank',
						complete: () => {
							setTimeout(() => {
								uni.showToast({
									title: '请先绑定银行卡',
									duration: 3000,
									icon: "none"
								});
							}, 500);

						}
					}, "navigateTo", true)
				}

			},
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
			details(url) {
				this.navigate({
					url: url
				}, "navigateTo", true);
			},
			// 去提现
			async toWithdraw() {
				let res = await this.$http.post('/userBank/getUserBankList', {
					auditStatus: '1',
					delFlag: '0'
				});
				if (res.data.length) {
					this.navigate({
						url: `/pages/wallet/withdraw?amount=${this.totalAssetAmount}`,
					}, "navigateTo", true)
				} else {
					uni.showToast({
						title: '暂无审核通过的银行卡，不可提现',
						duration: 3000,
						icon: "none"
					});

				}
			},


		}
	}
</script>


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

	page {
		background: #F8FAFE;
	}

	.assets {
		width: 100%;
		height: auto;
		background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%);
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 10px;
		border: 1px solid #FFFFFF;
		padding: 0 10px;

		>view:nth-child(1) {
			border-bottom: 1px solid #CFCFCF;
			padding: 24px 0;
			color: #333;

			text:nth-child(1) {
				font-size: 14px;
			}

			text:nth-child(2) {
				font-size: 30px;
				font-weight: bold;
				margin: 6px 0;
			}
		}

		.yushou {
			padding: 16px 0;


			image {
				width: 20px;
				height: 20px;
				margin-top: 5px;
			}
		}
	}

	/* 银行卡信息Start */

	.search {
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 50px 16px 30px;
		height: auto;
		background: #F8FAFE;
		background-image: url("/static/image/wallet/qianbao.png");
		background-size: 100% 100%;
		position: relative;

		text {
			font-size: 18px;
			font-weight: bold;
			color: #000;
		}

		.bank {
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
		}

		.center {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}

		image {
			width: 22px;
			height: 22px;
			margin-left: 20px;
		}
	}
</style>