<!--
* @Author: jiangzaicheng jiangzaicheng_jzc@163.com
* @Date: 2022-07-04 15:41:06
* @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
* @LastEditTime: 2022-08-18 16:13:39
* @FilePath: \mcep-h5\src\views\authentication\LoginView.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="loginform">
<div class="rarle">
<tatle-bar :tatle="tatleName"></tatle-bar>
</div>
<div class="login">
<van-row style="padding: 10% 0%;">
<van-col span="24">
<p class="polog"><span class="font-size-18-dhc" style="padding: 2% 0%;font-weight: 600;">注册</span> </p>
</van-col>
<van-col span="24"><span class="font-size-12-dhc" style="font-weight: 400; font-family: 'Arial Normal', 'Arial';
}">请使用机号码或身份证号码进行注册</span></van-col>
</van-row>
<van-form>
<div class="logindiv">
<span class="sopan">账号</span>
<van-field @input="noChange" v-model="phone" :border="true" placeholder="请输入手机号码/身份证号码"
/>
<van-divider :style="{ margin: 0 }"></van-divider>
<!-- error-message="请输入手机号码或身份证号码" -->
<!-- :rules="[{ validator: verifyPhone, message: '请输入正确的手机号码/身份证号码' }]" -->
</div>
<!-- <div class="logindiv">
<span class="sopan">身份证号</span> -->
<!-- <van-field v-model="idCard" :border="true" placeholder="请输入身份证号"
:rules="[{ validator: verifyid, message: '请输入正确的身份证号码' }]" /> -->
<!-- <van-divider /> -->
<!-- <van-divider :style="{ margin: 0 }"></van-divider>
</div> -->
<div class="logindiv" v-show = "showCode" ><span class="sopan">短信验证码</span>
<van-row>
<van-col span="16">
<van-field v-model="sms" center clearable placeholder="请输入短信验证码">
<!-- <van-divider /> -->
</van-field>
</van-col>
<van-col span="8"><span style=" color:#3672F1; display:inline-block;font-size:12px;line-height:44px; margin-left: 25%;"
@click="getPhonePost()">{{ getCmstotal }}</span></van-col>
</van-row>
<van-divider :style="{ margin: 0 }"></van-divider>
</div>
<div class="logindiv">
<span class="sopan">设置密码</span>
<van-field v-model="password" :type="passwordType" center clearable placeholder="请填写新密码">
<!-- <van-divider /> -->
<template slot="right-icon">
<span class="solts" @click="switchPasswordType">
<van-icon name="eye" v-if="passwordType === 'password'" />
<van-icon name="closed-eye" v-else />
</span>
</template>
</van-field>
<van-divider :style="{ margin: 0 }"></van-divider>
</div>
<div class="logindiv">
<span class="sopan">确认密码</span>
<van-field v-model="restpassword" :type="passwordType" center clearable placeholder="请确认新密码">
<template slot="right-icon">
<span class="solts" @click="switchPasswordType">
<van-icon name="eye" v-if="passwordType === 'password'" />
<van-icon name="closed-eye" v-else />
</span>
</template>
</van-field>
<van-divider :style="{ margin: 0 }"></van-divider>
</div>
<div style="margin: 16px;">
<van-button square block type="info" native-type="submit" @click="registSystem()">注册</van-button>
</div>
</van-form>
<!-- <van-radio name="1" shape="square" v-model ="radio" @click="returen()">
<span>本人已阅读<a href="javascpt">《线上金融服务平台注册服务协议》</a></span>
</van-radio> -->
<div>
<van-checkbox v-model="checked" shape="square" style="padding:0% 4%;">
<span>本人已阅读<a href="#">《线上金融服务平台注册服务协议》</a></span>
</van-checkbox>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import apiService from "@/services/api.service";
import { Code } from "@/constants/enum/general/code.enum";
import { RestfulResponse } from "@/model/domain/RestfulResponse";
import registApi from "@/constants/api/login/regist-mgt.api";
import commonApi from "@/constants/api/login/common.api";
import { Toast } from "vant";
@Component({
name: "ForgetPassView",
})
export default class ForgetPassView extends Vue {
tatleName = "用户注册"
idCard = ""
phone: string = "" //电话
password: string = ""//密码
restpassword: string = ""//确认密码
getCmstotal = "获取短信验证码";
sms: string = ""//短信
// radio: boolean = false
timer: any = "";//定时器
time: number = 60;//计数
radio: string = "0"
checked: boolean = false;
passwordType = "password"
showCode = false;
//方法
noChange(s:string){
if(this.verifyPhone(s)){
this.showCode=true;
}else{
this.showCode=false;
}
}
switchPasswordType() {
this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
}
//手机号
verifyPhone(s:string) {
return /^1[3-9]\d{9}$/.test(s) // 返回true或false
}
//身份证号
verifyid() {
const card18 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
return card18.test(this.idCard)
}
registSystem() {
if (this.password === this.restpassword && this.checked) {
let param = {
phone: this.phone,
//短信验证码TODO
phoneVerifyCode: this.sms,
//数字渠道
method: "3",
pwd: this.password,
serviceAgreeStatus: this.checked
}
apiService.general(registApi.registSystem, undefined, param, undefined).then((response: RestfulResponse) => {
console.log(response);
if (response.code == Code.SUCCESS.code) {
this.$router.push({
name: `Mianview`,
params: {
data: response.data
}
})
}
});
}
}
//计时器
changeCmstotal() {
this.getCmstotal = this.time + "s重发验证码";
this.timer = setInterval(() => {
this.time--;
this.getCmstotal = this.time + "s重发验证码";
if (this.time < 0) {
clearInterval(this.time)
this.getCmstotal = "获取验证码";
}
}, 1000)
}
getPhonePost() {
let param = {
phoneCode: this.phone
}
apiService.general(commonApi.getPicCode, param, undefined, undefined).then((response: RestfulResponse) => {
if (response.code == Code.SUCCESS.code) {
Toast('短信发送成功，5分钟有效');
this.changeCmstotal()
} else {
Toast('短信发送失败,请重试');
}
})
}
created() {
}
returen() {
}
}
</script>
<style lang="scss" scoped>
.loginform {
width: 100%;
height: 100%;
}
.logindiv {
line-height: 20px;
margin-bottom: 10px;
}
.van-button {
border-radius: 6px;
}
.polog {
margin: 0px;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1;
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
font-kerning: normal;
}
.van-col--15 {
margin-top: 2%;
}
.van-col--24 {
margin-left: 6%;
}
.forget {}
.sopan {
margin-top: 5px;
margin-left: 6%;
}
// .login{
// margin-top: 20%;
// }
</style>