Skip to content

html / poolin_app

Go to a project
Commit c52f4ab4 by gaolei
Options

设置密码

parent 54c8dafb
Showing with 95 additions and 18 deletions
package.json
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
"author": "xin3w <xin3w@126.com>", "author": "xin3w <xin3w@126.com>",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 172.16.10.57",
"start": "npm run dev", "start": "npm run dev",
"build": "node build/build.js" "build": "node build/build.js"
}, },
......
src/assets/less/style3.less
...@@ -154,14 +154,22 @@ ...@@ -154,14 +154,22 @@
&:after{.line.xb;} &:after{.line.xb;}
} }
} }
//SetTel //setEmail
.setEmail{background-color: #ededf2; .setEmail{background-color: #ededf2;
label{font-size: 0.28rem; color: #6c87b2; padding: 0.2rem 0.3rem; display: block;} label{display: block;font-size: 0.28rem; color: #6c87b2;padding: 0 0 0 .30rem;}
.label{padding: 0.2rem 0.3rem; }
.el-input__inner{border:none;border-radius: 0;} .el-input__inner{border:none;border-radius: 0;}
.el-form-item{margin-bottom: 0;} .el-form-item{margin-bottom: 0;background-color: #fff;}
.el-form-item__error{padding:.10rem 15px;} .el-form-item__error{padding:.10rem 15px;}
.el-row{background-color: #fff;line-height: 40px;} .el-row{background-color: #fff;line-height: 40px;}
.el-col-8{.tr;padding-right: 15px;} .el-col-8{.tr;padding-right: 15px;}
.btn-code{box-shadow: none;vertical-align: middle;} .btn-code{box-shadow: none;vertical-align: middle;}
.input_custom.is-disabled .el-input__inner{background-color: #fff;color: #1c5fa9;} .input_custom.is-disabled .el-input__inner{background-color: #fff;color: #1c5fa9;}
.el-form-item__error{z-index: 99999;}
.el-form-item.is-required .el-form-item__label:before{content: ''}
.line{
.el-form-item{.pos(r);
&:after{.line.xb;}
}
}
} }
src/components/Users/Manager/SetEmail.vue
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<div class="page-content"> <div class="page-content">
<!-- 未设置邮箱 --> <!-- 未设置邮箱 -->
<el-form :model="setEmail" ref="setEmail" label-width="0px"> <el-form :model="setEmail" ref="setEmail" label-width="0px">
<label for="">请输入你的邮箱地址</label> <label class="label" for="">请输入你的邮箱地址</label>
<el-form-item prop="email" label="" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }]"> <el-form-item prop="email" label="" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }]">
<el-input v-model="setEmail.email" placeholder="输入邮箱"></el-input> <el-input v-model="setEmail.email" placeholder="输入邮箱"></el-input>
</el-form-item> </el-form-item>
...@@ -17,19 +17,17 @@ ...@@ -17,19 +17,17 @@
</div> </div>
</el-form> </el-form>
<!-- 未设置邮箱 --> <!-- 未设置邮箱 -->
<!-- 已设置邮箱 --> <!-- 已设置邮箱 -->
<el-form label-width="0px"> <el-form label-width="0px">
<label for="">你的邮箱地址为</label> <label class="label" for="">你的邮箱地址为</label>
<el-form-item> <el-form-item>
<el-input disabled v-model="messageEmail" class="input_custom"></el-input> <el-input disabled v-model="messageEmail" class="input_custom"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 已设置邮箱 --> <!-- 已设置邮箱 -->
<!-- 输入验证码 --> <!-- 输入验证码 -->
<el-form :model="setCode" ref="setCode" label-width="0px"> <el-form :model="setCode" ref="setCode" label-width="0px">
<label for="">已发送验证码到您的邮箱，请检查邮箱，在下方输入验证码</label> <label class="label" for="">已发送验证码到您的邮箱，请检查邮箱，在下方输入验证码</label>
<el-row> <el-row>
<el-col :span="16"> <el-col :span="16">
<el-form-item prop="code" label="" :rules="[ <el-form-item prop="code" label="" :rules="[
...@@ -48,7 +46,28 @@ ...@@ -48,7 +46,28 @@
</div> </div>
</el-form> </el-form>
<!-- 输入验证码 --> <!-- 输入验证码 -->
<!-- 修改密码 -->
<el-form status-icon :model="setPwd" ref="setPwd" :rules="modifyPsd" :label-position="labelPosition" label-width="85px">
<div class="mb85">
<el-form-item label="原密码" prop="usedPsd" :rules="[
{ required: true, message: '请输入原密码', trigger: 'blur,change' },
]">
<el-input type="password" v-model="setPwd.usedPsd" auto-complete="off"></el-input>
</el-form-item>
</div>
<div class="line">
<el-form-item label="密码" prop="newPsd">
<el-input type="password" v-model="setPwd.newPsd" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPsd">
<el-input type="password" v-model="setPwd.checkPsd" auto-complete="off"></el-input>
</el-form-item>
</div>
<div class='btn-group full pl30 pr30 mt70'>
<el-button type="primary" round @click="submitForm('setPwd')" :disabled="!showBtnPwd">提交</el-button>
</div>
</el-form>
<!-- 修改密码 -->
</div> </div>
</div> </div>
</template> </template>
...@@ -56,28 +75,63 @@ ...@@ -56,28 +75,63 @@
export default { export default {
name: "setEmail", name: "setEmail",
data() { data() {
var validatePass = (rule, value, callback) => {
if (value === null) {
callback(new Error('请再次输入密码'));
} else if (value !== this.setPwd.newPsd) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
}
return { return {
msg: "设置邮箱", msg: "设置邮箱",
setEmail: { setEmail: {
email: '' email: ''
}, },
messageEmail:'abc***@gmail.com', messageEmail: 'abc***@gmail.com',
setCode: { setCode: {
code: '' code: ''
}, },
count: '', count: '',
showCode: true, showCode: true,
timer: null, timer: null,
text:"获取验证码" text: "获取验证码",
}; setPwd: {
usedPsd: null,
newPsd: null,
checkPsd: null
},
labelPosition: 'left',
modifyPsd: {
newPsd: [
{ required: true, message: '请输入新密码', trigger: 'blur,change' },
{
min: 6,
max: 18,
message: "密码过短，密码为6-18位数字+字母",
trigger: "blur,change"
}
],
checkPsd: [
{ validator: validatePass, trigger: 'blur,change' },
]
},
}
}, },
computed: { computed: {
showBtnEmail: function() { showBtnEmail: function() {
return this.setEmail.email; return this.setEmail.email;
}, },
showBtnCode: function() { showBtnCode: function() {
return this.setCode.code; return this.setCode.code;
} },
showBtnPwd: function() {
return this.setPwd.usedPsd && this.setPwd.newPsd && this.setPwd.checkPsd;
},
}, },
mounted() {}, mounted() {},
methods: { methods: {
...@@ -96,18 +150,18 @@ export default { ...@@ -96,18 +150,18 @@ export default {
}); });
}, },
//输入验证码 //输入验证码
getCode() { getCode() {
const TIME_COUNT = 60; const TIME_COUNT = 60;
if (!this.timer) { if (!this.timer) {
this.count = TIME_COUNT; this.count = TIME_COUNT;
this.showCode = false; this.showCode = false;
this.timer = setInterval(() => { this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) { if (this.count > 0 && this.count <= TIME_COUNT) {
this.text=this.count+'s 后重新获取' this.text = this.count + 's 后重新获取'
this.count--; this.count--;
} else { } else {
this.showCode = true; this.showCode = true;
this.text='获取验证码' this.text = '获取验证码'
clearInterval(this.timer); clearInterval(this.timer);
this.timer = null; this.timer = null;
} }
...@@ -118,9 +172,24 @@ export default { ...@@ -118,9 +172,24 @@ export default {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
//this.$router.replace('/jump') //this.$router.replace('/jump')
this.$toast({
message: '邮箱已设置~',
iconClass: 'iconfont icon-dui'
});
} else {
console.log('error submit!!');
return false;
}
});
},
//修改密码
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//this.$router.replace('/jump')
this.$toast({ this.$toast({
message: '邮箱已设置', message: '密码设置成功~',
iconClass: 'iconfont icon-dui' iconClass: 'iconfont icon-dui'
}); });
......
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 sign in to comment