wangluohuoyun-huozhuapp/pages/mine/myAccount/index.vue

<template>
	<view class="center">
		<view v-if="accountType == 1">
			<view class="account">
				<image src="../../../static/images/myAccount/qian.png" mode="" class="account_img"></image>
			</view>
			<view class="money">可用余额</view>
			<view class="money_number">{{dataInfo.accountBalance?dataInfo.accountBalance:0}}<span class="yuan">元</span>
			</view>
			<view class="money_no">(已冻结：<span class="number">{{dataInfo.frozenAmount?dataInfo.frozenAmount:0}}</span>元)
			</view>
			<view class="next_btn" @click="withdrawal">提现</view>
		</view>
		<view v-else>
			<view class="company_account">
				<view class="company_money">可用余额（元）</view>
				<view class="flex company_center">
					<view class="company_money_number">{{dataInfo.accountBalance?dataInfo.accountBalance:0}}</view>
					<view class="company_next" @click="withdrawal">
						<view class="btn">
							提现
						</view>
					</view>
				</view>
				<view class="company_money_no">(已冻结：{{dataInfo.frozenAmount?dataInfo.frozenAmount:0}} 元)</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataInfo: {},
				accountType: '', //accountType  1个人 2企业
				id: "", //如果是企业  公司id
			}
		},
		onLoad(options) {
			if (options.id) { //我的企业进来的
				this.accountType = '2'
				this.id = options.id
			} else { //个人账户
				this.accountType = '1'
			}
		},
		onShow() {
			this.getList()
		},
		onNavigationBarButtonTap(e) {
			uni.$u.route('/pages/mine/myAccount/bill?type=' + this.accountType + '&id=' + this.id)
		},
		methods: {
			getList() {
				if (this.accountType == '1') {
					this.$request.baseRequest('get', '/cargoOwnerInfo/selectAccount', {
						commonId: uni.getStorageSync("userInfo").id
					}).then(res => {
						this.dataInfo = res.data
					})
				} else if (this.accountType == '2') {
					this.$request.baseRequest('get', '/cargoOwnerInfo/selectAccountBalance', {
						id: this.id,
						flag: this.accountType
					}).then(res => {
						this.dataInfo = res.data
					})
				}
			},
			withdrawal() {
				if (this.accountType == '1') {
					uni.$u.route("/pages/mine/myAccount/withdrawal?id=" + this.dataInfo.id + "&flag=" + this.accountType)
				} else if (this.accountType == '2') {
					uni.$u.route("/pages/mine/myAccount/withdrawal?id=" + this.id + "&flag=" + this.accountType)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		padding: 20rpx;
		text-align: center;

		.account {
			width: 100%;
			height: 250rpx;
			margin-top: 30rpx;
			margin: 0 auto;
			text-align: center;

			.account_img {
				width: 100rpx;
				height: 100rpx;
				margin-top: 200rpx;
			}
		}

		.money {
			margin-top: 90rpx;
			font-size: 32rpx;
			// margin: 40rpx;
		}

		.money_number {
			font-size: 68rpx;
			font-weight: 500;
			margin-top: 20rpx;

			.yuan {
				font-size: 36rpx;
				margin-left: 6rpx;
			}
		}

		.money_no {
			margin-top: 20rpx;
			color: #999999;
			font-size: 28rpx;

			.number {
				color: #2a74fb;
				margin: 0 10rpx;
			}
		}

		.next_btn {
			background: #F5BA3C;
			color: #FFFFFF;
			padding: 25rpx 0;
			border-radius: 60rpx;
			margin-top: 100rpx;
		}

		// 公司账户
		.company_account {
			padding-top: 60rpx;
			text-align: left;
			color: #FFFFFF;
			height: 280rpx;
			border-radius: 10rpx;
			background: linear-gradient(45deg, #2873fb, #4385fd, #5f98ff);

			.company_money {
				margin-left: 40rpx;
				font-size: 30rpx;
			}

			.company_center {
				margin: 20rpx;

				.company_money_number {
					width: 50%;
					font-size: 70rpx;
					margin-left: 20rpx;
				}

				.company_next {
					width: 50%;
					text-align: center;
					line-height: 60rpx;
					color: #F5BA3C;
				}

				.btn {
					padding: 12rpx 0;
					width: 180rpx;
					background: #ffffff;
					margin: 0 auto;
					border-radius: 30px;
				}
			}
			.company_money_no {
				margin-left: 40rpx;
			}
		}
	}
</style>