修改密码接口联调完成

src/api/agent/index.js

@@ -169,4 +169,11 @@ export function deleteCoach(data) {
     data
   })
 }
+export function updateUserPwd(data) {
+  return request({
+    url: '/sys/user/password',
+    method: 'put',
+    data
+  })
+}
 // ---end 教练管理

src/router/index.js

@@ -60,6 +60,7 @@ export const moduleRoutes = {
     { path: '/agentQuestionnaireReport', component: () => import('@/views/modules/agent/questionnaire/report'), name: 'agentQuestionnaireReport', meta: { title: '问卷报告', isTab: false } },
     { path: '/agentQuestionnaireDetail', component: () => import('@/views/modules/agent/questionnaire/detail'), name: 'agentQuestionnaireDetail', meta: { title: '问卷详情', isTab: false } },
     { path: '/agentQuestionnairePublish', component: () => import('@/views/modules/agent/questionnaire/publish'), name: 'agentQuestionnairePublish', meta: { title: '发布问卷', isTab: false } },
+    { path: '/agentUserInfo', component: () => import('@/views/modules/agent/userInfo'), name: 'agentUserInfo', meta: { title: '个人信息', isTab: false } },
   ]
 }
 

src/views/main-sidebar.vue

@@ -26,7 +26,7 @@
       </el-menu>
     </div>
     <div class="user_info">
-      <div class="left" @click.self="handleUser">
+      <div class="left" @click="handleUser">
         <img src="@/assets/images/agent/avatar.png">
         <div class="name">
           <span>{{ $store.state.user.realName }}</span>
@@ -69,6 +69,9 @@ export default {
         this.activeMenuId=newval;
       }
     },
