XEH-miniProgram/pages/self/wallet/cash.vue

<template>
	<view class="page-wrap">
		<view class="header-panel">
			提现金额
			<view class="input-wrap">
				<input class="input" type="digit" maxlength="10" />
			</view>
			<view class="money">
				可提金额 3296.00 元，
				<text class="btn">全部提现</text>
			</view>
		</view>
		<view class="title-row">提现至</view>
		<view class="pay-row">
			<image class="icon" src="../../../static/icon_pay_ccb.png"></image>
			<view class="name">
				建行善付通
				<text class="desc">6222 8042 5063 2401 868</text>
			</view>
			<image class="checkbox" src="../../../static/icon_checkbox.png"></image>
		</view>
		<view class="pay-row">
			<image class="icon" src="../../../static/icon_pay_wx.png"></image>
			<view class="name">
				绑定微信
				<text class="desc">18863100789</text>
			</view>
		</view>
		<view class="pay-row">
			<image class="icon" src="../../../static/svg/wallet_pay.svg"></image>
			<view class="name">
				公对公转账
				<text class="desc">招商银行 70260122000076868</text>
			</view>
		</view>
		<view class="pay-row">
			<image class="icon" src="../../../static/icon_pay_other.png"></image>
			<view class="name">
				其他
				<text class="desc">线下人工处理</text>
			</view>
		</view>
		<button class="submit-btn" @click="handleCash">申请提现</button>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		handleCash() {
			uni.redirectTo({
				url: 'cashSuccess'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.header-panel {
	height: 274.73rpx;
	background: #fff;
	padding: 27.47rpx;
	box-sizing: border-box;
	font-size: 27.47rpx;
	color: #666;
	.input-wrap {
		width: 631.87rpx;
		border-bottom: 1rpx solid #e0e0e0;
		margin: 48.08rpx auto 0;
		height: 61.81rpx;
		position: relative;
		&:before {
			content: '￥';
			font-size: 27.47rpx;
			position: absolute;
			left: 20.6rpx;
			bottom: 6.87rpx;
		}
		.input {
			font-size: 49.45rpx;
			color: #000;
			width: 100%;
			height: 100%;
			padding-left: 54.95rpx;
		}
	}
	.money {
		font-size: 24.73rpx;
		color: #999;
		margin: 20.6rpx 0 0 54.95rpx;
	}
	.btn {
		font-size: 24.73rpx;
		color: #0384d6;
	}
}
.title-row {
	height: 82.42rpx;
	padding: 27.47rpx 27.47rpx 0;
	box-sizing: border-box;
	font-size: 27.47rpx;
	color: #666;
}
.pay-row {
	background: #fff;
	height: 109.89rpx;
	display: flex;
	align-items: center;
	padding: 0 27.47rpx;
	position: relative;
	&::after {
		content: '';
		position: absolute;
		right: 27.47rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 30.22rpx;
		height: 30.22rpx;
		border-radius: 50%;
		border: 1rpx solid #d6d6d6;
		box-sizing: border-box;
	}
	& + .pay-row {
		border-top: 1rpx solid #d6d6d6;
	}
	.icon {
		width: 38.46rpx;
		height: 41.21rpx;
		margin-right: 24.73rpx;
	}
	.name {
		flex: 1;
		font-size: 27.47rpx;
		color: #333;
		.desc {
			display: block;
			color: #999;
		}
	}
	.checkbox {
		width: 32.97rpx;
		height: 32.97rpx;
		position: absolute;
		right: 27.47rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
	}
}
.submit-btn {
	width: 631.87rpx;
	height: 75.55rpx;
	line-height: 75.55rpx;
	background: #079eff;
	border-radius: 8.24rpx;
	font-size: 30.22rpx;
	color: #fff;
	margin: 82.42rpx auto 0;
}
</style>