|
|
@@ -0,0 +1,320 @@
|
|
|
+<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>
|
jinsy
