165 lines
3.7 KiB
Vue
165 lines
3.7 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="total">
|
||
<view class="">
|
||
账户总余额(元)
|
||
</view>
|
||
<view style="font-size: 36rpx;">
|
||
￥1860.00
|
||
</view>
|
||
</view>
|
||
<view class="action">
|
||
<view class="">
|
||
提现至
|
||
</view>
|
||
<view style="font-weight: bold;">
|
||
请选择提现账户
|
||
</view>
|
||
<view style="display: flex;align-items: center;color: #20B128;"
|
||
@click="navgo('/pageQuota/Balance/bindAccout')">
|
||
<text>绑定账户</text> <up-icon color="#20B128" name="arrow-right"></up-icon>
|
||
</view>
|
||
</view>
|
||
<view class="form">
|
||
|
||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||
<up-form labelPosition="left" borderBottom :label-style="{fontSize:'30rpx'}" :model="model1" :rules="rules"
|
||
ref="form1" labelWidth='70'>
|
||
<up-form-item label="银行卡" prop="userInfo.name" borderBottom ref="item1">
|
||
<template #right>
|
||
<view style="display: flex;align-items: center;">
|
||
<text style="color: #20B128;">选择银行</text> <up-icon color="#20B128"
|
||
name="arrow-right"></up-icon>
|
||
</view>
|
||
</template>
|
||
</up-form-item>
|
||
<up-form-item label="持卡人" prop="userInfo.name" borderBottom ref="item1">
|
||
<up-input style="border: none;" v-model="form.name" placeholder="请输入持卡人姓名" />
|
||
</up-form-item>
|
||
<up-form-item label="银行账户" prop="userInfo.name" borderBottom ref="item1">
|
||
<up-input style="border: none;" v-model="form.name" placeholder="请输入银行账户" />
|
||
</up-form-item>
|
||
<up-form-item label="开户网点" prop="userInfo.name" borderBottom ref="item1">
|
||
<up-input style="border: none;" v-model="form.name" placeholder="请输入开户网点" />
|
||
</up-form-item>
|
||
<up-form-item label="提现金额" prop="userInfo.name" borderBottom ref="item1">
|
||
<up-input style="border: none;" v-model="form.name" placeholder="请输入提现金额" />
|
||
</up-form-item>
|
||
</up-form>
|
||
</view>
|
||
|
||
<view class="submit-btn">
|
||
<up-button text="提现" shape="circle" color="#50C758"></up-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive
|
||
} from 'vue';
|
||
|
||
|
||
const navgo = (url) => {
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
|
||
|
||
}
|
||
|
||
const form = reactive({
|
||
name: ""
|
||
})
|
||
|
||
// 使用 reactive 创建响应式状态
|
||
const state = reactive({
|
||
showSex: false,
|
||
model1: {
|
||
userInfo: {
|
||
name: 'uview-plus UI',
|
||
sex: '',
|
||
},
|
||
},
|
||
actions: [{
|
||
name: '男'
|
||
},
|
||
{
|
||
name: '女'
|
||
},
|
||
{
|
||
name: '保密'
|
||
},
|
||
],
|
||
rules: {
|
||
'userInfo.name': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写姓名',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
'userInfo.sex': {
|
||
type: 'string',
|
||
max: 1,
|
||
required: true,
|
||
message: '请选择男或女',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
},
|
||
radio: '',
|
||
switchVal: false,
|
||
});
|
||
|
||
// 使用 ref 创建响应式引用
|
||
const formRef = ref(null);
|
||
|
||
// 定义方法
|
||
function sexSelect(e) {
|
||
state.model1.userInfo.sex = e.name;
|
||
if (formRef.value) {
|
||
formRef.value.validateField('userInfo.sex');
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
padding: 20rpx;
|
||
|
||
.total {
|
||
background-color: #50C758;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
color: white;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 42rpx 30rpx;
|
||
font-size: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.action {
|
||
background-color: white;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
padding: 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.form {
|
||
padding: 28rpx 30rpx;
|
||
background-color: white;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.submit-btn {
|
||
position: fixed;
|
||
bottom: 146rpx;
|
||
width: 710rpx;
|
||
|
||
|
||
}
|
||
</style> |