个人中心

src/components/Header.vue

@@ -14,7 +14,7 @@
     <div class="userName">
       <el-dropdown @command="handleChange">
         <span class="el-dropdown-link">
-            <img class="avatar" :src="userMessage.image_url?userMessage.image_url:require('../assets/avatar.png')" />
+            <img class="avatar" :src="touxiang?touxiang:userMessage.image_url?userMessage.image_url:require('../assets/avatar.png')" />
             <span class="name">{{userMessage.user_name}}</span><i class="el-icon-arrow-down el-icon--right"></i>
         </span>
         <el-dropdown-menu slot="dropdown">
@@ -35,7 +35,7 @@ import { getToken } from '@/utils/auth'
 export default {
   components: { },
   name: "LayoutHeader",
-  props: [],
+  props: ["touxiang"],
   data() {
     return {
       userMessage: JSON.parse(getToken())
@@ -70,7 +70,7 @@ export default {
     },
     handleChange(com){
         if(com==='personal'){
-            this.handleLink('peraonal','')
+            this.handleLink('personal','')
         }else if(com==='logout'){
             this.QuitLogin()
         }

src/components/Setting.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="setting">
+  <div class="setting" v-if="info">
     <template v-if="!settingFlag">
         <div class="setting-top">
             <div class="avator-box">
@@ -8,29 +8,29 @@
                 fit="contain">
             </el-image>
             <a class="img-crop">
-                <upload :datafileList="infoForm.cover_image_list" :changeFillId="handleAvatarSuccess" :fileName="'cover'" :showList="true" uploadType="image" />
+                <upload :datafileList="infoForm.cover_image_list" :filleNumber="99" :changeFillId="handleAvatarSuccess" :fileName="'cover'" :showList="true" uploadType="image" />
             </a>
             </div>
             <div class="center">
                 <div class="info-items">
                     <label>用户名：</label>
-                    <span>{{page==='editPerson'?info.sys_user.user_name:info.user_name}}</span>
+                    <span>{{page==='editPerson'||page==='personal'?info.sys_user.user_name:info.user_name}}</span>
                 </div>
                 <div class="info-items">
                     <label>手机号码：</label>
-                    <span>{{page==='editPerson'&&info.sys_user.phone?info.sys_user.phone.substring(0,3)+'******'+info.sys_user.phone.substring(9,11):info.phone?info.phone.substring(0,3)+'******'+info.phone.substring(9,11):'-'}}</span>
+                    <span>{{(page==='editPerson'||page==='personal')&&info.sys_user.phone?info.sys_user.phone.substring(0,3)+'******'+info.sys_user.phone.substring(9,11):info.phone?info.phone.substring(0,3)+'******'+info.phone.substring(9,11):'-'}}</span>
                 </div>
                 <div class="info-items">
                     <label>账号ID：</label>
-                    <span>{{page==='editPerson'?info.sys_user.id:info.id}}</span>
+                    <span>{{page==='editPerson'||page==='personal'?info.sys_user.id:info.id}}</span>
                 </div>
                 <div class="info-items">
                     <label>邮箱：</label>
-                    <span>{{page==='editPerson'&&info.sys_user.email?info.sys_user.email:info.email?info.email:'-'}}</span>
+                    <span>{{(page==='editPerson'||page==='personal')&&info.sys_user.email?info.sys_user.email:info.email?info.email:'-'}}</span>
                 </div>
                 <div class="info-items">
-                    <label>{{page==='editPerson'?'创建时间：':'注册时间：'}}</label>
-                    <span>{{page==='editPerson'?info.sys_user.create_time:info.register_time}}</span>
+                    <label>{{page==='editPerson'||page==='personal'?'创建时间：':'注册时间：'}}</label>
+                    <span>{{page==='editPerson'||page==='personal'?info.sys_user.create_time:info.register_time}}</span>
                 </div>
                 <div class="info-items" v-if="page==='editOrgPerson'">
                     <label>机构：</label>
@@ -42,7 +42,7 @@
             <div class="tabs-box">
                 <a :class="[tabsIndex===0?'active':'']" @click="handleChangeTabs(0)">基本信息</a>
                 <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)">安全设置</a>
-                <a :class="[tabsIndex===2?'active':'']" @click="handleChangeTabs(2)">{{page==='editPerson'?'我的权限':'权限设置'}}</a>
+                <a :class="[tabsIndex===2?'active':'']" @click="handleChangeTabs(2)">{{page==='editPerson'||page==='personal'?'我的权限':'权限设置'}}</a>
             </div>
             <template v-if="tabsIndex===0">
                 <el-form :model="infoForm" :rules="rules" ref="ruleForm" label-width="150px" class="setting-form">
@@ -92,7 +92,7 @@
                     <label>绑定手机</label>
                     <div class="safe-items-right">
                         <p v-if="info.phone||info.sys_user&&info.sys_user.phone" class="hasContent">
-                            已绑定： {{page==='editPerson'&&info.sys_user.phone?info.sys_user.phone.substring(0,3)+'******'+info.sys_user.phone.substring(9,11):info.phone?info.phone.substring(0,3)+'******'+info.phone.substring(9,11):'-'}}
+                            已绑定： {{(page==='editPerson'||page==='personal')&&info.sys_user.phone?info.sys_user.phone.substring(0,3)+'******'+info.sys_user.phone.substring(9,11):info.phone?info.phone.substring(0,3)+'******'+info.phone.substring(9,11):'-'}}
                         </p>
                         <p v-else class="noContent">
                         您暂未绑定手机，绑定手机可以有效的保护账号的安全。 
@@ -113,7 +113,7 @@
                     </div>
                 </div>
             </template>
-            <template v-if="tabsIndex===2&&page==='editPerson'">
+            <template v-if="tabsIndex===2&&(page==='editPerson'||page==='personal')">
                 <table class="step-table">
                         <tr>
                             <td rowspan="2" class="step-table-header">管理权限</td>
@@ -121,8 +121,8 @@
                             <td>机构管理</td>
                         </tr>
                         <tr>
-                            <td><el-checkbox v-model="manageAuth" :label="10001"><br/></el-checkbox></td>
-                            <td><el-checkbox v-model="manageAuth" :label="10002"><br/></el-checkbox></td>
+                            <td><el-checkbox v-model="manageAuth" :label="10001" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td><el-checkbox v-model="manageAuth" :label="10002" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
                         </tr>
                     </table>
                     <table class="step-table">
@@ -137,13 +137,13 @@
                             <td class="td1">广告管理</td>
                         </tr>
                         <tr>
-                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20001"><br/></el-checkbox></td>
-                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20002"><br/></el-checkbox></td>
-                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20003"><br/></el-checkbox></td>
-                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20004"><br/></el-checkbox></td>
-                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20005"><br/></el-checkbox></td>
-                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20006"><br/></el-checkbox></td>
-                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20007"><br/></el-checkbox></td>
+                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20001" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20002" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20003" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20004" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20005" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20006" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20007" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
                         </tr>
                     </table>
                     <table class="step-table">
@@ -155,7 +155,7 @@
                         <tr>
                             <td><el-checkbox v-model="manageAuth" :label="30001"><br/></el-checkbox></td>
                             <td>
-                                <el-radio-group v-model="codeAuth.viewCode">
+                                <el-radio-group v-model="codeAuth.viewCode" :disabled="page==='personal'?true:false">
                                     <el-radio :label="1">全部</el-radio>
                                     <el-radio :label="0">自己生成的</el-radio>
                                 </el-radio-group>
@@ -170,10 +170,11 @@
                             <td>授权地区</td>
                         </tr>
                         <tr>
-                            <td><el-checkbox v-model="manageAuth" :label="40001"><br/></el-checkbox></td>
-                            <td><el-checkbox v-model="manageAuth" :label="40002"><br/></el-checkbox></td>
+                            <td><el-checkbox v-model="manageAuth" :label="40001" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td><el-checkbox v-model="manageAuth" :label="40002" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
                             <td>
                                 <el-cascader
+                                    :disabled="page==='personal'?true:false"
                                     class="step-cascader"
                                     size="medium"
                                     :props="props"
@@ -186,8 +187,10 @@
                             </td>
                         </tr>
                     </table>
-                    <el-button type="primary" @click="onSubmitAuth()" size="small" :loading="loading">保存</el-button>
-                    <el-button @click="onCancelAuth()" size="small">取消</el-button>
+                    <template v-if="page==='editPerson'">
+                        <el-button type="primary" @click="onSubmitAuth()" size="small" :loading="loading">保存</el-button>
+                        <el-button @click="onCancelAuth()" size="small">取消</el-button>
+                    </template>
             </template>
             <template v-if="tabsIndex===2&&page==='editOrgPerson'">
                 <el-form :model="managerForm" ref="managerForm" label-width="150px" class="setting-form">
@@ -295,6 +298,7 @@ import {
   provinceAndCityData
 } from "element-china-area-data";
 import { getLogin } from "@/api/ajax";
+import { getToken } from '@/utils/auth'
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: { Upload },
@@ -358,11 +362,11 @@ export default {
             cover_image_url: '',
             cover_image_list: [],
             cover_image_id: null,
-            name:this.page==='editPerson'?JSON.parse(JSON.stringify(this.info.sys_user.user_name)):JSON.parse(JSON.stringify(this.info.user_name)),
-            realName:this.page==='editPerson'?JSON.parse(JSON.stringify(this.info.sys_user.real_name)):JSON.parse(JSON.stringify(this.info.real_name)),
-            sex:this.page==='editPerson'?JSON.parse(JSON.stringify(this.info.sys_user.sex)):JSON.parse(JSON.stringify(this.info.sex)),
+            name:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.user_name)):JSON.parse(JSON.stringify(this.info.user_name)),
+            realName:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.real_name)):JSON.parse(JSON.stringify(this.info.real_name)),
+            sex:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.sex)):JSON.parse(JSON.stringify(this.info.sex)),
             // selectedOptions: JSON.parse(JSON.stringify(this.info.sys_user.city_id)),
