添加消息页面和加入企业页面

frontend/saas-portal-web/src/components/conenter/addenterprise.vue

@@ -4,21 +4,18 @@
             <div class="tc-conent"><img src="/static/img/qiye/dengji@1x.png" alt=""></div>
             <div class="tc-text"><span>添加企业成功</span></div>
         </div>
-        <span class="tjtishi" ref="tjtishi"></span>
         <div>
             <div class="gs-worp qy-worp tj-up">
                 <div class="qy-title" style="position: relative;">
-                    <span>完善企业信息</span>
-                    <div class="qy-anniu" style="position: absolute;top: 0;right: 20px;margin-top: 0;">
-                        <span @click= "Preservation" class="qy-xiugai dianji" style="left: -2px">保存</span>
-                        <span @click= "tjquxiao" class="qy-quxiao xs">取消</span>
-                    </div>
+                    <ul class="over">
+                        <li style="width:100%" class="left xs" v-for="(d, i) in tab" :key="i" :class= "{qyactive:nowindex == i}" @click="tabwith(i)">{{d.name}}</li>
+                    </ul>
                 </div>
-                <div class="qy-conent">
+                <div class="qy-conent" :class= "{showqiye:nowindex == 0}" style="padding-top: 60px;">
                     <ul>
                         <li style="margin: 0">
-                            <span class="qy-biaoti"><span class="xingxing">*</span>公司名称</span>
-                            <input class="inpind" ref="qyname" @change= "spaceName" type="text" placeholder="请填写公司全称">
+                            <span class="qy-biaoti"><span class="xingxing">*</span>企业名称</span>
+                            <input class="inpind" ref="qyname" @change= "spaceName" type="text" placeholder="请填写企业全称">
                             <dir class="qy-Tips"><span ref="qyno" style="color:red"></span></dir>
                         </li>
                         <li>
@@ -44,28 +41,17 @@
                                 <option value="其他">其他</option>   
                             </select>
                         </li>
-                        <li style="height:70px;">
-                            <span class="qy-biaoti left"><span class="xingxing">*</span>公司地址</span>
-                            <div class="addbiaoqian">
-                                <!-- <v-distpicker @province= 'qyprovince' @city= 'qycity' @area= 'qyarea'></v-distpicker> -->
-                                <!-- <v-distpicker @selected= 'selected' province="广东省" city="广州市" area="荔湾区" :placeholders= 'placeholder'></v-distpicker> -->
+                        <li>
+                            <span class="qy-biaoti"><span class="xingxing">*</span>企业地址</span>
+                            <input ref="address" @change="address" class="inpind" type="text" placeholder="输入企业详细地址">
+                            <!-- <div class="addbiaoqian">
                                 <v-distpicker @selected= 'selected' @province= 'qyprovince' :placeholders= 'placeholder'></v-distpicker>
-                                <input ref="address" @change="address" :disabled="disabled" class="qy-xiangxi" type="text" placeholder="输入企业详细地址">
-                                
-                            </div>
+                                <input ref="address" @change="address" class="qy-xiangxi" type="text" placeholder="输入企业详细地址">
+                            </div> -->
                             <div class="qy-Tips left">
                                 <span ref="ress" style="color:red;margin-left:40px;"></span>
                             </div>
                         </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="gs-worp qy-worp tj-down">
-                <div class="qy-title">
-                    <span>完善个人信息</span>
-                </div>
-                <div class="qy-conent">
-                    <ul>
                         <li style="margin:0">
                             <span class="qy-biaoti"><span class="xingxing">*</span>姓名</span>
                             <input class="inpind" @change= "yzusername" ref="name" type="text" value="">
@@ -77,6 +63,43 @@
                             <input class="inpind" @change="email" ref="email" type="email" value="">
                             <div class="qy-Tips Tips-buttom"><span style="color:red">{{Email}}</span></div>
                         </li>
