You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
3.8 KiB
173 lines
3.8 KiB
<template>
|
|
<view class="page">
|
|
<view class="tabs">
|
|
<view :class="activeIndex==item.id?'tabsItem active':'tabsItem'" @click="getPay(item)" v-for="item in list4" :key="item.id">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="">
|
|
|
|
</view>
|
|
</view>
|
|
<view >
|
|
<view class="yhk" v-show="activeIndex==1">
|
|
<view class="list-input">
|
|
<view class="title">
|
|
<text>姓名</text>
|
|
</view>
|
|
<view class="content">
|
|
<input type="text" v-model="yhk.bank_realname" placeholder="请输入真实姓名">
|
|
</view>
|
|
</view>
|
|
<view class="list-input">
|
|
<view class="title">
|
|
<text>预留手机号</text>
|
|
</view>
|
|
<view class="content">
|
|
<input type="tel" v-model="yhk.bank_mobile" placeholder="请输入银行预留手机号">
|
|
</view>
|
|
</view>
|
|
<view class="list-input">
|
|
<view class="title">
|
|
<text>卡号</text>
|
|
</view>
|
|
<view class="content">
|
|
<input type="tel" v-model="yhk.bank_no" placeholder="请输入银行卡号">
|
|
</view>
|
|
</view>
|
|
<view class="list-input">
|
|
<view class="title">
|
|
<text>开户行</text>
|
|
</view>
|
|
<view class="content">
|
|
<input type="tel" v-model="yhk.bank_address" placeholder="请输入开户行信息">
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="zfb" v-show="activeIndex==2">
|
|
<u-upload
|
|
:fileList="zfbPic"
|
|
:previewFullImage="true"
|
|
@afterRead=""
|
|
:maxCount="1" width="176" height="176"
|
|
|
|
name="1"
|
|
multiple
|
|
></u-upload>
|
|
</view>
|
|
<view class="zfb" v-show="activeIndex==3">
|
|
<u-upload
|
|
:fileList="zfbPic"
|
|
:previewFullImage="true"
|
|
@afterRead=""
|
|
:maxCount="1" width="176" height="176"
|
|
name="1"
|
|
multiple
|
|
></u-upload>
|
|
</view>
|
|
<view class="yhk">
|
|
<view class="list-input">
|
|
<view class="title">
|
|
<text>手机号</text>
|
|
</view>
|
|
<view class="content">
|
|
<input type="text" v-model="mobileForm.phone" placeholder="请输入手机号">
|
|
</view>
|
|
</view>
|
|
<view class="list-input">
|
|
<view class="title">
|
|
<text>验证码</text>
|
|
</view>
|
|
<view class="content">
|
|
<input type="text" v-model="mobileForm.code" placeholder="请输入验证码">
|
|
</view>
|
|
<view class="yzmBtn" v-show="!codeSend">
|
|
获取验证码
|
|
</view>
|
|
<view class="yzmBtn" v-show="codeSend">
|
|
{{timeNum}}s后重试
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="saveBtn">
|
|
|
|
{{activeIndex==1?'保存银行卡':activeIndex==2?'保存支付宝二维码':activeIndex==3?'保存微信二维码':''}}
|
|
</view>
|
|
</view>
|
|
|
|
<u-toast ref="uToast"></u-toast>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {updateUserInfo,smsSend} from '@/common/api.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
activeIndex:1,
|
|
list4: [{
|
|
name: '银行卡',
|
|
id:1
|
|
}, {
|
|
name: '支付宝',
|
|
id:2
|
|
}, {
|
|
name: '微信',
|
|
id:3
|
|
}],
|
|
yhk:{
|
|
bank_realname:null,
|
|
bank_mobile:null,
|
|
bank_no:null,
|
|
bank_address:null,
|
|
},
|
|
codeSend:false,
|
|
timeNum:59,
|
|
timer:null,
|
|
zfbPic:[],
|
|
mobileForm:{
|
|
phone: '',
|
|
code: '',
|
|
}
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
|
|
},
|
|
methods:{
|
|
getPay(item){
|
|
this.activeIndex = item.id
|
|
},
|
|
getCode(){
|
|
if(!this.mobileForm.phone){
|
|
this.$refs.uToast.show({
|
|
message:'请输入手机号码'
|
|
})
|
|
return;
|
|
}
|
|
smsSend({mobile:this.mobileForm.phone}).then(res=>{
|
|
if(res.code==1){
|
|
this.codeSend = true;
|
|
this.timer = setInterval(()=>{
|
|
if(this.timeNum>0){
|
|
this.timeNum--;
|
|
}else{
|
|
this.codeSend = false;
|
|
clearInterval(this.timer)
|
|
this.timer = null;
|
|
}
|
|
},1000)
|
|
}
|
|
})
|
|
},
|
|
},
|
|
destroyed() {
|
|
clearInterval(this.timer)
|
|
this.timer = null;
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'shoukuan.scss';
|
|
</style>
|
|
|