index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  1. <template>
  2. <div class="home" v-if="showLogin">
  3. <div class="home-btn" @click="checkLoginType">
  4. <span v-if="type === 2">二维码登录</span>
  5. <span v-else>账号登录</span>
  6. </div>
  7. <div class="home-content">
  8. <div class="home-left">
  9. <div class="box">
  10. <img :src="parseImgUrl('ipdImages', 'logo.svg')" alt="" />
  11. <div class="logo-text">SagaCare</div>
  12. </div>
  13. </div>
  14. <div class="home-right">
  15. <div class="box" v-if="type === 1">
  16. <div class="qrcode-main">
  17. <qrcode-vue
  18. :value="codeValue"
  19. class="qrcode"
  20. foreground="#CE9F27"
  21. level="H"
  22. />
  23. <div class="qrcode-model" v-if="codeStatus.status">
  24. <span v-if="codeStatus.status === 1">已扫描</span>
  25. <!-- <span v-if="codeStatus.status === 2">已确认</span> -->
  26. <van-icon
  27. v-if="codeStatus.status === 2 || codeStatus.status === 3"
  28. class="code-replay"
  29. @click="refreshCode"
  30. name="replay"
  31. />
  32. </div>
  33. </div>
  34. <div class="qrcode-text">
  35. 请使用朵朵小程序,扫描上面二维码进行授权登录
  36. </div>
  37. </div>
  38. <div class="box" v-else>
  39. <van-form @submit="onSubmit" class="box-form">
  40. <van-cell-group inset>
  41. <van-field
  42. v-model="username"
  43. name="username"
  44. placeholder="用户名"
  45. :rules="[{ required: true, message: '请填写用户名' }]"
  46. />
  47. <van-field
  48. v-model="password"
  49. type="password"
  50. name="password"
  51. placeholder="密码"
  52. :rules="[{ required: true, message: '请填写密码' }]"
  53. />
  54. </van-cell-group>
  55. <div>
  56. <van-button round block native-type="submit"> 提交 </van-button>
  57. </div>
  58. </van-form>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="fotter">欢迎使用智能办公</div>
  63. </div>
  64. </template>
  65. <script lang="ts">
  66. import {
  67. defineComponent,
  68. reactive,
  69. toRefs,
  70. onBeforeMount,
  71. onMounted,
  72. ref,
  73. onBeforeUnmount,
  74. } from "vue";
  75. import QrcodeVue from "qrcode.vue";
  76. import { useRouter } from "vue-router";
  77. import { getUserInfo, newNumber, parseImgUrl, setQueryConfig } from "@/utils";
  78. import { store, useStore } from "@/store";
  79. import { login } from "@/apis/user";
  80. import { Form, Field, CellGroup, Button, Toast } from "vant";
  81. import { getCookieMac, setToken } from "@/utils/cookies";
  82. import { getPadQrCodeStatus, queryWorkSpace } from "@/apis/envmonitor";
  83. import { UserMutationTypes } from "@/store/modules/user/mutation-types";
  84. export default defineComponent({
  85. components: {
  86. QrcodeVue,
  87. vanForm: Form,
  88. vanField: Field,
  89. CellGroup: CellGroup,
  90. vanButton: Button,
  91. },
  92. beforeRouteEnter(to, from, next) {
  93. let mac: any = getCookieMac();
  94. if (mac && mac != "null") {
  95. if (to.query.type !== "logoOut") {
  96. next((e: any) => {
  97. console.log(e);
  98. e.queryWorkSpace();
  99. });
  100. } else {
  101. next((e: any) => {
  102. e.showLogin = true;
  103. let mac: any = getCookieMac();
  104. console.log(mac);
  105. // to.query = { mac: mac};
  106. console.log(to);
  107. // console.log( e.showLogin )
  108. // router.push({ name: "home", query: { mac: mac } });
  109. });
  110. }
  111. } else {
  112. next("/error");
  113. }
  114. },
  115. setup(props) {
  116. let router: any = useRouter();
  117. const userInfo: any = getUserInfo();
  118. const store = useStore();
  119. const codeStatus: any = {};
  120. const timer: any = null;
  121. const orgin: any = location.origin;
  122. const proxyData = reactive({
  123. parseImgUrl: parseImgUrl,
  124. codeValue: `${orgin}/sgipad/home`,
  125. showLogin: false,
  126. size: 134,
  127. type: 1, // 1:二维码登录 2:用户密码登录
  128. userInfo: userInfo,
  129. checkLoginType() {
  130. if (proxyData.type === 1) {
  131. proxyData.type = 2;
  132. } else {
  133. proxyData.type = 1;
  134. }
  135. if (proxyData.type === 1) {
  136. proxyData.getPadQrCodeStatus();
  137. } else {
  138. if (proxyData.timer) {
  139. clearTimeout(proxyData.timer);
  140. proxyData.timer = null;
  141. }
  142. }
  143. },
  144. username: "",
  145. password: "",
  146. onSubmit(values: any) {
  147. // console.log("submit", values);
  148. let params: any = values;
  149. // params.username = params.username
  150. // ? params.username.trim()
  151. // : params.username;
  152. // params.password = params.password
  153. // ? params.password.trim()
  154. // : params.password;
  155. login(params).then((res) => {
  156. let resData: any = res;
  157. if (resData.result === "success") {
  158. setToken(resData.token);
  159. router.push({ path: "/choice-project" });
  160. } else {
  161. Toast("登录失败!");
  162. }
  163. });
  164. },
  165. // 查询工作空间
  166. queryWorkSpace() {
  167. if (!proxyData.userInfo.mac) {
  168. proxyData.showLogin = true;
  169. } else {
  170. let params: any = {
  171. criteria: {
  172. macAddress: proxyData.userInfo.mac,
  173. isMajorSpace: 1,
  174. },
  175. orders: [
  176. {
  177. column: "createTime",
  178. asc: false,
  179. },
  180. ],
  181. page: 1,
  182. size: 1,
  183. };
  184. queryWorkSpace(params)
  185. .then((res: any) => {
  186. let resData: any = res;
  187. if (resData.result === "success") {
  188. let content: any = resData?.content ?? [];
  189. if (content && content.length) {
  190. proxyData.showLogin = false;
  191. let projectId: any = content[0].projectId;
  192. store.commit(UserMutationTypes.SET_PROJECT_ID, projectId);
  193. router.push({
  194. name: "envmonitor",
  195. query: { spaceId: content[0].spaceId },
  196. });
  197. } else {
  198. proxyData.showLogin = true;
  199. }
  200. } else {
  201. proxyData.showLogin = true;
  202. }
  203. })
  204. .catch(() => {
  205. proxyData.showLogin = true;
  206. });
  207. }
  208. },
  209. /**
  210. * 获取mac地址
  211. */
  212. getQrcode() {
  213. let mac: any = proxyData.userInfo.mac;
  214. const id: any = newNumber(0, 100000, mac);
  215. return id;
  216. },
  217. qrCodeId: "",
  218. setCodeUrl() {
  219. let mac: any = proxyData.userInfo.mac;
  220. let qrCodeId: any = proxyData.getQrcode();
  221. proxyData.qrCodeId = qrCodeId;
  222. proxyData.codeValue = `${orgin}/sgipad/home?type=ipad&id=${proxyData.qrCodeId}&mac=${mac}`;
  223. },
  224. // 定时器清楚
  225. clearTimer() {
  226. if (proxyData.timer) {
  227. clearTimeout(proxyData.timer);
  228. proxyData.timer = null;
  229. }
  230. },
  231. // 二维码刷新
  232. refreshCode() {
  233. proxyData.setCodeUrl();
  234. proxyData.clearTimer();
  235. proxyData.getPadQrCodeStatus();
  236. },
  237. /**
  238. *
  239. *获取二维码状态
  240. */
  241. codeStatus: codeStatus,
  242. timer: timer,
  243. getPadQrCodeStatus() {
  244. let params: any = setQueryConfig({ qrCodeId: proxyData.qrCodeId });
  245. getPadQrCodeStatus(params).then((res) => {
  246. let resData: any = res;
  247. proxyData.codeStatus = resData?.data ?? {};
  248. if (proxyData.codeStatus.status === 2) {
  249. // debugger
  250. let projectId: any = proxyData.codeStatus.projectId;
  251. let spaceId: any = proxyData.codeStatus.spaceId;
  252. if (projectId && spaceId) {
  253. // 直接去环境条件页面
  254. // setLocalProjectId(projectId)
  255. store.commit(UserMutationTypes.SET_PROJECT_ID, projectId);
  256. router.push({
  257. name: "choiceSpace",
  258. query: { id: projectId, spaceId: spaceId },
  259. });
  260. } else if (projectId) {
  261. // 去选择项目页面
  262. store.commit(UserMutationTypes.SET_PROJECT_ID, projectId);
  263. router.push({ name: "choiceSpace", query: { id: projectId } });
  264. }
  265. } else {
  266. if (proxyData.timer) {
  267. clearTimeout(proxyData.timer);
  268. proxyData.timer = null;
  269. }
  270. proxyData.timer = setTimeout(() => {
  271. proxyData.getPadQrCodeStatus();
  272. }, 1000);
  273. }
  274. });
  275. },
  276. });
  277. onBeforeUnmount(() => {
  278. if (proxyData.timer) {
  279. clearTimeout(proxyData.timer);
  280. proxyData.timer = null;
  281. }
  282. });
  283. onMounted(() => {
  284. // 设置二维码路径
  285. proxyData.setCodeUrl();
  286. proxyData.getPadQrCodeStatus();
  287. });
  288. return {
  289. ...toRefs(proxyData),
  290. };
  291. },
  292. });
  293. </script>
  294. <style lang="scss" scoped>
  295. .home {
  296. position: relative;
  297. width: 100%;
  298. height: 100%;
  299. background: #eceff4;
  300. padding: 20px;
  301. .home-btn {
  302. position: absolute;
  303. right: 0;
  304. top: 20px;
  305. width: 126px;
  306. height: 46px;
  307. line-height: 46px;
  308. background: #ffffff;
  309. border: 1px solid #e2d0a0;
  310. font-family: "Persagy";
  311. font-style: normal;
  312. font-weight: 500;
  313. font-size: 16px;
  314. text-align: center;
  315. border-radius: 40px 0 0 40px;
  316. color: #4d5262;
  317. }
  318. .home-content {
  319. width: 75%;
  320. // min-width: 640px;
  321. display: flex;
  322. height: 232px;
  323. position: absolute;
  324. left: 50%;
  325. top: 45%;
  326. transform: translate(-50%, -50%);
  327. .home-left {
  328. position: relative;
  329. flex: 1;
  330. height: 100%;
  331. text-align: center;
  332. .box {
  333. top: 10px;
  334. position: absolute;
  335. width: 160px;
  336. right: 138px;
  337. }
  338. img {
  339. width: 160px;
  340. height: 160px;
  341. }
  342. .logo-text {
  343. padding-top: 17px;
  344. font-family: "Persagy";
  345. font-style: normal;
  346. font-weight: 700;
  347. font-size: 24px;
  348. line-height: 29px;
  349. text-align: center;
  350. text-transform: capitalize;
  351. color: #af810c;
  352. }
  353. }
  354. .home-right {
  355. position: relative;
  356. flex: 1;
  357. height: 100%;
  358. border-left: 1px solid #d9d9d9;
  359. .box {
  360. top: 10px;
  361. width: 308px;
  362. position: absolute;
  363. left: 80px;
  364. }
  365. .qrcode-main {
  366. position: relative;
  367. margin: 0 auto;
  368. width: 164px;
  369. height: 160px;
  370. padding: 15px;
  371. background: #ffffff;
  372. border: 1px solid #ce9f27;
  373. .qrcode {
  374. width: 100% !important;
  375. height: 100% !important;
  376. }
  377. }
  378. .qrcode-model {
  379. position: absolute;
  380. left: 50%;
  381. transform: translateX(-50%);
  382. top: 0;
  383. width: 164px;
  384. height: 160px;
  385. background: rgba(0, 0, 0, 0.3);
  386. span {
  387. display: block;
  388. line-height: 160px;
  389. text-align: center;
  390. font-size: 12px;
  391. color: #4d5262;
  392. }
  393. .code-replay {
  394. position: absolute;
  395. left: 50%;
  396. top: 50%;
  397. transform: translate(-50%, -50%);
  398. font-size: 32px;
  399. color: #fff;
  400. }
  401. }
  402. .qrcode-text {
  403. padding-top: 25px;
  404. font-family: "Noto Sans SC";
  405. font-style: normal;
  406. font-weight: 400;
  407. font-size: 14px;
  408. line-height: 20px;
  409. // margin-left: 13%;
  410. text-align: center;
  411. color: #af810c;
  412. }
  413. }
  414. }
  415. .fotter {
  416. position: fixed;
  417. left: 0;
  418. width: 100%;
  419. bottom: 80px;
  420. font-family: "Persagy";
  421. font-style: normal;
  422. font-weight: 500;
  423. font-size: 24px;
  424. line-height: 29px;
  425. color: #4d5262;
  426. text-align: center;
  427. }
  428. }
  429. </style>
  430. <style lang="scss">
  431. .box-form {
  432. width: 280px;
  433. margin: 0 auto;
  434. padding: 0 !important;
  435. .van-cell {
  436. width: 100%;
  437. height: 48px;
  438. background: #ffffff;
  439. border: 1px solid #c3c7cb;
  440. border-radius: 16px;
  441. margin-bottom: 28px;
  442. font-family: "Microsoft YaHei UI";
  443. font-style: normal;
  444. font-weight: 400;
  445. font-size: 14px;
  446. line-height: 22px;
  447. color: #c3c7cb;
  448. }
  449. .van-button {
  450. width: 100%;
  451. height: 48px;
  452. background: #ce9f27;
  453. border-radius: 16px;
  454. font-family: "PingFang SC";
  455. font-style: normal;
  456. font-weight: 500;
  457. font-size: 20px;
  458. line-height: 24px;
  459. text-align: center;
  460. color: #ffffff;
  461. flex: none;
  462. order: 1;
  463. flex-grow: 0;
  464. }
  465. .van-field__error-message {
  466. position: absolute;
  467. top: 15px;
  468. }
  469. }
  470. </style>