code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-20 09:55:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit message

Browse Source
This commit is contained in:
Chopper
2021-05-13 10:56:04 +08:00
commit ec3e958037
728 changed files with 132685 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
buyer/src/pages/home/memberCenter/ModifyPwd.vue Normal file
View File

@@ -0,0 +1,212 @@
<template>
<div class="wrapper">
<card _Title="账户安全"/>
<!-- 手机号验证 -->
<Form ref="formData" :model="formData" label-position="left" :label-width="100" :rules="ruleInLines"
v-if="(status == 2 || status == 3) && !showPwd">
<FormItem label="手机号">
<div class="phone">1234567890</div>
</FormItem>
<FormItem label="图片验证码" prop="picture" style="width: 350px">
<i-input v-model="formData.picture" size="large" maxlength="4"></i-input>
</FormItem>
<FormItem label="短信验证码" prop="msg">
<i-input v-model="formData.msg" size="large" maxlength="6" style="width: 250px">
<span slot="append">输入验证码</span>
</i-input>
</FormItem>
</Form>
<div slot="footer" v-if="(status == 2 || status == 3) && !showPwd" style="text-align: center;width: 50%">
<Button type="primary" class="ml_10" @click="submitRegister">下一步</Button>
</div>
<!-- 修改 -->
<Form ref="formRegister" :model="formRegister" :rules="ruleInline" :label-width="80" v-if="status == 1 && !showPwd">
<FormItem label="旧密码" prop="password">
<i-input type="password" v-model="formRegister.password" clearable size="large" placeholder="请输入旧密码"
style="width: 300px"
maxlength="12">
<Icon type="md-lock" slot="prepend"></Icon>
</i-input>
</FormItem>
<FormItem label="新密码" prop="newPassword">
<i-input type="password" v-model="formRegister.newPassword" clearable size="large" placeholder="请输入新密码"
style="width: 300px"
maxlength="12">
<Icon type="md-lock" slot="prepend"></Icon>
</i-input>
</FormItem>
<FormItem label="确认密码" prop="againPassword">
<i-input type="password" v-model="formRegister.againPassword" clearable size="large" placeholder="请输入确认密码"
style="width: 300px"
maxlength="12">
<Icon type="md-lock" slot="prepend"></Icon>
</i-input>
</FormItem>
</Form>
<div slot="footer" v-if="status == 1 && !showPwd" style="width: 50%;text-align: center">
<Button type="primary" class="ml_10" @click="handleRegist">修改</Button>
</div>
<!-- 设置&修改的第二种情况 -->
<Form ref="formDataUpdate" :model="formDataUpdate" label-position="left" :label-width="100" :rules="ruleIn"
v-if="showPwd">
<FormItem label="新密码" prop="newPassword">
<i-input type="password" v-model="formDataUpdate.newPassword" clearable size="large" placeholder="请输入新密码"
style="width: 300px"
maxlength="12">
<Icon type="md-lock" slot="prepend"></Icon>
</i-input>
</FormItem>
<FormItem label="确认密码" prop="againPassword">
<i-input type="password" v-model="formDataUpdate.againPassword" clearable size="large" placeholder="请输入确认密码"
style="width: 300px"
maxlength="12">
<Icon type="md-lock" slot="prepend"></Icon>
</i-input>
</FormItem>
</Form>
<div slot="footer" v-if="showPwd" style="text-align: center;width: 50%">
<Button type="primary" class="ml_10" @click="setPassword">设置</Button>
</div>
</div>
</template>
<script>
import {
setPwd,
editPwd
} from '@/api/account';
import {md5} from '@/plugins/md5.js'
export default {
name: 'modifyPwd',
data () {
return {
// 1为修改 2为设置 3为提交校验的下一步
status: '',
showPwd: false, // 显示密码
formData: { // 验证表单
picture: '',
msg: ''
},
formDataUpdate: { // 直接输入新密码表单
newPassword: '',
againPassword: ''
},
formRegister: { // 第三步 新密码表单
password: '',
againPassword: '',
newPassword: ''
},
ruleInLines: {
picture: [
{required: true, message: '请输入图片验证码', trigger: 'blur'}
],
msg: [
{required: true, message: '请输入短信验证码', trigger: 'blur'}
]
},
ruleIn: {
newPassword: [
{required: true, message: '请输入新密码', trigger: 'blur'},
{type: 'string', min: 6, message: '密码不能少于6位'}
],
againPassword: [
{required: true, message: '请输入新密码', trigger: 'blur'},
{type: 'string', min: 6, message: '密码不能少于6位'}
]
},
ruleInline: {
password: [
{required: true, message: '请输入旧密码', trigger: 'blur'}
],
newPassword: [
{required: true, message: '请输入新密码', trigger: 'blur'},
{type: 'string', min: 6, message: '密码不能少于6位'}
],
againPassword: [
{required: true, message: '请输入新密码', trigger: 'blur'},
{type: 'string', min: 6, message: '密码不能少于6位'}
]
}
}
},
mounted () {
this.status = this.$route.query.status
},
methods: {
// 修改
handleRegist () {
this.$refs['formRegister'].validate((valid) => {
if (valid) {
const {newPassword, againPassword, password} = this.formRegister
if (newPassword !== againPassword) {
this.$Message.error({
content: '新旧密码不一致'
});
return
}
const params = {newPassword, password}
params.newPassword = md5(newPassword)
params.password = md5(password)
editPwd(params).then(res => {
if (res.message === 'success' && res.result) {
this.$Message.success('修改密码成功');
this.$router.push('/home')
}
});
}
})
},
// 提交验证
submitRegister () {
this.$refs['formData'].validate((valid) => {
if (valid) {
this.showPwd = true
}
})
},
// 设置密码
setPassword () {
this.$refs['formDataUpdate'].validate((valid) => {
if (valid) {
const {newPassword, againPassword} = this.formDataUpdate
if (newPassword === '') {
this.$Message.error({
content: '请输入密码'
});
return
}
if (newPassword !== againPassword) {
this.$Message.error({
content: '新旧密码不一致'
});
return
}
const params = {password: newPassword}
params.password = md5(newPassword)
setPwd(params).then(res => {
if (res.message === 'success' && res.result) {
this.$Message.success('支付密码设置成功');
this.$router.push('/home')
}
});
}
})
}
}
}
</script>
<style scoped lang="scss">
.wrapper {
text-align: center;
}
.phone {
text-align: left;
}
</style>