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

<template>
    <div class="invitation">
        <div class="zhezhao" v-if="istanchaung"></div>
        <div class="Popup" v-if="istanchaung">
            <div class="shang">
                <img src="/static/img/tijiao.png" alt="">
                <img class="xs" @click="hidden" src="/static/img/assets/chahao.png" alt="">
            </div>
            <div class="zhong">
                <p>欢迎你加入U企云服，立即畅享轻松工作！</p>
                <p>新用户登录密码随后将发送短信通知请注意查收</p>
            </div>
            <div class="xia">
                <button @click="gohome">立即访问</button>
            </div>
        </div>

        <img src="/static/img/beijing.png" alt="">
        <div class="centent">
            <div>
                <img style="width:80px" src="/static/img/assets/logo@2x.png" alt="">
                <span class="inv-logo">U企云服</span>
            </div>
            <div class="inv-title">
                <p>{{enterprise.username}}</p>
                <p>
                    <span class="inv-text">邀请您加入</span>
                    <span class="inv-text">{{enterprise.companyName}}</span>
                    <!-- <span class="inv-text">SAAS服务</span> -->
                </p>
            </div>
            <input class="padding-left" type="text" ref="phone" @blur="phone" placeholder="请输入手机号">
            <div class="Verification">
                <input class="padding-left" 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 class="padding-left" type="text" ref="name" @blur="name" placeholder="请输入姓名">
            <select style="background-color: white;" class="role padding-left" ref="role" @blur="roles">
                <option value="" disabled selected hidden>岗位角色</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>深圳市优软科技有限公司</p>
        </div>
    </div>
</template>

<script>
import Session from '@/utils/session'
import { setTimeout } from 'timers';
import { log } from 'util';
    export default {
        data(){
            return {
                isobtaincode:true,
                time:60,
                isphone:false,
                isregphone:false,
                isname:false,
                isregname:false,
                regname:new RegExp(/[\@\#\$\%\&\*!！\￥0-9]/),//非法字符加数字
                isvalidCode:false,
                isrole:false,
                enterprise:[],
                arr:[],
                roleId:'',
                times:'',
                istanchaung:false,
            }
        },
        computed: {
            
        },
        created(){
            this.$store.state.isinvitation = false;
            this.browserRedirect();
        },
        mounted(){
            this.$store.state.isinvitation = false;
        },
        destroyed(){
            this.$store.state.isinvitation = true
        },
        methods:{
            browserRedirect() {
                let param = this.getUrlParam('param');
                var sUserAgent = navigator.userAgent.toLowerCase();
                var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
                var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
                var bIsMidp = sUserAgent.match(/midp/i) == "midp";
                var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
                var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
                var bIsAndroid = sUserAgent.match(/android/i) == "android";
                var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
                var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
                if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                    // 移动端访问跳转到移动端页面
                    window.location.href = 'invitation_mobile_join.html?param='+param
                } else {
                    this.param();//获取pc端页面参数
                }
            },
            //验证手机
            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(){
                this.$refs.Verification.value = '';
                if (!this.isphone) {
                    this.$message.error('手机号码不能为空');
                } else if (!this.isregphone){
                    this.$message.error('请输入正确的手机号码');
                } else {
                    let phone = this.$refs.phone.value;//手机 
                    this.$ajax({
                        url: this.$url.api+'/api/commons/share/getSmsCode'+`?mobile=${phone}`,//http://192.168.253.31:8560
                        method:'POST'
                    })
                    .then(res=>{
                        if (res.data.success) {
                            this.isobtaincode = false;
                            this.settime();
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                }
            },
            // 提交
            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({
                        message: '手机号码不能为空'
                        });
                } 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: this.$url.api+'/api/commons/share/submit',
                        method:'POST',
                        data:{
                            username:name,
                            mobile:phone,
                            companyId:this.enterprise.companyId,
                            roleId:roleid,
                            validCode:Verification,
                        },
                    })
                    .then(res=>{
                        if (res.data.success) {
                            this.istanchaung = true;
                        } else {
                            this.$message.error(res.data.message);
                        }
                    })
                }
            },
            // 跳转首页
            gohome(){
                this.$router.push({path: '/home'});
            },
            //倒计时
            settime(){
                this.times = setTimeout(()=>{
                    if (this.time == 0) {
                        this.isobtaincode = true;
                        this.time = 60;
                        clearTimeout(this.times);
                    } else {
                        this.time--;
                        this.settime();
                    }
                },1000)
            },
            //获取角色
            role(){
                let companyId = this.enterprise.companyId;
                this.$ajax({
                    url: this.$url.api+'/api/account/role/list/'+companyId,
                })
                .then(res=>{
                    if (res.data.success) {
                        this.arr = res.data.data
                    }
                })
            },
            getUrlParam(name){   
                var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)");   
                var index = window.location.href.indexOf('?');
                var r=window.location.href.substr(index+1).match(reg);   
                if  (r!=null)   return decodeURI(r[2]); 
                return   null;   
            },
            //同步获取页面参数
            param: async function () {
                let param = this.getUrlParam('param');
                let data = await this.$ajax({
                    url: this.$url.api+"/api/commons/share/valid/param?param="+param,
                    method:'POST',
                    headers:{
                        "Content-Type":"application/x-www-form-urlencoded",
                    }
                });
                if (data.data.success) {
                    this.enterprise = data.data.data;
                    this.role();//获取角色
                } else {
                    this.$router.push({path:'/failure'})
                }
            },
            //关闭弹窗
            hidden(){
                this.istanchaung = false;
            },
        }
    }
