Skip to content

O
offical_web
Commit 31f7bfbb by zhangxiaolong
Options

手机号注册/登录添加

parent b7172d3c
Showing with 420 additions and 114 deletions
package-lock.json
...@@ -2269,87 +2269,6 @@ ...@@ -2269,87 +2269,6 @@
"webpack-chain": "^6.4.0", "webpack-chain": "^6.4.0",
"webpack-dev-server": "^3.11.0", "webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2" "webpack-merge": "^4.2.2"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.4",
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.8.3",
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
} }
}, },
"@vue/cli-shared-utils": { "@vue/cli-shared-utils": {
...@@ -13264,6 +13183,87 @@ ...@@ -13264,6 +13183,87 @@
} }
} }
}, },
"vue-loader-v16": {
"version": "npm:vue-loader@16.8.3",
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.4",
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-navigation": { "vue-navigation": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/vue-navigation/-/vue-navigation-1.1.4.tgz", "resolved": "https://registry.npmjs.org/vue-navigation/-/vue-navigation-1.1.4.tgz",
......
src/plugins/element.js
...@@ -57,6 +57,7 @@ import { ...@@ -57,6 +57,7 @@ import {
CascaderPanel, CascaderPanel,
Tag, Tag,
Scrollbar, Scrollbar,
RadioButton,
} from 'element-ui' } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'mini' } Vue.prototype.$ELEMENT = { size: 'mini' }
...@@ -91,7 +92,7 @@ Vue.use(Container) ...@@ -91,7 +92,7 @@ Vue.use(Container)
Vue.use(ButtonGroup) Vue.use(ButtonGroup)
Vue.use(Tag) Vue.use(Tag)
Vue.use(Scrollbar) Vue.use(Scrollbar)
Vue.use(RadioButton)
Vue.use(Cascader) Vue.use(Cascader)
Vue.prototype.$alert = MessageBox.alert Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$message = (message) => Vue.prototype.$message = (message) =>
......
src/views/login.vue
...@@ -12,35 +12,30 @@ ...@@ -12,35 +12,30 @@
</div> </div>
<div :class="$isMobile ? 'login-mobile' : ''"> <div :class="$isMobile ? 'login-mobile' : ''">
<div :class="$isMobile ? 'login-content-mobile' : 'login_content'"> <div :class="$isMobile ? 'login-content-mobile' : 'login_content'">
<h2 <el-radio-group v-model="labelPosition" class="radioGroup" size="small">
style=" <el-radio-button label="passwordLogin">密码登录</el-radio-button>
text-align: center; <el-radio-button label="verificationLogin">验证码登录</el-radio-button>
font-weight: 400; </el-radio-group>
color: #4a4c6d;
margin-bottom: 40px;
">
欢迎登录
</h2>
<el-form <el-form
size="medium" size="medium"
:model="ruleForm" :model="ruleForm"
:rules="rules" :rules="rules"
ref="ruleForm" ref="ruleForm"
class="login_form"> class="login_form">
<el-form-item prop="email"> <el-form-item v-if="labelPosition==='passwordLogin'" prop="email">
<el-input <el-input
prefix-icon="el-icon-message" prefix-icon="el-icon-message"
style="background: #fff" style="background: #fff"
v-model="ruleForm.email" v-model="ruleForm.email"
placeholder="Email"></el-input> placeholder="请输入手机号或者邮箱"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password" style="margin-bottom: 20px"> <el-form-item v-if="labelPosition==='passwordLogin'" prop="password" style="margin-bottom: 20px">
<el-input <el-input
:type="showPwd ? 'text' : 'password'" :type="showPwd ? 'text' : 'password'"
prefix-icon="el-icon-lock" prefix-icon="el-icon-lock"
style="background: #fff" style="background: #fff"
v-model="ruleForm.password" v-model="ruleForm.password"
placeholder="Password" placeholder="请输入密码"
@keyup.enter.native="submitForm"> @keyup.enter.native="submitForm">
<i <i
@click="showPwd = !showPwd" @click="showPwd = !showPwd"
...@@ -48,6 +43,52 @@ ...@@ -48,6 +43,52 @@
:class="{ eyes: true, open: !showPwd, close: showPwd }"></i> :class="{ eyes: true, open: !showPwd, close: showPwd }"></i>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="labelPosition==='verificationLogin'" prop="phone">
<el-input
prefix-icon="el-icon-phone"
style="background: #fff"
v-model="ruleForm.phone"
placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item v-if="labelPosition==='verificationLogin'" prop="verifyKey" label="">
<div style="display: flex; gap: 20px; margin-bottom: -10px;">
<div style="flex: 1">
<el-input
v-model="ruleForm.verifyKey"
prefix-icon="el-icon-postcard"
placeholder="请输入验证码,区分大小写">
</el-input>
</div>
<div @click="getVerifycode">
<img
style="width: 100px; height: 80%"
:src="VerifyUrl">
</img>
</div>
</div>
</el-form-item>
<el-form-item v-if="labelPosition==='verificationLogin'" prop="code" label="">
<div style="display: flex; gap: 20px">
<div style="flex: 1">
<el-input
v-model="ruleForm.code"
prefix-icon="el-icon-message"
placeholder="请输入短信验证码"></el-input>
</div>
<div>
<el-button
class="get-code-button"
style="width: 112px"
:disabled="getCodeDisabled"
:class="getCodeDisabled ? 'disabled' : 'code-btn'"
@click="verPhonecode">
{{
codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒`
}}
</el-button>
</div>
</div>
</el-form-item>
<div class="forget-password"> <div class="forget-password">
<span style="cursor: pointer" @click="forgetPassword"> <span style="cursor: pointer" @click="forgetPassword">
忘记密码? 忘记密码?
...@@ -71,9 +112,10 @@ ...@@ -71,9 +112,10 @@
<div class="forget-title">忘记密码</div> <div class="forget-title">忘记密码</div>
<el-form size="medium" :model="forgetForm" ref="forgetForm"> <el-form size="medium" :model="forgetForm" ref="forgetForm">
<el-form-item <el-form-item
v-if="labelPosition==='passwordLogin'"
prop="email" prop="email"
label="" label=""
:rules="[{ required: true, message: '请输入邮箱', type: 'email' }]"> :rules="[{ required: true, message: '请输入邮箱地址', type: 'email' }]">
<el-input <el-input
v-model="forgetForm.email" v-model="forgetForm.email"
prefix-icon="el-icon-postcard" prefix-icon="el-icon-postcard"
...@@ -81,6 +123,7 @@ ...@@ -81,6 +123,7 @@
placeholder="请输入邮箱"></el-input> placeholder="请输入邮箱"></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="labelPosition==='passwordLogin'"
prop="code" prop="code"
label="" label=""
:rules="[{ required: true, message: '请输入验证码' }]"> :rules="[{ required: true, message: '请输入验证码' }]">
...@@ -106,6 +149,63 @@ ...@@ -106,6 +149,63 @@
</div> </div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="labelPosition==='verificationLogin'"
prop="phone"
:rules="[{ required: true, message: '请输入手机号'}]">
<el-input
prefix-icon="el-icon-phone"
style="background: #fff"
v-model="forgetForm.phone"
placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item
v-if="labelPosition==='verificationLogin'"
prop="verifyKey"
label=""
:rules="[{ required: true, message: '请输入验证码'}]">
<div style="display: flex; gap: 20px; margin-bottom: -10px;">
<div style="flex: 1">
<el-input
v-model="forgetForm.verifyKey"
prefix-icon="el-icon-postcard"
placeholder="请输入验证码,区分大小写">
</el-input>
</div>
<div @click="getVerifycode">
<img
style="width: 100px; height: 80%"
:src="VerifyUrl">
</img>
</div>
</div>
</el-form-item>
<el-form-item
v-if="labelPosition==='verificationLogin'"
prop="code"
label=""
:rules="[{ required: true, message: '请输入短信验证码'}]">
<div style="display: flex; gap: 20px">
<div style="flex: 1">
<el-input
v-model="forgetForm.code"
prefix-icon="el-icon-message"
placeholder="请输入短信验证码"></el-input>
</div>
<div>
<el-button
class="get-code-button"
style="width: 112px"
:disabled="getCodeDisabled"
:class="getCodeDisabled ? 'disabled' : 'code-btn'"
@click="forgetPhonecode">
{{
codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒`
}}
</el-button>
</div>
</div>
</el-form-item>
<el-form-item
prop="password" prop="password"
:rules="[{ required: true, message: '请输入新密码' }]"> :rules="[{ required: true, message: '请输入新密码' }]">
<el-input <el-input
...@@ -188,6 +288,8 @@ export default { ...@@ -188,6 +288,8 @@ export default {
callback() callback()
} }
}, },
VerifyUrl:'',
labelPosition: 'passwordLogin',
isShowModal: false, isShowModal: false,
ruleForm: { ruleForm: {
password: '', password: '',
...@@ -197,15 +299,18 @@ export default { ...@@ -197,15 +299,18 @@ export default {
codeCountDown: 0, codeCountDown: 0,
forgetForm: {}, forgetForm: {},
rules: { rules: {
email: [ email: [{ required: true, message: '请输入邮箱或手机号', trigger: 'blur' }],
{ required: true, message: '请输入邮箱', trigger: 'blur' }, password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ {
type: 'email', pattern: /^1[3,4,5,6,7,8,9][0-9]{9}$/,
message: '请输入正确的邮箱地址', message: "请输入正确手机号码",
trigger: ['blur', 'change'], trigger: ['blur', 'change'],
}, }
], ],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
verifyKey: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
}, },
showPwd: false, showPwd: false,
showNewPwd: false, showNewPwd: false,
...@@ -217,6 +322,9 @@ export default { ...@@ -217,6 +322,9 @@ export default {
return this.codeCountDown > 0 return this.codeCountDown > 0
}, },
}, },
mounted(){
this.getVerifycode()
},
methods: { methods: {
...mapMutations(['setUserInfo']), ...mapMutations(['setUserInfo']),
async verCode() { async verCode() {
...@@ -245,7 +353,66 @@ export default { ...@@ -245,7 +353,66 @@ export default {
console.error(e) console.error(e)
} }
}, },
async verPhonecode(){
try {
await new Promise((resolve, reject) => {
this.$refs.ruleForm.validateField('phone', (m) => {
m ? reject() : resolve()
})
})
} catch {
return
}
try {
const res = await post('business/user/phonecode', {
account: this.ruleForm.phone,
verifyKey: this.verifyKeyTime,
verifyCode: this.ruleForm.verifyKey
})
this.codeCountDown = 60
this.timer = setInterval(() => {
this.codeCountDown--
if (this.codeCountDown <= 0) {
clearInterval(this.timer)
}
}, 1000)
this.$message.success(res.message)
} catch (e) {
this.getVerifycode()
console.error(e)
}
},
async forgetPhonecode(){
try {
await new Promise((resolve, reject) => {
this.$refs.forgetForm.validateField('phone', (m) => {
m ? reject() : resolve()
})
})
} catch {
return
}
try {
const res = await post('business/user/phonecode', {
account: this.forgetForm.phone,
verifyKey: this.verifyKeyTime,
verifyCode: this.forgetForm.verifyKey
})
this.codeCountDown = 60
this.timer = setInterval(() => {
this.codeCountDown--
if (this.codeCountDown <= 0) {
clearInterval(this.timer)
}
}, 1000)
this.$message.success(res.message)
} catch (e) {
this.getVerifycode()
console.error(e)
}
},
forgetPassword() { forgetPassword() {
this.getVerifycode()
this.isShowModal = true this.isShowModal = true
this.forgetForm = {} this.forgetForm = {}
this.codeCountDown = 0 this.codeCountDown = 0
...@@ -267,8 +434,8 @@ export default { ...@@ -267,8 +434,8 @@ export default {
const passwordHash = hash.hex() const passwordHash = hash.hex()
post('business/user/restPassword', { post('business/user/restPassword', {
password: passwordHash, password: passwordHash,
email: this.forgetForm.email, account: this.forgetForm.email ? this.forgetForm.email : this.forgetForm.phone,
code: this.forgetForm.code, code: this.forgetForm.code
}).then((res) => { }).then((res) => {
if (res.code === 200) { if (res.code === 200) {
this.$message.success('密码修改成功') this.$message.success('密码修改成功')
...@@ -283,15 +450,24 @@ export default { ...@@ -283,15 +450,24 @@ export default {
e.preventDefault() e.preventDefault()
this.$refs.ruleForm.validate((valid) => { this.$refs.ruleForm.validate((valid) => {
if (valid) { if (valid) {
let parmes = {}
if(this.ruleForm.password){
const hash = md5.create() const hash = md5.create()
hash.update(this.ruleForm.password) hash.update(this.ruleForm.password)
const passwordHash = hash.hex() const passwordHash = hash.hex()
parmes = {
account: this.ruleForm.email ? this.ruleForm.email : this.ruleForm.phone,
password: passwordHash,
}
}else{
parmes = {
account: this.ruleForm.email ? this.ruleForm.email : this.ruleForm.phone,
code: this.ruleForm.code
}
}
let url = `business/user/login` let url = `business/user/login`
post(url, { post(url, parmes).then((res) => {
email: this.ruleForm.email,
password: passwordHash
}).then((res) => {
if (res.code === 200) { if (res.code === 200) {
localStorage.setItem('userInfo', JSON.stringify(res.data)) localStorage.setItem('userInfo', JSON.stringify(res.data))
this.setUserInfo(JSON.parse(JSON.stringify(res.data))) this.setUserInfo(JSON.parse(JSON.stringify(res.data)))
...@@ -302,6 +478,16 @@ export default { ...@@ -302,6 +478,16 @@ export default {
} }
}) })
}, },
getVerifycode(){
this.verifyKeyTime = new Date().getTime();
get('business/user/verifycode',{
verifyKey: this.verifyKeyTime
}).then((res)=>{
if(res.code === 200){
this.VerifyUrl = res.message
}
})
}
}, },
} }
</script> </script>
...@@ -476,6 +662,12 @@ export default { ...@@ -476,6 +662,12 @@ export default {
.login-page::v-deep .el-input__inner::-ms-clear { .login-page::v-deep .el-input__inner::-ms-clear {
display: none; display: none;
} }
.radioGroup{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
.login-page { .login-page {
......
src/views/register.vue
...@@ -13,25 +13,29 @@ ...@@ -13,25 +13,29 @@
<h2 style="text-align: center; font-weight: 400; color: #4a4c6d"> <h2 style="text-align: center; font-weight: 400; color: #4a4c6d">
用户注册 用户注册
</h2> </h2>
<el-radio-group v-model="labelPosition" class="radioGroup" size="small" @change="clickChange">
<el-radio-button label="mailbox">邮箱注册</el-radio-button>
<el-radio-button label="phone">手机号注册</el-radio-button>
</el-radio-group>
<el-form <el-form
size="medium" size="medium"
:model="registerForm" :model="registerForm"
:rules="rules" :rules="rules"
ref="registerForm" ref="registerForm"
class="login_form"> class="login_form">
<el-form-item prop="email" label=""> <el-form-item v-if="labelPosition==='mailbox'" prop="email" label="">
<el-input <el-input
v-model="registerForm.email" v-model="registerForm.email"
prefix-icon="el-icon-postcard" prefix-icon="el-icon-postcard"
placeholder="请输入邮箱"></el-input> placeholder="请输入邮箱"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" label=""> <el-form-item v-if="labelPosition==='mailbox'" prop="code" label="">
<div style="display: flex; gap: 20px"> <div style="display: flex; gap: 20px">
<div style="flex: 1"> <div style="flex: 1">
<el-input <el-input
v-model="registerForm.code" v-model="registerForm.code"
prefix-icon="el-icon-message" prefix-icon="el-icon-message"
placeholder="请输入验证码"></el-input> placeholder="请输入邮箱验证码"></el-input>
</div> </div>
<div> <div>
<el-button <el-button
...@@ -47,6 +51,51 @@ ...@@ -47,6 +51,51 @@
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item v-if="labelPosition==='phone'" prop="phone" label="">
<el-input
v-model="registerForm.phone"
prefix-icon="el-icon-phone"
placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item v-if="labelPosition==='phone'" prop="verifyKey" label="">
<div style="display: flex; gap: 20px; margin-bottom: -10px;">
<div style="flex: 1">
<el-input
v-model="registerForm.verifyKey"
prefix-icon="el-icon-postcard"
placeholder="请输入验证码,区分大小写">
</el-input>
</div>
<div @click="getVerifycode">
<img
style="width: 100px; height: 80%"
:src="VerifyUrl">
</img>
</div>
</div>
</el-form-item>
<el-form-item v-if="labelPosition==='phone'" prop="code" label="">
<div style="display: flex; gap: 20px">
<div style="flex: 1">
<el-input
v-model="registerForm.code"
prefix-icon="el-icon-message"
placeholder="请输入短信验证码"></el-input>
</div>
<div>
<el-button
class="get-code-button"
style="width: 112px"
:disabled="getCodeDisabled"
:class="getCodeDisabled ? 'disabled' : 'code-btn'"
@click="verPhonecode">
{{
codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒`
}}
</el-button>
</div>
</div>
</el-form-item>
<el-form-item prop="password" label=""> <el-form-item prop="password" label="">
<el-input <el-input
type="password" type="password"
...@@ -121,6 +170,9 @@ export default { ...@@ -121,6 +170,9 @@ export default {
} }
} }
return { return {
VerifyUrl:'',
verifyKeyTime:'',
labelPosition: 'mailbox',
registerForm: {}, registerForm: {},
isRead: false, isRead: false,
agreeAnimate: false, agreeAnimate: false,
...@@ -134,7 +186,16 @@ export default { ...@@ -134,7 +186,16 @@ export default {
trigger: ['blur', 'change'], trigger: ['blur', 'change'],
}, },
], ],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{
pattern: /^1[3,4,5,6,7,8,9][0-9]{9}$/,
message: "请输入正确手机号码",
trigger: ['blur', 'change'],
}
],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }], code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
verifyKey: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
checkPass: [ checkPass: [
{ required: true, message: '请再次输入密码', trigger: 'blur' }, { required: true, message: '请再次输入密码', trigger: 'blur' },
...@@ -153,6 +214,9 @@ export default { ...@@ -153,6 +214,9 @@ export default {
return this.codeCountDown > 0 return this.codeCountDown > 0
}, },
}, },
mounted(){
this.getVerifycode()
},
methods: { methods: {
async verCode() { async verCode() {
try { try {
...@@ -166,7 +230,35 @@ export default { ...@@ -166,7 +230,35 @@ export default {
} }
try { try {
const res = await get('business/user/emailcode', { const res = await get('business/user/emailcode', {
email: this.registerForm.email, email: this.registerForm.email
})
this.codeCountDown = 60
this.timer = setInterval(() => {
this.codeCountDown--
if (this.codeCountDown <= 0) {
clearInterval(this.timer)
}
}, 1000)
this.$message.success(res.message)
} catch (e) {
console.error(e)
}
},
async verPhonecode(){
try {
await new Promise((resolve, reject) => {
this.$refs.registerForm.validateField('phone', (m) => {
m ? reject() : resolve()
})
})
} catch {
return
}
try {
const res = await post('business/user/phonecode', {
account: this.registerForm.phone,
verifyKey: this.verifyKeyTime,
verifyCode: this.registerForm.verifyKey
}) })
this.codeCountDown = 60 this.codeCountDown = 60
this.timer = setInterval(() => { this.timer = setInterval(() => {
...@@ -177,6 +269,7 @@ export default { ...@@ -177,6 +269,7 @@ export default {
}, 1000) }, 1000)
this.$message.success(res.message) this.$message.success(res.message)
} catch (e) { } catch (e) {
this.getVerifycode()
console.error(e) console.error(e)
} }
}, },
...@@ -190,7 +283,7 @@ export default { ...@@ -190,7 +283,7 @@ export default {
}, 700) }, 700)
return return
} }
const { code, companyName, email, job, password } = this.registerForm const { code, companyName, email, job, password, phone, verifyKey } = this.registerForm
const hash = md5.create() const hash = md5.create()
hash.update(password) hash.update(password)
...@@ -201,6 +294,7 @@ export default { ...@@ -201,6 +294,7 @@ export default {
email: email, email: email,
job: job, job: job,
password: passwordHash, password: passwordHash,
account: email ? email : phone
}).then((res) => { }).then((res) => {
this.$message.success(res.message) this.$message.success(res.message)
if (res.code === 200) { if (res.code === 200) {
...@@ -211,6 +305,19 @@ export default { ...@@ -211,6 +305,19 @@ export default {
} }
}) })
}, },
getVerifycode(){
this.verifyKeyTime = new Date().getTime();
get('business/user/verifycode',{
verifyKey: this.verifyKeyTime
}).then((res)=>{
if(res.code === 200){
this.VerifyUrl = res.message
}
})
},
clickChange(lab){
this.registerForm = {}
}
}, },
} }
</script> </script>
...@@ -313,6 +420,12 @@ export default { ...@@ -313,6 +420,12 @@ export default {
top: 7%; top: 7%;
left: 8%; left: 8%;
} }
.radioGroup{
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
.login_bg { .login_bg {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment