index.vue 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914
  1. <template>
  2. <div class="x-container">
  3. <!--登录窗口-->
  4. <template v-if="!loginIsSuccess">
  5. <div class="x-login-wrap">
  6. <div class="login-tab" v-show="loginWay != 2">
  7. <span @click="toggleTab(0)" v-bind:class="{'active': loginWay === 0 }">密码登录</span>
  8. <span @click="toggleTab(3)" v-bind:class="{'active': loginWay === 3 }">短信登录</span>
  9. <span @click="ShowWechatCoe(1)" v-bind:class="{'active': loginWay === 1 }" id="weChatBtn">微信登录</span>
  10. </div>
  11. <!--账号密码登录-->
  12. <div class="x-login" v-show="loginWay === 0">
  13. <div id="form-wrap" class="x-login-form">
  14. <el-form :model="login" :rules="rules2" ref="login" class="demo-ruleForm login-form">
  15. <div style="opacity: 0; height: 0; overflow: hidden">
  16. <input type="text" name="hideUserName" id="hideUserName">
  17. <input type="password" name="hidePassword" id="hidePassword">
  18. </div>
  19. <el-form-item prop="username">
  20. <el-input type="text" v-model="login.username" auto-complete="off" placeholder="手机号/邮箱"></el-input>
  21. <i class="fa fa-user"></i>
  22. </el-form-item>
  23. <el-form-item prop="password">
  24. <el-input type="password"
  25. v-model="login.password"
  26. placeholder="密码"
  27. auto-complete="off"
  28. @keyup.enter.native="isLogin(true)"></el-input>
  29. <i class="fa fa-lock"></i>
  30. </el-form-item>
  31. <el-form-item prop="captcha" class="captcha" v-show="showCheckCode">
  32. <el-input type="text"
  33. v-model="login.captcha"
  34. auto-complete="off"
  35. class="code-input"
  36. @keyup.enter.native="isLogin(true)"></el-input>
  37. <img id="captchaImage" class="code-img" src="/sso/login/checkCode"/>
  38. <a class="code-click" @click="getCode">看不清换一张</a>
  39. </el-form-item>
  40. <el-form-item>
  41. <a class="btn login"
  42. @click="isLogin(true)"
  43. :disabled="isLoginDisabled">登录</a>
  44. </el-form-item>
  45. <el-form-item class="text-position" v-if="loginStyle.needRememberPwd">
  46. <el-checkbox v-model="checked">30天免登录</el-checkbox>
  47. </el-form-item>
  48. </el-form>
  49. <div class="link-go">
  50. <a @click="changeManage" class="first">更换管理员</a>
  51. <span class="line"></span>
  52. <a class="forget" id='forget' @click="goForgetPassword">忘记密码?</a>
  53. <span class="line"></span>
  54. <a :href="`/register/enterpriseRegistration${this.queryLink ? '?' + this.queryLink : ''}`" class="second">免费注册</a>
  55. </div>
  56. </div>
  57. </div>
  58. <!--短信快捷登录-->
  59. <div class="x-login" v-show="loginWay === 3">
  60. <div id="form-wrap1" class="x-login-form">
  61. <el-form :model="fastLogin" :rules="rules3" ref="fastLogin" class="demo-ruleForm login-form loginForm">
  62. <el-form-item prop="mobile">
  63. <el-input type="text" v-model="fastLogin.mobile" auto-complete="off" placeholder="请输入手机号"></el-input>
  64. </el-form-item>
  65. <el-form-item prop="code" class="fastMsg">
  66. <el-input type="text" v-model="fastLogin.code"
  67. auto-complete="off" placeholder="验证码"></el-input>
  68. <el-button type="primary" class="fastCode"
  69. v-show="sendLoginCode"
  70. @click="getCheckCode">获取验证码</el-button>
  71. <el-button type="primary" v-show="!sendLoginCode" class="fastCode code-send">已发送({{login_time}}s)</el-button>
  72. </el-form-item>
  73. <el-form-item>
  74. <a class="btn login"
  75. @click="fastToLogin(true)">登录</a>
  76. </el-form-item>
  77. </el-form>
  78. <div class="link-go">
  79. <a @click="changeManage" class="first">更换管理员</a>
  80. <span class="line"></span>
  81. <a :href="`/register/enterpriseRegistration${this.queryLink ? '?' + this.queryLink : ''}`" class="second">免费注册</a>
  82. </div>
  83. </div>
  84. </div>
  85. <!--微信扫码登录-->
  86. <div class="x-login scan-login" v-show="loginWay === 1">
  87. <div class="x-login-form">
  88. <div class="scan-body">
  89. <div class="img">
  90. <div id="login_container"></div>
  91. </div>
  92. </div>
  93. <div class="link-go" style="padding: 0 18px 12px 0; margin-top: 0;">
  94. <a @click="changeManage" class="first">更换管理员</a>
  95. <span class="line"></span>
  96. <a :href="`/register/enterpriseRegistration${this.queryLink ? '?' + this.queryLink : ''}`" class="second">免费注册</a>
  97. </div>
  98. </div>
  99. </div>
  100. <!--绑定账号-->
  101. <div class="x-login bind-login" v-show="loginWay === 2">
  102. <div class="x-login-form">
  103. <div class="bind-header">
  104. <span>绑定已有账号</span>
  105. <span @click="loginWay = 0">返回</span>
  106. </div>
  107. <div class="bind-body">
  108. <div class="img"><img :src="wxImg" alt=""/><div>{{wxName}}</div></div>
  109. <div>
  110. <el-form :model="bindAccount" :rules="rules4" ref="bindAccount" class="demo-ruleForm login-form">
  111. <el-form-item prop="username" style="margin: 0 auto 10px !important;">
  112. <el-input type="text"
  113. v-model="bindAccount.username"
  114. auto-complete="off"
  115. placeholder="请输入用户名、手机号或邮箱"></el-input>
  116. </el-form-item>
  117. <el-form-item prop="password" style="margin: 0 auto 10px !important;">
  118. <el-input type="password"
  119. v-model="bindAccount.password"
  120. auto-complete="new-password"
  121. placeholder="密码"
  122. @keyup.enter.native="wxBind"></el-input>
  123. </el-form-item>
  124. <el-form-item style="margin: 0 auto!important;">
  125. <a class="btn login"
  126. @click="wxBind">确定绑定已有账号</a>
  127. </el-form-item>
  128. </el-form>
  129. </div>
  130. <div class="set">还没有优软账号,直接 <a :href="`/register/enterpriseRegistration${this.$store.state.option.fullPath}&tk=${wxToken}`">创建新账号</a></div>
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. <!--选择企业弹框-->
  136. <div>
  137. <!--<el-dialog class="dialog"-->
  138. <!--:visible.sync="dialogVisible"-->
  139. <!--size="tiny">-->
  140. <!--<div class="x-floating x-list" v-show="dialogVisible">-->
  141. <!--<div class="x-list-header">您要登录的公司是:</div>-->
  142. <!--<div class="x-list-content">-->
  143. <!--<ul class="list-unstyled" >-->
  144. <!--<template v-for="space in this.enterprise">-->
  145. <!--<li v-text="space.name" @click="chooseOneEnterprise(false, space.id)">华商龙科技有限公司</li>-->
  146. <!--</template>-->
  147. <!--</ul>-->
  148. <!--</div>-->
  149. <!--</div>-->
  150. <!--</el-dialog>-->
  151. </div>
  152. </template>
  153. <template v-else>
  154. <div class="login-success">
  155. <i class="iconfont icon-zhifuchenggong"></i>
  156. <p>登录成功</p>
  157. </div>
  158. </template>
  159. <loading v-show="isShowLoading"/>
  160. </div>
  161. </template>
  162. <script>
  163. import Loading from '~components/common/loading/Loading.vue'
  164. var wxLogin = function () {}
  165. export default {
  166. layout: 'sass',
  167. components: {
  168. Loading
  169. },
  170. data () {
  171. // 用户名密码登录
  172. var validateUsername = (rule, value, callback) => {
  173. if (value === '') {
  174. this.checkUsername = false
  175. this.showCheckCode = false
  176. } else {
  177. if (this.login.username !== '') {
  178. // 获取密码输错次数
  179. this.$http.get(`/sso/login/getPwdErrorCount`, {params: {username: this.login.username}})
  180. .then(response => {
  181. if (response.data.success) {
  182. this.showCheckCode = false
  183. let getPasswordErrorCount = response.data.content || ''
  184. if (getPasswordErrorCount >= 5) {
  185. this.$message.error('密码错误次数已达上限,今日无法登录')
  186. this.isLoginDisabled = true
  187. this.showCheckCode = false
  188. } else if (getPasswordErrorCount < 3) {
  189. this.isLoginDisabled = false
  190. this.checkUsername = true
  191. this.showCheckCode = false
  192. } else if (getPasswordErrorCount >= 3 && getPasswordErrorCount < 5) {
  193. if (getPasswordErrorCount === 3) {
  194. this.$message.error('当前已输错密码3次,若达到5次今日将无法登录')
  195. }
  196. if (getPasswordErrorCount === 4) {
  197. this.$message.error('当前已输错密码4次,若达到5次今日将无法登录')
  198. }
  199. this.isLoginDisabled = false
  200. this.checkUsername = true
  201. this.showCheckCode = true
  202. } else {
  203. this.checkUsername = false
  204. this.showCheckCode = false
  205. }
  206. } else {
  207. return Promise.reject(response.data)
  208. }
  209. }).catch(err => {
  210. this.isShowLoading = false
  211. this.$message.error(err.errMsg)
  212. })
  213. }
  214. callback()
  215. }
  216. }
  217. var validatePassword = (rule, value, callback) => {
  218. if (value === '') {
  219. this.checkPassword = false
  220. } else {
  221. if (this.login.password !== '') {
  222. this.checkPassword = true
  223. }
  224. callback()
  225. }
  226. }
  227. // 短信便捷登录
  228. var validateMobile = (rule, value, callback) => {
  229. if (value === '') {
  230. this.checkMobile = false
  231. } else {
  232. if (this.fastLogin.mobile) {
  233. this.checkMobile = true
  234. }
  235. callback()
  236. }
  237. }
  238. var validateCode = (rule, value, callback) => {
  239. if (value === '') {
  240. this.checkCode = false
  241. } else {
  242. if (this.fastLogin.code !== '') {
  243. this.checkCode = true
  244. }
  245. callback()
  246. }
  247. }
  248. // 微信扫码登录
  249. var validateWeiUsername = (rule, value, callback) => {
  250. if (value === '') {
  251. this.checkWeiUsername = false
  252. } else {
  253. if (this.bindAccount.username !== '') {
  254. this.checkWeiUsername = true
  255. }
  256. callback()
  257. }
  258. }
  259. var validateWeiPassword = (rule, value, callback) => {
  260. if (value === '') {
  261. this.checkWeiPassword = false
  262. } else {
  263. if (this.bindAccount.password !== '') {
  264. this.checkWeiPassword = true
  265. }
  266. callback()
  267. }
  268. }
  269. return {
  270. login: {
  271. username: '',
  272. password: '',
  273. captcha: '',
  274. spaceUU: ''
  275. },
  276. fastLogin: {
  277. mobile: '',
  278. code: ''
  279. },
  280. bindAccount: {
  281. username: '',
  282. password: ''
  283. },
  284. loginIsSuccess: false,
  285. loginWay: 0,
  286. checked: true,
  287. isShowLoading: false,
  288. checkUsername: false,
  289. checkPassword: false,
  290. showCheckCode: false,
  291. isLoginDisabled: false,
  292. dialogVisible: false,
  293. queryLink: '',
  294. checkMobile: false,
  295. getCodeBtnIsDisabled: true,
  296. sendLoginCode: true,
  297. login_time: 0,
  298. token: '',
  299. checkCode: false,
  300. checkWeiUsername: false,
  301. checkWeiPassword: false,
  302. wxToken: '',
  303. wxImg: '',
  304. wxName: '',
  305. wxUrl: '',
  306. // 用户名密码登录
  307. rules2: {
  308. username: [
  309. {validator: validateUsername, trigger: 'blur'}
  310. ],
  311. password: [
  312. {validator: validatePassword, trigger: 'blur'}
  313. ]
  314. },
  315. // 短信快捷登录
  316. rules3: {
  317. mobile: [
  318. {validator: validateMobile, trigger: 'blur'}
  319. ],
  320. code: [
  321. {validator: validateCode, trigger: 'blur'}
  322. ]
  323. },
  324. // 微信扫码登录
  325. rules4: {
  326. username: [
  327. {validator: validateWeiUsername, trigger: 'blur'}
  328. ],
  329. password: [
  330. {validator: validateWeiPassword, trigger: 'blur'}
  331. ]
  332. }
  333. }
  334. },
  335. mounted () {
  336. this.$nextTick(() => {
  337. this.getUrl()
  338. this.validUserName()
  339. if (this.$route.query.code) {
  340. this.wxEnterprise()
  341. }
  342. })
  343. },
  344. computed: {
  345. enterprise () {
  346. let chooseEnterprise = this.$store.state.login.chooseRegisterEnterprise.choose.data
  347. return chooseEnterprise
  348. },
  349. loginStyle () {
  350. return this.$store.state.login.loginStyle.data.content ? this.$store.state.login.loginStyle.data.content : ''
  351. }
  352. },
  353. methods: {
  354. toggleTab (type) {
  355. this.loginWay = type
  356. this.login.username = ''
  357. this.login.password = ''
  358. this.fastLogin.mobile = ''
  359. this.fastLogin.code = ''
  360. },
  361. ShowWechatCoe () {
  362. wxLogin()
  363. this.loginWay = 1
  364. },
  365. // 获取用户错误次数
  366. validUserName () {
  367. if (this.login.username) {
  368. // 获取密码输错次数
  369. this.$http.get(`/sso/login/getPwdErrorCount`, {params: {username: this.login.username}})
  370. .then(response => {
  371. if (response.data.success) {
  372. let getPasswordErrorCount = response.data.content || ''
  373. if (getPasswordErrorCount >= 5) {
  374. this.$message.error('密码错误次数已达上限,今日无法登录')
  375. this.isLoginDisabled = true
  376. this.showCheckCode = false
  377. } else if (getPasswordErrorCount < 3) {
  378. this.isLoginDisabled = false
  379. this.checkUsername = true
  380. this.showCheckCode = false
  381. } else if (getPasswordErrorCount >= 3 && getPasswordErrorCount < 5) {
  382. if (getPasswordErrorCount === 3) {
  383. this.$message.error('当前已输错密码3次,若达到5次今日将无法登录')
  384. }
  385. if (getPasswordErrorCount === 4) {
  386. this.$message.error('当前已输错密码4次,若达到5次今日将无法登录')
  387. }
  388. this.isLoginDisabled = false
  389. this.checkUsername = true
  390. this.showCheckCode = true
  391. } else {
  392. this.checkUsername = false
  393. this.showCheckCode = false
  394. }
  395. } else {
  396. return Promise.reject(response.data)
  397. }
  398. }).catch(err => {
  399. this.$message.error(err.errMsg)
  400. })
  401. }
  402. },
  403. // 更换管理员
  404. changeManage () {
  405. window.location.href = `appeals/changeManagerAppeal${this.$store.state.option.fullPath}`
  406. },
  407. // 获取url参数
  408. getUrl () {
  409. let wUrl = ''
  410. if (this.$route.query) {
  411. for (var key in this.$route.query) {
  412. if (key !== 'code' && key !== 'state' && key !== 'type') {
  413. wUrl += `${key}=${encodeURIComponent(this.$route.query[key])}&`
  414. }
  415. }
  416. }
  417. if (this.$route.query) {
  418. this.wxUrl = `${window.location.origin}?${wUrl.substr(0, wUrl.length - 1)}`
  419. } else {
  420. this.wxUrl = `${window.location.origin}`
  421. }
  422. var url = window.location.search
  423. var request = {}
  424. if (url.indexOf('?' !== -1)) {
  425. var str = url.substr(1)
  426. var strs = str.split('&')
  427. this.queryLink = str
  428. for (var i = 0; i < strs.length; i++) {
  429. request[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
  430. }
  431. }
  432. this.appId = request['appId'] || ''
  433. this.returnUrl = request['returnURL'] || ''
  434. this.baseUrl = request['baseUrl'] || ''
  435. },
  436. goForgetPassword () {
  437. let url = `/reset/forgetPasswordValidationAccount${this.queryLink ? '?' + this.queryLink : ''}`
  438. document.getElementById('forget').href = url
  439. },
  440. // 获取验证码
  441. getCode () {
  442. var imgSrc = document.getElementById('captchaImage')
  443. imgSrc.setAttribute('src', '/sso/login/checkCode?timestamp=' + (new Date()).valueOf())
  444. },
  445. // 登录
  446. isLogin (flag) {
  447. this.isShowLoading = true
  448. if (!this.login.username) {
  449. this.isShowLoading = false
  450. this.$message.error('请填写账号')
  451. } else if (!this.login.password) {
  452. this.isShowLoading = false
  453. this.$message.error('请填写密码')
  454. } else {
  455. let param = new FormData()
  456. param.append('username', this.login.username)
  457. param.append('password', this.login.password)
  458. param.append('captcha', this.login.captcha)
  459. param.append('spaceUU', '1')
  460. param.append('appId', this.appId ? this.appId : '')
  461. param.append('returnUrl', this.returnUrl ? this.returnUrl : '')
  462. param.append('baseUrl', this.baseUrl ? this.baseUrl : '')
  463. param.append('maxage', this.checked ? 2592000 : '')
  464. let config = {
  465. headers: {'Content-Type': 'multipart/form-data'}
  466. }
  467. this.$http.post('/sso/login', param, config)
  468. .then(response => {
  469. this.isShowLoading = false
  470. if (response.data.success) {
  471. if (response.data.content.spaces) {
  472. // 弹框让用户选择企业
  473. this.$store.commit('login/chooseRegisterEnterprise/GET_ENTERPRISE_SUCCESS', response.data.content.spaces)
  474. this.dialogVisible = flag
  475. } else if (response.data.content.loginUrls) {
  476. // 遍历登录url循环让各应用登录(需要跨域)
  477. let param = response.data.content.data
  478. let a = ''
  479. for (let n in param) {
  480. a += (n + '=' + encodeURIComponent(param[n]) + '&')
  481. }
  482. let params = a.substr(0, a.length - 1)
  483. this.isShowLoading = true
  484. if (response.data.content.currentUrl) {
  485. let baseContent = response.data.content.currentUrl
  486. let flag = '?'
  487. if (baseContent.indexOf('?') !== -1) {
  488. flag = '&'
  489. }
  490. this.$jsonp(`${response.data.content.currentUrl}${flag}${params}`, {
  491. name: 'successCallback',
  492. timeout: 3000
  493. }, (err, data) => {
  494. if (err) {
  495. this.$message.error('登录超时,请重试')
  496. this.isShowLoading = false
  497. throw err
  498. } else {
  499. this.loginOther(response, params)
  500. }
  501. })
  502. } else {
  503. this.loginOther(response, params, 3000)
  504. }
  505. }
  506. } else {
  507. this.$message.error(response.data)
  508. var count = response.data.errorCount
  509. if (count < 3) {
  510. this.showCheckCode = false
  511. this.isLoginDisabled = false
  512. } else if (count >= 5) {
  513. this.$message.error('密码错误次数已达上限,今日无法登录')
  514. this.isLoginDisabled = true
  515. this.showCheckCode = false
  516. } else if (count >= 3 && count < 5) {
  517. this.getCode()
  518. if (count === 3) {
  519. this.$message.error('当前已输错密码3次,若达到5次今日将无法登录')
  520. }
  521. this.showCheckCode = true
  522. this.isLoginDisabled = false
  523. }
  524. return Promise.reject(response.data)
  525. }
  526. }).catch(err => {
  527. this.isShowLoading = false
  528. let _this = this
  529. setTimeout(function () {
  530. _this.getCode()
  531. }, 100)
  532. this.$message.error(err.errMsg)
  533. })
  534. }
  535. },
  536. // 选择账套
  537. // chooseOneEnterprise (flag, spaceUU) {
  538. // this.login.spaceUU = spaceUU
  539. // this.dialogVisible = false
  540. // if (this.$route.query.code) {
  541. // this.wxEnterprise(flag)
  542. // } else {
  543. // if (this.loginWay === 0) {
  544. // this.isLogin(flag)
  545. // }
  546. // if (this.loginWay === 3) {
  547. // this.fastToLogin(flag)
  548. // }
  549. // }
  550. // },
  551. // 短信快捷登录
  552. fastToLogin (flag) {
  553. this.isShowLoading = true
  554. if (!this.fastLogin.mobile) {
  555. this.isShowLoading = false
  556. this.$message.error('请填写手机号')
  557. } else {
  558. let param = new FormData()
  559. param.append('mobile', this.fastLogin.mobile)
  560. param.append('code', this.fastLogin.code)
  561. param.append('appId', this.appId)
  562. param.append('token', this.token)
  563. param.append('spaceUU', 1)
  564. param.append('returnUrl', this.returnUrl ? this.returnUrl : '')
  565. param.append('baseUrl', this.baseUrl ? this.baseUrl : '')
  566. let config = {
  567. headers: {'Content-Type': 'multipart/form-data'}
  568. }
  569. this.$http.post('/sso/login/sms', param, config)
  570. .then(response => {
  571. this.isShowLoading = false
  572. if (response.data.success) {
  573. if (response.data.content.spaces) {
  574. // 弹框让用户选择企业
  575. this.$store.commit('login/chooseRegisterEnterprise/GET_ENTERPRISE_SUCCESS', response.data.content.spaces)
  576. this.dialogVisible = flag
  577. } else if (response.data.content.loginUrls) {
  578. // 遍历登录url循环让各应用登录(需要跨域)
  579. let param = response.data.content.data
  580. let a = ''
  581. for (let n in param) {
  582. a += (n + '=' + encodeURIComponent(param[n]) + '&')
  583. }
  584. let params = a.substr(0, a.length - 1)
  585. this.isShowLoading = true
  586. if (response.data.content.currentUrl) {
  587. this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
  588. name: 'successCallback',
  589. timeout: 3000
  590. }, (err, data) => {
  591. if (err) {
  592. this.$message.error('登录超时,请重试')
  593. this.isShowLoading = false
  594. throw err
  595. } else {
  596. this.loginOther(response, params)
  597. }
  598. })
  599. } else {
  600. this.loginOther(response, params, 3000)
  601. }
  602. }
  603. } else {
  604. this.$message.error(response.data)
  605. return Promise.reject(response.data)
  606. }
  607. }).catch(err => {
  608. this.isShowLoading = false
  609. let _this = this
  610. setTimeout(function () {
  611. _this.getCode()
  612. }, 100)
  613. this.$message.error(err.errMsg)
  614. })
  615. }
  616. },
  617. getJsonp: function (url, timeout = 500) {
  618. return new Promise((resolve, reject) => {
  619. this.$jsonp(url, {
  620. name: 'successCallback',
  621. timeout: timeout
  622. }, function (err, data) {
  623. if (err) {
  624. reject(err)
  625. throw err
  626. } else {
  627. resolve(data)
  628. }
  629. })
  630. })
  631. },
  632. // crossAfter (url) {
  633. // try {
  634. // window.location.href = url
  635. // } catch (err) {
  636. // console.log(err)
  637. // }
  638. // },
  639. loginOther (response, a, timeout) {
  640. // const crossAfter = this.crossAfter
  641. let promises = []
  642. for (let i in response.data.content.loginUrls) {
  643. if (response.data.content.currentUrl !== response.data.content.loginUrls[i]) {
  644. promises.push(this.getJsonp(`${response.data.content.loginUrls[i]}?${a}`))
  645. }
  646. }
  647. Promise.all(promises).then(() => {
  648. this.loginIsSuccess = true
  649. this.isShowLoading = false
  650. // crossAfter(response.data.content.returnUrl || 'http://www.ubtob.com', timeout)
  651. }).catch(() => {
  652. this.loginIsSuccess = true
  653. this.isShowLoading = false
  654. // crossAfter(response.data.content.returnUrl || 'http://www.ubtob.com', timeout)
  655. })
  656. },
  657. getCheckCode () {
  658. this.isShowLoading = true
  659. if (!this.fastLogin.mobile) {
  660. this.isShowLoading = false
  661. this.$message.error('请先填写手机号')
  662. } else {
  663. if (this.checkMobile) {
  664. this.$http.get(`/sso/login/sendSmsCode`, {params: {mobile: this.fastLogin.mobile}})
  665. .then(response => {
  666. this.isShowLoading = false
  667. if (response.data) {
  668. if (response.data.success) {
  669. this.token = response.data.content.token
  670. this.$message({
  671. message: '验证码已经发送到您的手机,请注意查收',
  672. type: 'success'
  673. })
  674. this.sendLoginCode = false
  675. this.login_time = 60
  676. var loginTime = setInterval(() => {
  677. this.login_time--
  678. if (this.login_time <= 0) {
  679. this.sendLoginCode = true
  680. clearInterval(loginTime)
  681. }
  682. }, 1000)
  683. } else {
  684. this.$message.error(response.data.errMsg)
  685. }
  686. } else {
  687. return Promise.reject(response.data)
  688. }
  689. }).catch(err => {
  690. this.isShowLoading = false
  691. this.$message.error(err.errMsg)
  692. })
  693. } else {
  694. this.isShowLoading = false
  695. }
  696. }
  697. },
  698. // 微信判断绑定和账套选择
  699. wxEnterprise () {
  700. this.isShowLoading = true
  701. if (this.$route.query.code) {
  702. let param = new FormData()
  703. param.append('code', this.$route.query.code ? this.$route.query.code : '')
  704. param.append('type', 'wx')
  705. param.append('state', this.$route.query.state ? this.$route.query.state : '')
  706. param.append('appId', this.$route.query.appId ? this.$route.query.appId : '')
  707. param.append('returnUrl', this.$route.query.returnURL ? this.$route.query.returnURL : '')
  708. param.append('baseUrl', this.$route.query.baseUrl ? this.$route.query.baseUrl : '')
  709. param.append('spaceUU', 1)
  710. let config = {
  711. headers: {'Content-Type': 'multipart/form-data'}
  712. }
  713. this.$http.post('/sso/login/foreignLogin', param, config)
  714. .then(response => {
  715. this.isShowLoading = false
  716. if (response.data.success) {
  717. if (!response.data.content.hasRegister && response.data.content.token) {
  718. this.loginWay = 2
  719. this.wxToken = response.data.content.token
  720. this.$http.get(`/foreign/userInfo/${this.wxToken}`, {params: {token: this.wxToken}})
  721. .then(response => {
  722. if (response.data.success) {
  723. this.wxImg = response.data.content.foreignUserImg
  724. this.wxName = response.data.content.foreignUserName
  725. } else {
  726. return Promise.reject(response.data)
  727. }
  728. }).catch(err => {
  729. this.$message.error(err.errMsg)
  730. })
  731. } else if (response.data.content.spaces) {
  732. // 弹框让用户选择企业
  733. this.$store.commit('login/chooseRegisterEnterprise/GET_ENTERPRISE_SUCCESS', response.data.content.spaces)
  734. this.dialogVisible = true
  735. } else if (response.data.content.loginUrls) {
  736. // 遍历登录url循环让各应用登录(需要跨域)
  737. let param = response.data.content.data
  738. let a = ''
  739. for (let n in param) {
  740. a += (n + '=' + encodeURIComponent(param[n]) + '&')
  741. }
  742. let params = a.substr(0, a.length - 1)
  743. this.isShowLoading = true
  744. if (response.data.content.currentUrl) {
  745. this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
  746. name: 'successCallback',
  747. timeout: 3000
  748. }, (err, data) => {
  749. if (err) {
  750. this.$message.error('登录超时,请重试')
  751. this.isShowLoading = false
  752. throw err
  753. } else {
  754. this.loginOther(response, params)
  755. }
  756. })
  757. } else {
  758. this.loginOther(response, params, 3000)
  759. }
  760. }
  761. } else {
  762. this.$message.error(response.data)
  763. return Promise.reject(response.data)
  764. }
  765. }).catch(err => {
  766. this.isShowLoading = false
  767. let _this = this
  768. setTimeout(function () {
  769. _this.getCode()
  770. }, 100)
  771. this.$message.error(err.errMsg)
  772. })
  773. }
  774. },
  775. // 微信扫码登录
  776. getScan () {
  777. // this.loginWay = 1
  778. this.isShowLoading = true
  779. this.$http.get('/weChat/getQrUrl', {params: {appId: this.$route.query.appId, url: this.wxUrl}})
  780. .then(response => {
  781. this.isShowLoading = false
  782. if (response.data.success) {
  783. window.location.href = response.data.content
  784. } else {
  785. return Promise.reject(response.data)
  786. }
  787. }).catch(err => {
  788. this.isShowLoading = false
  789. this.$message.error(err.errMsg)
  790. })
  791. },
  792. // 绑定企业
  793. wxBind () {
  794. this.isShowLoading = true
  795. if (!this.bindAccount.username) {
  796. this.isShowLoading = false
  797. this.$message.error('请填写账号')
  798. } else if (!this.bindAccount.password) {
  799. this.isShowLoading = false
  800. this.$message.error('请填写密码')
  801. } else {
  802. let param = new FormData()
  803. param.append('_operate', 'account')
  804. param.append('t', this.wxToken)
  805. param.append('username', this.bindAccount.username)
  806. param.append('password', this.bindAccount.password)
  807. let config = {
  808. headers: {'Content-Type': 'multipart/form-data'}
  809. }
  810. this.$http.post('/foreign/addAccount', param, config)
  811. .then(response => {
  812. this.isShowLoading = false
  813. if (response.data.success) {
  814. this.wxEnterprise()
  815. } else {
  816. return Promise.reject(response.data)
  817. }
  818. }).catch(err => {
  819. this.isShowLoading = false
  820. this.$message.error(err.errMsg)
  821. })
  822. }
  823. }
  824. }
  825. }
  826. </script>
  827. <style lang="scss" type="text/scss">
  828. .x-container {
  829. width: 346px;
  830. margin: 0 auto;
  831. text-align: center;
  832. background: #FFFFFF;
  833. box-shadow: 0 22px 24px 0 rgba(0,0,0,0.08);
  834. border-radius: 3px;
  835. .login-tab {
  836. margin-bottom: 30px;
  837. width: 100%;
  838. height: 50px;
  839. line-height: 50px;
  840. border-bottom: 1px solid #dcdcdc;
  841. span{
  842. display: inline-block;
  843. width: 30%;
  844. font-size: 16px;
  845. color: #999;
  846. cursor: pointer;
  847. &.active{
  848. color: #333;
  849. border-bottom: 2px solid #282828;
  850. }
  851. }
  852. }
  853. .x-login {
  854. width: 100%;
  855. .x-login-form {
  856. .btn.login{
  857. width: 306px;
  858. height: 34px;
  859. background: #5078cb;
  860. color: #fff;
  861. font-weight: 700;
  862. letter-spacing: 4px;
  863. border-radius: 0;
  864. }
  865. .text-position{
  866. .el-form-item__content .el-checkbox{
  867. margin-left: 0!important;
  868. }
  869. }
  870. }
  871. .link-go {
  872. position: relative;
  873. text-align: right;
  874. margin-top: 35px;
  875. padding: 0 21px 20px 0;
  876. a{
  877. margin-left: 20px;
  878. font-size: 14px;
  879. color: #999;
  880. background: 0 0;
  881. text-decoration: none;
  882. outline: 0;
  883. cursor: pointer;
  884. }
  885. span{
  886. position: absolute;
  887. top: 1px;
  888. display: inline-block;
  889. margin: 0 10px;
  890. width: 2px;
  891. height: 15px;
  892. background-color: #ddd;
  893. }
  894. }
  895. }
  896. .login-success {
  897. padding-top: 95px;
  898. width: 100%;
  899. height: 400px;
  900. margin: 0 auto;
  901. text-align: center;
  902. i{
  903. font-size: 125px;
  904. color: #22ac38;
  905. }
  906. p{
  907. margin-top: 20px;
  908. font-size: 28px;
  909. color: #333;
  910. }
  911. }
  912. }
  913. </style>