EnterpriseRegistration.vue 38 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022
  1. <template>
  2. <div class="register">
  3. <div class="container">
  4. <div class="content">
  5. <div class="content-top">
  6. <h3>企业注册</h3>
  7. <a class="go" @click="goRegister"><i class="fa fa-long-arrow-right"></i>个人注册</a>
  8. </div>
  9. <div v-show="goNextStep">
  10. <el-form :model="enterprise" :rules="rules" ref="enterprise" label-width="100px" class="demo-ruleForm">
  11. <el-form-item prop="mobile">
  12. <el-input v-model="enterprise.mobile" placeholder="手机号码"></el-input>
  13. <span class="tip" v-show="showMsgTip">一个手机可注册多个企业</span>
  14. </el-form-item>
  15. <el-form-item prop="code">
  16. <el-input type="text" v-model="enterprise.code"
  17. v-bind:class="{ active: codeErrorChecked }"
  18. auto-complete="off"
  19. class="msg"
  20. placeholder="短信验证码"></el-input>
  21. <el-button type="primary" class="code"
  22. v-show="sendEnterpriseCode"
  23. @click="getCheckCode"
  24. :disabled="getCodeBtnIsDisabled">获取验证码</el-button>
  25. <el-button type="primary" v-show="!sendEnterpriseCode" class="code code-send">已发送({{enterprise_time}}s)</el-button>
  26. <span v-show="codeErrorChecked" class="codeError-tip">{{codeErrorMsg}}</span>
  27. </el-form-item>
  28. <el-form-item>
  29. <a class="btn finish"
  30. @click="checkPhone">下一步</a>
  31. </el-form-item>
  32. <el-form-item>
  33. <el-checkbox name="type" v-model="checked" @click="checkboxIsChecked"></el-checkbox>
  34. <span class="agree">我已阅读并同意 <a href="/common/agreement">《优软云服务条款》</a></span>
  35. </el-form-item>
  36. </el-form>
  37. </div>
  38. <div v-show="!goNextStep">
  39. <el-form :model="enterprise1" :rules="rules1" ref="enterprise1" label-width="100px" class="demo-ruleForm">
  40. <el-form-item prop="spaceName">
  41. <el-input type="text"
  42. v-model="enterprise1.spaceName"
  43. v-bind:class="{ active: isSpaceNameExist }"
  44. auto-complete="off"
  45. placeholder="企业名称"
  46. ></el-input>
  47. <span class="tip exist" v-show="isSpaceNameExist">
  48. {{spaceNameExitMsg}}
  49. <!--<i class="fa fa-question-circle" aria-hidden="true"-->
  50. <!--v-show="spaceNameExitMsg != '出现异常'"-->
  51. <!--@mouseenter='showPopTip =true'-->
  52. <!--@mouseleave='showPopTip = false'></i>-->
  53. </span>
  54. <!--<div class="pop-tip" @mouseenter='showPopTip =true'-->
  55. <!--@mouseleave='showPopTip = false'> <span class='pop-title' v-show="showPopTip">如果您所属企业的管理员已离职或不再使用优软云,请 <a href="/appeals/changeManagerAppeal">更换管理员</a> </span>-->
  56. <!--</div>-->
  57. </el-form-item>
  58. <el-form-item prop="businessCode">
  59. <el-input type="text"
  60. v-model="enterprise1.businessCode"
  61. v-bind:class="{ active: isBusinessCodeExist }"
  62. auto-complete="off"
  63. placeholder="营业执照号"></el-input>
  64. <span class="tip exist" v-show="isBusinessCodeExist">{{businessCodeExitMsg}}。<a href="https://www.ubtob.com/contact">仍有问题?</a></span>
  65. </el-form-item>
  66. <el-form-item prop="vipName" v-if="!isHasRegister">
  67. <el-input type="text" v-model="enterprise1.vipName" auto-complete="off" placeholder="管理员姓名"></el-input>
  68. </el-form-item>
  69. <el-form-item prop="password" v-if="!isHasRegister">
  70. <el-input type="password" v-model="enterprise1.password" auto-complete="new-password" placeholder="登录密码"></el-input>
  71. <div class="pwd sm" v-show="showMsgTip1">密码强度 <em></em><em></em><em></em><span>弱</span></div>
  72. <div class="pwd md" v-show="showMsgTip2">密码强度 <em></em><em></em><em></em><span>中</span></div>
  73. <div class="pwd lar" v-show="showMsgTip3">密码强度 <em></em><em></em><em></em><span>强</span></div>
  74. <div class="pwd low" v-show="showMsgTip4">密码强度 <em></em><em></em><em></em></div>
  75. </el-form-item>
  76. <el-form-item prop="password" v-if="isHasRegister">
  77. <el-input type="password"
  78. v-model="enterprise1.password"
  79. auto-complete="new-password"
  80. placeholder="密码确认"
  81. v-bind:class="{ correct: passwordChecked }"></el-input>
  82. <span class="sure" v-if="isHasRegister" v-show="phoneIsRegisterTip">该手机号已有优软账号,请输入原账号的登录密码进行校验确认</span>
  83. </el-form-item>
  84. <el-form-item prop="confirm" v-if="!isHasRegister">
  85. <el-input type="password"
  86. auto-complete="new-password"
  87. placeholder="密码确认"
  88. v-bind:class="{active: showPasswordError}"
  89. v-model="enterprise1.confirm"></el-input>
  90. <span class="tip passwordError" v-show="showPasswordError">两次输入密码不一致</span>
  91. </el-form-item>
  92. <el-form-item prop="email" v-if="!isHasEmail">
  93. <el-input type="text"
  94. v-model="enterprise1.email"
  95. auto-complete="off"
  96. placeholder="联系邮箱"
  97. v-bind:class="{active: emailHasRegister}"></el-input>
  98. <span class="codeError-tip" v-if="emailHasRegister">该邮箱已被注册</span>
  99. </el-form-item>
  100. <a class="btn finish" @click="sureRegister">确认注册</a>
  101. </el-form-item>
  102. <el-form-item>
  103. <el-checkbox name="type" v-model="checked" @click="checkboxIsChecked"></el-checkbox>
  104. <span class="agree">我已阅读并同意 <a href="/common/agreement">《优软云服务条款》</a></span>
  105. </el-form-item>
  106. </el-form>
  107. </div>
  108. </div>
  109. <div class="login">已有账号?<a :href="returnLogin">立即登录</a></div>
  110. <loading v-show="isShowLoading"/>
  111. </div>
  112. <!--尾部-->
  113. <div v-html="loginStyle.footUrl" class="footer"></div>
  114. </div>
  115. </template>
  116. <script>
  117. import Loading from '~components/common/loading/Loading.vue'
  118. export default {
  119. name: 'EnterpriseRegistration',
  120. components: {
  121. Loading
  122. },
  123. data () {
  124. // 企业注册第一步
  125. var validateMobile = (rule, value, callback) => {
  126. if (value === '') {
  127. callback(new Error('请填写正确的手机号'))
  128. this.showMsgTip = false
  129. this.getCodeBtnIsDisabled = true
  130. this.mobileChecked = false
  131. } else {
  132. if (this.enterprise.mobile !== '') {
  133. var reg = /^1[0-9]{10}$/
  134. if (!reg.test(value)) {
  135. callback(new Error('请填写正确的手机号'))
  136. this.showMsgTip = false
  137. this.getCodeBtnIsDisabled = true
  138. this.mobileChecked = false
  139. } else {
  140. this.getCodeBtnIsDisabled = false
  141. this.showMsgTip = false
  142. this.mobileChecked = true
  143. }
  144. }
  145. callback()
  146. }
  147. }
  148. var validateCode = (rule, value, callback) => {
  149. if (value === '') {
  150. callback(new Error('请填写正确的验证码'))
  151. this.codeErrorChecked = false
  152. this.codeChecked = false
  153. } else {
  154. if (this.enterprise.mobile === '') {
  155. callback(new Error('请先填写正确的手机号'))
  156. } else {
  157. if (this.token) {
  158. if (this.enterprise.code.length === 6) {
  159. let param = new FormData()
  160. param.append('mobile', this.enterprise.mobile)
  161. param.append('code', this.enterprise.code)
  162. param.append('token', this.token)
  163. let config = {
  164. headers: {'Content-Type': 'multipart/form-data'}
  165. }
  166. this.$http.post(`/sso/userspace/register/checkCode`, param, config)
  167. .then(response => {
  168. if (response.data.success) {
  169. this.codeChecked = true
  170. this.codeErrorChecked = false
  171. } else {
  172. this.codeErrorChecked = true
  173. this.codeChecked = false
  174. return Promise.reject(response.data)
  175. }
  176. }).catch(err => {
  177. this.codeErrorChecked = true
  178. this.codeErrorMsg = err.errMsg
  179. })
  180. } else {
  181. callback(new Error('请输入正确的验证码'))
  182. this.codeChecked = false
  183. this.codeErrorChecked = false
  184. }
  185. } else {
  186. callback(new Error('请先获取验证码'))
  187. this.codeChecked = false
  188. this.codeErrorChecked = false
  189. }
  190. }
  191. callback()
  192. }
  193. }
  194. var validateCodeIsEmpty = (rule, value, callback) => {
  195. if (value === '') {
  196. callback(new Error('请填写正确的验证码'))
  197. this.codeErrorChecked = false
  198. this.codeChecked = false
  199. } else {
  200. if (this.enterprise.mobile === '') {
  201. callback(new Error('请先填写正确的手机号'))
  202. } else {
  203. if (this.token) {
  204. if (this.enterprise.code.length === 6) {
  205. let param = new FormData()
  206. param.append('mobile', this.enterprise.mobile)
  207. param.append('code', this.enterprise.code)
  208. param.append('token', this.token)
  209. let config = {
  210. headers: {'Content-Type': 'multipart/form-data'}
  211. }
  212. this.$http.post(`/sso/userspace/register/checkCode`, param, config)
  213. .then(response => {
  214. if (response.data.success) {
  215. this.codeChecked = true
  216. this.codeErrorChecked = false
  217. } else {
  218. this.codeErrorChecked = true
  219. this.codeChecked = false
  220. return Promise.reject(response.data)
  221. }
  222. }).catch(err => {
  223. this.codeErrorChecked = true
  224. this.codeErrorMsg = err.errMsg
  225. })
  226. } else {
  227. callback(new Error('请输入正确的验证码'))
  228. this.codeChecked = false
  229. this.codeErrorChecked = false
  230. }
  231. } else {
  232. callback(new Error('请先获取验证码'))
  233. this.codeChecked = false
  234. this.codeErrorChecked = false
  235. }
  236. }
  237. callback()
  238. }
  239. }
  240. // 企业注册第二步
  241. var validateSpaceName = (rule, value, callback) => {
  242. if (value === '') {
  243. callback(new Error('请填写正确的企业名称'))
  244. this.spaceNameChecked = false
  245. this.isSpaceNameExist = false
  246. } else {
  247. if (this.enterprise1.spaceName !== '') {
  248. if (value.length > 20) {
  249. callback(new Error('输入长度过长,20个字符以内'))
  250. this.spaceNameChecked = false
  251. } else {
  252. this.$http.get(`/api/userspace/checkSpaceName`, {params: {spaceName: this.enterprise1.spaceName}})
  253. .then(response => {
  254. if (response.data.success) {
  255. this.spaceNameChecked = true
  256. this.isSpaceNameExist = false
  257. } else {
  258. this.spaceNameChecked = false
  259. this.isSpaceNameExist = true
  260. return Promise.reject(response.data)
  261. }
  262. }).catch(err => {
  263. this.spaceNameExitMsg = err.errMsg
  264. // this.$message.error(err.errMsg)
  265. })
  266. }
  267. }
  268. callback()
  269. }
  270. }
  271. var validateBusinessCode = (rule, value, callback) => {
  272. if (value === '') {
  273. callback(new Error('请填写正确的营业执照号'))
  274. this.businessCodeChecked = false
  275. this.isBusinessCodeExist = false
  276. } else {
  277. if (this.enterprise1.businessCode !== '') {
  278. let reg = /^[A-Za-z0-9]+$/
  279. if (reg.test(value)) {
  280. if (value.length > 20) {
  281. callback(new Error('输入长度过长,20个字符以内'))
  282. this.businessCodeChecked = false
  283. this.isBusinessCodeExist = false
  284. } else {
  285. this.$http.get(`/api/userspace/checkBusinessCode`, {params: {businessCode: this.enterprise1.businessCode}})
  286. .then(response => {
  287. if (response.data.success) {
  288. this.businessCodeChecked = true
  289. this.isBusinessCodeExist = false
  290. } else {
  291. this.businessCodeChecked = false
  292. this.isBusinessCodeExist = true
  293. return Promise.reject(response.data)
  294. }
  295. }).catch(err => {
  296. this.businessCodeExitMsg = err.errMsg
  297. // this.$message.error(err.errMsg)
  298. })
  299. }
  300. } else {
  301. callback(new Error('请填写正确的营业执照号'))
  302. this.businessCodeChecked = false
  303. this.isBusinessCodeExist = false
  304. }
  305. }
  306. callback()
  307. }
  308. }
  309. var validateVipName = (rule, value, callback) => {
  310. if (this.isHasRegister) {
  311. this.vipNameChecked = true
  312. } else {
  313. if (value === '') {
  314. callback(new Error('请填写正确的管理员姓名'))
  315. this.vipNameChecked = false
  316. } else {
  317. if (this.enterprise1.vipName !== '') {
  318. if (value.length > 20) {
  319. callback(new Error('输入长度过长,20个字符以内'))
  320. this.vipNameChecked = false
  321. } else {
  322. this.vipNameChecked = true
  323. }
  324. }
  325. callback()
  326. }
  327. }
  328. }
  329. var validatePassword = (rule, value, callback) => {
  330. if (this.enterprise1.password !== '') {
  331. if (value.length <= 20 && value.length >= 8) {
  332. var reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
  333. var reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
  334. if (reg1.test(value)) {
  335. // callback(new Error('密码强度强'))
  336. this.showMsgTip3 = true
  337. this.showMsgTip2 = false
  338. this.showMsgTip1 = false
  339. this.showMsgTip4 = false
  340. this.passwordChecked = true
  341. } else if (reg2.test(value)) {
  342. // callback(new Error('密码强度中'))
  343. this.showMsgTip2 = true
  344. this.showMsgTip3 = false
  345. this.showMsgTip1 = false
  346. this.showMsgTip4 = false
  347. this.passwordChecked = true
  348. } else {
  349. this.showMsgTip1 = true
  350. this.showMsgTip3 = false
  351. this.showMsgTip2 = false
  352. this.showMsgTip4 = false
  353. this.passwordChecked = false
  354. }
  355. } else {
  356. this.showMsgTip3 = false
  357. this.showMsgTip2 = false
  358. this.showMsgTip1 = false
  359. this.showMsgTip4 = true
  360. this.passwordChecked = false
  361. }
  362. }
  363. callback()
  364. }
  365. var validatePasswordTip = (rule, value, callback) => {
  366. if (this.isHasRegister) {
  367. if (value === '') {
  368. callback(new Error('请输入密码'))
  369. this.passwordChecked = false
  370. this.phoneIsRegisterTip = false
  371. } else {
  372. this.passwordChecked = true
  373. }
  374. } else {
  375. if (value === '') {
  376. callback(new Error('请输入密码'))
  377. this.passwordChecked = false
  378. } else {
  379. if (this.enterprise1.password !== '') {
  380. if (value.length <= 20 && value.length >= 8) {
  381. var reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
  382. var reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
  383. if (reg1.test(value)) {
  384. this.passwordChecked = true
  385. } else if (reg2.test(value)) {
  386. this.passwordChecked = true
  387. } else {
  388. callback(new Error('密码须为8-20字符的英文、数字混合'))
  389. this.passwordChecked = false
  390. }
  391. } else {
  392. callback(new Error('密码须为8-20字符的英文、数字混合'))
  393. this.passwordChecked = false
  394. }
  395. if (this.enterprise1.confirm !== '') {
  396. if (value !== this.enterprise1.confirm) {
  397. this.showPasswordError = true
  398. // callback(new Error('两次输入密码不一致!'))
  399. this.passwordConfirmChecked = false
  400. } else {
  401. this.passwordConfirmChecked = true
  402. this.showPasswordError = false
  403. callback()
  404. }
  405. }
  406. }
  407. callback()
  408. }
  409. }
  410. }
  411. var validateConfirm = (rule, value, callback) => {
  412. if (this.isHasRegister) {
  413. this.passwordConfirmChecked = true
  414. } else {
  415. if (value === '') {
  416. callback(new Error('请再次输入密码'))
  417. this.passwordConfirmChecked = false
  418. this.showPasswordError = false
  419. } else if (value !== this.enterprise1.password) {
  420. // callback(new Error('两次输入密码不一致!'))
  421. this.showPasswordError = true
  422. this.passwordConfirmChecked = false
  423. } else {
  424. this.passwordConfirmChecked = true
  425. this.showPasswordError = false
  426. }
  427. }
  428. callback()
  429. }
  430. var validateEmail = (rule, value, callback) => {
  431. if (this.isHasEmail) {
  432. this.emailChecked = true
  433. this.emailHasRegister = false
  434. } else {
  435. if (this.enterprise1.email) {
  436. var reg = /^([\w-])+(\.\w+)*@([\w-])+((\.\w{2,3}){1,3})$/
  437. if (!reg.test(value)) {
  438. callback(new Error('请输入正确的邮箱地址格式'))
  439. this.emailChecked = false
  440. this.emailHasRegister = false
  441. } else {
  442. this.$http.get(`/api/user/checkEmail`, {params: {email: this.enterprise1.email}})
  443. .then(response => {
  444. if (response.data.hasRegister) {
  445. this.emailChecked = false
  446. this.emailHasRegister = true
  447. } else {
  448. this.emailChecked = true
  449. this.emailHasRegister = false
  450. return Promise.reject(response.data)
  451. }
  452. }).catch(err => {
  453. this.$message.error(err.errMsg)
  454. })
  455. }
  456. callback()
  457. } else {
  458. this.emailChecked = true
  459. this.emailHasRegister = false
  460. }
  461. }
  462. }
  463. return {
  464. // 企业注册第一步
  465. enterprise: {
  466. mobile: '',
  467. code: ''
  468. },
  469. // 企业注册第二步
  470. enterprise1: {
  471. spaceName: '',
  472. businessCode: '',
  473. vipName: '',
  474. password: '',
  475. confirm: '',
  476. email: ''
  477. },
  478. businessCodeExitMsg: '',
  479. spaceNameExitMsg: '',
  480. showPopTip: false,
  481. showPasswordError: false,
  482. isShowLoading: false,
  483. codeErrorMsg: '',
  484. checked: true,
  485. getCodeBtnIsDisabled: true,
  486. mobileChecked: false,
  487. codeChecked: false,
  488. showMsgTip: true,
  489. sendEnterpriseCode: true,
  490. codeErrorChecked: false,
  491. enterprise_time: 0,
  492. showMsgTip1: false,
  493. showMsgTip2: false,
  494. showMsgTip3: false,
  495. showMsgTip4: false,
  496. spaceNameChecked: false,
  497. businessCodeChecked: false,
  498. vipNameChecked: false,
  499. passwordChecked: false,
  500. passwordConfirmChecked: false,
  501. emailChecked: true,
  502. isHasRegister: false,
  503. isHasEmail: false,
  504. goNextStep: true,
  505. phoneIsRegisterTip: true,
  506. isSpaceNameExist: false,
  507. isBusinessCodeExist: false,
  508. emailHasRegister: false,
  509. queryLink: '',
  510. appId: '',
  511. returnLogin: '',
  512. // 企业注册第一步
  513. rules: {
  514. mobile: [
  515. {validator: validateMobile, trigger: 'blur'}
  516. ],
  517. code: [
  518. {validator: validateCode, trigger: 'change'},
  519. {validator: validateCodeIsEmpty, trigger: 'blur'}
  520. ]
  521. },
  522. // 企业注册第二步
  523. rules1: {
  524. spaceName: [
  525. {validator: validateSpaceName, trigger: 'blur'}
  526. ],
  527. businessCode: [
  528. {validator: validateBusinessCode, trigger: 'blur'}
  529. ],
  530. vipName: [
  531. {validator: validateVipName, trigger: 'blur'}
  532. ],
  533. password: [
  534. {validator: validatePassword, trigger: 'change'},
  535. {validator: validatePasswordTip, trigger: 'blur'}
  536. ],
  537. confirm: [
  538. {validator: validateConfirm, trigger: 'blur'}
  539. ],
  540. email: [
  541. {validator: validateEmail, trigger: 'change'}
  542. ]
  543. }
  544. }
  545. },
  546. computed: {
  547. loginStyle () {
  548. console.log('44444', this.$store.state.login.loginStyle.data)
  549. return this.$store.state.login.loginStyle.data.content
  550. }
  551. },
  552. mounted () {
  553. // 获取链接
  554. this.$nextTick(() => {
  555. this.getUrl()
  556. })
  557. },
  558. methods: {
  559. // 获取链接
  560. getUrl () {
  561. var url = window.location.search
  562. var origin = window.location.origin
  563. this.returnLogin = origin + url
  564. var request = {}
  565. if (url.indexOf('?' !== -1)) {
  566. var str = url.substr(1)
  567. var strs = str.split('&')
  568. this.queryLink = str
  569. for (var i = 0; i < strs.length; i++) {
  570. request[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
  571. }
  572. }
  573. this.appId = request['appId'] || ''
  574. },
  575. // 注册
  576. goRegister () {
  577. console.log(this.queryLink)
  578. window.location.href = `/register/personalRegistration?${this.queryLink}`
  579. },
  580. // 我同意是否被选中
  581. checkboxIsChecked () {
  582. this.checked = !this.checked
  583. },
  584. // 获取校验码
  585. getCheckCode () {
  586. this.isShowLoading = true
  587. this.$http.get(`/sso/userspace/register/checkCode`, {params: {mobile: this.enterprise.mobile}})
  588. .then(response => {
  589. this.isShowLoading = false
  590. if (response.data) {
  591. this.token = response.data.token
  592. if (this.token !== '') {
  593. this.$message({
  594. message: '验证码已经发送到您的手机,请注意查收',
  595. type: 'success'
  596. })
  597. this.sendEnterpriseCode = false
  598. this.enterprise_time = 60
  599. var enterpriseTime = setInterval(() => {
  600. this.enterprise_time--
  601. if (this.enterprise_time <= 0) {
  602. this.sendEnterpriseCode = true
  603. clearInterval(enterpriseTime)
  604. }
  605. }, 1000)
  606. }
  607. } else {
  608. return Promise.reject(response.data)
  609. }
  610. }).catch(err => {
  611. this.isShowLoading = false
  612. this.$message.error(err.errMsg)
  613. })
  614. },
  615. // 验证手机
  616. checkPhone () {
  617. if (this.mobileChecked && this.codeChecked && this.checked) {
  618. this.isShowLoading = true
  619. let param = new FormData()
  620. param.append('mobile', this.enterprise.mobile)
  621. param.append('code', this.enterprise.code)
  622. param.append('appId', this.appId)
  623. param.append('token', this.token)
  624. let config = {
  625. headers: {'Content-Type': 'multipart/form-data'}
  626. }
  627. this.$http.post('/sso/userspace/register/checkAdminTel', param, config)
  628. .then(response => {
  629. this.isShowLoading = false
  630. if (response.data.success) {
  631. this.goNextStep = false
  632. if (response.data.content.hasRegister) {
  633. this.isHasRegister = true
  634. if (response.data.content.hasEmail) {
  635. this.isHasEmail = true
  636. } else {
  637. this.isHasEmail = false
  638. }
  639. } else {
  640. this.isHasRegister = false
  641. this.isHasEmail = false
  642. }
  643. } else {
  644. this.goNextStep = true
  645. return Promise.reject(response.data)
  646. }
  647. }).catch(err => {
  648. this.$message.error(err.errMsg)
  649. this.isShowLoading = false
  650. this.enterprise_time = 0
  651. })
  652. } else {
  653. if (!this.enterprise.mobile) {
  654. this.$message.error('手机号不能为空')
  655. } else if (!this.mobileChecked) {
  656. this.$message.error('手机号输入有误,请按提示重新输入')
  657. } else if (!this.token) {
  658. this.$message.error('请先获取验证码')
  659. } else if (!this.enterprise.code) {
  660. this.$message.error('验证码不能为空')
  661. } else if (!this.codeChecked) {
  662. this.$message.error('验证码输入有误,请按提示重新输入')
  663. } else if (!this.checked) {
  664. this.$message.error('您对阅读条款未做勾选')
  665. }
  666. }
  667. },
  668. // 确认注册
  669. sureRegister () {
  670. if (!this.isHasRegister) {
  671. if (this.spaceNameChecked && this.businessCodeChecked && this.vipNameChecked && this.passwordChecked && this.passwordConfirmChecked && this.emailChecked && this.checked) {
  672. this.submitRegister()
  673. } else {
  674. if (!this.enterprise1.spaceName) {
  675. this.$message.error('企业名不能为空')
  676. } else if (!this.spaceNameChecked) {
  677. this.$message.error('企业名称输入有误,请按提示重新输入')
  678. } else if (!this.enterprise1.businessCode) {
  679. this.$message.error('营业执照号不能为空')
  680. } else if (!this.businessCodeChecked) {
  681. this.$message.error('营业执照号输入有误,请按提示重新输入')
  682. } else if (!this.enterprise1.vipName) {
  683. this.$message.error('管理员姓名不能为空')
  684. } else if (!this.vipNameChecked) {
  685. this.$message.error('管理员姓名输入有误,请按提示重新输入')
  686. } else if (!this.enterprise1.password) {
  687. this.$message.error('密码不能为空')
  688. } else if (!this.passwordChecked) {
  689. this.$message.error('密码输入有误,请按提示重新输入')
  690. } else if (!this.enterprise1.confirm) {
  691. this.$message.error('请再次输入密码')
  692. } else if (this.enterprise1.password !== this.enterprise1.confirm) {
  693. this.$message.error('请确认两次填写密码是否一致')
  694. } else if (this.enterprise1.email && !this.emailChecked) {
  695. this.$message.error('邮箱输入有误,请按提示重新输入')
  696. } else if (!this.checked) {
  697. this.$message.error('您对阅读条款未做勾选')
  698. }
  699. }
  700. } else {
  701. if (this.isHasEmail) {
  702. if (this.spaceNameChecked && this.businessCodeChecked && this.passwordChecked && this.checked) {
  703. this.submitRegister()
  704. } else {
  705. if (!this.enterprise1.spaceName) {
  706. this.$message.error('企业名不能为空')
  707. } else if (!this.spaceNameChecked) {
  708. this.$message.error('企业名称输入有误,请按提示重新输入')
  709. } else if (!this.enterprise1.businessCode) {
  710. this.$message.error('营业执照号不能为空')
  711. } else if (!this.businessCodeChecked) {
  712. this.$message.error('营业执照号输入有误,请按提示重新输入')
  713. } else if (!this.enterprise1.password) {
  714. this.$message.error('密码不能为空')
  715. } else if (!this.checked) {
  716. this.$message.error('您对阅读条款未做勾选')
  717. }
  718. }
  719. } else {
  720. if (this.spaceNameChecked && this.businessCodeChecked && this.passwordChecked && this.emailChecked && this.checked) {
  721. this.submitRegister()
  722. } else {
  723. if (!this.enterprise1.spaceName) {
  724. this.$message.error('企业名不能为空')
  725. } else if (!this.spaceNameChecked) {
  726. this.$message.error('企业名称输入有误,请按提示重新输入')
  727. } else if (!this.enterprise1.businessCode) {
  728. this.$message.error('营业执照号不能为空')
  729. } else if (!this.businessCodeChecked) {
  730. this.$message.error('营业执照号输入有误,请按提示重新输入')
  731. } else if (!this.enterprise1.password) {
  732. this.$message.error('密码不能为空')
  733. } else if (this.enterprise1.email && !this.emailChecked) {
  734. this.$message.error('邮箱输入有误,请按提示重新输入')
  735. } else if (!this.checked) {
  736. this.$message.error('您对阅读条款未做勾选')
  737. }
  738. }
  739. }
  740. }
  741. },
  742. submitRegister () {
  743. this.isShowLoading = true
  744. let param = new FormData()
  745. param.append('spaceName', this.enterprise1.spaceName)
  746. param.append('businessCode', this.enterprise1.businessCode)
  747. param.append('vipName', this.enterprise1.vipName || '')
  748. param.append('password', this.enterprise1.password)
  749. param.append('email', this.enterprise1.email || '')
  750. param.append('appId', this.$store.state.option.appId)
  751. param.append('inviteSpaceUU', this.$store.state.option.inviteSpaceUU)
  752. param.append('inviteUserUU', this.$store.state.option.inviteUserUU)
  753. param.append('invitationTime', this.$store.state.option.invitationTime)
  754. let config = {
  755. headers: {'Content-Type': 'multipart/form-data'}
  756. }
  757. this.$http.post('/sso/userspace/register', param, config)
  758. .then(response => {
  759. this.isShowLoading = false
  760. if (response.data.success) {
  761. window.location.href = '/overRegister/overEnterprise'
  762. } else {
  763. return Promise.reject(response.data)
  764. }
  765. }).catch(err => {
  766. this.isShowLoading = false
  767. this.$message.error(err.errMsg)
  768. })
  769. }
  770. }
  771. }
  772. </script>
  773. <style lang="scss" scoped>
  774. .register {
  775. margin: 0 auto;
  776. width: 100%;
  777. background: #eee;
  778. .container{
  779. padding-top: 50px;
  780. margin: 0 auto;
  781. width: 980px;
  782. text-align: center;
  783. .content{
  784. padding: 0 50px;
  785. margin: 50px auto 0;
  786. width: 100%;
  787. text-align: center;
  788. background: #fff;
  789. .content-top{
  790. position: relative;
  791. height: 80px;
  792. line-height: 80px;
  793. border-bottom: 1px solid #dcdcdc;
  794. h3{
  795. font-family: 'SimHei';
  796. font-size: 24px;
  797. color: #000;
  798. }
  799. a.go{
  800. position: absolute;
  801. top: 0;
  802. right: 0;
  803. font-size: 14px;
  804. i{
  805. margin-right: 3px;
  806. }
  807. }
  808. }
  809. form {
  810. padding-bottom: 44px;
  811. margin-top: 35px;
  812. span.sure{
  813. position: absolute;
  814. top: 0;
  815. right: -271px;
  816. width: 250px;
  817. text-align: left;
  818. line-height: 21px;
  819. font-size: 13px;
  820. color: #8c8c8c;
  821. }
  822. span.codeError-tip{
  823. position: absolute;
  824. top: 3px;
  825. left: 378px;
  826. width: 200px;
  827. text-align: left;
  828. color: #ff4949;
  829. font-size: 12px;
  830. }
  831. input{
  832. padding: 0 0 0 18px;
  833. width: 360px;
  834. height: 44px;
  835. line-height: 44px;
  836. font-size: 14px;
  837. color: #000;
  838. border-radius: 0;
  839. }
  840. .pwd {
  841. margin: 6px 0 -15px 0;
  842. text-align: left;
  843. font-size: 13px;
  844. em{
  845. display: inline-block;
  846. margin: 0 8px 2px 0;
  847. width: 24px;
  848. height: 6px;
  849. &:first-child{
  850. margin-left: 10px;
  851. }
  852. }
  853. span{
  854. margin-left: 10px;
  855. font-size: 13px;
  856. }
  857. }
  858. .pwd.sm{
  859. color: #8c8c8c;
  860. em {
  861. background: #bfbfbf;
  862. &:first-child{
  863. background: #ff4e00;
  864. }
  865. }
  866. span{
  867. color: #ff4e00;
  868. }
  869. }
  870. .pwd.md{
  871. color: #8c8c8c;
  872. em {
  873. background: #22ac38;
  874. &:nth-child(3){
  875. background: #bfbfbf;
  876. }
  877. }
  878. span{
  879. color: #22ac38;
  880. }
  881. }
  882. .pwd.lar{
  883. color: #8c8c8c;
  884. em {
  885. background: #00a0e9;
  886. }
  887. span{
  888. color: #00a0e9;
  889. }
  890. }
  891. .pwd.low{
  892. color: #8c8c8c;
  893. em {
  894. background: #bfbfbf;
  895. }
  896. span{
  897. color: #00a0e9;
  898. }
  899. }
  900. span.tip{
  901. position: absolute;
  902. top: 0;
  903. right: -165px;
  904. font-size: 13px;
  905. color: #8c8c8c;
  906. }
  907. span.tip.exist{
  908. top: 5px;
  909. left: 380px;
  910. width: 250px;
  911. line-height: 18px;
  912. text-align: left;
  913. a{
  914. color: #2d8cf0;
  915. &:hover{
  916. color: #f44336;
  917. }
  918. }
  919. i.fa {
  920. font-size: 14px;
  921. color: #666;
  922. cursor: pointer;
  923. }
  924. }
  925. div.pop-tip{
  926. position: absolute;
  927. top: 39px;
  928. left: 470px;
  929. z-index: 10;
  930. span.pop-title{
  931. display: inline-block;
  932. padding: 5px;
  933. z-index:100;
  934. width: 150px;
  935. height: 55px;
  936. line-height: 16px;
  937. text-align: left;
  938. font-size: 12px;
  939. color: #8c8c8c;
  940. background: #fff;
  941. box-shadow: 0 0 5px rgba(0,0,0,.5);
  942. -moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
  943. -o-box-shadow: 0 0 5px rgba(0,0,0,.5);
  944. -webkit-box-shadow: 0 0 5px rgba(0,0,0,.5);
  945. border-radius: 5px;
  946. }
  947. }
  948. span.tip.passwordError{
  949. position: absolute;
  950. top: 3px;
  951. left: 380px;
  952. width: 200px;
  953. text-align: left;
  954. color: #ff4949;
  955. font-size: 12px;
  956. }
  957. input.msg{
  958. float: left;
  959. width: 210px;
  960. }
  961. span.msg{
  962. float: right;
  963. width: 130px;
  964. height: 44px;
  965. line-height: 44px;
  966. font-size: 14px;
  967. color: #5a5a5a;
  968. background: #f4f4f4;
  969. border: 1px solid #dcdcdc;
  970. cursor: pointer;
  971. }
  972. span.msg.send{
  973. background: #d2d2d2;
  974. color: #fff;
  975. }
  976. input[type='checkbox']{
  977. margin: 0 14px 0 55px;
  978. float: left;
  979. width: 16px;
  980. height: 16px;
  981. }
  982. span.agree{
  983. float: left;
  984. margin: 1px 0 0 10px;
  985. font-size: 14px;
  986. color: #8b8b8b;
  987. a{
  988. color: #0076ad;
  989. }
  990. }
  991. .form-group.agree{
  992. margin: 20px auto 0 !important;
  993. }
  994. .btn {
  995. margin: 34px 0 16px 0;
  996. width: 360px;
  997. height: 44px;
  998. line-height: 44px;
  999. font-size: 16px;
  1000. color: #fff;
  1001. background: #0076AD;
  1002. border-radius: 3px;
  1003. }
  1004. }
  1005. }
  1006. .login{
  1007. margin-top: 20px;
  1008. font-size: 14px;
  1009. color: #8c8c8c;
  1010. a{
  1011. font-size: 14px;
  1012. color: #0076ad;
  1013. }
  1014. }
  1015. }
  1016. }
  1017. .footer{
  1018. padding: 50px 0;
  1019. }
  1020. </style>