jp-charge/pagesFinance/user/withdraw.vue

<template>
	<view>
		<u-navbar title="提现"></u-navbar>
		<view class="withdraw">
			<view class="withdraw-head">
				<p>提现至</p><span>微信商家账户</span>
			</view>
			<view class="withdraw-main">
				<p>申请提现金额(元)</p>
				<view class="withdraw-input">
					<span>￥</span>
					<u-input v-model="value" :type="type" placeholder-style="font-size:28px;height:40px;line-height:40px;color:#ccc;" />
				</view>
			</view>
			<view class="withdraw-foot">
				<p>可提现余额 ¥1000</p>
				<span>全部提现</span>
			</view>
		</view>
		<view class="applyBtn">
			<u-button class="applyBtn-btn" type="primary">申请提现，7日内到账</u-button>
		</view>
		<view class="withdraw-tips">
			<h4>提现说明：</h4>
			<p>由于银行清算，提现申请将于次日内到账。如遇高峰期，可能延时到账，请耐心等待。</p>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/finance.js'
	
	export default {
		data() {
			return {
				value: '',
				type: 'text',
			}
		},
		methods: {

		}
	}
</script>
<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.withdraw-tips{
		margin:24px 16px;
		p{
			color:#999;
			margin-top: 4px;
		}
	}
	.withdraw{
		margin: 16px;
		background-color: #fff;
		padding: 16px;
		.withdraw-head{
			display: flex;
			align-items: center;
			p{
				color:#999;
			}
			span{
				margin-left: 12px;
			}
		}
		.withdraw-main{
			border-top: 1px solid #f7f7f7;
			border-bottom: 1px solid #f7f7f7;
			margin: 16px 0;
			padding: 16px 0;
			.withdraw-input{
				margin-top: 32px;
				display: flex;
				align-items: center;
				font-size: 28px;
				/deep/.uni-input-input{
					font-size: 28px;
				}
			}
		}
		.withdraw-foot{
			display: flex;
			align-items: center;
			p{
				color:#999
			}
			span{
				color:#2979FF;
				margin-left: 16px;
			}
		}
	}
	.applyBtn{
		margin: 16px;
	}
	.applyBtn-btn{
		background-color: #185AC6;
		opacity: 0.5;
		border-color:#185AC6 ;
		border-radius: 8px;
	}
</style>