-            desc:this.page==='editPerson'?JSON.parse(JSON.stringify(this.info.sys_user.memo)):JSON.parse(JSON.stringify(this.info.memo)),
+            desc:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.memo)):JSON.parse(JSON.stringify(this.info.memo)),
             selectedOptions: '0302',
         },
         rules: {
@@ -400,7 +404,7 @@ export default {
         newPwdFlag: false, // 查看新密码
         comfirmPwdFlag: false, // 查看确认密码
         phoneForm:{
-            oldPhone:this.page==='editPerson'?JSON.parse(JSON.stringify(this.info.sys_user.phone)):JSON.parse(JSON.stringify(this.info.phone)), // 旧手机
+            oldPhone:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.phone)):JSON.parse(JSON.stringify(this.info.phone)), // 旧手机
             newPhone:'', // 新手机
         },
         rulesPhone:{
@@ -418,7 +422,7 @@ export default {
         timee: 60, //获取验证码的时间
         verificationCodeeShow: false, //是否已经获取了验证码
         emailForm:{
-            email:this.page==='editPerson'?JSON.parse(JSON.stringify(this.info.sys_user.email)):JSON.parse(JSON.stringify(this.info.email)),
+            email:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.email)):JSON.parse(JSON.stringify(this.info.email)),
             newEmail:''
         },
         rulesEmail:{
@@ -429,14 +433,14 @@ export default {
                 { required: true, validator: validateEmail, trigger: 'blur' }
             ]
         },
