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

<template>
    <div>
        <span class="Tips" ref="Tips"></span>
        <!-- 企业详细信息 -->
        <div v-if="modify">
            <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="ismodifyId" @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 style="width:2em;display: inline-block;"></span>名</span><span>{{content.admin}}</span></li>
                        <li><span class="qy-biaoti">手机号</span><span>{{content.adminMobile}}</span></li>
                        <li><span class="qy-biaoti">邮<span style="width:2em;display: inline-block;"></span>箱</span><span>{{content.adminEmail}}</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" style="position: absolute;top: 0;right: 20px;margin-top: 0;">
                        <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 @change="industry" ref="qyindustry" class="industry border" name="selectAge" id="selectAge" style="margin-left: -10px;padding-left: 5px;">   
                                <option value="" disabled selected hidden>请选择所属行业</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 style="width:2em;display: inline-block;"></span>名</span><span>{{content.admin}}</span></li>
                        <li><span class="qy-biaoti">手机号</span><span>{{content.adminMobile}}</span></li>
                        <li>
                            <span class="qy-biaoti">邮<span style="width:2em;display: inline-block;"></span>箱</span>
                            <input @blur="email" @focus="heidemail" ref="email" type="text" value="" :class= "{showborder:isemail}" style="margin-left: -10px;padding-left: 5px;">
                            <div v-show="isheidemail" class="qy-Tips"><span style="color:red" v-html="Email"></span></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Session from '@/utils/session'
    export default {
        data(){
            return {
                modify:true,
                content: JSON.parse(window.sessionStorage.getItem("content")),
                Email: '',
                mytoken: Session.get(),//本地储存的用户信息
                isId: false,
                isemail: true,//正则邮箱
                ismodifyId: false,
                isheidemail:false,
            }
        },
        mounted(){
            //不是管理员隐藏修改按钮
            if (this.content.adminId == this.mytoken.account.id) {
                this.ismodifyId = true;
            } else {
                this.ismodifyId = 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;
                        this.$refs.qyindustry.style.border = '1px solid #1E88F5'
                    }
                };
                let email = this.$refs.email;
                if (this.content.adminEmail) {
                    email.value = this.content.adminEmail;
                }
            },
            // 行业
            industry(){
                this.$refs.qyindustry.style.border = '1px solid #1E88F5'
            },
            //修改企业信息
            xiugaiqiye(){
                document.documentElement.scrollTop = 0;
                this.modify = false;
                setTimeout(()=>{
                    this.selects()
                },10)
            },
            email(){ //验证邮箱
                this.isheidemail = true;
                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 = '<img style="width:14px" src="/static/img/warning.png" alt=""> 请填写正确的邮箱'
                        this.isemail = false
                    } else {
                        this.Email = '<img style="width:14px" src="/static/img/ok.png" alt="">'
                        this.isemail = true
                    }
                }
            },
            //邮箱提示显示
            heidemail(){
                this.isheidemail = false;
            },
            // 取消修改
            quxiaoxiugai(){
                document.documentElement.scrollTop = 0;
                this.modify = true;
            },
            // 保存修改
            baocunxiugai(){
                let qyindustry = this.$refs.qyindustry.value;//所属行业
                if (this.isemail) {
                    let email = this.$refs.email.value;
                    let qyname = this.content.name;//公司名字
                    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.41:8560
                        method: 'post',
                        data: {
                            companyRegDTO:company,
                            accountRegDTO:account,
                        },
                        headers: {
                            "Authorization":this.mytoken.token,
                        }
                    })
                    .then(res=>{
                        if (res.data.success) {
                            document.documentElement.scrollTop = 0;
                            this.modify = true;
                            let session = Session.get();
                            session.account.email = email;
                            Session.set(session);
                            this.content.type = qyindustry;
                            this.content.adminEmail = email
                        };
                    })
                    .catch(err=>{
                        // console.log("请求失败",err)
                    })
                } else {
                    this.$message.error('请填写正确的邮箱');
                    // this.isTipsmail = true;
                }
            },
            //返回
            gobick(){
                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;
    display: inline-block;
    position: absolute;
    margin-left: 10px;
}
</style>