+    handleUser(){
+      this.$router.push('agentUserInfo')
+    }
   },
   created () {
     this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']

src/views/modules/agent/userInfo.vue

@@ -0,0 +1,234 @@
+<template>
+    <div class="agent_page">
+        <div class="top">个人信息</div>
+        <div class="content adffc">
+            <div class="title">我的账户</div>
+            <div class="box adfac">
+                <div class="left">{{ firstWord }}</div>
+                <div class="right">
+                    <p>{{ $store.state.user.realName }}</p>
+                    <p>{{ $store.state.user.mobile }}</p>
+                </div>
+            </div>
+            <div class="item">
+                <div class="i_title">用户名</div>
+                <div class="i_text">{{ $store.state.user.realName }}</div>
+            </div>
+            <div class="item">
+                <div class="i_title">手机号码</div>
+                <div class="i_text">{{ $store.state.user.mobile }}</div>
+            </div>
+            <div class="pwd adfacjb">
+                <div class="p_l">
+                    <p>密码</p>
+                    <p>当前为初始密码，安全性较低，您可以重置密码</p>
+                </div>
+                <div class="p_r">
+                    <el-button type="primary" @click="resetPwd">重置密码</el-button>
+                </div>
+            </div>
+        </div>
+        <el-dialog width="484px" :visible.sync="show" title="重置密码" @close="cancel">
+            <el-form :model="form" :rules="rules" ref="pwdRef" label-width="100px" style="margin: 0 25px;">
+                <el-form-item label="原密码" prop="password">
+                    <el-input v-model="form.password" clearable placeholder="请输入原密码" show-password></el-input>
+                </el-form-item>
+                <el-form-item label="新密码" prop="newPassword">
+                    <el-input v-model="form.newPassword" clearable placeholder="请输入新密码" show-password></el-input>
+                </el-form-item>
+                <el-form-item label="确认密码" prop="surePassword">
+                    <el-input v-model="form.surePassword" clearable placeholder="请输入确认密码" show-password></el-input>
+                </el-form-item>
+            </el-form>
+            <div class="demo-drawer__footer" style="display: flex;justify-content: end;">
+                <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
+                <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup name="">
+    import { ref, getCurrentInstance, onMounted } from 'vue'
+    import { updateUserPwd } from '@/api/agent/index.js'
+    import { clearLoginInfo } from "@/utils";
+    const { proxy } = getCurrentInstance();
+    
+    const firstWord = ref('')
+    const show = ref(false)
+    const form = ref({
+        password: '',
+        newPassword: '',
+        surePassword: ''
+    })
+    const buttonLoading = ref(false)
+    const pwdRef = ref(null)
+    const rules = {
+        password: [
+            { required: true, message: '请输入原密码', trigger: 'blur' }
+        ],
+        newPassword: [
+            { required: true, message: '请输入新密码', trigger: 'blur' }
+        ],
+        surePassword: [
+            { required: true, message: '请再次确认密码', trigger: 'blur' }
+        ]
+    }
+
+    const resetPwd = () => {
+        show.value = true;
+    }
+
+    const submitForm = () => {
+        proxy.$refs.pwdRef.validate(async (valid) => {
+            if (valid) {
+                if(form.value.newPassword !== form.value.surePassword) return proxy.$message.error('两次密码不一致')
+                await updateUserPwd(form.value).then(res => {
+                    if(res.code!==0) return proxy.$message.error(res.msg);
+                    proxy.$message.success('修改成功,即将退出登录...');
+                    cancel();
+                    setTimeout(() => {
+                        logout();
+                    },1500)
+                })
+            } else {
+                return false;
+            }
+        });
+    }
+
+    const cancel = () => {
+        show.value = false;
+        form.value = {
+            password: '',
+            newPassword: '',
+            surePassword: ''
+        }
+        proxy.$refs.pwdRef.resetFields();
+    }
+
+    const logout = () => {
+        proxy.$http.post("/logout").then(({ data: res }) => {
+              if (res.code !== 0) {
+                localStorage.removeItem();
+                return proxy.$message.error(res.msg);
+              }
+              clearLoginInfo();
+              proxy.$router.push({ name: "login" });
+        })
+    }
+
+    onMounted(() => {
+        firstWord.value = proxy.$store.state.user.realName.substr(0, 1);
+    })
+</script>
+
+<style scoped lang="scss">
+    .agent_page{
+        .top{
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: bold;
+            font-size: 14px;
+            color: #393939;
+            line-height: 14px;
+            padding: 25px 27px;
+            border-bottom: 1px solid #E5E7EB;
+        }
+
+        .content{
+            width: 800px;
+            margin: 0 auto;
+            .title{
+                font-family: PingFang-SC, PingFang-SC;
+                font-weight: bold;
+                font-size: 24px;
+                color: #393939;
+                line-height: 33px;
+                margin-top: 80px;
+            }
+            .box{
+                margin-top: 14px;
+                padding: 31px 20px;
+                background: #F4F4F4;
+                border-radius: 12px;
+                .left{
+                    width: 86px;
+                    height: 86px;
+                    background: #833478;
+                    border-radius: 50%;
+                    font-family: PingFang-SC, PingFang-SC;
+                    font-weight: bold;
+                    font-size: 24px;
+                    color: #FFFFFF;
+                    line-height: 86px;
+                    text-align: center;
+                }
+                .right{
+                    margin-left: 20px;
+                    p{
+                        font-family: PingFang-SC, PingFang-SC;
+                        font-weight: bold;
+                        font-size: 20px;
+                        color: #252525;
+                        line-height: 28px;
+                        &:last-child{
+                            font-size: 16px;
+                            color: #7A7A7A;
+                            line-height: 22px;
+                            margin-top: 10px;
+                        }
+                    }
+                }
+            }
+            .item{
+                margin-top: 42px;
+                .i_title{
+                    font-family: PingFang-SC, PingFang-SC;
+                    font-weight: bold;
+                    font-size: 16px;
+                    color: #252525;
+                    line-height: 22px;
+                }
+                .i_text{
+                    width: 100%;
+                    height: 42px;
+                    background: #FFFFFF;
+                    border-radius: 6px;
+                    border: 1px solid #E5E7EB;
+                    padding: 0 16px;
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #393939;
+                    line-height: 42px;
+                    margin-top: 13px;
+                }
+            }
+            .pwd{
+                margin-top: 41px;
+                .p_l{
+                    p{
+                        font-family: PingFang-SC, PingFang-SC;
+                        font-weight: bold;
+                        font-size: 16px;
+                        color: #252525;
+                        line-height: 22px;
+                        &:last-child{
+                            font-size: 14px;
+                            color: #9D9D9D;
+                            line-height: 20px;
+                            margin-top: 25px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    ::v-deep .el-dialog__title{
+        font-weight: bold !important;
+    }
+    ::v-deep .el-dialog{
+        margin-top: 25vh !important;
+    }
+</style>

src/views/pages/login.vue

@@ -134,7 +134,7 @@
 
     const toLogin = () => {
         proxy.$http.post("/login", accountForm.value).then(({ data: res }) => {
-            if (res.code !== 0) proxy.$message.error(res.msg);
+            if (res.code !== 0) return proxy.$message.error(res.msg);
             sessionStorage.removeItem("tags");
             Cookies.set("token", res.data.token);