saas-platform/frontend/saas-portal-web/src/components/conenter/qiyexiangxi.vue

<template>
    <div>
        <span class="Tips" ref="Tips"></span>
        <!-- 企业详细信息 -->
        <div v-if="xiugai">
            <div class="gs-worp qy-worp" style="width:100%">
                <div class="qy-title">
                    <span><img @click= "gobick" style="float: left;padding: 20px; cursor:pointer" src="../../../static/img/fanhui.png" alt=""></span>
                    <span>企业基本信息</span>
                    <span v-if="isxiugaiId" @click="xiugaiqiye" class="qy-xiugai dianji">修改</span>
                </div>
                <div class="qy-conent">
                    <ul>
                        <li><span class="qy-biaoti">公司名称</span><span>{{content.name}}</span></li>
                        <li><span class="qy-biaoti">所属行业</span><span>{{content.type}}</span></li>
                        <li><span class="qy-biaoti">公司地址</span><span>{{content.address}}</span></li>
                    </ul>
                </div>
            </div>
            <div class="gs-worp qy-worp" style="width:100%">
                <div class="qy-title">
                    <span>管理员信息</span>
                </div>
                <div class="qy-conent">
                    <ul>
                        <li><span class="qy-biaoti">姓名</span><span>{{content.admin}}</span></li>
                        <li><span class="qy-biaoti">手机号</span><span>{{mytoken.account.mobile}}</span></li>
                        <li><span class="qy-biaoti">邮箱</span><span>{{mytoken.account.email}}</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 修改企业信息 ------------------------------------------  -->
        <div v-else>
            <div class="gs-worp qy-worp" style="width: 100%">
                <div class="qy-title" style="position: relative;">
                    <span>企业基本信息</span>
                    <div class="qy-anniu">
                        <span @click= "baocunxiugai" class="qy-xiugai dianji" style="left: 0">保存</span>
                        <span @click= "quxiaoxiugai" class="qy-quxiao xs">取消</span>
                    </div>
                </div>
                <div class="qy-conent">
                    <ul>
                        <li>
                            <span class="qy-biaoti"><span class="xingxing">*</span>公司名称</span>
                            <span>{{content.name}}</span>
                        </li>
                        <li>
                            <span class="qy-biaoti">所属行业</span>
                            <select ref="qyindustry" style="width:59%;height: 30px" name="selectAge" id="selectAge">   
                                <option value="">请选择所属行业</option>
                                <option value="贸易零售">贸易零售</option>
                                <option value="制造加工">制造加工</option>
                                <option value="服务业">服务业</option>
                                <option value="教育">教育</option>
                                <option value="信息传媒">信息传媒</option>
                                <option value="金融">金融</option>
                                <option value="高新科技">高新科技</option>
                                <option value="电子商务">电子商务</option>
                                <option value="互联网">互联网</option>
                                <option value="医疗服务">医疗服务</option>
                                <option value="艺术娱乐">艺术娱乐</option>
                                <option value="地产建筑">地产建筑</option>
                                <option value="公共服务">公共服务</option>
                                <option value="开采冶金">开采冶金</option>
                                <option value="交通仓储">交通仓储</option>
                                <option value="农林牧渔">农林牧渔</option>
                                <option value="其他">其他</option>   
                            </select>
                        </li>
                        <li>
                            <span class="qy-biaoti">公司地址</span>
                            <span>{{content.address}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="gs-worp qy-worp" style="width: 100%">
                <div class="qy-title">
                    <span>管理员信息</span>
                </div>
                <div class="qy-conent">
                    <ul>
                        <li><span class="qy-biaoti">姓名</span><span>{{content.admin}}</span></li>
                        <li><span class="qy-biaoti">手机号</span><span>{{mytoken.account.mobile}}</span></li>
                        <li>
                            <span class="qy-biaoti">邮箱</span>
                            <input @change="email" ref="email" type="text" value="">
                            <dir class="qy-Tips"><span style="color:red">{{Email}}</span></dir>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data(){
            return {
                xiugai:true,
                content: JSON.parse(window.sessionStorage.getItem("content")),
                Email: '',
                mytoken: JSON.parse(localStorage.getItem('app-state-session')),//本地储存的用户信息
                isId: false,
                isemail: true,//正则邮箱
                isxiugaiId: false
            }
        },
        mounted(){
            //不是管理员隐藏修改按钮
            if (this.content.adminId == this.mytoken.account.id) {
                this.isxiugaiId = true;
            } else {
                this.isxiugaiId = false
            }
        },
        methods: {
            selects(){
                let selects = this.$refs.qyindustry
                let options = selects.options
                for (let i = 0; i < options.length; i++) {
                    if (options[i].innerHTML == this.content.type) {
                        options[i].selected = true
                    }
                }
            },
            //修改企业信息
            xiugaiqiye(){
                document.documentElement.scrollTop = 0;
                this.xiugai = false;
                setTimeout(()=>{
                    this.selects()
                },10)
            },
            email(){ //验证邮箱
                let reg = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$"); 
                let email = this.$refs.email.value;//邮箱
                if (email == '') {
                    this.Email = ''
                    this.isemail = true
                } else {
                    if (!reg.test(email)) {
                        this.Email = '请填写正确的邮箱'
                        this.isemail = false
                    } else {
                        this.Email = ''
                        this.isemail = true
                    }
                }
            },
            // 取消修改
            quxiaoxiugai(){
                document.documentElement.scrollTop = 0;
                this.xiugai = true;
            },
            // 保存修改
            baocunxiugai(){
                let qyindustry = this.$refs.qyindustry.value;//所属行业
                if (this.isemail && qyindustry!='') {
                    let email = this.$refs.email.value;
                    let qyname = this.content.name;//公司名字
                    // let qyindustry = this.$refs.qyindustry.value;//所属行业
                    let address = this.content.address;//公司详细地址
                    let companyId = this.content.id;
                    let name = this.content.realname;//名字
                    let mobile = this.mytoken.account.mobile;//手机号
                    let uu = this.content.uu;
                    let company = {'name':qyname,'address':address, 'id':companyId, 'type':qyindustry};
                    let account = {'realname':name,'email':email,'mobile':mobile, 'uu':uu};
                    this.$ajax({
                        url: this.$url.api+"/api/account/accountCenter/companyAccount/update",//http://192.168.253.31:8560
                        method: 'post',
                        data: {
                            companyRegDTO:company,
                            accountRegDTO:account,
                        },
                        headers: {
                            "Authorization":this.mytoken.token,
                        }
                    })
                    .then(res=>{
                        // console.log("请求成功",res)
                        if (res.data.success) {
                            document.documentElement.scrollTop = 0;
                            this.xiugai = true;
                            this.content.type = qyindustry
                        };
                    })
                    .catch(err=>{
                        // console.log("请求失败",err)
                    })
                } else {
                    this.$refs.Tips.innerHTML= "请填写正确的邮箱或选择行业"
                    // this.isTipsmail = true;
                    setTimeout(()=>{
                        this.$refs.Tips.innerHTML= ""
                    },3000)
                }
            },
            //返回
            gobick(){
                // this.$router.go(-1) 
                this.$router.push({name:'company'});
            }
        }
    }
</script>

<style scoped>
.xg-biaoqian {
    padding: 6px 20px;
    border-radius: 2px;
    margin-right: 8px;
    background: #F1F7FC;
    color: #243A52;
}
.qcbiaoqian {
    position: relative;
    top: -17px;
    right: -21px;
}
.Tips {
    display: block;
    text-align: center;
    color: red;
    height: 20px;
}
.qy-Tips {
    margin: 0;
    text-align: left;
    height: 26px;
    margin-left: 16%;
}
</style>