+                        <li>
+                            <div class="qy-anniu">
+                                <span @click= "Preservation" class="qy-xiugai dianji" style="left: -2px">保存</span>
+                                <span @click= "tjquxiao" class="qy-quxiao xs">取消</span>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="qy-conent jr-conent" :class= "{showqiye:nowindex == 1}">
+                    <ul style="padding:0">
+                        <li>
+                            <span class="qy-biaoti"><span class="xingxing marght">*</span>查找企业</span>
+                            <input @blur.prevent="Testingqyname" ref="lookupqyname" class="inpind" type="text" value="" placeholder="输入企业名称或管理员">
+                            <span class="warning" ref="warningqyname"></span>
+                        </li>
+                        <li class="hied" :class= "{showlookup:islookup}">
+                            <div class="lookup">
+                                <ul>
+                                    <li v-for="(d, i) in arr" :key="i">
+                                        <span>企业名称：</span><span>{{d.qyname}}</span>
+                                        <span class="saasguanli">SaaS管理员：</span><span>{{d.saas}}</span>
+                                        <span>联系方式：</span><span>{{d.phone}}</span>
+                                    </li>
+                                </ul>
+                            </div>
+                        </li>
+                        <li>
+                            <span class="qy-biaoti"><span class="xingxing marght">*</span>姓<span style="width:2em;display: inline-block;"></span>名</span>
+                            <input @blur.prevent="Testingname" class="inpind" type="text" ref="lookupname" placeholder="输入真实姓名，待管理员审核">
+                            <span class="warning" ref="warningname"></span>
+                        </li>
+                        <li>
+                            <div class="qy-anniu" style="margin-top: 70px;">
+                                <span @click="Submission" class="qy-xiugai dianji" style="left: -2px">提交</span>
+                                <span @click= "tjquxiao" class="qy-quxiao xs">取消</span>
+                            </div>
+                        </li>
                     </ul>
                 </div>
             </div>
