EnterpriseRegistration.vue 45 KB

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