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

<template>
    <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">
                        <span @click= "Preservation" class="qy-xiugai dianji" style="left: 0">保存</span>
                        <span @click= "tjquxiao" class="qy-quxiao xs">取消</span>
                    </div>
                </div>
                <div class="qy-conent">
                    <ul>
                        <li>
                            <span class="qy-biaoti"><span class="xingxing">*</span>公司名称</span>
                            <input ref="qyname" @input= "spaceName" type="text">
                            <span ref="qyno" style="color:red"></span>
                        </li>
                        <li>
                            <span class="qy-biaoti">所属行业</span>
                            <select ref="qyindustry" style="width:71%" name="selectAge" id="selectAge">   
                                <option value="贸易类">贸易类</option>   
                                <option value="制造类">制造类</option>   
                                <option value="其他">其他</option>   
                            </select>
                        </li>
                        <li style="height:60px;">
                            <span class="qy-biaoti">公司地址</span>
                            <div class="addbiaoqian">
                                <v-distpicker @province= 'qyprovince'
                                              @city= 'qycity'
                                              @area= 'qyarea'
                                >
                                </v-distpicker>
                                <input ref="address" class="qy-xiangxi" type="text" placeholder="输入企业详细地址">
                            </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>
                            <span class="qy-biaoti"><span class="xingxing">*</span>姓名</span>
                            <input @input= "yzusername" ref="name" type="text">
                            <span ref="usname" style="color:red"></span>
                        </li>
                        <li><span class="qy-biaoti">手机号</span><span>{{mytoken.account.mobile}}</span></li>
                        <li>
                            <span class="qy-biaoti">邮箱</span>
                            <input @input="email" ref="email" type="email">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import VDistpicker from 'v-distpicker'
    export default {
        data(){
            return {
                province:'',//省
                city:'',//市
                area:'',//区
                qymingzi: '',
                mytoken: JSON.parse(localStorage.getItem('app-state-session'))//本地储存的用户信息
            }
        },
        components:{
            VDistpicker
        },
        mounted(){

        },
        methods: {
            //取消添加企业
            tjquxiao(){
                document.documentElement.scrollTop = 0;
                this.$router.push({name:'company',}); 
            },
            //测试企业名称
            spaceName(){
                let qyname = this.$refs.qyname.value;//公司名字
                if(qyname == ''){
                    this.$refs.qyno.innerHTML = '企业名不能为空';
                } else {
                    this.$refs.qyno.innerHTML = '';
                    let token = this.mytoken.token;
                    this.$ajax({
                        url: this.$url.api+"/api/account/accountCenter/checkSpaceName"+`?spaceName=${qyname}`,
                        method :'get',
                        headers: {
                            "Authorization":token
                        }
                    })
                    .then(res=>{
                        // console.log(res);
                        // this.qymingzi = on;
                        // console.log(this.qymingzi)
                    })
                    .catch(err=>{
                        console.log(err);
                        this.$refs.qyno.innerHTML = '企业已注册';
                    })
                }
            },
            //验证个人姓名
            yzusername(){
                let name = this.$refs.name.value;//个人姓名
                if (name == '') {
                    this.$refs.usname.innerHTML = '姓名不能为空'
                } else {
                    this.$refs.usname.innerHTML = ''
                }
            },
            
            email(){
                let email = this.$refs.email.value;//邮箱

            },
            //保存
            Preservation(){
                let qyname = this.$refs.qyname.value;//公司名字
                let qyindustry = this.$refs.qyindustry.value;//所属行业
                let address = this.province+this.city+this.area+this.$refs.address.value;//公司详细地址
                let name = this.$refs.name.value;//个人姓名
                let email = this.$refs.email.value;//邮箱
                let mytoken = JSON.parse(localStorage.getItem('app-state-session'));
                let token = String(mytoken.token);
                let uu = mytoken.account.uu;
                let mobile = mytoken.account.mobile;//手机号
                let company = {'name':qyname,'address':address};
                let account = {'realname':name,'email':email,'mobile':mobile, 'uu':uu}
                if (name != '' && qyname != '') {
                    this.$ajax({
                        url: this.$url.api+"/api/account/accountCenter/companyAccount/save",
                        method: 'post',
                        data: {
                            companyRegDTO:company,
                            accountRegDTO:account,
                            type: 0
                        },
                        headers: {
                            "Authorization":token,
                        }
                    })
                    .then(res=>{
                        console.log("请求成功"+res)
                        document.documentElement.scrollTop = 0;
                        // this.$router.push({name:'company', params:{company:company,account:account}});
                        this.$router.push({name:'company'})
                    })
                    .catch(err=>{
                        console.log("请求失败"+err)
                    })
                } else {
                    this.$refs.tjtishi.innerHTML = '企业名称或姓名不能为空'
                    setTimeout(() => {
                        this.$refs.tjtishi.innerHTML = ''
                    }, 2000);
                }
                
            },
            //获取省
            qyprovince(sheng){
                this.province = sheng.value;
            },
            //市
            qycity(shi){
                this.city = shi.value;
            },
            //区
            qyarea(qu){
                this.area = qu.value;
            },
        }
    }
</script>

<style scoped>
.tjtishi {
    color: red;
    display: block;
    text-align: center;
    height: 20px;
}
.tj-up {
    width: 100%;
    margin-bottom: 0px;
    border-bottom: 0;
    padding-bottom: 1px;
    border-radius: 4px 4px 0 0;
}
.tj-up li {
    margin-bottom: 26px;
}
.tj-down {
    width: 100%;
    border-top: 0;
    margin-bottom: 100px;
}
.tj-down li {
    margin-bottom: 26px;
}
.tj-down div:nth-child(2) {
    margin-bottom: 100px;
}
.addbiaoqian>>>.distpicker-address-wrapper select {
    height: 30px;
}
</style>