@@ -91,25 +114,35 @@ import { setTimeout } from 'timers';
     export default {
         data(){
             return {
-                province:'',//省
-                city:'',//市
-                area:'',//区
+                // province:'',//省
+                // city:'',//市
+                // area:'',//区
                 qymingzi: false,//企业名是否注册
                 Email: '',
                 mytoken: JSON.parse(localStorage.getItem('app-state-session')),//本地储存的用户信息
                 reg: new RegExp(/[\@\#\$\%\&\*!\￥]/),//非法字符
+                regname:new RegExp(/[\@\#\$\%\&\*!\￥0-9]/),//非法字符加数字
                 isaddress: false,//公司地址验证
                 isaddressname: false,//公司地址是否为空
                 isname: true,//姓名验证
                 isspaceName: false,//公司名验证
                 isemail: true,//验证邮箱
-                disabled: true,
+                // disabled: true,
                 isadd: false,//添加成功弹窗
-                placeholder:{province:"省", city:"市", area:"区"},
-                placeholde:{province:"", city:"", area:""},
+                // placeholder:{province:"省", city:"市", area:"区"},
+                // placeholde:{province:"", city:"", area:""},
                 tab:[
                     {name:'创建新企业'},
-                    {name:'加入企业'},
+                    // {name:'加入企业'},
+                ],
+                nowindex:0,
+                islookup:false,
+                isTestingname:false,
+                isregname:false,
+                arr:[
+                    {qyname:'XX房贷首付范德萨发达企业',saas:'反倒是地方反对法管理员',phone:'13456789023'},
+                    {qyname:'XX企业',saas:'管理员',phone:'13456789023'},
+                    {qyname:'XX企业',saas:'管理员',phone:'13456789023'},
                 ]
             }
         },
@@ -121,19 +154,22 @@ import { setTimeout } from 'timers';
             this.$refs.email.value = this.mytoken.account.email
         },
         methods: {
+            tabwith(i){
+                this.nowindex = i;
+            },
             //取消添加企业
             tjquxiao(){
                 document.documentElement.scrollTop = 0;
                 this.$router.push({name:'company',}); 
             },
-            //检测企业名称
+            //检测企业名称1
             spaceName(){
                 let qyname = this.$refs.qyname.value.replace(/\s+/g, "");//公司名字过滤空格
                 if(qyname == ''){
-                    this.$refs.qyno.innerHTML = '企业名字不能为空';
+                    this.$refs.qyno.innerHTML = '企业名称不能为空';
                 } else {
                     if (this.reg.test(qyname)) {
-                        this.$refs.qyno.innerHTML = '不能包含非法字符';
+                        this.$refs.qyno.innerHTML = '不能包含符号等非法字符';
                         this.isspaceName = false;
                     } else {
                         this.$refs.qyno.innerHTML = '';
@@ -149,6 +185,7 @@ import { setTimeout } from 'timers';
                         .then(res=>{
                             if (res.data.data.success) {
                                 this.qymingzi = true;
+                                this.$refs.qyno.innerHTML = '<span style="color:green">该企业可创建</span>';
                             } else {
                                 this.$refs.qyno.innerHTML = '该企业已在优软云注册';
                                 this.qymingzi = false
@@ -160,14 +197,25 @@ import { setTimeout } from 'timers';
                     }
                 }
             },
-            //验证个人姓名
+            //检测企业名称2
+            Testingqyname(){
+                let qyname = this.$refs.lookupqyname.value.replace(/\s+/g, "");//企业名字
+                if (qyname == '') {
+                    this.$refs.warningqyname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 企业或管理员不能为空';
+                    this.islookup = false
+                } else {
+                    this.$refs.warningqyname.innerHTML = '<img style="width:14px" src="/static/img/ok.png" alt="">';
+                    this.islookup = true
+                }
+            },
+            //验证个人姓名1
             yzusername(){
                 let name = this.$refs.name.value.replace(/\s+/g, "");//姓名过滤空格
                 if (name == '') {
                     this.$refs.usname.innerHTML = '个人姓名不能为空'
                 } else {
                     if (this.reg.test(name)) {
-                        this.$refs.usname.innerHTML = '不能包含非法字符'
+                        this.$refs.usname.innerHTML = '不能包含符号等非法字符'
                         this.isname = false
                     } else {
                         this.$refs.usname.innerHTML = ''
@@ -175,6 +223,38 @@ import { setTimeout } from 'timers';
                     }
                 }
             },
+            //验证个人姓名2
+            Testingname(){
+                let name = this.$refs.lookupname.value.replace(/\s+/g, "");//姓名过滤空格
+                if (name == '') {
+                    this.$refs.warningname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 姓名不能为空';
+                    this.isTestingname = false;
+                } else {
+                    this.isTestingname = true;
+                    if (this.regname.test(name)) {
+                        this.$refs.warningname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 姓名不能包含符号、数字等非法字符';
+                        this.isregname = false;
+                    } else {
+                        this.$refs.warningname.innerHTML = '<img style="width:14px" src="/static/img/ok.png" alt="">';
+                        this.isregname = true;
+                    }
+                }
+            },
+            //加入企业提交按钮
+            Submission(){
+                if (!this.islookup) {
+                    this.$message.error('企业或管理员不能为空');
+                } else if (!this.isTestingname) {
+                    this.$message.error('姓名不能为空');
+                } else if (!this.isregname) {
+                    this.$message.error('姓名不能包含符号、数字等非法字符');
+                } else {
+                    this.$message({
+                        message: '提交成功，待管理员批准加入',
+                        type: 'success'
+                    });
+                }
+            },
             //验证公司详细地址
             address(){
                 let address = this.$refs.address.value.replace(/\s+/g, "");//过滤空格
@@ -184,7 +264,7 @@ import { setTimeout } from 'timers';
                 } else {
                     this.isaddressname = true
                     if (this.reg.test(address)) {
-                        this.$refs.ress.innerHTML = '不能包含非法字符'
+                        this.$refs.ress.innerHTML = '不能包含符号等非法字符'
                         this.isaddress = false
                     } else {
                         this.$refs.ress.innerHTML = ''
@@ -213,7 +293,7 @@ import { setTimeout } from 'timers';
                 this.listLoading = true
                 let qyname = this.$refs.qyname.value.replace(/\s+/g, "");//公司名字
                 let qyindustry = this.$refs.qyindustry.value;//所属行业
-                let address = this.province+this.city+this.area+this.$refs.address.value.replace(/\s+/g, "");//公司详细地址
+                let address = this.$refs.address.value.replace(/\s+/g, "");//公司详细地址
                 let name = this.$refs.name.value.replace(/\s+/g, "");//个人姓名
                 let email = this.$refs.email.value;//邮箱
                 let mytoken = JSON.parse(localStorage.getItem('app-state-session'));
@@ -230,11 +310,9 @@ import { setTimeout } from 'timers';
                 // console.log('企业名字',this.isspaceName)//企业名字正则
                 // console.log('邮箱',this.isemail)//邮箱正则
                 if (name == '') {
-                    this.$refs.tjtishi.innerHTML = '个人姓名不能为空';
-                    this.remotxt()
+                    this.$message.error('个人姓名不能为空');
                 } else if (qyname == '') {
-                    this.$refs.tjtishi.innerHTML = '企业名字不能为空';
-                    this.remotxt()
+                    this.$message.error('企业名称不能为空');
                 } else {
                     switch (this.qymingzi && this.isaddress && this.isname && this.isspaceName && this.isemail && this.isaddressname) {
                         case this.qymingzi:
@@ -252,62 +330,47 @@ import { setTimeout } from 'timers';
                                 }
                             })
                             .then(res=>{
-                                let id = res.data.data;
-                                let logoUrl = null;
-                                let addenterprise = {'id':id, 'logoUrl': logoUrl, 'name': qyname};
-                                let session = JSON.parse(window.localStorage.getItem('app-state-session'));
-                                session.account.companies.push(addenterprise);
-                                session.account.realname = name;
-                                Session.set(session);
-                                this.isadd = true;
+                                this.isadd = true;//添加成功弹窗
                                 setTimeout(()=>{
                                     document.documentElement.scrollTop = 0;
                                     // this.$router.push({name:'company'})
                                     this.$router.push({path: '/enterprise'})
-                                },1000)
+                                },3000)
                             })
-                            this.$refs.tjtishi.innerHTML = '';
+                            this.$message({
+                                message: '保存成功，待管理员批准',
+                                type: 'success'
+                            });
                         } else {
-                            this.$refs.tjtishi.innerHTML = '该企业已在优软云注册';
-                            this.remotxt()
+                            this.$message.error('该企业已在优软云注册');
                         }
                         break;
                         case this.isaddressname:
-                        this.$refs.tjtishi.innerHTML = '企业地址不能为空';
-                        this.remotxt()
+                        this.$message.error('企业地址不能为空');
                         break;
                         case this.isaddress:
-                        this.$refs.tjtishi.innerHTML = '企业地址不能包含非法字符';
-                        this.remotxt()
+                        this.$message.error('企业地址不能包含符号等非法字符');
                         break;
                         case this.isname:
-                        this.$refs.tjtishi.innerHTML = '个人姓名不能包含非法字符';
-                        this.remotxt()
+                        this.$message.error('个人姓名不能包含符号等非法字符');
                         break;
                         case this.isspaceName:
-                        this.$refs.tjtishi.innerHTML = '企业名字不能包含非法字符';
-                        this.remotxt()
+                        this.$message.error('企业名称不能包含符号等非法字符');
                         break;
                         case this.isemail:
-                        this.$refs.tjtishi.innerHTML = '请填写正确的邮箱';
-                        this.remotxt()
+                        this.$message.error('请填写正确的邮箱');
                         break;
                     }
                 }
                 this.listLoading = false
             },
-            remotxt(){
-                setTimeout(()=>{
-                    this.$refs.tjtishi.innerHTML = ' ';
-                },3000)
-            },
             //获取省市区
-            selected(data){
-                this.province = data.province.value;
-                this.city = data.city.value;
-                this.area = data.area.value;
-                this.disabled= false
-            },
+            // selected(data){
+            //     this.province = data.province.value;
+            //     this.city = data.city.value;
+            //     this.area = data.area.value;
+            //     this.disabled= false
+            // },
             qyprovince(){
                 this.placeholder = this.placeholde
             },
@@ -316,12 +379,6 @@ import { setTimeout } from 'timers';
 </script>
 
 <style scoped>
-.tjtishi {
-    color: red;
-    display: block;
-    text-align: center;
-    height: 20px;
-}
 .addspace {
     height: 200px;
     border: 1px solid #cccccc
@@ -329,7 +386,6 @@ import { setTimeout } from 'timers';
 .tj-up {
     width: 100%;
     margin-bottom: 0px;
-    border-bottom: 0;
     padding-bottom: 1px;
     border-radius: 4px 4px 0 0;
     /* margin-top: -30px; */
@@ -367,4 +423,29 @@ import { setTimeout } from 'timers';
 .inpind {
     padding-left: 10px;
 }
+.qyactive {
+    border-bottom: 3px solid  #1E88F5;
+}
+.qy-conent {
+    display: none;
+}
+.showqiye {
+    display: block !important;
+}
+.warning {
+    color: red;
+    margin-left: 25px;
+    font-size: 12px;
+    position: absolute;
+    display: inline-block;
+    width: 150px;
+    text-align: left;
+    text-indent: -16px;
+}
+.warning img {
+    width: 14px;
+}
+.marght {
+    margin-right: 5px;
+}
 </style>

frontend/saas-portal-web/src/components/conenter/company.vue

@@ -65,38 +65,33 @@
                     </div>
                 </router-link>
             </div>
-            <!-- 点击查看企业详情 -->
             <div v-for="(d , i) in arr " :key="i" class="gs-xiangqing">
                 <!-- 上 -->
                 <div class="gs-shang">
-                    <div class="gs-morentop" :class= "{gsqiye:nowindex == (i+1)}">
-                        <span v-if = "d.default_" @click="hideDefaultWin(i)" class="gs-btn2 xs">取消默认</span>
-                        <span v-else @click="showDefaultWin(i)" class="gs-btn2 xs">设为默认</span>
-                    </div>
-                    <img @click.stop @mouseenter="setismoren" @click="setmoren(i)" class="shezhi xs" src="/static/img/shezhi.png" alt="设置">
+                    <el-dropdown v-if= "d.saas_" trigger="hover" size="mini" placement='bottom-start'>
+                        <img  class="shezhi xs" src="/static/img/shezhi.png" alt="设置">
+                        <el-dropdown-menu slot="dropdown">
+                            <el-dropdown-item v-if = "d.default_">
+                                <span @click="hideDefaultWin(i)">取消默认</span>
+                            </el-dropdown-item>
+                            <el-dropdown-item v-else>
+                                <span @click="showDefaultWin(i)">设为默认</span>
+                            </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
                     <img v-if = "d.default_" class="gs-morenimg" src="/static/img/moren2x.png" alt="">
                 </div>
                 <!-- 中 -->
                 <div class="gs-xqleft">
+                    <!-- 点击查看企业详情 -->
                     <p class="gs-qynema xs" @click= "getEnterpriseInfo(d)">{{d.name}}</p>
-                    <!-- <img @mouseenter="setismoren" @click="setmoren(i)" class="shezhi xs" src="/static/img/shezhi.png" alt="设置"> -->
-                    <!-- <div class="gs-morentop" :class= "{gsqiye:nowindex == (i+1)}">
-                        <span v-if = "d.default_" @click="hideDefaultWin(i)" class="gs-btn2 xs">取消默认</span>
-                        <span v-else @click="showDefaultWin(i)" class="gs-btn2 xs">设为默认</span>
-                    </div> -->
                 </div>
                 <!-- 下 -->
                 <div class="gs-xqright over">
-                    <div v-if= "d.saas_" class="gs-xqright-left left" style="margin-top: 5%;" @click.stop >
-                        <!-- <p class="saasfuwu"><span>SaaS服务</span></p> -->
-                        <!-- <p v-if= "d.saas_"  class="saasgengduo xs">
-                            <span @mouseenter="setissaasxiangxi" @click="gengduo(i)">更多 ></span>
-                        </p> -->
-                        <!-- <div class="saasxiangxi" :class= "{gssaasxiangxi:nowindex2 == (i+1)}"> -->
-                            <p><span>saas管理员：</span>{{d.admin}}</p>
-                            <p><span>联系方式：</span>{{d.adminMobile}}</p>
-                            <!-- <p><span>开通日期：</span></p> -->
-                        <!-- </div> -->
+                    <div v-if= "d.saas_" class="gs-xqright-left left" style="margin-top: 5%;">
+                        <p><span>saas管理员：</span>{{d.admin}}</p>
+                        <p><span>联系方式：</span>{{d.adminMobile}}</p>
+                        <!-- <p><span>开通日期：</span></p> -->
                     </div>
                     <div class="gs-border gs-xqright-right right">
                         <span v-if= "d.saas_" class="gs-btn1 xs" @click="selectServe(d.id)">进入服务</span>
@@ -128,20 +123,12 @@
                 isheigh:false,//是否添加默认高度
                 admin: '',
                 adminMobile: '',
-                ismoren:true,
-                issaasxiangxi:true,
             }
         },
         computed :{
             setTokenPage() {
                 return this.$url.web + '/set-token.html'
             },
-            nowindex() {
-                return this.$store.state.ismoren
-            },
-            nowindex2() {
-                return this.$store.state.issaasxiangxi
-            },
         },
         watch:{
             arr:function(){
@@ -168,6 +155,23 @@
                 .then(res=>{
                     const frame = window.frames[window.frames.length - 1];
                     this.arr = res.data.data.spaces;
+                    let enterprise = [];
+                    for (let i = 0; i < this.arr.length; i++) {
+                        if (this.arr[i].saas_) {
+                            let addenterprise = {'id':'', 'logoUrl': '', 'name': '','dcName':''};
+                            addenterprise.id = this.arr[i].id;
+                            addenterprise.logoUrl = this.arr[i].logoUrl || null;
+                            addenterprise.name = this.arr[i].name;
+                            addenterprise.dcName = this.arr[i].dcName || null;
+                            enterprise.push(addenterprise)
+                        }
+                    };
+                    let session = JSON.parse(window.localStorage.getItem('app-state-session'));
+                    if (enterprise.length != session.account.companies.length) {
+                        session.account.companies = enterprise;
+                        session.account.realname = this.arr[0].admin;
+                        Session.set(session);
+                    };
                     let hasCompany = res.data.data.hasDefaultCompany;
                     let companyId = res.data.data.defaultCompanyId;
                     let token = res.data.data.token.token;
@@ -232,8 +236,9 @@
                     }
                 })
                 .then(res=>{
-                    // console.log('请求成功',res);
-                    this.$router.go(0);
+                    if (res.data.success) {
+                        this.$router.go(0);
+                    }
                 })
                 .catch(err=>{
                     // console.log('请求失败',err);
@@ -352,30 +357,6 @@
                 this.isNoopen = false;
                 this.isokopensaas = false
             },
-            // 弹出设置
-            setmoren(i){
-                if (this.ismoren) {
-                    this.$store.state.ismoren = i+1
-                } else {
-                    this.$store.state.ismoren = ''
-                }
-                this.ismoren = !this.ismoren
-            },
-            // 弹出更多
-            gengduo(i){
-                if (this.issaasxiangxi) {
-                    this.$store.state.issaasxiangxi = i+1
-                } else {
-                    this.$store.state.issaasxiangxi = ''
-                }
-                this.issaasxiangxi = !this.issaasxiangxi
-            },
-            setismoren(){
-                this.ismoren = true
-            },
-            setissaasxiangxi(){
-                this.issaasxiangxi = true
-            },
             //没有内容也要有一定的高度
             boxheight(){
                 let H = this.$refs.qiyebox.offsetHeight;
@@ -400,38 +381,10 @@
     -khtml-user-select: none;
     user-select: none;
 }
-.shezhi {
-    /* margin-left: 92%;
-    margin-top: 23%; */
-}
 .gs-morentop {
     position: absolute;
-    margin-top: 20px;
-    /* right: 11px; */
+    margin-top: 0px;
     left: 5px;
     display: none;
 }
-.saasfuwu {
-    font-size: 16px;
-    color: #677897;
-}
-.saasgengduo {
-    font-family: PingFangSC-Regular;
-    font-size: 12px;
-    color: #1E88F5;
-    letter-spacing: 0;
-}
-.saasxiangxi {
-    display: none;
-    position: absolute;
-    background: #F8FBFF;
-    border: 1px solid #1E88F5;
-    border-radius: 4px;
-    padding: 10px;
-    font-size: 14px;
-    color: #1E88F5 !important;
-}
-.gssaasxiangxi {
-    display: block;
-}
 </style>

frontend/saas-portal-web/src/components/conenter/enterprise.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="div" @click="onshezhi">
+    <div class="div">
         <div id="navigation" class="navbar-inverse navbar-fixed-top animated-header">
         <div class="container">
             <div class="navbar-header">
@@ -37,6 +37,7 @@
             <div class="gs-tab">
                 <ul>
                     <li class="xs" v-for="(btn , index) in tab" :key='index' :class= "{gsactive:nowindex == index}" @click= "tabswitch(index)">{{btn.name}}</li>
+                    <!-- <span class="reddian"></span> -->
                 </ul>
             </div>
             <div class="gs-none">
@@ -120,7 +121,28 @@
                 </div>
     <!-- 消息 ------------------------------------------------------------------>
                 <div :class="{gsqiye:nowindex == 3}">
-                    我是消息页面
+                    <div class="gs-news" ref="qiyebox" :class="isheigh ? 'heigh' : ''">
+                        <ul>
+                            <li>
+                                <span>消息类型</span>
+                                <span>时间</span>
+                                <span class="newscentent">消息内容</span>
+                                <span>状态</span>
+                                <span>操作</span>
+                            </li>
+                            <li class="newslist" v-for="(d, i) in arr" :key="i">
+                                <span>{{d.leixing}}</span>
+                                <span>{{d.time}}</span>
+                                <span class="newscentent">
+                                    <span>{{d.neirong.qyname}}</span>
+                                    <span>{{d.neirong.saas}}</span>
+                                    <span>{{d.neirong.phone}}</span>
+                                </span>
+                                <span>{{d.zhuangtai}}</span>
+                                <span><button v-if="d.caozuo" @click="Rejoin" class="news-btn">重新加入</button></span>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
         </div>
@@ -140,17 +162,30 @@ import { setTimeout } from 'timers';
                 ismodifyname:true,
                 isname:true,//姓名验证
                 reg: new RegExp(/[\@\#\$\%\&\*!\￥]/),//非法字符
+                isheigh:false,//默认高度
                 tab: [
                     {name: '企业信息'},
                     {name: '个人信息'},
                     {name: '安全设置'},
                     // {name: '消息'},
-                    ],
+                ],
+                arr: [
+                    {leixing:'加入申请',time:'2018/12/01  12：45：21',neirong:{qyname:'X防守对方的发士大夫XX公司',saas:'管理员名称范德萨发达',phone:'1345678923'},zhuangtai:'待批准',caozuo:false},
+                    {leixing:'加入申请',time:'2018/12/01  12：45：21',neirong:{qyname:'XXX公司',saas:'管理员名称',phone:'1345678923'},zhuangtai:'未通过',caozuo:true},
+                ]
             }
         },
         mounted(){
             let mob = this.mytoken.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
-            this.mobile = mob
+            this.mobile = mob;
+            this.boxheight();
+        },
+        watch:{
+            arr:function(){
+                this.$nextTick(function(){
+                    this.boxheight();
+                })
+            }
         },
         computed :{
             setTokenPage() {
@@ -221,7 +256,10 @@ import { setTimeout } from 'timers';
                     })
                     .then(res=>{
                         if (res.data.success) {
-                            this.$router.go(0)
+                            let session = JSON.parse(window.localStorage.getItem('app-state-session'));
+                            session.account.realname = name;
+                            Session.set(session);
+                            this.$router.go(0);
                         }
                     })
                     .catch(err=>{
@@ -229,9 +267,22 @@ import { setTimeout } from 'timers';
                     })
                 }
             },
-            onshezhi(){
-                this.$store.state.ismoren = '';
-                this.$store.state.issaasxiangxi = ''
+            //重新加入
+            Rejoin(){
+                //成功后提示
+                this.$message({
+                    message: '提交成功，待管理员批准',
+                    type: 'success'
+                });
+            },
+            //没有内容也要有一定的高度
+            boxheight(){
+                let H = this.$refs.qiyebox.offsetHeight;
+                if (H < 500) {
+                    this.isheigh = true
+                } else {
+                    this.isheigh = false
+                }
             },
         },
     }
@@ -242,6 +293,9 @@ import { setTimeout } from 'timers';
     padding-top: 100px;
     background: #FDFDFD;
 }
