|
|
<template>
|
|
|
<div class="formcontainer">
|
|
|
<div class="title centerall">新用户注册</div>
|
|
|
<a-form
|
|
|
id="components-form-demo-normal-login"
|
|
|
:form="form"
|
|
|
class="login-form"
|
|
|
@submit="registerSubmit"
|
|
|
>
|
|
|
<a-form-item style="text-align: left">
|
|
|
<a-input
|
|
|
v-decorator="[
|
|
|
'tel',
|
|
|
{
|
|
|
rules: rules.tel,
|
|
|
validateTrigger: 'submit',
|
|
|
|
|
|
validateFirst: true,
|
|
|
},
|
|
|
]"
|
|
|
autocomplete="off"
|
|
|
:maxLength="11"
|
|
|
placeholder="请输入手机号"
|
|
|
>
|
|
|
<i slot="prefix" class="icon-shouji iconfont" />
|
|
|
</a-input>
|
|
|
</a-form-item>
|
|
|
<a-form-item style="text-align: left">
|
|
|
<a-input
|
|
|
v-decorator="[
|
|
|
'code',
|
|
|
{
|
|
|
rules: rules.code,
|
|
|
validateTrigger: 'submit',
|
|
|
|
|
|
validateFirst: true,
|
|
|
},
|
|
|
]"
|
|
|
type="text"
|
|
|
autocomplete="off"
|
|
|
placeholder="请输入验证码"
|
|
|
>
|
|
|
<i slot="prefix" class="icon-duanxinyanzheng iconfont" />
|
|
|
<span class="getrulecode" slot="suffix"
|
|
|
><span
|
|
|
@click="getPhoneCode"
|
|
|
data-mark="getcode"
|
|
|
v-if="timedata.isfinish"
|
|
|
>获取验证码</span
|
|
|
><timmer :timedata="timedata" v-if="!timedata.isfinish"
|
|
|
/></span>
|
|
|
</a-input>
|
|
|
</a-form-item>
|
|
|
<a-form-item style="text-align: left">
|
|
|
<a-input
|
|
|
@input="getpassword"
|
|
|
v-decorator="[
|
|
|
'password',
|
|
|
{
|
|
|
rules: rules.password,
|
|
|
validateTrigger: 'submit',
|
|
|
|
|
|
validateFirst: true,
|
|
|
},
|
|
|
]"
|
|
|
type="password"
|
|
|
placeholder="请输入密码"
|
|
|
>
|
|
|
<i slot="prefix" class="iconfont icon-mima" />
|
|
|
</a-input>
|
|
|
</a-form-item>
|
|
|
<a-form-item style="text-align: left">
|
|
|
<a-input
|
|
|
v-decorator="[
|
|
|
'newpassword',
|
|
|
{
|
|
|
rules: rules.newpassword,
|
|
|
validateTrigger: 'submit',
|
|
|
|
|
|
validateFirst: true,
|
|
|
},
|
|
|
]"
|
|
|
type="password"
|
|
|
placeholder="请再次输入密码"
|
|
|
>
|
|
|
<i slot="prefix" class="iconfont icon-mima" />
|
|
|
</a-input>
|
|
|
</a-form-item>
|
|
|
<div style="text-align: left">
|
|
|
<input
|
|
|
type="checkbox"
|
|
|
name="register"
|
|
|
v-model="ischecked"
|
|
|
@change="checked"
|
|
|
style="margin-right: 5px; vertical-align: middle"
|
|
|
va
|
|
|
/>
|
|
|
<span label="register">注册即表示您已阅读并同意</span>
|
|
|
|
|
|
<span style="color: #ff6a00; font-size: 12px">《平台用户协议》</span>
|
|
|
</div>
|
|
|
<a-form-item>
|
|
|
<span></span>
|
|
|
<a-button type="primary" html-type="submit" class="login-form-button">
|
|
|
注册
|
|
|
</a-button>
|
|
|
</a-form-item>
|
|
|
</a-form>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getPhoneCodeApi, registerApi } from "../../api/login";
|
|
|
import timmer from "./components/countback.vue";
|
|
|
export default {
|
|
|
// 组件名称
|
|
|
name: "login",
|
|
|
// 局部注册的组件
|
|
|
components: {
|
|
|
timmer,
|
|
|
},
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
props: {},
|
|
|
// 组件状态值
|
|
|
data() {
|
|
|
return {
|
|
|
loginway: 1,
|
|
|
form: this.$form.createForm(this),
|
|
|
timedata: {
|
|
|
isfinish: true,
|
|
|
deadline: 60,
|
|
|
timmer: null,
|
|
|
},
|
|
|
setpassword: "",
|
|
|
ischecked: false,
|
|
|
rules: {
|
|
|
tel: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: "请输入手机号",
|
|
|
},
|
|
|
{
|
|
|
pattern: /^1[3456789]\d{9}$/,
|
|
|
message: "请输入正确手机号",
|
|
|
},
|
|
|
],
|
|
|
code: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: "请输入验证码",
|
|
|
},
|
|
|
],
|
|
|
password: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: "请输入密码",
|
|
|
},
|
|
|
],
|
|
|
newpassword: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: "请再次输入密码",
|
|
|
},
|
|
|
{
|
|
|
validator: this.replacepassword,
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {},
|
|
|
// 侦听器
|
|
|
watch: {},
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
created() {},
|
|
|
/**
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
*/
|
|
|
mounted() {},
|
|
|
// 组件方法
|
|
|
methods: {
|
|
|
registerSubmit(e) {
|
|
|
e.preventDefault();
|
|
|
console.log(1);
|
|
|
this.form.validateFields(
|
|
|
// ["tel", "code", "password"],
|
|
|
async (err, values) => {
|
|
|
console.log(values);
|
|
|
console.log(err);
|
|
|
|
|
|
if (!err && this.ischecked === true) {
|
|
|
try {
|
|
|
const { data } = await registerApi(values);
|
|
|
console.log(data);
|
|
|
if (data.status === 200) {
|
|
|
this.$message.success("注册成功");
|
|
|
this.$router.push("/login");
|
|
|
} else {
|
|
|
this.$message.warning(data.msg);
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
}
|
|
|
} else if (this.ischecked !== true) {
|
|
|
this.$message.warning("请阅读并同意《平台用户协议》");
|
|
|
}
|
|
|
}
|
|
|
);
|
|
|
},
|
|
|
getPhoneCode() {
|
|
|
const that = this;
|
|
|
|
|
|
this.form.validateFields(["tel"], async (err, values) => {
|
|
|
console.log(values);
|
|
|
|
|
|
if (!err) {
|
|
|
that.timedata.isfinish = false;
|
|
|
console.log(that.timedata.isfinish);
|
|
|
console.log(this.setpassword + 1212121);
|
|
|
|
|
|
try {
|
|
|
const data = await getPhoneCodeApi({ tel: values.tel });
|
|
|
console.log(data);
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
}
|
|
|
} else {
|
|
|
console.log(err);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
getpassword(e) {
|
|
|
this.setpassword = e.target.value;
|
|
|
console.log(e);
|
|
|
},
|
|
|
replacepassword(rule, value, callback) {
|
|
|
console.log(rule);
|
|
|
console.log(value);
|
|
|
if (this.setpassword !== value) {
|
|
|
callback("两次密码不一样");
|
|
|
}
|
|
|
callback();
|
|
|
|
|
|
// console.log(callback);
|
|
|
},
|
|
|
checked() {
|
|
|
console.log(this.ischecked);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
.formcontainer {
|
|
|
.centerall {
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.title {
|
|
|
display: inline-block;
|
|
|
text-align: center;
|
|
|
color: #4d575e;
|
|
|
border-bottom: 1px solid #4d575e;
|
|
|
padding: 0 0 4px 0;
|
|
|
margin-bottom: 25px;
|
|
|
font-size: 14px;
|
|
|
text-align: left;
|
|
|
line-height: 22px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
/deep/.ant-input-affix-wrapper {
|
|
|
i {
|
|
|
font-size: 26px;
|
|
|
}
|
|
|
.ant-input {
|
|
|
height: 36px;
|
|
|
text-indent: 15px;
|
|
|
border: none;
|
|
|
background-color: #f6f6f6;
|
|
|
&:focus {
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
&::placeholder {
|
|
|
font-size: 14px;
|
|
|
text-indent: 15px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.login-form-button {
|
|
|
width: 100%;
|
|
|
height: 36px;
|
|
|
margin-top: 20px;
|
|
|
background-color: #ff6a00;
|
|
|
font-size: 20px;
|
|
|
border: none;
|
|
|
border-radius: 27px;
|
|
|
color: white;
|
|
|
}
|
|
|
.register {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
font-size: 12px;
|
|
|
|
|
|
span {
|
|
|
color: #4d575e;
|
|
|
i {
|
|
|
vertical-align: middle;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
a {
|
|
|
color: #ff6a00;
|
|
|
}
|
|
|
}
|
|
|
.autologin {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
font-size: 14px;
|
|
|
a {
|
|
|
color: #ff6a00;
|
|
|
}
|
|
|
}
|
|
|
.getrulecode {
|
|
|
padding: 0 0 0 10px;
|
|
|
width: 89px;
|
|
|
font-size: 14px;
|
|
|
text-align: center;
|
|
|
border-left: 1px #cccccc solid;
|
|
|
line-height: 14px;
|
|
|
color: #4d575e;
|
|
|
span[data-mark="getcode"] {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|