xinyongguanlishi/pages/mine/myMoney.vue

<template>
	<view class="main">
		<view class="head_bg">
			<u-avatar size="130" :src="vuex_user.avatar" mode="circle">
			</u-avatar>
			<view class="userName">
				{{vuex_user.name||'用户名'+vuex_user.phone}}
			</view>
		</view>
		<view class="pr" style="z-index:2;bottom: 120rpx;">
			<view class="plr15">
				<view class="bdr4 bg-white u-padding-bottom-20"
					style="margin-top: 38rpx;border-radius: 16rpx;box-shadow: 6rpx 6rpx 10rpx rgba(122, 122, 122, 0.2);">
					<view class="m-dpflex flex-direction align-center justify-center header-box"
						style="height: 200rpx;">
						<view @click="moneyRecord" class="text-right u-margin-right-50" style="width: 100%;">
							提现记录
						</view>
						<view class="text-bold text-black" style="font-size: 68rpx;">
							{{obj.balance/100}}
						</view>
						<view class="" style="font-size: 28rpx;color: #666;">
							可提现金额（元）
						</view>
					</view>
					<view class="pr m-xcenter plr20 header-box"
						style="padding: 40rpx 40rpx;background-color: #fff;border-radius: 16rpx;">
						<view class="m-flex tl f14 m-ycenter dpb">
							<view class="m-gray-big f20 fb pr10">{{obj.withdraw/100}}</view>
							<view class="m-gray-letter mt5 f12">已提现金额（元）</view>
						</view>
						<view class="m-flex tl f14 m-ycenter">
							<view class="m-gray-big f20 fb">{{obj.uncomplete_commission/100}}</view>
							<view class="m-gray-letter mt5 f12">未完成佣金（元）</view>
						</view>
					</view>
					<u-button shape="circle" @click="withdrawal" hover-class="none" :custom-style="customStyle"
						throttle-time="1000">马上提现
					</u-button>
				</view>
			</view>
		</view>
		<view class="padding-lr u-margin-top-20 flex justify-between align-center"
			style="position: relative;bottom: 120rpx;">
			<view class="commonStyle bg-white" style="width: 298rpx;">
				<view class="">
					订单
				</view>
				<view class="flex justify-between align-center u-margin-top-15">
					<view class="flex u-flex-col justify-center align-center u-font-24">
						<text>{{obj.order_count}}</text>
						<text>总订单数</text>
					</view>
					<view class="flex u-flex-col justify-center align-center u-font-24">
						<text>{{obj.complete_order}}</text>
						<text>已完成订单数</text>
					</view>
				</view>
			</view>
			<view class="commonStyle bg-white flex u-flex-col  justify-center" style="width: 298rpx;">
				<u-cell-item style="padding: 0;" hover-class="none" :border-bottom="false" title="收入明细"
					@click="accountInfo">
				</u-cell-item>
				<view class="u-margin-top-15 flex align-center">
					<u-icon name="/static/md-monetization_on@3x.png" size="40"></u-icon>
					<text class="u-font-24">总收入：{{(obj.balance+obj.withdraw)/100}}元</text>
				</view>
			</view>
		</view>
		<view class="u-margin-top-35" style="position: relative;bottom: 120rpx;">
			<u-button shape="circle" @click="bank_card" hover-class="none"
				:custom-style="{...customStyle,width:'500rpx',height:'66rpx'}" throttle-time="1000">银行卡绑定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					width: '214rpx',
					height: '52rpx',
					color: '#fff',
					background: '#FBC600',
					border: 'none'
				},
				obj: {}
			}
		},
		onShow() {
			this.getInfoMoney()
		},
		methods: {
			async getInfoMoney() {
				let res = await this.$u.post("manager/wallet")
				if (res.code == 200) {
					this.obj = res.data
				}
			},
			bank_card() {
				uni.navigateTo({
					url: "./bank_card"
				})
			},
			accountInfo() {
				uni.navigateTo({
					url: "./accountInfo"
				})
			},
			withdrawal() {
				uni.navigateTo({
					url: "./withdrawal"
				})
			},
			moneyRecord(){
				uni.navigateTo({
					url:"./moneyRecord"
				})
			}
		}
	}
</script>

<style>
	@import url("./mine.css");

	.main {
		min-height: 100vh;
	}

	.head_bg {
		background-color: #FBC600;
		height: 350rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/* border-radius: 0 0 50rpx 50rpx; */
	}

	.userName {
		font-size: 36rpx;
		color: #fff;
		margin-top: 10rpx;
		margin-bottom: 30rpx;
	}

	.commonStyle {
		padding: 20rpx;
		border-radius: 16rpx;
		height: 160rpx;
		box-shadow: 6rpx 6rpx 10rpx rgba(122, 122, 122, 0.2);
	}
</style>