账户中心查看修改，不同身份切换

src/areaComp/AccountCenterlist/UserInfo.vue

@@ -1,60 +1,117 @@
 <template>
-    <div>
-        <el-form>
-            <el-form-item label="头像:">
-                <img src="../../assets/image/avatardemo.png" alt="">
-            </el-form-item>
-            <el-form-item label="账户名:">
-                <el-input model="王三锤"></el-input>
-            </el-form-item>
-            <el-form-item label="身份/职位:">
-                <el-input model="老板"></el-input>
-            </el-form-item>
-            <el-form-item label="手机:">
-                <el-input model="18812332123"></el-input>
-            </el-form-item>
-            <el-form-item label="微信:">
-                <el-input model="18812332123"></el-input>
-            </el-form-item>
-            <el-form-item label="地址:">
-                <el-input model="家纺城2-3"></el-input>
-            </el-form-item>
-            <el-form-item label="性别:">
-                <template>
-                    <el-radio v-model="radio" label="1">男</el-radio>
-                    <el-radio v-model="radio" label="2">女</el-radio>
-                </template>
-            </el-form-item>
-            <el-form-item label="生日:">
-                <div class="block">
-                    <el-date-picker
-                    type="year"
-                    placeholder="选择年">
-                    </el-date-picker>
-                    <el-date-picker
-                    type="month"
-                    placeholder="选择月">
-                    </el-date-picker>
-                    <el-date-picker
-                    type="day"
-                    placeholder="选择日">
-                    </el-date-picker>
-                </div>
-            </el-form-item>
-            <el-form-item label="邮箱">
-                <el-input></el-input>
-            </el-form-item>
+    <el-form label-width="180px" label-position="right">
+        <el-form-item label="头像:" :model="userinfo">
+            <Upload :logoContent="logoContent"/>
+        </el-form-item>
+        <el-form-item label="账户名:">
+            <el-input v-model="userinfo[0].fname"></el-input>
+        </el-form-item>
+        <el-form-item label="身份/职位:">
+            <el-input v-model="userinfo[0].frole"></el-input>
+        </el-form-item>
+        <el-form-item label="手机:">
+            <el-input v-model="userinfo[0].fphonenumber"></el-input>
+        </el-form-item>
+        <el-form-item label="微信:">
+            <el-input v-model="userinfo[0].fwechatno"></el-input>
+        </el-form-item>
+        <el-form-item label="地址:">
+            <el-input v-model="userinfo[0].faddress"></el-input>
+        </el-form-item>
+        <el-form-item label="性别:">
+            <template>
+                <el-radio v-model="userinfo[0].fsex" label="1">男</el-radio>
+                <el-radio v-model="userinfo[0].fsex" label="2">女</el-radio>
+            </template>
+        </el-form-item>
+        <el-form-item label="生日:">
+            <el-date-picker
+            type="year"
+            v-model="birthdate.year"
+            placeholder="年"
+            class="input-class"
+            >
+            </el-date-picker>
+            <el-date-picker
+            type="month"
+            v-model="birthdate.month"
+            placeholder="月"
+            class="input-class"
+            >
+            </el-date-picker>
+            <el-date-picker
+            type="day"
+            v-model="birthdate.day"
+            placeholder="日"
+            class="input-class"
+            >
+            </el-date-picker>
+        </el-form-item>
+        <el-form-item label="邮箱">
+            <el-input v-model="userinfo[0].femail"></el-input>
+        </el-form-item>
 
-        </el-form>
-    </div>
+    </el-form>
 </template>
 
 <script type='text/javascript'>
