jiuyiUniapp/jiuyi2/pages/index/wallet/get.vue

<script setup>
	// 提现

	import {
		reactive,
		ref
	} from 'vue';
	import util from '@/common/js/util';
	import api from '@/api/index.js';

	// 表单
	const form = reactive({
		amount: '',
	})

	// 提现方式列表
	const typeList = reactive([{
			key: 'bank',
			name: '银行卡',
		},
		{
			key: 'wechat',
			name: '微信',
		},
		{
			key: 'alipay',
			name: '支付宝',
		}
	])
	// 支付方式下标
	const typeIndex = ref(0)

	/**
	 * 切换下标
	 * @param {Object} ev 选择提现金额
	 */
	function handleTypeIndex(ev) {
		const index = ev.detail.value
		if (typeIndex.value === index) return
		typeIndex.value = index
	}

	// 快速选择收款信息
	function handleFast() {
		// 银行取银行卡 微信 支付宝去我的绑定页面
	}
</script>

<template>
	<view class="appbw">
		<view class="form mtb30 mlr30 f32">

			<view class="line">
				<view class="key">提现金额</view>
				<view class="value inputBox df aic">
					<view class="c333 f40 b">￥</view>
					<input type="text" v-model="form.amount" placeholder="输入金额" />
				</view>
			</view>

			<view class="line">
				<view class="key rows">
					<view>选择提现方式</view>
					<view class="c999 f26" @click="handleFast">快速选择</view>
				</view>
				<picker :range="typeList" range-key="name" @change="handleTypeIndex">
					<view class="value inputBox rows">
						<view class="">{{typeList[typeIndex].name}}</view>
						<uni-icons type="bottom" />
					</view>
				</picker>
			</view>

			<template v-if="typeList[typeIndex].key === 'bank'">

				<view class="line">
					<view class="key">银行名称</view>
					<view class="value inputBox">
						<input v-model="form.bank" placeholder="输入金额" />
					</view>
				</view>

				<view class="line">
					<view class="key">银行卡号</view>
					<view class="value inputBox">
						<input v-model="form.account" placeholder="输入金额" />
					</view>
				</view>
			</template>

			<template v-if="typeList[typeIndex].key === 'wechat'">
				<view class="line">
					<view class="key">微信号</view>
					<view class="value inputBox">
						<input v-model="form.wecaht" placeholder="输入金额" />
					</view>
				</view>
			</template>

			<template v-if="typeList[typeIndex].key === 'alipay'">
				<view class="line">
					<view class="key">支付宝账号</view>
					<view class="value inputBox">
						<input v-model="form.alipay" placeholder="输入金额" />
					</view>
				</view>
			</template>

			<view class="line notice ptb20 plr30 br20">
				<view class="key">温馨提示</view>
				<view class="content mt15 c333 f28">为保证账户资金安全，请仔细核对好填写信息，在申请提现</view>
			</view>

			<view class="line">
				<view class="btn pro black">提现</view>
			</view>
		</view>

		<!--  -->
		<view class="fill"></view>
	</view>
</template>

<style lang="scss">
	// 表单
	.form {

		.line {
			overflow: hidden;
			margin: 40rpx 0;

			.key {
				font-size: 32rpx;
			}

			.value {
				box-sizing: border-box;
				margin-top: 15rpx;
				padding: 10rpx 20rpx;
				min-height: 80rpx;
			}
		}

		// 
		.notice {
			background-color: #ff888844;

			.content {
				color: #aa3333;
			}
		}
	}
</style>