</script>

<style scoped>
.invitation > img{
    width: 100%;
}
.centent {
    width: 27rem;
    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;
    display: inline-block;
    position: relative;
    bottom: -20px;
}
.padding-left {
    padding-left: 15px; 
}
.centent > input {
    width: 100%;
    margin-bottom: 11px;
    opacity: 0.87;
    background: #FFFFFF;
    box-shadow: 0 2px 4px 0 #3C8EFF;
    font-size: 14px;
    border: 0;
    height: 40px;
    border-radius: 4px;
}
.inv-title {
    text-align: left;
    margin-top: 37px;
    margin-bottom: 20px;
}
.inv-title > p{
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: 2.25px;
    text-shadow: 0 2px 4px #1B5099;
    line-height: 30px;
}
.inv-title >p:nth-child(1) {
    /* margin-bottom: 16px; */
}
.inv-text {
    font-family: PingFangSC-Regular;
}
.login {
    background: #004CE0;
    width: 100%;
    border: 0;
    height: 40px;
    border-radius: 4px;
    color: #FFFFFF;
    letter-spacing: 1.75px;
}
.role {
    width: 100%;
    margin-bottom: 39px;
    opacity: 0.87;
    box-shadow: 0 2px 4px 0 #3C8EFF;
    font-size: 14px;
    border: 0;
    height: 40px;
    border-radius: 4px;
    appearance:none;
   -moz-appearance:none;
   -webkit-appearance:none;
   /*设置箭头*/
   background: url(/static/img/TriangleCopy.png) no-repeat scroll right center transparent;
   padding-right: 14px;
   background-position-x: 95%;
}
.Verification {
    border: 0;
    opacity: 0.87;
    background: #FFFFFF;
    box-shadow: 0 2px 4px 0 #3C8EFF;
    margin-bottom: 11px;
    height: 40px;
    line-height: 38px;
    border-radius: 4px;
}
.Verification > input {
    width: 68%;
    border: 0;
    font-size: 14px;
    outline:none;
}
.Verification > span {
    width: 30%;
    display: inline-block;
    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;
}
/* 弹窗 */
.Popup {
    width: 428px;
    height: 235px;
    background: #FFFFFF;
    border-radius: 2px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    text-align: center;
    padding: 24px;
}
.shang {
    height: 30%;
    position: relative;
}
.shang > img:nth-child(1){
    width: 124px;
    margin-top: 15px;
}
.shang > img:nth-child(2){
    position: absolute;
    top: 0px;
    right: 0px;
}
.zhong {
    height: 50%;
    line-height: 36px;
}
.zhong > p:nth-child(1) {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
    letter-spacing: 1.75px;
}
.zhong > p:nth-child(2) {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #666666;
    letter-spacing: 1.5px;
}
.xia {
    height: 20%;
}
.xia > button {
    background: #207CFF;
    border-radius: 2px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 1.75px;
    padding: 6px 16px;
    border: 0;
}
</style>