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

<template>
    <div class="invitation">
        <img src="/static/img/beijing.png" alt="">
        <div class="centent">
            <img src="/static/img/assets/logo@2x.png" alt="">
            <p class="inv-logo">U企云服</p>
            <div class="inv-title">
                <p>{{enterprise.username}}</p>
                <p>
                    <span class="inv-text">邀请您加入</span>
                    <span>{{enterprise.companyName}}</span>
                    <span class="inv-text">SAAS服务</span>
                </p>
            </div>
            <input type="text" ref="phone" @blur="phone" placeholder="请输入手机号">
            <div class="Verification">
                <input type="text" ref="Verification" @change="validCode" placeholder="请输入验证码">
                <span v-if="isobtaincode" class="xs" @click="Obtaincode">获取验证码</span>
                <span v-if="!isobtaincode" ref="obtaincode">{{time}}</span>
            </div>
            <input type="text" ref="name" @blur="name" placeholder="请输入姓名">
            <select class="role" ref="role" @blur="roles">
                <option value="">岗位角色</option>
                <option v-for="(d,i) in arr" :key="i" :value=d.id>{{d.name}}</option>
            </select>
            <button class="login" @click="login">提交</button>
        </div>
        <div class="bottom">
            <p>U企云服|电子行业企业管理云端解决方案</p>
            <p>版权所有：深圳市优软科技有限公司 Copyright @ 2017 All Rights Reserved</p>
        </div>
    </div>
</template>