+    import Upload from "../../commonCmp/LoginTop/Upload.vue";
     export default {
         name: "UserInfo",
+        components: { Upload },
         data () {
             return {
-                radio: ''
+                userinfo: [
+                    {
+                        fname: '',
+                        frole: '',
+                        fphonename: '',
+                        fwechatno: '',
+                        faddress: '',
+                        fsex: '',
+                        fbirthdate: '',
+                        femail: '',
+                    }
+                ],
+                birthdate: {
+                    year: '',
+                    month: '',
+                    day: '',
+                },
+                logoContent: {
+                    filename: "",
+                    filetype: "",
+                    ownertable: "tenterprise_users",
+                    ownerid: "",
+                    ftype: "headportrait"
+                },
+            }
+        },
+        created() {
+            this.getUserInfo();
+        },
+
+        methods: {
+            async getUserInfo() {
+                const {data: {data}} = await this.$http.post("", this.getTokenInterface())
+                this.userinfo = data;
+                console.log(this.userinfo);
+            },
+
+
+            getTokenInterface() {
+                const interfaceType = this.$store.state.interfaceData;
+                interfaceType.accesstoken = sessionStorage.getItem('token');
+                interfaceType.classname = "customer.usercenter.usermsg.usermsg";
+                interfaceType.method = "query_usermsg";
+                return interfaceType
+            }
+        },
+
+        computed: {
+            getBirthdate() {
+                const {year, month, day} = this.birthdate;
+                this.userinfo.birthdate = year + "-" + month + "-" + day;
             }
         }
         
@@ -62,5 +119,24 @@
 </script>
 
 <style lang='scss' scoped>
-    
+    .el-form {
+        .el-form-item {
+            width: 600px;
+            margin: 5px 0;
+            .img {
+                width: 100px;
+                height: 100px
+            }
+            .el-input {
+                width: 300px;
+            }
+
+            .input-class {
+                width: 100px;
+                /deep/.el-input__inner {
+                    width: 100px;
+                }
+            }
+        }
+    }
 </style>

src/commonCmp/LoginTop/Upload.vue

@@ -0,0 +1,71 @@
+<template>
+    <el-upload
+        action="https://jsonplaceholder.typicode.com/posts/"
+        list-type="picture-card"
+        :on-remove="handleRemove"
+        :limit="1"
+        :before-upload="beforeAvatarUpload"
+        >
+        <i class="el-icon-plus"></i>
+        <div slot="tip" class="el-upload__tip">只能上传1个jpg/png/jpeg类型图片，且不超过2MB</div>
+    </el-upload>
+</template>
+
+<script type='text/javascript'>
+    export default {
+        name: "Upload",
+        porps: {
+            logoContent: {
+                type: Object,
+            }
+        },
+
+        created() {
+            this.getPicId()
+        },
+
+
+        methods: {
+            // 拿图片id的方法
+            async getPicId() {
+                const res = await this.$http.post('', this.getTokenInterfaceIdData())
+                if (res.status !== 200) return;
+                const {data: {data}} = res;
+                this.$attrs.logoContent.ownerid = data[0].tagentsid;
+            },
+
+            // 移除图片
+            handleRemove(file, fileList) {
+            },
+
+            // 上传图片的格式
+            beforeAvatarUpload(file){
+                this.$attrs.logoContent.filename = file.name;
+                this.$attrs.logoContent.filetype = file.type.slice(6);
+                const isTureType = file.type === ('image/png' || 'image/jpg' || "image/jpeg")
+                const isLt10M = file.size / 1024 / 1024 < 10;
+                // 格式
+                if (!isTureType) {
+                    this.$message.error("上传LOGO图片格式不对");
+                }
+                // 大小
+                if (!isLt10M) {
+                    this.$message.error("上传LOGO图片带下不能超过 10MB！");
+                }
+            },
+
+            // 拿id请求体
+            getTokenInterfaceIdData() {
+                const interfaceId = this.$store.state.interfaceData;
+                interfaceId.accesstoken = sessionStorage.getItem("token");
+                interfaceId.classname = "customer.tagents.tagents"
+                interfaceId.method = "query_enterpriseAgentsMain"
+                return interfaceId
+            }
+        }
+    }
+</script>
+
+<style lang='scss' scoped>
+    
+</style>

src/commonCmp/UserHomeTop/UserHomeTop.vue

@@ -2,22 +2,58 @@
     <div class="fixedTop">
         <!-- 账户导航区 -->
         <div class="navHome">
-            <el-button>家纺1</el-button>
-            <el-button>家纺2</el-button>
-            <el-button>家纺3</el-button>
+            <el-radio-group v-model="radio1">
+                <el-radio-button v-for="(item, index) in this.$store.state.account_list" :key="index" :label="item.fname"></el-radio-button>
+            </el-radio-group>
+            <el-button @click="newIdently">添加新身份</el-button>
         </div>
         <!-- 消息，网站门户，个人中心 -->
         <ul class="homeDetail">
             <li class="iconfont icon-lingdang"></li>
             <li class="iconfont icon-home1"></li>
-            <li class="iconfont icon-user-avatar-fill"></li>
+            <li class="iconfont icon-user-avatar-fill" @click="joinAccountCenter"></li>
         </ul>
     </div>
 </template>
 
 <script type='text/javascript'>
     export default {
-        name: "UserHomeTop"
+        name: "UserHomeTop",
+        data () {
+            return {
+                radio1: "",
+            }
+        },
+        created() {
+            if (sessionStorage.getItem("store")) {
+                this.$store.replaceState(Object.assign({}, JSON.parse(sessionStorage.getItem("store"))))
+            }
+
+            window.addEventListener("beforeunload", ()=> {
+                sessionStorage.setItem("store", JSON.stringify(this.$store.state))
+            })
+            
+            this.radio1 = this.$store.state.selectAccount.fname;
+        },
+        methods: {
+            joinAccountCenter() {
+                this.$router.push("accountcenter")
+            },
+            newIdently() {
+                this.$router.push("buwanjialogin")
+            }
+        },
+
+        watch: {
+            radio1() {
+                this.$store.state.account_list.forEach(item => {
+                    if (item.fname == this.radio1) {
+                        this.$store.commit('selectAccount', item)
+                    }
+                })
+            }
+        }
+            
     }
 </script>
 
@@ -34,24 +70,6 @@
             height: 100%;
             left: 15%;
             width: 350px;
-            .el-button {
-                position: relative;
-                top: 50%;
-                height: 40px;
-                width: 90px;
-                color: rgb(253, 106, 0);
-                transform: translate(0, -50%);
-
-
-                font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-                font-weight: 700;
-                font-size: 16px;
-                border: 1px solid rgb(253, 106, 0);
-            }
-            .el-button:hover {
-                background-color: rgb(253, 106, 0);
-                color: #fff;
-            }
         }
         ul {
             position: absolute;

src/components/AccountCenter/AccountCenter.vue

@@ -8,13 +8,18 @@
             <el-aside>
                 <!-- 头像区域 -->
                 <div class="avatarArea">
-                    <img src="../../assets/image/demoImg.png" alt="">
-                    <span class="agentname">王三锤</span>
-                    <span class="agentTel">18032144123</span>
+                    <img :src="url" alt="">
+                    <span class="agentname">{{name}}</span>
+                    <span class="agentTel">{{phonenumber}}</span>
                 </div>
                 <el-menu router>
                     <!-- 个人信息 -->
-                    <el-menu-item :index="'/' + item.authname" v-for="item in menulist" :key="item.id">
+                    <el-menu-item 
+                    :index="'/' + 
+                    item.authname" 
+                    v-for="item in menulist" 
+                    :key="item.id"
+                    >
                         <template slot="title">
                             <span>{{item.title}}</span>
                         </template>
@@ -38,14 +43,80 @@
         components: { divTitleVue },
         data() {
             return {
+                // 姓名
+                name: '',
+                // 电话
+                phonenumber: '',
+                url: '',
+
+                // 当前选中区域的标题
                 selectpath: "个人信息",
+                // 列表展示
                 menulist : [
                     {id: 1, authname: 'userinfo', title: "个人信息"},
                     {id: 2, authname: 'agentmanagement', title: "商户管理"}, 
                     {id: 3, authname: 'productmanagement', title: "产品管理"}, 
                     {id: 4, authname: 'cooperateagent', title: "合作管理"},
                     {id: 5, authname: 'teammanagement', title: "团队管理"}
-                ]
+                ],
+
+                // 请求图片的固定的请求体
+                queryPicContent: {
+                    getdatafromdbanyway: true,
+                    ownertable: "tenterprise_users",
+                    ownerid: "1",
+                }
+            }
+        },
+        created() {
+            if (sessionStorage.getItem("store")) {
+                this.$store.replaceState(Object.assign({}, JSON.parse(sessionStorage.getItem("store"))))
+            }
+
+            window.addEventListener("beforeunload", ()=> {
+                sessionStorage.setItem("store", JSON.stringify(this.$store.state))
+            })
+
+            this.getUserData();
+        },
+
+        methods: {
+            // 拿用户的头像图片和电话号码名字
+            async getUserData() {
+                // 拿图片
+                const res =  await this.$http.post('', this.getTokenInterfaceAvatarData())
+                if (res.status !== 200) return;
+                else {
+                    const {data: {data}} = res;
+                    this.url = data[0].fobsurl;
+                }
+                // 拿电话号码和名字
+                const res1 = await this.$http.post('', this.getTokenInterfaceUserInfo())
+                if (res.status !== 200) return;
+                const {data: {data}} = res1;
+                this.name = data[0].fname;
+                this.phonenumber = data[0].fphonenumber;
+            },
+
+            // 头像数据的请求体
+            getTokenInterfaceAvatarData() {
+                const interfaceAvatar  = this.$store.state.interfaceData;
+                const {token, userid} = this.$store.state.selectAccount;
+                interfaceAvatar.accesstoken = token;
+                interfaceAvatar.classname = "system.system.docManage"
+                interfaceAvatar.method = "queryDoc"
+                interfaceAvatar.content = this.queryPicContent;
+                interfaceAvatar.content.ownerid = userid;
+                return interfaceAvatar
+            },
+
+            // 电话号码和姓名的请求体
+            getTokenInterfaceUserInfo() {
+                const interfaceUserInfo = this.$store.state.interfaceData;
+                interfaceUserInfo.accesstoken = this.$store.state.selectAccount.token;
+                interfaceUserInfo.classname = "customer.usercenter.usermsg.usermsg",
+                interfaceUserInfo.method = "query_usermsg"
+                return interfaceUserInfo;
             }
         }
     }