+.heigh {
+    height: 500px;
+}
 .gsqiye div:last-child {
     margin-bottom: 100px;
 }
@@ -287,4 +341,80 @@ import { setTimeout } from 'timers';
     margin-left: -10px;
     color: red;
 }
+
+/* 消息 */
+.gs-news {
+    width: 130%;
+    margin-left: -15%;
+}
+.gs-news > ul {
+    padding: 0;
+    font-family: PingFangSC-Regular;
+    font-size: 14px;
+    color: #243A52;
+}
+.gs-news > ul > li:nth-child(1) {
+    font-family: PingFangSC-Regular;
+    font-size: 14px;
+    color: #243A52;
+    font-weight: 600;
+    padding: 0px 10px;
+}
+.gs-news > ul > li > span {
+    display: inline-block;
+    text-align: center;
+}
+.gs-news > ul > li > span:nth-child(1),
+.gs-news > ul > li > span:nth-child(4),
+.gs-news > ul > li > span:nth-child(5) {
+    width: 10%;
+}
+.gs-news > ul > li > span:nth-child(2) {
+    width: 23%;
+}
+.gs-news > ul > li > span:nth-child(3) {
+    width: 43%;
+}
+.newscentent {
+    text-align: left !important;
+}
+.newscentent span{
+    width: 32%;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+}
+.newscentent span:nth-child(2),
+.newscentent span:nth-child(3) {
+    text-align: center;
+}
+.newslist {
+    background: #FFFFFF;
+    border: 1px solid rgba(30,136,245,0.32);
+    box-shadow: 0 20px 60px 8px #F4F8FC;
+    border-radius: 4px;
+    margin: 24px 0px;
+    padding: 30px 10px;
+}
+.news-btn {
+    background: #1E88F5;
+    border-radius: 2px;
+    color: white;
+    border: 0;
+    font-family: PingFangSC-Regular;
+    font-size: 14px;
+    color: #FFFFFF;
+    letter-spacing: 0.25px;
+    text-align: center;
+    padding: 5px 16px;
+}
+.reddian {
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    border-radius: 2px;
+    background: red;
+    margin-left: -22px;
+}
 </style>

