Copyright: shall not be reproduced without the consent of all the liabilities of the consequences https://blog.csdn.net/xy19950125/article/details/86672984
This is verified vue binding vux
<template>
<div class="main">
<div class="banner"><img src="./images/banner2.png" alt=""></div>
<div class="centercontent">
<div class="center_top">贷款不求人，门槛低，申请</div>
<div class="center_center">
<p>
<span>您的姓名</span>
<input type="text" placeholder="请输入中文姓名" v-model="name">
</p>
<p>
<span>您的手机</span>
<input type="number" pattern='[0-9]*' placeholder="请输入手机号码" v-model="phone" oninput='if(value.length>11)value=value.slice(0,11)'>
</p>
<p style="display:flex" class="clearfix cleardate">
<span>出生日期</span>
<group>
<datetime
v-model="birthday"
placeholder='请选择生日'
start-date='1800-01-01'
end-date = '2110-12-12'
@on-change="change"
>
</datetime>
</group>
</p>
<p style="display:flex">
<span>您的性别</span>
<checklist class="big_gender" :options="commonList" :max="1" v-model="gender" @on-change="genderChange"></checklist>
</p>
<p>
<span>验证码</span>
<input type="text" placeholder="请输入验证码" v-model="verification" style="width:40%;margin-left:12%">
<button style="display:inline-block;background:#E93732;padding:0 10px" @click='flag && obtain()'>{{content}}</button>
</p>
<div class="next" @click='next()'>下一步</div>
<div class="clickcoloe">
<check-icon :value.sync="demo1">
赠：交通意外90天
</check-icon>
</div>
<div class="bigmoneyp_xy" id='clickcoloe'>
<check-icon :value.sync="demo2">
同意91大钱
</check-icon>
<span class="bigmoneyp_agreep" @click="agree">《用户注册协议》</span>
</div>
<div class="promise">
平台郑重承诺：所有贷款申请在未成功放款前绝不收取任何费用,
为保障您的资金安全，请不要相信任何要求您支付费用的信息、
邮件、电话等不实信息，具体以实际借款为准，请勿过度借贷。
</div>
</div>
</div>
<div class="free"></div>
<div class="content_bottom">
<img src="./images/bottom.png" alt="">
</div>
<div class="free"></div>
<div class="footer">
<img src="./images/footer.png" alt="">
</div>
<toast v-model="showPositionValue" type="text" :time="800" is-show-mask :text= words></toast>
</div>
</template>
<script>
import { Datetime, Group, Toast, XButton, Checklist,CheckIcon } from 'vux'
import utils from "../../utils/utils";
import MD5 from "js-md5";
export default {
components: {
Datetime,
Group,
XButton,
Checklist,
CheckIcon,
Toast
},
data() {
return {
commonList:['男','女'],
name:'',
phone:'',
birthday:'',
verification:'',
gender:[],
demo1:true,
demo2:true,
flag:true,
showPositionValue:false,
words:'',
count:'',
content:'获取验证码',
params: this.$store.state.parameter,
salt: this.$store.state.salt,
countNumber:1
}
},
methods: {
// 生日
change(value){
this.birthday = value
},
//性别
genderChange(gender){
this.gender = gender
},
//协议
agree(){
this.$router.push('/agree')
},
//公共弹框
public(){
if(this.name==''){
this.showPositionValue=true
this.words = '请输入姓名'
return false;
}
if(!/^[\u4E00-\u9FA5]{2,20}$/.test(this.name)){
this.showPositionValue=true
this.words = '请输入正确格式的姓名'
return false;
}
if(this.phone==''){
this.showPositionValue=true
this.words = '请输入手机号'
return false;
}
if(!/^1[34578]\d{9}$/.test(this.phone)){
this.showPositionValue=true
this.words = '请输入正确格式的手机号'
return false;
}
if(this.birthday==''){
this.showPositionValue=true
this.words = '请选择出生日期'
return false;
}
if(this.gender.length==0){
this.showPositionValue=true
this.words = '请选择性别'
return false;
}
return true
},
// 获取验证码
obtain(){
this.countNumber = 2
if(this.public()){
this.setTimeout()
let params = this.params;
let salt = this.salt;
params.apiKey = "";
params.data = JSON.stringify({
phoneNumber:this.phone
})
params.sign = MD5(params.apiKey+""+params.data+salt);
this.http.post(BASE_URL,params).then(data=>{
if(data.code == 'success'){
this.showPositionValue=true
this.words = '短信发送成功'
}else{
this.showPositionValue=true
this.words = data.message
clearInterval(this.timer)
}
}).catch(err=>{
console.log(err)
clearInterval(this.timer)
})
}
},
//下一步
next(){
if(this.public()){
if(this.countNumber==1){
this.showPositionValue=true
this.words = '请获取验证码'
return false;
}
if(this.verification==''){
this.showPositionValue=true
this.words = '请输入验证码'
return false;
}
if(this.demo2==false){
this.showPositionValue=true
this.words = '请同意用户协议'
return false;
}
let params = this.params;
let salt = this.salt;
params.apikey = '';
params.data = JSON.stringify({
username:this.name,
phoneNumber:this.phone,
birthday:this.birthday,
gender:this.gender,
verification:this.verification
})
params.sign = MD5(params.apiKey+""+params.data+salt);
this.http.post(BASE_URL,params).then(data=>{
if(data.code == 'success'){
this.$router.push('/application')
}else{
this.showPositionValue=true
this.words = data.message
}
}).catch(err=>{
this.showPositionValue=true
this.words = data.message
})
}
},
// 定时器
setTimeout(){
const TIME_COUNT = 60;
this.flag = false
if (!this.timer) {
this.count = TIME_COUNT;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
this.content = this.count+' s后获取';
} else {
this.content = '获取验证码';
this.flag = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
}
},
created() {
},
mounted() {
}
};
</script>
<style lang="less" scoped>
.main{
width:750px;
margin:0 auto;
.banner img{
width:100%;height:331px;
}
.centercontent{
.center_top{
height:58px;
margin:30px 100px;
background: url(./images/title1.png);
line-height:58px;text-align: center;
background-size:100% 100%;
color:#FFFFFF;
font-size:26px;
}
.center_center{
padding:0 30px;
font-size:28px;
p{
border:1px solid #B5B5B5;
margin-bottom:30px;
height:82px;
line-height:82px;
padding-left:30px;
padding-bottom:10px;
input{
height:70px;
margin-left:50px;
font-size:26px;
}
button{
border:0;height:50px;padding:5px;
color:#fff;
}
.cleardate {
position: relative;
}
}
.next{
height:90px;background:#E3332F;
line-height:90px;text-align: center;
color:#fff;
}
.clickcoloe{
margin:20px 0 10px;
}
.bigmoneyp_agreep{
color: #da944e;
font-family: "PingFang SC";
font-size: 30px;
}
.promise{
font-size:24px;margin:20px 0 30px; ;color:#333;
}
}
}
.free{
height:42px;background:#F0F0F0
}
.content_bottom img{
width:100%;height:347px;
}
.footer_top img{
width:100%;height:182px;
}
}
</style>