src/components/Login/BuwanjiaLogin.vue

@@ -35,9 +35,10 @@
 <script type='text/javascript'>
     import FixedHeaderVue from "../../commonCmp/LoginTop/FixedHeader.vue"
     import FooterCopyVue from "../../commonCmp/LoginTop/FooterCopy.vue"
+    import UploadVue from "../../commonCmp/LoginTop/Upload.vue"
     export default {
         name: 'BuwanjiaLogin',
-        components: {FixedHeaderVue, FooterCopyVue},
+        components: {FixedHeaderVue, FooterCopyVue, UploadVue},
         data() {
             return {
                 // 请求体

src/components/Login/EnterpriseLogin.vue

@@ -13,16 +13,7 @@
                 </el-form-item>
                 <!-- 上传logo -->
                 <el-form-item label="品牌LOGO" required>
-                    <el-upload
-                        action="https://jsonplaceholder.typicode.com/posts/"
-                        list-type="picture-card"
-                        :on-remove="handleRemove"
-                        :list="1"
-                        :before-upload="beforeAvatarUpload"
-                        >
-                        <i class="el-icon-plus"></i>
-                        <div slot="tip" class="el-upload__tip">只能上传1个jpg/png/jpeg类型图片，且不超过2MB</div>
-                    </el-upload>
+                    <Upload :logoContent="logoContent"/>
                 </el-form-item>
                 <!-- 经营类目 -->
                 <el-form-item label="经营类目" prop="saleprodclass">
@@ -70,11 +61,13 @@
     import FixedHeaderVue from "../../commonCmp/LoginTop/FixedHeader.vue"
     // 引入尾部
     import FooterCopyVue from "../../commonCmp/LoginTop/FooterCopy.vue"
+    // 引入添加图片功能
+    import Upload from "../../commonCmp/LoginTop/Upload.vue";
 
     export default {
         name: "EnterpriseLogin",
         // 注册引入的头部尾部
-        components: {FixedHeaderVue, FooterCopyVue},
+        components: { FixedHeaderVue, FooterCopyVue, Upload},
         data() {
             return {
                 // form表单的数据
@@ -91,11 +84,11 @@
                     saleprodclass: "圣杀者",
                 },
                 logoContent: {
-                    filename: "头像.png",
-                    filetype: "png",
-                    ownertable: "tenterprise_users",
-                    ownerid: "34907",
-                    ftype: "headportrait"
+                    filename: "",
+                    filetype: "",
+                    ownertable: "fagent",
+                    ownerid: "",
+                    ftype: "brandlogo"
                 },
                 
 
@@ -112,38 +105,23 @@
                 dialogVisible: false
             };
         },
+        beforeDestroy() {
+            console.log("####",this.logoContent)
+        },
         methods: {
             // 提交下一步
             async handleSubmit() {
-                const res = await this.$http.post('', this.getTokenInterfaceInfoData());
-                console.log(res);
-
-                this.getTokenInterfaceLogoData()
                 const res1 = await this.$http.post('', this.getTokenInterfaceLogoData())
-                console.log(res1)
-            },
-            // 移除图片
-            handleRemove(file, fileList) {
-                console.log(file, fileList);
+                if (res1.status !== 200) return;
+                const res2 = await this.$http.post('', this.getTokenInterfaceInfoData());
+                if (res2.status !== 200) return;
+                this.$router.push("userhome")
             },
+
             // 跳过
             handleSkip() {
                 this.$router.push("userhome");
             },
-            // 上传图片的格式
-            beforeAvatarUpload(file){
-                this.logoContent.filetype = file.type.slice(6);
-                const isTureType = file.type === ('image/png' || 'image/jpg' || "image/jpeg")
-                const isLt10M = file.size / 1024 / 1024 < 10;
-                // 格式
-                if (!isTureType) {
-                    this.$message.error("上传LOGO图片格式不对");
-                }
-                // 大小
-                if (!isLt10M) {
-                    this.$message.error("上传LOGO图片带下不能超过 10MB！");
-                }
-            },
 
             // 完整的商户资料上传请求体
             getTokenInterfaceInfoData() {
@@ -159,12 +137,13 @@
             // 完整的商户logo附件上传请求体
             getTokenInterfaceLogoData() {
                 const interfaceType1 = this.$store.state.interfaceData;
+                interfaceType1.accesstoken = sessionStorage.getItem("token");
                 interfaceType1.classname = "system.system.docManage";
                 interfaceType1.method = "getFileName";
                 interfaceType1.content = this.logoContent
 
                 return interfaceType1;
-            }
+            },
         }
     }
 </script>

src/components/Login/Login.vue

@@ -69,11 +69,11 @@
                 }
             return {
                 userInfo: {
-                    phonenumber: '13732579333',
+                    phonenumber: '13732579910',
                     password: '',
                 },
                 userInfo1: {
-                    phonenumber: '13732579333',
+                    phonenumber: '13732579910',
                     message: ''
                 },
 
@@ -117,8 +117,7 @@
                     this.$store.state.account_list = account_list;
                     // token存在session
                     window.sessionStorage.setItem("token", account_list[0].token);
-                    console.log(account_list);
-
+                    console.log(account_list)
                     // 多用户跳个人注册
                     if (account_list.length > 1) {
                         this.$router.push("selectAccount")

src/components/Login/SelectAccount.vue

@@ -60,6 +60,7 @@
             // 选择当前的角色传给用户主页当面展示的角色的数据
             selectAccount(value) {
                 this.$store.commit('selectAccount', value)
+                console.log(this.$store.state.selectAccount);
                 this.$router.push('userhome')
 
             }

src/main.js

@@ -15,7 +15,6 @@ import './assets/fonts/iconfont.css'
 // 引入md5js
 import md5 from 'js-md5'
 
-
 // 导入axios
 import axios from 'axios'
 axios.defaults.baseURL = 'http://localhost:8080/api/'
@@ -31,6 +30,8 @@ Vue.prototype.$http = axios;
 Vue.prototype.$md5 = md5;
 
 
+
+
 // 关闭Vue的开发提示的配置 控制台报warning消息
 Vue.config.productionTip = false
 

src/plugins/element.js

@@ -18,7 +18,9 @@ import {
     Message,
     Submenu,
     Radio,
-    DatePicker
+    DatePicker,
+    RadioGroup,
+    RadioButton,
 } from 'element-ui'
 
 Vue.use(Button)
@@ -39,5 +41,7 @@ Vue.use(Col)
 Vue.use(Submenu)
 Vue.use(Radio)
 Vue.use(DatePicker)
+Vue.use(RadioGroup)
+Vue.use(RadioButton)
 
 Vue.prototype.$message = Message