-        manageAuth:this.page==='editPerson'?JSON.parse(JSON.stringify(this.info.popedom_code_list)):[], // 管理权限
+        manageAuth:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.popedom_code_list)):[], // 管理权限
         codeAuth:{
             auth:[],
-            viewCode:this.page==='editPerson'?JSON.parse(JSON.stringify(this.info.data_scope.discount_code_view_scope)):0
+            viewCode:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.data_scope.discount_code_view_scope)):0
         }, // 兑换码权限
         financeAuth:{
             auth: [],
-            selectedOptions:this.page==='editPerson'?JSON.parse(JSON.stringify(this.info.data_scope.finance_popedom_data_scope)):[]
+            selectedOptions:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.data_scope.finance_popedom_data_scope)):[]
         }, // 财务权限
         props: { multiple: true },
         loading: false,
@@ -455,13 +459,14 @@ export default {
   //方法集合
   methods: {
     handleAvatarSuccess(fileList,name) {
+        console.log(fileList)
         let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Image";
         if(this.page==='editOrgPerson'){
             MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Image";
         }
         let data = {
-            id: this.id,
-            image_id: fileList[0]&&fileList[0].response&&fileList[0].response.file_info_list&&fileList[0].response.file_info_list[0]?fileList[0].response.file_info_list[0].file_id:''
+            id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
+            image_id: fileList.length>0&&fileList[fileList.length-1].response&&fileList[fileList.length-1].response.file_info_list&&fileList[fileList.length-1].response.file_info_list[0]?fileList[fileList.length-1].response.file_info_list[0].file_id:''
         }
         getLogin(MethodName, data)
         .then((res) => {
@@ -516,7 +521,7 @@ export default {
                 MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_BaseInfo";
             }
             let data = {
-                id: this.id,
+                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
                 user_name: this.infoForm.name,
                 real_name: this.infoForm.realName,
                 sex: this.infoForm.sex,
@@ -606,7 +611,7 @@ export default {
                 MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Password";
             }
             let data = {
-                id: this.id,
+                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
                 password: this.passwordForm.newPwd
             }
             getLogin(MethodName, data)
@@ -635,7 +640,7 @@ export default {
                 MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Phone";
             }
             let data = {
-                id: this.id,
+                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
                 phone: this.phoneForm.newPhone
             }
             getLogin(MethodName, data)
@@ -666,7 +671,7 @@ export default {
                 MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Email";
             }
             let data = {
-                id: this.id,
+                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
                 email: this.emailForm.newEmail
             }
             getLogin(MethodName, data)
@@ -696,7 +701,7 @@ export default {
         this.loading = true
         let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Popedom";
         let data = {
-            id: this.id,
+            id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
             popedom_code_list: this.manageAuth,
             data_scope:{
                 discount_code_view_scope:this.codeAuth.viewCode,
@@ -727,7 +732,7 @@ export default {
         this.loading = true
         let MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Popedom";
         let data = {
-            id: this.id,
+            id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
             is_manager: this.managerForm.is_manager,
         }
         getLogin(MethodName, data)

src/components/Upload.vue

@@ -160,7 +160,7 @@ export default {
       let name = "只能上传";
       switch (this.uploadType) {
         case "image":
-          this.accept = "image/*";
+          this.accept = ".jpg, .JPG, .jpeg, .JPEG .png, .PNG";
           this.fileTypeName = "图片";
           this.uploadName = name + "图片";
           this.uploadTip = "只能上传.jpg, .jpeg, .png文件，大小不超过2MB"

src/router/index.js

@@ -124,6 +124,11 @@ export const constantRoutes = [{
         component: () =>
             import ('@/views/system_config/ExportSetting.vue')
     },
+    {
+        path: '/personal',
+        component: () =>
+            import ('@/views/personal.vue')
+    },
     // 404 page must be placed at the end !!!
     { path: '*', redirect: '/', hidden: true }
 ]

src/views/personal.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="manage-root edit-person" v-if="info">
+    <Header :touxiang="info.sys_user.image_url"/>
+    <div class="manage-root-contain">
+        <setting class="setting-box" page="personal" :info="info" @getInfo="getInfo" @changeBread="changeBread"></setting>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import Header from "../components/Header.vue";
+import Setting from "../components/Setting.vue"
+import { getLogin } from "@/api/ajax";
+import { getToken } from '@/utils/auth'
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { Header, Setting },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+        info: null
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {
+    
+  },
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 获取机构信息
+    getInfo(){
+        let MethodName = "/OrgServer/Manager/SysUserManager/GetSysUserInfo";
+        let data = {
+            id: JSON.parse(getToken()).user_id
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+                this.info = res
+            }
+        })
+        .catch(() => {
+            
+        });
+    },
+    // 修改面包屑
+    changeBread(){
+        
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getInfo()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.manage-root-contain{
+    width: 1208px;
+    margin: 16px auto;
+    .setting-box{
+        width: 100%;
+    }
+}
+</style>