提交 ef5c6644 编写于 作者: Mr.奇淼('s avatar Mr.奇淼(

前端代码优化 修改密码迁移至个人中心内部

上级 e13f1f61
......@@ -144,7 +144,7 @@ func ChangePassword(c *gin.Context) {
U := &model.SysUser{Username: user.Username, Password: user.Password}
if err, _ := service.ChangePassword(U, user.NewPassword); err != nil {
global.GVA_LOG.Error("修改失败", zap.Any("err", err))
response.FailWithMessage("修改失败,请检查用户名密码", c)
response.FailWithMessage("修改失败,原密码与当前账户不符", c)
} else {
response.OkWithMessage("修改成功", c)
}
......
......@@ -11,7 +11,7 @@ import (
)
var Users = []model.SysUser{
{GVA_MODEL: global.GVA_MODEL{ID: 1, CreatedAt: time.Now(), UpdatedAt: time.Now()}, UUID: uuid.NewV4(), Username: "admin", Password: "e10adc3949ba59abbe56e057f20f883e", NickName: "超级管理员", HeaderImg: "http://qmplusimg.henrongyi.top/1571627762timg.jpg", AuthorityId: "888"},
{GVA_MODEL: global.GVA_MODEL{ID: 1, CreatedAt: time.Now(), UpdatedAt: time.Now()}, UUID: uuid.NewV4(), Username: "admin", Password: "e10adc3949ba59abbe56e057f20f883e", NickName: "超级管理员", HeaderImg: "http://qmplusimg.henrongyi.top/gva_header.jpg", AuthorityId: "888"},
{GVA_MODEL: global.GVA_MODEL{ID: 2, CreatedAt: time.Now(), UpdatedAt: time.Now()}, UUID: uuid.NewV4(), Username: "a303176530", Password: "3ec063004a6f31642261936a379fde3d", NickName: "QMPlusUser", HeaderImg: "http://qmplusimg.henrongyi.top/1572075907logo.png", AuthorityId: "9528"},
}
......
......@@ -29,9 +29,10 @@ func RunWindowsServer() {
fmt.Printf(`
欢迎使用 Gin-Vue-Admin
当前版本:V2.3.4
当前版本:V2.3.5
默认自动化文档地址:http://127.0.0.1%s/swagger/index.html
默认前端文件运行地址:http://127.0.0.1:8080
如果项目让您获得了收益,希望您能请团队喝杯可乐:https://www.gin-vue-admin.com/docs/coffee
`, address)
global.GVA_LOG.Error(s.ListenAndServe().Error())
}
......@@ -66,7 +66,8 @@ Vue.prototype.$echarts = echarts;
console.log(`
欢迎使用 Gin-Vue-Admin
当前版本:V2.3.4
当前版本:V2.3.5
默认自动化文档地址:http://127.0.0.1%s/swagger/index.html
默认前端文件运行地址:http://127.0.0.1:8080
如果项目让您获得了收益,希望您能请团队喝杯可乐:https://www.gin-vue-admin.com/docs/coffee
`)
\ No newline at end of file
......@@ -1191,7 +1191,7 @@ $mainHight: 100vh;
display: inline-block;
overflow: hidden;
height: 60px;
width: 40px;
width: 120px;
text-align: center;
.el-input__inner {
border: none;
......@@ -1215,7 +1215,7 @@ $mainHight: 100vh;
.transition-box {
overflow: hidden;
width: 40px;
width: 120px;
text-align: center;
}
......
......@@ -43,7 +43,6 @@
<el-badge is-dot />
</span>
</el-dropdown-item>
<el-dropdown-item @click.native="showPassword=true" icon="el-icon-s-custom">修改密码</el-dropdown-item>
<el-dropdown-item @click.native="toPerson" icon="el-icon-s-custom">个人信息</el-dropdown-item>
<el-dropdown-item @click.native="LoginOut" icon="el-icon-table-lamp">登 出</el-dropdown-item>
</el-dropdown-menu>
......@@ -67,23 +66,7 @@
<BottomInfo />
</el-main>
</el-container>
<el-dialog :visible.sync="showPassword" @close="clearPassword" title="修改密码" width="360px">
<el-form :model="pwdModify" :rules="rules" label-width="80px" ref="modifyPwdForm">
<el-form-item :minlength="6" label="原密码" prop="password">
<el-input show-password v-model="pwdModify.password"></el-input>
</el-form-item>
<el-form-item :minlength="6" label="新密码" prop="newPassword">
<el-input show-password v-model="pwdModify.newPassword"></el-input>
</el-form-item>
<el-form-item :minlength="6" label="确认密码" prop="confirmPassword">
<el-input show-password v-model="pwdModify.confirmPassword"></el-input>
</el-form-item>
</el-form>
<div class="dialog-footer" slot="footer">
<el-button @click="showPassword=false">取 消</el-button>
<el-button @click="savePassword" type="primary">确 定</el-button>
</div>
</el-dialog>
</el-container>
</template>
......@@ -94,7 +77,6 @@ import Screenfull from '@/view/layout/screenfull'
import Search from '@/view/layout/search/search'
import BottomInfo from '@/view/layout/bottomInfo/bottomInfo'
import { mapGetters, mapActions } from 'vuex'
import { changePassword } from '@/api/user'
import CustomPic from '@/components/customPic'
export default {
name: 'Layout',
......@@ -105,33 +87,8 @@ export default {
isSider: true,
isMobile: false,
isShadowBg: false,
showPassword: false,
loadingFlag:false,
pwdModify: {},
rules: {
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '最少6个字符', trigger: 'blur' }
],
newPassword: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ min: 6, message: '最少6个字符', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '请输入确认密码', trigger: 'blur' },
{ min: 6, message: '最少6个字符', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value !== this.pwdModify.newPassword) {
callback(new Error('两次密码不一致'))
} else {
callback()
}
},
trigger: 'blur'
}
]
},
value: ''
}
},
......@@ -159,30 +116,6 @@ export default {
this.isSider = !!this.isCollapse
this.totalCollapse()
},
savePassword() {
this.$refs.modifyPwdForm.validate(valid => {
if (valid) {
changePassword({
username: this.userInfo.userName,
password: this.pwdModify.password,
newPassword: this.pwdModify.newPassword
}).then(() => {
this.$message.success('修改密码成功!')
this.showPassword = false
})
} else {
return false
}
})
},
clearPassword() {
this.pwdModify = {
password: '',
newPassword: '',
confirmPassword: ''
}
this.$refs.modifyPwdForm.clearValidate()
}
},
computed: {
...mapGetters('user', ['userInfo']),
......
......@@ -3,6 +3,7 @@
<transition name="el-fade-in-linear">
<div class="transition-box" style="display: inline-block; " v-show="show">
<el-select
ref="search-input"
@blur="hiddenSearch"
@change="changeRouter"
filterable
......@@ -18,36 +19,41 @@
</el-select>
</div>
</transition>
<div :style="{display:'inline-block'}" class="user-box">
<i @click="show = !show" class="el-icon-search search-icon"></i>
<div :style="{display:'inline-block',float:'right'}" class="user-box">
<i @click="showSearch()" class="el-icon-search search-icon"></i>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { mapGetters } from "vuex";
export default {
name: 'searchComponent',
name: "searchComponent",
data() {
return {
value: '',
value: "",
show: false
}
};
},
computed: {
...mapGetters('router', ['routerList'])
...mapGetters("router", ["routerList"])
},
methods: {
changeRouter() {
this.$router.push({ name: this.value })
this.value = ''
this.$router.push({ name: this.value });
this.value = "";
},
hiddenSearch() {
this.show = false
this.show = false;
},
showSearch() {
this.show = true;
this.$nextTick(()=>{
this.$refs['search-input'].focus()
})
}
}
}
};
</script>
<style lang="scss">
</style>
\ No newline at end of file
......@@ -2,12 +2,18 @@
<div>
<el-row>
<el-col :span="6">
<div class="fl-left avatar-box">
<div class="fl-left avatar-box">
<div class="user-card">
<el-avatar :size="160" :src="userInfo.headerImg" shape="square" @click.native="openChooseImg"></el-avatar>
<el-avatar
class="user-avatar"
:size="160"
:src="userInfo.headerImg"
shape="square"
@click.native="openChooseImg"
></el-avatar>
<div class="user-personality">
<p class="nickname">{{userInfo.nickName}}</p>
<p>我是个性签名</p>
<p class="person-info">这个家伙很懒,什么都没有留下</p>
</div>
<div class="user-information">
<ul>
......@@ -35,15 +41,31 @@
<ul>
<li>
<p class="title">密保手机</p>
<p class="desc">已绑定手机:1245678910 <a href="#">立即修改</a></p>
<p class="desc">
已绑定手机:1245678910
<a href="#">立即修改</a>
</p>
</li>
<li>
<p class="title">密保邮箱</p>
<p class="desc">已绑定邮箱:gin-vue-admin@google.com.cn<a href="#">立即修改</a></p>
<p class="desc">
已绑定邮箱:gin-vue-admin@google.com.cn
<a href="#">立即修改</a>
</p>
</li>
<li>
<p class="title">密保问题</p>
<p class="desc">未设置密保问题 <a href="#">去设置</a></p>
<p class="desc">
未设置密保问题
<a href="#">去设置</a>
</p>
</li>
<li>
<p class="title">修改密码</p>
<p class="desc">
修改个人密码
<a href="#" @click="showPassword=true">修改密码</a>
</p>
</li>
</ul>
</el-tab-pane>
......@@ -52,53 +74,119 @@
</el-col>
</el-row>
<ChooseImg ref="chooseImg" @enter-img="enterImg"/>
<!-- <div>用户ID:{{userInfo.uuid}}</div>-->
<!-- <div>用户昵称:{{userInfo.nickName}}</div>-->
<!-- <div>用户组:{{userInfo.authority&&userInfo.authority.authorityName}}</div>-->
<ChooseImg ref="chooseImg" @enter-img="enterImg" />
<el-dialog :visible.sync="showPassword" @close="clearPassword" title="修改密码" width="360px">
<el-form :model="pwdModify" :rules="rules" label-width="80px" ref="modifyPwdForm">
<el-form-item :minlength="6" label="原密码" prop="password">
<el-input show-password v-model="pwdModify.password"></el-input>
</el-form-item>
<el-form-item :minlength="6" label="新密码" prop="newPassword">
<el-input show-password v-model="pwdModify.newPassword"></el-input>
</el-form-item>
<el-form-item :minlength="6" label="确认密码" prop="confirmPassword">
<el-input show-password v-model="pwdModify.confirmPassword"></el-input>
</el-form-item>
</el-form>
<div class="dialog-footer" slot="footer">
<el-button @click="showPassword=false">取 消</el-button>
<el-button @click="savePassword" type="primary">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import ChooseImg from "@/components/chooseImg";
import {setUserInfo} from "@/api/user"
import { mapGetters, mapMutations } from 'vuex'
const path = process.env.VUE_APP_BASE_API
import { setUserInfo,changePassword } from "@/api/user";
import { mapGetters, mapMutations } from "vuex";
const path = process.env.VUE_APP_BASE_API;
export default {
name: 'Person',
data(){
name: "Person",
data() {
return {
path:path,
activeName: 'second',
}
path: path,
activeName: "second",
showPassword: false,
pwdModify: {},
rules: {
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, message: "最少6个字符", trigger: "blur" }
],
newPassword: [
{ required: true, message: "请输入新密码", trigger: "blur" },
{ min: 6, message: "最少6个字符", trigger: "blur" }
],
confirmPassword: [
{ required: true, message: "请输入确认密码", trigger: "blur" },
{ min: 6, message: "最少6个字符", trigger: "blur" },
{
validator: (rule, value, callback) => {
if (value !== this.pwdModify.newPassword) {
callback(new Error("两次密码不一致"));
} else {
callback();
}
},
trigger: "blur"
}
]
}
};
},
components: {
ChooseImg
},
ChooseImg
},
computed: {
...mapGetters('user', ['userInfo', 'token'])
...mapGetters("user", ["userInfo", "token"])
},
methods:{
...mapMutations('user',['ResetUserInfo']),
openChooseImg(){
this.$refs.chooseImg.open()
},
async enterImg(url){
const res = await setUserInfo({headerImg:url,ID:this.userInfo.ID})
if(res.code == 0){
this.ResetUserInfo({headerImg:url})
this.$message({
type:"success",
message:"设置成功"
}
)
methods: {
...mapMutations("user", ["ResetUserInfo"]),
savePassword() {
this.$refs.modifyPwdForm.validate(valid => {
if (valid) {
changePassword({
username: this.userInfo.userName,
password: this.pwdModify.password,
newPassword: this.pwdModify.newPassword
}).then((res) => {
if(res.code == 0){
this.$message.success("修改密码成功!");
}
this.showPassword = false;
});
} else {
return false;
}
},
});
},
clearPassword() {
this.pwdModify = {
password: "",
newPassword: "",
confirmPassword: ""
};
this.$refs.modifyPwdForm.clearValidate();
},
openChooseImg() {
this.$refs.chooseImg.open();
},
async enterImg(url) {
const res = await setUserInfo({ headerImg: url, ID: this.userInfo.ID });
if (res.code == 0) {
this.ResetUserInfo({ headerImg: url });
this.$message({
type: "success",
message: "设置成功"
});
}
},
handleClick(tab, event) {
console.log(tab, event);
}
}
}
};
</script>
<style lang="scss">
.avatar-uploader .el-upload {
......@@ -124,67 +212,74 @@ export default {
height: 178px;
display: block;
}
.avatar-box{
box-shadow: -2px 0 20px -16px;
width: 80%;
height: 100%;
.user-card{
min-height: calc(90vh - 200px);
padding: 30px 20px;
.avatar-box {
box-shadow: -2px 0 20px -16px;
width: 80%;
height: 100%;
.user-avatar{
cursor: pointer;
}
.user-card {
min-height: calc(90vh - 200px);
padding: 30px 20px;
text-align: center;
.el-avatar {
border-radius: 50%;
}
.user-personality {
padding: 24px 0;
text-align: center;
.el-avatar{
border-radius: 50%;
p {
font-size: 16px;
}
.user-personality{
padding: 24px 0;
text-align: center;
p{
font-size: 16px;
}
.nickname{
font-size: 26px;
}
.nickname {
font-size: 26px;
}
.user-information{
width: 100%;
.person-info{
margin-top: 6px;
font-size: 14px;
color:#999
}
}
.user-information {
width: 100%;
height: 100%;
text-align: left;
ul {
display: inline-block;
height: 100%;
text-align: left;
ul{
display: inline-block;
height: 100%;
li{
i{
margin-right: 8px;
}
padding: 20px 0;
font-size: 16px;
font-weight: 400;
color: #606266;
li {
i {
margin-right: 8px;
}
padding: 20px 0;
font-size: 16px;
font-weight: 400;
color: #606266;
}
}
}
}
.user-addcount{
ul{
li{
.title{
padding: 10px;
font-size: 18px;
color: #696969;
}
.desc{
font-size: 16px;
padding: 0 10px 20px 10px ;
color: #A9A9A9;
a{
color: rgb(64, 158, 255);
float: right;
}
}
.user-addcount {
ul {
li {
.title {
padding: 10px;
font-size: 18px;
color: #696969;
}
.desc {
font-size: 16px;
padding: 0 10px 20px 10px;
color: #a9a9a9;
a {
color: rgb(64, 158, 255);
float: right;
}
border-bottom: 2px solid #f0f2f5;
}
border-bottom: 2px solid #f0f2f5;
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册