From fd749469a258f7a4ff75fced43be652ef49d5e37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Sat, 11 Sep 2021 15:12:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=95=86=E5=AE=B6=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E4=BD=99=E9=A2=9D=E9=A1=B5=E9=9D=A2UI=E3=80=81?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=95=86=E5=AE=B6=E4=B8=AD=E5=BF=83=E6=8F=90?=
 =?UTF-8?q?=E7=8E=B0=E9=A1=B5=E9=9D=A2UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                               |  14 ++
 pages/business/balance/balance.vue       | 205 +++++++++++++++
 pages/business/center/center.vue         |   6 +-
 pages/business/withdrawal/withdrawal.vue | 301 +++++++++++++++++++++++
 4 files changed, 524 insertions(+), 2 deletions(-)
 create mode 100644 pages/business/balance/balance.vue
 create mode 100644 pages/business/withdrawal/withdrawal.vue

diff --git a/pages.json b/pages.json
index 29c9529..7ed3270 100644
--- a/pages.json
+++ b/pages.json
@@ -973,6 +973,20 @@
 				"navigationBarTitleText": "订单管理",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/business/balance/balance",
+			"style": {
+				"navigationBarTitleText": "余额"	,
+				"navigationStyle":"custom"
+			}
+		},
+		{
+			"path": "pages/business/withdrawal/withdrawal",
+			"style": {
+				"navigationBarTitleText": "提现"	,
+				"navigationStyle":"custom"
+			}
 		}
     ],
 	"globalStyle": {
diff --git a/pages/business/balance/balance.vue b/pages/business/balance/balance.vue
new file mode 100644
index 0000000..683c803
--- /dev/null
+++ b/pages/business/balance/balance.vue
@@ -0,0 +1,205 @@
+<template>
+	<view>
+		<lf-nav title="余额" :showIcon="true" :spreadOut="false" bgColor="transparent" titleColor="#fff"></lf-nav>
+		<view class="head">
+			<view class="bg-left"></view>
+			<view class="bg-right"></view>
+			<view class="head-content">
+				<view>
+					<text class="lf-iconfont icon-- lf-font-50"></text>
+				</view>
+				<view class="point">
+					<text>78326478</text>
+					<text class="label">(元)</text>
+				</view>
+			</view>
+			<view class="withdrawal" @click="$url('/pages/business/withdrawal/withdrawal')">提现</view>
+		</view>
+		<view class="tabs">
+			<view class="lf-flex lf-h-100">
+				<view class="tab" :class="{'active-tab': current == 0}" @click="current = 0">余额明细</view>
+				<view class="tab" :class="{'active-tab': current == 1}" @click="current = 1">提现明细</view>
+			</view>
+			<picker mode='date' :value="date" @change="dateChange">
+				<view style="width: 340rpx; text-align: right;">
+					<text>{{ date || '2021-09-01' }}</text>
+					<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text>
+				</view>
+			</picker>
+		</view>
+		<view class="main" v-if="current == 0">
+			<view class="item" v-for="(item, index) in 10" :key="index">
+				<view class="lf-row-between">
+					<text class="lf-font-36 lf-color-black lf-font-bold">+￥80</text>
+					<text class="lf-font-24 lf-color-555">扫码收款</text>
+				</view>
+				<view class="lf-row-between lf-m-t-20">
+					<text class="lf-font-24 lf-color-555">¥374.38</text>
+					<text class="lf-font-24 lf-color-777">2021-09-01 18:27:58</text>
+				</view>
+			</view>
+		</view>
+		<view class="main" v-else-if="current == 1">
+			<view class="item" v-for="(item, index) in 10" :key="index">
+				<view class="lf-row-between">
+					<text class="lf-font-36 lf-font-bold" style="color: #F63434;">-￥80</text>
+					<text class="lf-font-24 lf-color-555">提现到支付宝[18203835380]</text>
+				</view>
+				<view class="lf-row-between lf-m-t-20">
+					<text class="lf-font-24 lf-color-555">¥374.38</text>
+					<text class="lf-font-24 lf-color-777">2021-09-01 18:27:58</text>
+				</view>
+			</view>
+		</view>
+		<u-back-top :scrollTop="pageScrollTop"></u-back-top>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				date: '',
+				current: 0
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			dateChange(event){
+				this.date = event.detail.value;
+			}
+		}
+	}
+</script>
+
+<style>
+	page{
+		overflow-x: hidden;
+	}
+</style>
+<style lang="scss" scoped>
+	.head{
+		width: 750rpx;
+		height: 429rpx;
+		background: linear-gradient(90deg, #1338B7 0%, #092788 100%);
+		position: relative;
+		overflow: hidden;
+		display: flex;
+		align-items: flex-end;
+		box-sizing: border-box;
+		padding: 60rpx 32rpx;
+		color: #FFFFFF;
+		.bg-left{
+			position: absolute;
+			width: 196rpx;
+			height: 196rpx;
+			border-radius: 50%;
+			background-color: rgba(255,255,255,0.04);
+			left: -92rpx;
+			bottom: 60rpx;
+		}
+		.bg-right{
+			position: absolute;
+			width: 520rpx;
+			height: 520rpx;
+			border-radius: 50%;
+			background-color: rgba(255,255,255,0.04);
+			right: -168rpx;
+			top: -122rpx;
+		}
+		.head-content{
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			&>view{
+				width: 100%;
+				text-align: center;
+			}
+			.point{
+				font-size: 72rpx;
+				letter-spacing: 2rpx;
+				font-weight: bold;
+				word-break: break-all;
+				line-height: 1;
+				margin-top: 10rpx;
+				.label{
+					font-size: 36rpx;
+					font-weight: initial;
+				}
+			}
+		}
+		.withdrawal{
+			position: absolute;
+			right: 32rpx;
+			bottom: 164rpx;
+			width: 102rpx;
+			height: 47rpx;
+			border-radius: 24rpx;
+			border: 1rpx solid #FFFFFF;
+			font-size: 24rpx;
+			color: #FFFFFF;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			z-index: 9;
+		}
+	}
+	.tabs{
+		height: 100rpx;
+		width: 750rpx;
+		border: 1rpx solid #e5e5e5;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 32rpx;
+		.tab{
+			width: 128rpx;
+			height: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 28rpx;
+			color: #555555;
+			&:nth-child(n+2){
+				margin-left: 50rpx;
+			}
+		}
+		.active-tab{
+			font-size: 32rpx;
+			color: #0D2E9A;
+			position: relative;
+			font-weight: bold;
+			&::after{
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: calc(50% - 40rpx);
+				width: 80rpx;
+				height: 10rpx;
+				background: #0D2E9A;
+				border-radius: 8rpx 8rpx 0rpx 0rpx;
+			}
+		}
+	}
+	
+	.main{
+		padding: 30rpx 32rpx;
+		width: 750rpx;
+		height: max-content;
+		box-sizing: border-box;
+		.item{
+			width: 686rpx;
+			height: max-content;
+			background: #F4F8F8;
+			border-radius: 10rpx;
+			margin-bottom: 26rpx;
+			padding: 30rpx;
+			box-sizing: border-box;
+			line-height: 1;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/business/center/center.vue b/pages/business/center/center.vue
index 9ef761f..ba5cbbd 100644
--- a/pages/business/center/center.vue
+++ b/pages/business/center/center.vue
@@ -10,11 +10,11 @@
 					<view class="head-title lf-line-3">雅诗兰黛专卖店</view>
 				</view>
 				<view class="lf-flex">
-					<view class="head-menu">
+					<view class="head-menu" @click="$url('/pages/business/balance/balance')">
 						<text class="lf-iconfont icon-daifukuan"></text>
 						<text>余额</text>
 					</view>
-					<view class="head-menu">
+					<view class="head-menu" @click="$msg('敬请期待')">
 						<text class="lf-iconfont icon-daifukuan"></text>
 						<text>扫一扫</text>
 					</view>
@@ -148,6 +148,8 @@
 			width: 100%;
 			display: flex;
 			justify-content: space-between;
+			position: relative;
+			z-index: 9;
 			.head-img{
 				width: 100rpx;
 				height: 100rpx;
diff --git a/pages/business/withdrawal/withdrawal.vue b/pages/business/withdrawal/withdrawal.vue
new file mode 100644
index 0000000..9b3dbea
--- /dev/null
+++ b/pages/business/withdrawal/withdrawal.vue
@@ -0,0 +1,301 @@
+<template>
+	<view>
+		<lf-nav title="提现" :showIcon="true" bgColor="#fff"></lf-nav>
+		<view class="tabs">
+			<view class="tab">
+				<view class="name" :class="{'active-tab': current == 0}" @click="current = 0">支付宝</view>
+			</view>
+			<view class="tab">
+				<view class="name" :class="{'active-tab': current == 1}" @click="current = 1">银行卡</view>
+			</view>
+		</view>
+		<view class="content">
+			<!-- 店铺信息 -->
+			<view class="card">
+				<view class="lf-flex">
+					<image class="shop-avatar" mode="aspectFill" src="https://picsum.photos/id/237/200/300"></image>
+					<view class="shop-name">雅诗兰黛专卖店</view>
+				</view>
+			</view>
+			<!-- 收款信息 - 提现到支付宝 -->
+			<view class="card" v-if="current == 0">
+				<view class="lf-font-28 lf-color-222">支付宝姓名</view>
+				<view class="list">
+					<view class="lf-flex">
+						<input class="input" placeholder="请输入您的姓名" v-model="alipay_name" />
+					</view>
+					<view class="clear" v-if="alipay_name.length" @click="alipay_name = ''">
+						<text class="lf-iconfont icon-cuo1"></text>
+					</view>
+				</view>
+				<view class="lf-font-28 lf-color-222 lf-m-t-50">支付宝账号</view>
+				<view class="list">
+					<view class="lf-flex">
+						<input class="input" placeholder="请输入支付宝账号" v-model="alipay_account" />
+					</view>
+					<view class="clear" v-if="alipay_account.length" @click="alipay_account = ''">
+						<text class="lf-iconfont icon-cuo1"></text>
+					</view>
+				</view>
+			</view>
+			<!-- 收款信息 - 提现到银行卡 -->
+			<view class="card" v-else-if="current == 1">
+				<view class="lf-font-28 lf-color-222">银行名称</view>
+				<view class="list">
+					<view class="lf-flex">
+						<input class="input" placeholder="请输入您的银行名称" v-model="bank_name" />
+					</view>
+					<view class="clear" v-if="bank_name.length" @click="bank_name = ''">
+						<text class="lf-iconfont icon-cuo1"></text>
+					</view>
+				</view>
+				<view class="lf-font-28 lf-color-222 lf-m-t-50">所属支行</view>
+				<view class="list">
+					<view class="lf-flex">
+						<input class="input" placeholder="请输入银行卡所属支行" v-model="bank_sub_branch" />
+					</view>
+					<view class="clear" v-if="bank_sub_branch.length" @click="bank_sub_branch = ''">
+						<text class="lf-iconfont icon-cuo1"></text>
+					</view>
+				</view>
+				<view class="lf-font-28 lf-color-222 lf-m-t-50">银行卡号</view>
+				<view class="list">
+					<view class="lf-flex">
+						<input class="input" placeholder="请输入银行卡号码" v-model="bank_number" />
+					</view>
+					<view class="clear" v-if="bank_number.length" @click="bank_number = ''">
+						<text class="lf-iconfont icon-cuo1"></text>
+					</view>
+				</view>
+				<view class="lf-font-28 lf-color-222 lf-m-t-50">开户名</view>
+				<view class="list">
+					<view class="lf-flex">
+						<input class="input" placeholder="请输入银行卡开户名" v-model="bank_account_name" />
+					</view>
+					<view class="clear" v-if="bank_account_name.length" @click="bank_account_name = ''">
+						<text class="lf-iconfont icon-cuo1"></text>
+					</view>
+				</view>
+			</view>
+			<!-- 提现金额 -->
+			<view class="card">
+				<view class="lf-font-28 lf-color-222">提现金额</view>
+				<view class="list money-list">
+					<view class="lf-flex">
+						<view class="symbol">￥</view>
+						<input class="input" type="number" v-model="money" />
+					</view>
+					<view class="clear" v-if="money.length" @click="money = ''">
+						<text class="lf-iconfont icon-cuo1"></text>
+					</view>
+				</view>
+				<view class="lf-font-28 lf-m-t-30" style="color: #F63434;" v-if="isMoney">输入金额超过可用余额</view>
+			</view>
+			<!-- 提现说明 -->
+			<view class="card">
+				<view class="lf-font-28 lf-color-555 lf-m-b-20">提现说明</view>
+				<view class="lf-font-28 lf-color-222">
+					<view>1、提现到账时间为T+1；</view>
+					<view>2、提现最高单笔为10000元；</view>
+					<view>3、提现手续单笔收费10%；</view>
+				</view>
+			</view>
+			<button class="confirm" hover-class="lf-opacity" @click="confirm">确认提现</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				current: 0, // 支付宝0、银行卡1
+				alipay_name: '', // 支付宝姓名
+				alipay_account: '', // 支付宝账号
+				bank_name: '', // 银行名称
+				bank_sub_branch: '', // 银行卡所属支行
+				bank_number: '', // 银行卡号
+				bank_account_name: '', // 银行卡开户名
+				money: '' // 提现金额
+			}
+		},
+		computed: {
+			isMoney(){
+				// TODO 假设我现在的余额为10块钱
+				return Number(this.money) > 10;
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			confirm(){
+				if(this.current == 0){
+					// 提现到支付宝
+					if(!this.alipay_name) return this.$msg('请输入支付宝姓名');
+					if(!this.alipay_account) return this.$msg('请输入支付宝账号');
+					if(!this.money) return this.$msg('请输入提现金额');
+					if(this.isMoney) return this.$msg('提现金额超出当前余额');
+					if(this.money <= 0) return this.$msg('提现金额需大于0');
+					this.launch();
+				}else if(this.current == 1){
+					// 提现到银行卡
+					if(!this.bank_name) return this.$msg('请输入银行名称');
+					if(!this.bank_sub_branch) return this.$msg('请输入银行卡所属支行');
+					if(!this.bank_number) return this.$msg('请输入银行卡号');
+					if(!this.bank_account_name) return this.$msg('请输入银行卡开户名');
+					if(!this.money) return this.$msg('请输入提现金额');
+					if(this.isMoney) return this.$msg('提现金额超出当前余额');
+					if(this.money <= 0) return this.$msg('提现金额需大于0');
+					this.launch();
+				}
+			},
+			launch(){
+				// TODO 在此发起网络请求
+				console.log("发起提现");
+			}
+		}
+	}
+</script>
+
+<style>
+	page{
+		background-color: #F8F8F8;
+	}
+</style>
+<style lang="scss" scoped="scoped">
+	.tabs{
+		height: 80rpx;
+		width: 750rpx;
+		display: flex;
+		border-bottom: 1rpx solid #e5e5e5;
+		background-color: #FFFFFF;
+		align-items: center;
+		.tab{
+			width: 50%;
+			height: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			.name{
+				width: max-content;
+				height: 100%;
+				font-size: 28rpx;
+				color: #777777;
+				display: flex;
+				align-items: center;
+			}
+			.active-tab{
+				color: #0D2E9A;
+				font-weight: bold;
+				position: relative;
+				&::after{
+					content: '';
+					position: absolute;
+					bottom: 0;
+					left: calc(50% - 40rpx);
+					width: 80rpx;
+					height: 10rpx;
+					background: #0D2E9A;
+					border-radius: 8rpx 8rpx 0rpx 0rpx;
+				}
+			}
+		}
+	}
+	
+	.content{
+		padding: 30rpx 32rpx;
+	}
+	.card{
+		padding: 30rpx;
+		box-sizing: border-box;
+		width: 686rpx;
+		height: max-content;
+		background: #FFFFFF;
+		border-radius: 20rpx;
+		transition: all 1s;
+		&:nth-child(n+2){
+			margin-top: 30rpx;
+		}
+		.shop-avatar{
+			width: 100rpx;
+			height: 100rpx;
+			border-radius: 50%;
+			margin-right: 20rpx;
+		}
+		.shop-name{
+			width: 502rpx;
+			height: max-content;
+			font-size: 36rpx;
+			color: #222222;
+			font-weight: bold;
+		}
+		.list{
+			height: 90rpx;
+			width: 100%;
+			border-bottom: 1rpx solid #e5e5e5;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 10rpx;
+			.input{
+				width: 540rpx;
+				height: 80rpx;
+				font-size: 28rpx;
+			}
+			.input-code{
+				width: 430rpx;
+			}
+			.clear{
+				padding: 20rpx;
+			}
+			.code{
+				min-width: 180rpx;
+				max-width: 220rpx;
+				height: 64rpx;
+				padding: 0 4rpx;
+				font-size: 24rpx;
+				color: #15716E;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border-radius: 32rpx;
+				border: 2rpx solid #15716E;
+			}
+			.active-bg{
+				background: #efefef;
+			}
+			.symbol{
+				width: 30rpx;
+				height: 90rpx;
+				font-size: 36rpx;
+				color: #222222;
+				display: flex;
+				align-items: flex-end;
+			}
+		}
+		.money-list{
+			height: 140rpx;
+			.input{
+				width: 500rpx;
+				height: 130rpx;
+				font-size: 72rpx;
+				font-weight: bold;
+				margin-left: 20rpx;
+			}
+		}
+	}
+	
+	.confirm{
+		width: 550rpx;
+		height: 100rpx;
+		background: #0D2E9A;
+		border-radius: 50rpx;
+		color: #FFFFFF;
+		line-height: 100rpx;
+		margin-top: 50rpx;
+		font-size: 32rpx;
+	}
+	
+	
+</style>