127 lines
4.8 KiB
Vue
127 lines
4.8 KiB
Vue
<template>
|
|
<view>
|
|
<nav-shadow></nav-shadow>
|
|
<loading-view v-if="isFirstLoading"></loading-view>
|
|
<view class="text-center text-txBase text-xl pt-80rpx font-extrabold">请填写银行卡信息</view>
|
|
<view class="px-60rpx ">
|
|
<view class="flex items-center text-txBase text-lg mt-60rpx">
|
|
<view class="w-120rpx">持卡人</view>
|
|
<input :disabled="is_edited" v-model="real_name" placeholder-class="text-txGray" class="inputHeight rounded-lg" type="text" placeholder="持卡人">
|
|
</view>
|
|
<view v-if="!is_edited" class="text-right text-sm text-hex-D43030">*持卡人名称仅修改一次</view>
|
|
<view class="flex items-center text-txBase text-lg mt-60rpx">
|
|
<view class="w-120rpx">银行卡</view>
|
|
<input v-model="bank_number" placeholder-class="text-txGray" class="inputHeight rounded-lg" maxlength="25" type="number" placeholder="请填写银行卡号">
|
|
</view>
|
|
<view @tap="bankShow=true" class="flex items-center text-lg mt-60rpx">
|
|
<view class="w-120rpx">银行</view>
|
|
<view v-if="bank_name" class="inputHeight rounded-lg text-txBase leading-80rpx ">{{bank_name}}</view>
|
|
<view v-else class="inputHeight rounded-lg leading-80rpx text-txGray">请选择所属银行</view>
|
|
</view>
|
|
<view class="flex items-center text-txBase text-lg mt-60rpx">
|
|
<view class="w-120rpx">开户行</view>
|
|
<input v-model="bank_description" placeholder-class="text-txGray" class="inputHeight rounded-lg" type="text" placeholder="请填写开户行">
|
|
</view>
|
|
<view class="text-center text-txGray text-md mt-60rpx">提示：请认真填写，避免发生错误！</view>
|
|
<view class="mt-50rpx">
|
|
<view class="login-btn" @tap="onSubmit"> 保存 </view>
|
|
</view>
|
|
</view>
|
|
<u-select @confirm="BankConfirm" label-name="name" v-model="bankShow" confirm-color="#378264" :list="banks"></u-select>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isFirstLoading:true,
|
|
bankShow:false,
|
|
bankList:[],
|
|
real_name:'',//真实姓名,
|
|
bank_number:'',//卡号,
|
|
bank_name:'',//银行名称
|
|
bank_description:'',//开户行
|
|
is_edited:false
|
|
};
|
|
},
|
|
computed:{
|
|
banks(){
|
|
const arr=[]
|
|
this.bankList.forEach((item,index)=>{
|
|
let obj={}
|
|
obj.name=item
|
|
arr.push(obj)
|
|
})
|
|
return arr
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getDate()
|
|
this.getBank()
|
|
},
|
|
methods:{
|
|
//查询银行卡信息
|
|
async getDate(){
|
|
let resDate=await this.$api.get('/v1/user-bank',{})
|
|
if(resDate.real_name){
|
|
this.real_name=resDate.real_name,
|
|
this.bank_number=resDate.bank_number,
|
|
this.bank_name=resDate.bank_name,
|
|
this.bank_description=resDate.bank_description,
|
|
this.is_edited=resDate.is_edited
|
|
}
|
|
this.isFirstLoading = false
|
|
},
|
|
//获取银行信息
|
|
async getBank(){
|
|
let resDate=await this.$api.get('/v1/banks-options',{})
|
|
this.bankList=resDate.banks
|
|
},
|
|
//选择的银行
|
|
BankConfirm(e){
|
|
this.bank_name=e[0].label
|
|
},
|
|
async onSubmit(){
|
|
let obj={
|
|
real_name:this.real_name,
|
|
bank_number:this.bank_number,
|
|
bank_name:this.bank_name,
|
|
bank_description:this.bank_description
|
|
}
|
|
if(!obj.real_name)return this.$u.toast("请填写持卡人姓名")
|
|
if(!this.$u.test.rangeLength(obj.bank_number, [16, 25]))return this.$u.toast("银行卡格式不正确")
|
|
if(!obj.bank_name)return this.$u.toast("请选择所属银行")
|
|
if(!obj.bank_description)return this.$u.toast("请填写开户行")
|
|
try{
|
|
let resDate=await this.$api.put('/v1/user-bank',obj,{custom: {loading: true}})
|
|
this.$u.toast("提交成功")
|
|
setTimeout(()=>{
|
|
uni.navigateBack()
|
|
this.eliminate()
|
|
},300)
|
|
}catch(err){}
|
|
},
|
|
//清除数据
|
|
eliminate(){
|
|
this.real_name='',
|
|
this.bank_number='',
|
|
this.bank_name='',
|
|
this.bank_description=''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
page{
|
|
height: 100vh;
|
|
background: #FFFFFF;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
|
|
.inputHeight{
|
|
@apply h-80rpx flex-1 border border-txBorder px-base ml-40rpx text-lg ;
|
|
}
|
|
</style>
|