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,
				bankList: [{
						bankName: "中国邮政储蓄银行",
						logo: "/static/image/bankLogo/youzheng.png",
						background: "linear-gradient(90deg, rgba(79, 136, 69, 0.7) 0%, #4f8845 100%)"
					},
					{
						bankName: "中国工商银行",
						logo: "/static/image/bankLogo/gongshang.png",
						background: "linear-gradient(90deg, rgba(177, 0, 13, 0.7) 0%, #b1000d 100%)"
					},
					{
						bankName: "中国农业银行",
						logo: "/static/image/bankLogo/nongye.png",
						background: "linear-gradient(90deg, rgba(86,152, 130, 0.7) 0%, #569882 100%)"
					},
					{
						bankName: "中国银行",
						logo: "/static/image/bankLogo/zhongguo.png",
						background: "linear-gradient(90deg, rgba(157, 32, 40, 0.7) 0%, #9d2028 100%)"
					},
					{
						bankName: "中国建设银行",
						logo: "/static/image/bankLogo/jianshe.png",
						background: "linear-gradient(90deg, rgba(6, 89, 159, 0.7) 0%, #06569F 100%)"
					},
					{
						bankName: "招商银行",
						logo: "/static/image/bankLogo/zhaoshang.png",
						background: "linear-gradient(90deg, rgba(197, 0, 25, 0.7) 0%, #c50019 100%)"
					},
					{
						bankName: "中国民生银行",
						logo: "/static/image/bankLogo/minsheng.png",
						background: "linear-gradient(90deg, rgba(84,149, 92, 0.7) 0%, #54955c 100%)"
					},
					{
						bankName: "中国光大银行",
						logo: "/static/image/bankLogo/guangda.png",
						background: "linear-gradient(90deg, rgba(93, 30, 131, 0.7) 0%, #5d1e83 100%)"
					},
					{
						bankName: "中信银行",
						logo: "/static/image/bankLogo/zhongxin.png",
						background: "linear-gradient(90deg, rgba(184, 0,22, 0.7) 0%, #b80016 100%)"
					},
					{
						bankName: "华夏银行",
						logo: "/static/image/bankLogo/huaxia.png",
						background: "linear-gradient(90deg, rgba(216, 12, 24, 0.7) 0%, #d80c18 100%)"
					},
					{
						bankName: "中国交通银行",
						logo: "/static/image/bankLogo/jiaotong.png",
						background: "linear-gradient(90deg, rgba(33, 58, 120, 0.7) 0%, #213a78 100%)"
					},
					{
						bankName: "晋商银行",
						logo: "/static/image/bankLogo/jinshang.png",
						background: "linear-gradient(90deg, rgba(224, 150, 165, 0.7) 0%, #e096a5 100%)"
					},
					{
						bankName: "山西银行",
						logo: "/static/image/bankLogo/shanxi.png",
						background: "linear-gradient(90deg, rgba(192, 19, 73, 0.7) 0%, #c01349 100%)"
					},
					{
						bankName: "农村商业银行",
						logo: "/static/image/bankLogo/nongcun.png",
						background: "linear-gradient(90deg, rgba(0, 155, 77, 0.7) 0%, #009b4d 100%)"
					},
				],
				bankCardInfo: {}
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow() {
			this.getAdvanceMoney(); //金额
			this.getbankCard();
		},
		onLoad() {
			this.getAdvanceMoney(); //手续费金额
			this.$http.get('/sysMenuRecord/add?type=1&menuType=3')
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			// 获取银行卡信息
			async getbankCard() {
				let res = await this.$http.post('/userBank/getUserBankList', {
					auditStatus: "1",
					delFlag: '0'
				});
				this.bankList.map(val => {
					res.data.map(ele => {
						if (val.bankName == ele.bankAccount) {
							ele.logo = val.logo;
							return ele;
						}
					})
				})
				let bankinfo = res.data.find(val => val.isDefault == 1)
				if (bankinfo) {
					this.bankCardInfo = bankinfo;
				} else {
					this.bankCardInfo = res.data[0]
				}
			},
			// 预收账户金额查询
			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 that = this
				let signResult = await this.$http.post('/ttqf/queryPressing', {
					userId: uni.getStorageSync('username'),
					bankNumber: this.bankCardInfo.bankNumber
				})
				if(signResult.code == '200') {
					if(signResult.data.bizCode === '1') { // 未签约
						uni.showModal({
							title: '温馨提示',
							content: '尚未签约，需先去签约！',
							showCancel: true,
							confirmText: '去签约',
							cancelText: '稍后签约',
							async success(res) {
								if(res.confirm) {
									let srcResult = await that.$http.post('/ttqf/signingAddress', {
										userId: uni.getStorageSync('username')
									})
									if(srcResult.data) {
										plus.runtime.openURL(srcResult.data.url)
									}
								}
							}
						})
					} else if(signResult.data.bizCode === '2') { // 签约未完成
						uni.showModal({
							title: '温馨提示',
							content: '签约进行中，是否去查看？',
							showCancel: true,
							confirmText: '去查看',
							cancelText: '取消',
							success(res) {
								if(res.confirm) {
									if(signResult.data) {
										plus.runtime.openURL(signResult.data.url)
									}
								}
							}
						})
					} else if(signResult.data.bizCode === '3' || signResult.data.bizCode === '0') { // 签约完成
						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"
							});
						}
					}
				} else {
					uni.showToast({
						title: signResult.msg,
						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>