Skip to content

O
offical_web
Commit 31f7bfbb by zhangxiaolong
Options

手机号注册/登录添加

parent b7172d3c
Showing with 201 additions and 87 deletions
package-lock.json
......@@ -2269,87 +2269,6 @@
"webpack-chain": "^6.4.0",
"webpack-dev-server": "^3.11.0",
"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": {
......@@ -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": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/vue-navigation/-/vue-navigation-1.1.4.tgz",
......
src/plugins/element.js
......@@ -57,6 +57,7 @@ import {
CascaderPanel,
Tag,
Scrollbar,
RadioButton,
} from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'mini' }
......@@ -91,7 +92,7 @@ Vue.use(Container)
Vue.use(ButtonGroup)
Vue.use(Tag)
Vue.use(Scrollbar)
Vue.use(RadioButton)
Vue.use(Cascader)
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$message = (message) =>
......
src/views/register.vue
......@@ -13,25 +13,29 @@
<h2 style="text-align: center; font-weight: 400; color: #4a4c6d">
用户注册
</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
size="medium"
:model="registerForm"
:rules="rules"
ref="registerForm"
class="login_form">
<el-form-item prop="email" label="">
<el-form-item v-if="labelPosition==='mailbox'" prop="email" label="">
<el-input
v-model="registerForm.email"
prefix-icon="el-icon-postcard"
placeholder="请输入邮箱"></el-input>
</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="flex: 1">
<el-input
v-model="registerForm.code"
prefix-icon="el-icon-message"
placeholder="请输入验证码"></el-input>
placeholder="请输入邮箱验证码"></el-input>
</div>
<div>
<el-button
......@@ -47,6 +51,51 @@
</div>
</div>
</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-input
type="password"
......@@ -121,6 +170,9 @@ export default {
}
}
return {
VerifyUrl:'',
verifyKeyTime:'',
labelPosition: 'mailbox',
registerForm: {},
isRead: false,
agreeAnimate: false,
......@@ -134,7 +186,16 @@ export default {
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' }],
verifyKey: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
checkPass: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
......@@ -153,6 +214,9 @@ export default {
return this.codeCountDown > 0
},
},
mounted(){
this.getVerifycode()
},
methods: {
async verCode() {
try {
......@@ -166,7 +230,7 @@ export default {
}
try {
const res = await get('business/user/emailcode', {
email: this.registerForm.email,
email: this.registerForm.email
})
this.codeCountDown = 60
this.timer = setInterval(() => {
......@@ -180,6 +244,35 @@ export default {
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.timer = setInterval(() => {
this.codeCountDown--
if (this.codeCountDown <= 0) {
clearInterval(this.timer)
}
}, 1000)
this.$message.success(res.message)
} catch (e) {
this.getVerifycode()
console.error(e)
}
},
onRegister() {
this.$refs.registerForm.validate((valid) => {
if (valid) {
......@@ -190,7 +283,7 @@ export default {
}, 700)
return
}
const { code, companyName, email, job, password } = this.registerForm
const { code, companyName, email, job, password, phone, verifyKey } = this.registerForm
const hash = md5.create()
hash.update(password)
......@@ -201,6 +294,7 @@ export default {
email: email,
job: job,
password: passwordHash,
account: email ? email : phone
}).then((res) => {
this.$message.success(res.message)
if (res.code === 200) {
......@@ -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>
......@@ -313,6 +420,12 @@ export default {
top: 7%;
left: 8%;
}
.radioGroup{
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
@media screen and (max-width: 1100px) {
.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