| | |
| | | <template> |
| | | <view class="zai-box"> |
| | | <!-- 登录加载弹窗 --> |
| | | <view class="cu-load load-modal"> |
| | | <image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode="aspectFit" |
| | | class="round"></image> |
| | | <view class="gray-text">正在登录中...</view> |
| | | </view> |
| | | <view class="zai-box"> |
| | | <!-- 登录加载弹窗 --> |
| | | <view class="cu-load load-modal"> |
| | | <image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode="aspectFit" |
| | | class="round"></image> |
| | | <view class="gray-text">正在登录中...</view> |
| | | </view> |
| | | </view> |
| | | |
| | | </template> |
| | | |
| | |
| | | import configService from '@/common/service/config.service.js'; |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | | loading: false, |
| | | env: { |
| | | thirdType: '', |
| | | thirdApp: false, |
| | | wxWork: false, |
| | | dingtalk: false, |
| | | }, |
| | | redirectUrl: '' |
| | | }; |
| | | data() { |
| | | return { |
| | | loading: false, |
| | | env: { |
| | | thirdType: '', |
| | | thirdApp: false, |
| | | wxWork: false, |
| | | dingtalk: false, |
| | | }, |
| | | redirectUrl: '' |
| | | }; |
| | | }, |
| | | beforeCreate() { |
| | | // 如果当前 不是 OAuth2APP环境,就重定向到 /user/login 页面 |
| | | if (!isOAuth2AppEnv()) { |
| | | this.$Router.replace({name: 'login'}) |
| | | } |
| | | }, |
| | | created() { |
| | | this.checkEnv() |
| | | this.doOAuth2Login() |
| | | }, |
| | | methods: { |
| | | ...mapActions(['ThirdLogin']), |
| | | /** 检测当前的环境 */ |
| | | checkEnv() { |
| | | // 判断当时是否是企业微信环境 |
| | | if (/wxwork/i.test(navigator.userAgent)) { |
| | | this.env.thirdApp = true |
| | | this.env.wxWork = true |
| | | this.env.thirdType = 'wechat_enterprise' |
| | | } |
| | | // 判断当时是否是钉钉环境 |
| | | if (/dingtalk/i.test(navigator.userAgent)) { |
| | | this.env.thirdApp = true |
| | | this.env.dingtalk = true |
| | | //this.env.thirdType='dingtalk' |
| | | } |
| | | }, |
| | | beforeCreate() { |
| | | // 如果当前 不是 OAuth2APP环境,就重定向到 /user/login 页面 |
| | | if (!isOAuth2AppEnv()) { |
| | | this.$Router.replace({name: 'login'}) |
| | | |
| | | /** 进行OAuth2登录操作 */ |
| | | doOAuth2Login() { |
| | | if (this.env.thirdApp) { |
| | | // 判断是否携带了Token,是就说明登录成功 |
| | | this.redirectUrl = '' |
| | | let search = window.location.search; |
| | | if (search.indexOf('hasToken') > 0) { |
| | | let obj = getUrlParams(search); |
| | | if (obj.params.redirect) { |
| | | this.redirectUrl = decodeURIComponent(decodeURIComponent(obj.params.redirect)); |
| | | this.goRedirectUrl(); |
| | | } else { |
| | | alert('hasToken参数错误!') |
| | | } |
| | | } else if (search.indexOf('oauth2LoginToken') > 0) { |
| | | let obj = getUrlParams(search); |
| | | this.env.thirdType = obj.params.thirdType; |
| | | let token = obj.params.oauth2LoginToken; |
| | | if (obj.params.redirect) { |
| | | this.redirectUrl = decodeURIComponent(obj.params.redirect) |
| | | } |
| | | this.doThirdLogin(token) |
| | | } else if (this.env.wxWork) { |
| | | this.doWechatEnterpriseOAuth2Login() |
| | | } else if (this.env.dingtalk) { |
| | | this.doDingTalkOAuth2Login() |
| | | } |
| | | } |
| | | }, |
| | | created() { |
| | | this.checkEnv() |
| | | this.doOAuth2Login() |
| | | |
| | | // 根据token执行登录 |
| | | doThirdLogin(token) { |
| | | this.ThirdLogin({token: token, thirdType: this.env.thirdType}).then(res => { |
| | | if (res.data.success) { |
| | | uni.showToast({ |
| | | title: '登录', |
| | | icon: 'none', |
| | | duration: 3000, |
| | | content: res |
| | | }); |
| | | this.loginSuccess() |
| | | |
| | | } else { |
| | | this.requestFailed(res) |
| | | } |
| | | }).catch((e) => { |
| | | alert(e.message || e) |
| | | }) |
| | | }, |
| | | methods: { |
| | | ...mapActions(['ThirdLogin']), |
| | | /** 检测当前的环境 */ |
| | | checkEnv() { |
| | | // 判断当时是否是企业微信环境 |
| | | if (/wxwork/i.test(navigator.userAgent)) { |
| | | this.env.thirdApp = true |
| | | this.env.wxWork = true |
| | | //this.env.thirdType='wechat_enterprise' |
| | | } |
| | | // 判断当时是否是钉钉环境 |
| | | if (/dingtalk/i.test(navigator.userAgent)) { |
| | | this.env.thirdApp = true |
| | | this.env.dingtalk = true |
| | | //this.env.thirdType='dingtalk' |
| | | } |
| | | }, |
| | | loginSuccess() { |
| | | this.$Router.replaceAll({name: 'index'}) |
| | | }, |
| | | requestFailed(err) { |
| | | uni.showToast({ |
| | | title: '登录', |
| | | icon: 'none', |
| | | duration: 3000, |
| | | content: err |
| | | }); |
| | | }, |
| | | goRedirectUrl() { |
| | | let obj = getUrlParams(this.redirectUrl); |
| | | let path = obj.url; |
| | | let params = obj.params; |
| | | if (params.info) { |
| | | let temp = JSON.parse(params.info); |
| | | let query = { |
| | | instanceId: temp.procInsId, |
| | | taskId: temp.taskId, |
| | | taskDefKey: temp.taskDefKey |
| | | } |
| | | if (temp.claim == 1) { |
| | | query['claim'] = 1 |
| | | } |
| | | this.$Router.replaceAll({path, query}) |
| | | } else { |
| | | this.$Router.replaceAll({path}) |
| | | } |
| | | }, |
| | | /** 企业微信OAuth2登录 */ |
| | | doWechatEnterpriseOAuth2Login() { |
| | | this.sysOAuth2Login('wechat_enterprise') |
| | | }, |
| | | |
| | | /** 进行OAuth2登录操作 */ |
| | | doOAuth2Login() { |
| | | if (this.env.thirdApp) { |
| | | // 判断是否携带了Token,是就说明登录成功 |
| | | this.redirectUrl = '' |
| | | let search = window.location.search; |
| | | if (search.indexOf('hasToken') > 0) { |
| | | let obj = getUrlParams(search); |
| | | if (obj.params.redirect) { |
| | | this.redirectUrl = decodeURIComponent(decodeURIComponent(obj.params.redirect)); |
| | | this.goRedirectUrl(); |
| | | } else { |
| | | alert('hasToken参数错误!') |
| | | } |
| | | } else if (search.indexOf('oauth2LoginToken') > 0) { |
| | | let obj = getUrlParams(search); |
| | | this.env.thirdType = obj.params.thirdType; |
| | | let token = obj.params.oauth2LoginToken; |
| | | if (obj.params.redirect) { |
| | | this.redirectUrl = decodeURIComponent(obj.params.redirect) |
| | | } |
| | | this.doThirdLogin(token) |
| | | } else if (this.env.wxWork) { |
| | | this.doWechatEnterpriseOAuth2Login() |
| | | } else if (this.env.dingtalk) { |
| | | this.doDingTalkOAuth2Login() |
| | | } |
| | | } |
| | | }, |
| | | /** 钉钉OAuth2登录 */ |
| | | doDingTalkOAuth2Login() { |
| | | this.sysOAuth2Login('dingtalk') |
| | | }, |
| | | |
| | | // 根据token执行登录 |
| | | doThirdLogin(token) { |
| | | this.ThirdLogin({token: token, thirdType: this.env.thirdType}).then(res => { |
| | | if (res.data.success) { |
| | | this.loginSuccess() |
| | | } else { |
| | | this.requestFailed(res) |
| | | } |
| | | }).catch((e) => { |
| | | alert(e.message || e) |
| | | }) |
| | | }, |
| | | loginSuccess() { |
| | | this.$Router.replaceAll({name: 'index'}) |
| | | }, |
| | | requestFailed(err) { |
| | | this.$message.warning("登录失败") |
| | | }, |
| | | goRedirectUrl() { |
| | | let obj = getUrlParams(this.redirectUrl); |
| | | let path = obj.url; |
| | | let params = obj.params; |
| | | if (params.info) { |
| | | let temp = JSON.parse(params.info); |
| | | let query = { |
| | | instanceId: temp.procInsId, |
| | | taskId: temp.taskId, |
| | | taskDefKey: temp.taskDefKey |
| | | } |
| | | if (temp.claim == 1) { |
| | | query['claim'] = 1 |
| | | } |
| | | this.$Router.replaceAll({path, query}) |
| | | } else { |
| | | this.$Router.replaceAll({path}) |
| | | } |
| | | }, |
| | | /** 企业微信OAuth2登录 */ |
| | | doWechatEnterpriseOAuth2Login() { |
| | | this.sysOAuth2Login('wechat_enterprise') |
| | | }, |
| | | |
| | | /** 钉钉OAuth2登录 */ |
| | | doDingTalkOAuth2Login() { |
| | | this.sysOAuth2Login('dingtalk') |
| | | }, |
| | | |
| | | /** 后台构造oauth2登录地址 */ |
| | | sysOAuth2Login(source) { |
| | | /** 后台构造oauth2登录地址 */ |
| | | sysOAuth2Login(source) { |
| | | let domainURL = configService.apiUrl; |
| | | let url = `${domainURL}/sys/thirdLogin/oauth2/${source}/login`; |
| | | let url = `http://houjie.xalxzn.com:8866/jeecg-boot/sys/thirdLogin/oauth2/${source}/login`; |
| | | let state = window.location.origin + window.location.search |
| | | url += `?state=${encodeURIComponent(state)}`; |
| | | console.log('sysOAuth2Login====》', url) |
| | | window.location.href = url; |
| | | }, |
| | | } |
| | | window.location.href = url; |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | .login-paddingtop { |
| | | padding-top: 100 upx; |
| | | padding-top: 100upx; |
| | | } |
| | | |
| | | .zai-box { |
| | | padding: 0 20 upx; |
| | | padding-top: 100 upx; |
| | | position: relative; |
| | | padding: 0 20upx; |
| | | padding-top: 100upx; |
| | | position: relative; |
| | | } |
| | | |
| | | .zai-logo { |
| | | width: 200 upx; |
| | | height: 150px; |
| | | width: 200upx; |
| | | height: 150px; |
| | | } |
| | | |
| | | .zai-title { |
| | | font-size: 58 upx; |
| | | color: #000000; |
| | | text-align: center; |
| | | font-size: 58upx; |
| | | color: #000000; |
| | | text-align: center; |
| | | } |
| | | |
| | | .input-placeholder, .zai-input { |
| | | color: #94afce; |
| | | color: #94afce; |
| | | } |
| | | |
| | | .zai-label { |
| | | padding: 60 upx 0; |
| | | text-align: center; |
| | | font-size: 30 upx; |
| | | color: #a7b6d0; |
| | | padding: 60upx 0; |
| | | text-align: center; |
| | | font-size: 30upx; |
| | | color: #a7b6d0; |
| | | } |
| | | |
| | | .zai-btn { |
| | | background: #ff65a3; |
| | | color: #fff; |
| | | border: 0; |
| | | border-radius: 100 upx; |
| | | font-size: 36 upx; |
| | | background: #ff65a3; |
| | | color: #fff; |
| | | border: 0; |
| | | border-radius: 100upx; |
| | | font-size: 36upx; |
| | | } |
| | | |
| | | .zai-btn:after { |
| | | border: 0; |
| | | border: 0; |
| | | } |
| | | |
| | | /*按钮点击效果*/ |
| | | .zai-btn.button-hover { |
| | | transform: translate(1 upx, 1 upx); |
| | | transform: translate(1upx, 1upx); |
| | | } |
| | | |
| | | </style> |