153 lines
3.2 KiB
Vue
153 lines
3.2 KiB
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> |