login.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <template>
  2. <div class="login">
  3. <div class="login-header">
  4. <img class="logo" :style="VUE_APP_USERNAME == 'smt' ? 'width:200px;height:200px' : ''" :src="VUE_APP_USERNAME == 'smt' ? smtLogo : logo" />
  5. <h2 v-if="VUE_APP_USERNAME != 'smt'">{{ $t('login.title') }}</h2>
  6. </div>
  7. <div class="login-form">
  8. <van-field
  9. v-model="loginForm.tenantId"
  10. name=""
  11. label=""
  12. :placeholder="$t('login.form.tenantId')"
  13. :rules="[{ required: true, message: $t('login.form.tenantId') }]"
  14. />
  15. <van-field
  16. v-model="loginForm.username"
  17. name=""
  18. label=""
  19. :placeholder="$t('login.form.username')"
  20. :rules="[{ required: true, message: $t('login.form.username') }]"
  21. />
  22. <van-field
  23. v-model="loginForm.password"
  24. type="password"
  25. name=""
  26. label=""
  27. :placeholder="$t('login.form.password')"
  28. :rules="[{ required: true, message: $t('login.form.password') }]"
  29. />
  30. <van-form @submit="onSubmit">
  31. <van-cell-group inset> </van-cell-group>
  32. <div style="margin: 16px">
  33. <van-button round block type="primary" native-type="submit">
  34. {{$t('common.submit')}}
  35. </van-button>
  36. </div>
  37. <div
  38. class="check-warp"
  39. style="text-align: left; justify-content: left"
  40. >
  41. <div class="check-icon-warp">
  42. <van-checkbox
  43. icon-size="16px"
  44. v-model="rememberMe"
  45. ></van-checkbox>
  46. </div>
  47. {{$t('login.rememberPassword')}}
  48. </div>
  49. </van-form>
  50. </div>
  51. <div class="login-btn">
  52. <div class="check-warp">
  53. <div class="check-icon-warp">
  54. <van-checkbox
  55. icon-size="16px"
  56. v-model="clause"
  57. ></van-checkbox>
  58. </div>
  59. <div>
  60. {{ $t('login.agreement.text') }}
  61. <span>{{ $t('login.agreement.clause') }}</span>
  62. {{ $t('login.agreement.and') }}
  63. <span>{{ $t('login.agreement.agreement') }}</span>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. </template>
  69. <style lang="scss" scoped>
  70. .login {
  71. height: 100vh;
  72. width: 100%;
  73. background-size: 100% 100%;
  74. background: #fff;
  75. .check-warp {
  76. display: flex;
  77. align-items: center;
  78. justify-content: center;
  79. .check-icon-warp {
  80. margin-right: 5px;
  81. }
  82. span {
  83. color: #3370ff;
  84. margin: 0 4px;
  85. }
  86. }
  87. .login-form {
  88. padding: 5px 20px;
  89. }
  90. .login-btn {
  91. font-size: 12px;
  92. position: fixed;
  93. bottom: 50px;
  94. left: 0;
  95. right: 0;
  96. }
  97. .van-cell {
  98. border: 5px;
  99. background: #f1f1f1;
  100. margin-bottom: 12px;
  101. height: 50px;
  102. box-sizing: border-box;
  103. line-height: 44px;
  104. padding: 3px 12px;
  105. font-size: 16px;
  106. }
  107. .login-header {
  108. background: url(../assets/images/login-header.png) no-repeat;
  109. height: 200px;
  110. background-size: cover;
  111. padding: 44px 20px 17px;
  112. box-sizing: border-box;
  113. .logo {
  114. height: 45px;
  115. }
  116. h2 {
  117. margin-top: 40px;
  118. }
  119. }
  120. }
  121. </style>
  122. <script setup>
  123. import 'vant/lib/index.css'
  124. import { ref, getCurrentInstance, onMounted } from 'vue'
  125. import { setUserInfo, setToken, getUserInfo,getToken } from '@/utils/auth'
  126. import { showSuccessToast, showFailToast,showConfirmDialog } from 'vant'
  127. import * as dd from 'dingtalk-jsapi'
  128. import axios from 'axios'
  129. import { useRoute } from 'vue-router'
  130. import logo from '@/assets/logo.png'
  131. import smtLogo from '@/assets/smtLogo.png'
  132. const route = useRoute()
  133. const proxy = getCurrentInstance().proxy
  134. const VUE_APP_USERNAME = ref(process.env.VUE_APP_USERNAME)
  135. const loginForm = ref({
  136. username: '',
  137. password: '',
  138. rememberMe: false,
  139. tenantId: '',
  140. code: '',
  141. uuid: '',
  142. })
  143. const rememberMe = ref(false)
  144. const clause = ref(false)
  145. const radioChange = () => {
  146. console.log(loginForm.rememberMe)
  147. // loginForm.value.rememberMe = loginForm.value.rememberMe ? false : false;
  148. }
  149. const onSubmit = () => {
  150. proxy
  151. .post('login', loginForm.value, 'post', {
  152. tenantId: loginForm.value.tenantId,
  153. })
  154. .then((res) => {
  155. console.log(res)
  156. if (res.code == 200) {
  157. setToken(res.token)
  158. getInfo()
  159. }
  160. })
  161. }
  162. const getInfo = () => {
  163. proxy.post('getInfo', {}, 'get').then((res) => {
  164. console.log(res)
  165. if (res.code == 200) {
  166. setUserInfo(res.user)
  167. window.localStorage.setItem('tenantId', loginForm.value.tenantId)
  168. if (rememberMe.value) {
  169. window.localStorage.setItem(
  170. 'username',
  171. loginForm.value.username
  172. )
  173. window.localStorage.setItem(
  174. 'password',
  175. loginForm.value.password
  176. )
  177. window.localStorage.setItem('rememberMe', rememberMe.value)
  178. } else {
  179. window.localStorage.setItem('username', '')
  180. window.localStorage.setItem('password', '')
  181. window.localStorage.setItem('tenantId', '')
  182. window.localStorage.setItem('rememberMe', false)
  183. }
  184. showSuccessToast('登录成功')
  185. proxy.$router.push('/main')
  186. }
  187. })
  188. }
  189. console.log(process.env)
  190. onMounted(() => {
  191. let username = window.localStorage.getItem('username')
  192. let password = window.localStorage.getItem('password')
  193. let tenantId = window.localStorage.getItem('tenantId')
  194. let rememberMeCopy = window.localStorage.getItem('rememberMe')
  195. if (rememberMeCopy == 'true') {
  196. loginForm.value.username = username
  197. loginForm.value.password = password
  198. rememberMe.value = true
  199. loginForm.value.tenantId = tenantId
  200. }
  201. })
  202. const loginData = ref({})
  203. let code = ref('')
  204. const ddLoginInit = () => {
  205. if(getToken()){
  206. //proxy.$router.push('/main')
  207. }
  208. dd.ready(function () {
  209. dd.ui.webViewBounce.disable();
  210. dd.runtime.permission.requestAuthCode({
  211. corpId: route.query.id, // 企业id
  212. onSuccess: function (info) {
  213. code.value = info.code
  214. proxy
  215. .post('/open/dingApi/getUserToken', { code: code.value,corpId:route.query.id })
  216. .then((res) => {
  217. window.localStorage.setItem('corpId',route.query.id)
  218. setToken(res.data)
  219. getInfo()
  220. })
  221. },
  222. onFail: function (err) {
  223. },
  224. })
  225. })
  226. }
  227. ddLoginInit()
  228. </script>