<script>
import Session from '@/utils/session'
import { setTimeout } from 'timers';
    export default {
        data(){
            return {
                isobtaincode:true,
                time:60,
                isphone:false,
                isregphone:false,
                isname:false,
                isregname:false,
                regname:new RegExp(/[\@\#\$\%\&\*!！\￥0-9a-zA-Z]/),//非法字符加数字加中文
                isvalidCode:false,
                isrole:false,
                enterprise:[],
                arr:[],
                roleId:''
            }
        },
        created(){
            this.$store.state.isinvitation = false;
            this.param();//获取页面参数
        },
        mounted(){
            //获取角色
            setTimeout(()=>{
                this.role()
            },800)
        },
        destroyed(){
            this.$store.state.isinvitation = true
        },
        methods:{
            //验证手机
            phone(){
                let phone = this.$refs.phone.value;//手机 
                let reg = new RegExp('^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\\d{8}$');
                if (phone == '') {
                    this.$message.error('手机号码不能为空');
                    this.isphone = false;
                } else {
                    this.isphone = true;
                    if (!reg.test(phone)) {
                        this.$message.error('请输入正确的手机号码');
                        this.isregphone = false;
                    } else {
                        this.isregphone = true;
                    }
                }
            },
            //验证姓名
            name(){
                let name = this.$refs.name.value;
                if (name == '') {
                    this.$message.error('姓名不能为空')
                    this.isname = false;
                } else {
                    this.isname = true;
                    if (this.regname.test(name)) {
                        this.$message.error('姓名不能包含符号、数字、英文等非法字符');
                        this.isregname = false
                    } else {
                        this.isregname = true
                    }
                }
            },
            //验证码
            validCode(){
                let Verification = this.$refs.Verification.value;//验证码
                if (Verification == '') {
                    this.$message.error('请输入验证码')
                    this.isvalidCode = false;
                } else {
                    this.isvalidCode = true;
                }
            },
            // 验证角色
            roles(){
                let roleid = this.$refs.role.value;//角色
                if (roleid == '') {
                    this.$message.error('请选择岗位角色');
                    this.isrole = false;
                } else {
                    this.isrole = true;
                }
            },
            // 获取验证码
            Obtaincode(){
                if (!this.isphone) {
                    this.$message.error('手机号码不能为空');
                } else if (!this.isregphone){
                    this.$message.error('请输入正确的手机号码');
                } else {
                    let phone = this.$refs.phone.value;//手机 
                    this.$ajax({
                        url:'http://192.168.253.31:8560/api/commons/share/getSmsCode',
                        method:'POST',
                        data:{
                            mobile:phone
                        },
                        headers:{
                            "Authorization":Session.getToken(),
                        }
                    })
                    .then(res=>{
                        console.log(res)
                        if (res.data.success) {
                            this.isobtaincode = false;
                            this.settime()
                        }
                    })
                }
            },
            // 提交
            login(){
                let phone = this.$refs.phone.value;//手机
                let Verification = this.$refs.Verification.value;//验证码
                let name = this.$refs.name.value;//姓名
                let roleid = this.$refs.role.value;//角色
                if (!this.isphone) {
                    this.$message.error('手机号码不能为空');
                } else if (!this.isregphone){
                    this.$message.error('请输入正确的手机号码');
                } else if (!this.isname) {
                    this.$message.error('姓名不能为空')
                } else if (!this.isregname) {
                    this.$message.error("姓名不能包含符号、数字、英文等非法字符")
                } else if(!this.isvalidCode){
                    this.$message.error("请输入验证码")
                } else if(!this.isrole){
                    this.$message.error('请选择岗位角色');
                } else {
                    this.$ajax({
                        url:'http://192.168.253.31:8560/api/commons/share/submit',
                        method:'POST',
                        data:{
                            username:name,
                            mobile:phone,
                            companyId:this.enterprise.companyId,
                            roleId:roleid,
                            validCode:Verification,
                        }
                    })
                }
            },
            //倒计时
            settime(){
                if (this.time == 0) {
                    this.isobtaincode = true;
                    clearTimeout(times)
                } else {
                    this.time--
                }
                let times = setTimeout(()=>{
                    this.settime(this.time)
                },1000)
            },
            //获取角色
            role(){
                let companyId = this.enterprise.companyId;
                this.$ajax({
                    url:'http://192.168.253.31:8560/api/account/role/list'+`?id=${companyId}`,
                    headers:{
                        "Authorization":Session.getToken(),
                    }
                })
                .then(res=>{
                    if (res.data.success) {
                        this.arr = res.data.data
                    }
                })
            },
            //获取页面参数
            param(){
                let param = "dXNlcm5hbWU96ZmI54KcJmNvbXBhbnlJZD0yNjImdGltZXN0bWFwPTE1NDUyODAyODU1MjQmZGVsYXk9MSZjb21wYW55TmFtZT3pmYjngpw."
                this.$ajax({
                    url:"http://192.168.253.31:8560/api/commons/share/valid/param"+`?param=${param}`,
                    method:'POST',
                    headers:{
                        "Authorization":Session.getToken(),
                    }
                })
                .then(res=>{
                    if (res.data.success) {
                        this.enterprise = res.data.data;
                    }
                })
            },
        }
    }
</script>

<style scoped>
.invitation > img{
    width: 100%;
}
.centent {
    width: 352px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center
}
.inv-logo {
    font-family: PingFangSC-Medium;
    font-size: 26px;
    color: #FFFFFF;
    letter-spacing: 3.25px;
}

.centent > input {
    width: 100%;
    margin-bottom: 16px;
    opacity: 0.95;
    background: #FFFFFF;
    box-shadow: 0 2px 4px 0 #3C8EFF;
    font-size: 15px;
    padding: 3px 0px 3px 5px;
    border: 0;
}
.inv-title {
    text-align: left;
    margin-top: 37px;
    margin-bottom: 40px;
}
.inv-title > p{
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: 2.25px;
    text-shadow: 0 2px 4px #1B5099;
}
.inv-title >p:nth-child(1) {
    margin-bottom: 16px;
}
.inv-text {
    font-family: PingFangSC-Regular;
}
.login {
    background: #004CE0;
    width: 100%;
    border: 0;
    height: 36px;
}
.role {
    width: 100%;
    margin-bottom: 32px;
    padding: 3px 0px;
}
.Verification {
    border: 0;
    opacity: 0.95;
    background: #FFFFFF;
    box-shadow: 0 2px 4px 0 #3C8EFF;
    margin-bottom: 16px;
}
.Verification > input {
    width: 68%;
    border: 0;
    font-size: 15px;
    padding: 3px 0px 3px 5px;
}
.Verification > span {
    width: 30%;
    display: inline-block;
    border-left: 1px solid #2F86FE;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #2F86FE;
    letter-spacing: 1.5px;
}
.bottom {
    height: 100px;
    background: #FAFCFF;
    text-align: center;
    padding: 27px 0px;
}
.bottom > p{
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #666666;
    letter-spacing: 2px;
}
</style>