frontend/saas-portal-web/src/components/conenter/home.vue

@@ -74,7 +74,7 @@
       <!--Home Slider==================================== -->
       <div>
         <div class="slider-1" style="position: relative;">
-          <img src="/static/img/banner@3x@2x.png" alt="">
+          <img src="/static/img/banner--X.jpg" alt="">
           <div class="my-text" style="top:63%">
             <button class='my-tiyan' @click="experience">立即体验</button>
           </div>

frontend/saas-portal-web/src/store/index.js

@@ -7,8 +7,6 @@ export default new Vuex.Store({
         isAutoLogin: false,
         isproblem: '',//常见问题
         isloading:false,
-        ismoren:'',
-        issaasxiangxi:''
     },
     mutations:{
          Logintrue(state) {

frontend/saas-portal-web/static/css/gongsi.css

@@ -396,27 +396,32 @@
     border: 0;
     border-bottom: 1px solid #BDBEBE;
 }
+.hied {
+    display: none;
+}
 .lookup {
-    width: 40%;
+    width: 90%;
+    margin-left: 5%;
     background: #FFFFFF;
     border: 1px solid #1E88F5;
     border-radius: 2px;
-    margin-left: 5%;
-    position: absolute;
-    /* display: none; */
-    margin-top: -20px;
-    z-index: 1;
     text-align: left;
 }
+.showlookup {
+    display: block !important;
+}
 .lookup > ul {
-    padding: 20px;
+    padding: 20px 20px 0px 20px;
 }
 .lookup > ul > li {
     margin-bottom: 10px;
 } 
 .lookup > ul > li span{
-    width: 15%;
+    width: 16%;
     display: inline-block;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
 } 
 .saasguanli {
     width: 18% !important;