QianNiaoShop/pagesS/yg/gztq.vue

<template>
	<view class="content">

		<view class="row top">
			<view class="tit">
				可提现金额
			</view>
			<view class="input price">
				1000.10
			</view>
		</view>

		<view class="row top">
			<view class="tit">
				提现到
			</view>
			<view class="select-time">
				<picker mode="selector" @change="bindTypeChange" fields="month" :range="typeList" range-key="name">
					<view class="input" style="min-width: 400rpx;text-align: right;">{{typename}}</view>
				</picker>
			</view>
		</view>
		<view class="top row">
			<view class="tit">
				申请提现金额
			</view>
			<input class="input price" type="digit" v-model="txnum" placeholder="请输入金额" placeholder-class="placeholder" />
		</view>
		<view class="gq-detail">
			<view class="">
				<!-- 可提现： （股权） -->
			</view>
			<view class="right" @click="">
				全部提现
			</view>
		</view>
		<view class="" style="height: 20rpx;background-color: #f7f7f7;"></view>
		<view class="row" v-if="type == 'alipay'">
			<text class="tit">姓名</text>
			<input class="input" type="text" v-model="ali_people" placeholder="请输入支付宝姓名"
				placeholder-class="placeholder" />
		</view>
		<view class="row" v-if="type == 'alipay'">
			<text class="tit">支付宝账号</text>
			<input class="input" type="text" v-model="alipay_code" placeholder="请输入支付宝账号"
				placeholder-class="placeholder" />
		</view>
		<view class="row" v-if="type == 'bank'">
			<text class="tit">姓名</text>
			<input class="input" type="text" v-model="bank_people" placeholder="请输入银行卡姓名"
				placeholder-class="placeholder" />
		</view>
		<view class="row" v-if="type == 'bank'">
			<text class="tit">银行卡号</text>
			<input class="input" type="text" v-model="bank_code" placeholder="请输入银行卡号"
				placeholder-class="placeholder" />
		</view>

		<view class="row" v-if="type == 'bank'">
			<text class="tit">手机号</text>
			<input class="input" type="text" v-model="phone" placeholder="请输入银行卡姓名" placeholder-class="placeholder" />
		</view>
		<view class="row" v-if="type == 'bank'">
			<text class="tit">所属银行</text>
			<input class="input" type="text" v-model="bank_name" placeholder="请输入所属银行"
				placeholder-class="placeholder" />
		</view>
		<view class="sub-btn">
			提交申请
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typename: '银行卡',
				typeList: [{
						state: 'bank',
						name: '银行卡'
					},
					{
						state: 'alipay',
						name: '支付宝'
					}
				],
				txnum: '',
				ali_people: '',
				loading: false,
				phone: '',
				weixin_no: '',
				type: 'bank', //提现方式
				money: '0.00', //可提现金额
				freeze: '0.0', //冻结金额
				withdrawal: '', //提现金额
				minPrice: '', //最少提现金额
				aliData: {},
				bankData: {},
				weixin: {},
				alipay_code: '',
				alipay_name: '',
				bank_code: '',
				bank_people: '',
				bank_name: '',
				bank_belonging: '',
				jftype: 0,
			}
		},
		onLoad() {

		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			bindTypeChange(e) {
				let index = e.detail.value

				this.typename = this.typeList[index].name
				this.type = this.typeList[index].state
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: auto;
		min-height: 100%;
		background-color: #fff;
	}

	.row {
		margin: auto;
		width: 710rpx;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #eeee;
		background-color: #fff;
		align-items: center;
		font-size: 28rpx;
		color: #000;

		.tit {
			width: 200rpx;
			flex-shrink: 0;
		}

		.input {
			flex-grow: 1;
			font-size: 28rpx;
			font-weight: bold;
		}

		.placeholder {
			font-size: 28rpx;
			color: #999;
		}
	}

	.sub-btn {
		width: 670rpx;
		line-height: 88rpx;
		background: #FF4C4C;
		border-radius: 10rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin: 120rpx auto 0;
	}

	.top {
		height: 110rpx;

		.tit {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}

		.price {
			font-size: 48rpx;
			font-weight: bold;
			color: #333333;
			text-align: right;
		}
		input {
			font-size: 42rpx;
			font-weight: 500;
		}

		.placeholder {
			font-size: 32rpx;
			font-weight: 500;
		}
	}
	.gq-detail {
		display: flex;
		justify-content: space-between;
		padding:20rpx 40rpx;
		font-size: 28rpx;
		.left {
			
		}
		.right {
			color: #d74f3a;
		}
	}
</style>