| | |
| | | <div>欢è¿ç»å½...</div> |
| | | <div class="login-line"></div> |
| | | </div> |
| | | <div style="flex:1;"></div> |
| | | <div style="flex: 1"></div> |
| | | </div> |
| | | <div class="login-text-small">WELCOME TO LOGIN</div> |
| | | <div class="item"> |
| | | <div class="input-icon el-icon-user"></div> |
| | | <input type="text" v-focus v-model="userInfo.userName" placeholder="请è¾å
¥è´¦å·" /> |
| | | <input |
| | | type="text" |
| | | v-focus |
| | | v-model="userInfo.userName" |
| | | placeholder="请è¾å
¥è´¦å·" |
| | | /> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="input-icon el-icon-lock"></div> |
| | | <input type="password" v-focus v-model="userInfo.password" placeholder="请è¾å
¥å¯ç " /> |
| | | <input |
| | | type="password" |
| | | v-focus |
| | | v-model="userInfo.password" |
| | | placeholder="请è¾å
¥å¯ç " |
| | | /> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="input-icon el-icon-mobile"></div> |
| | | |
| | | <input v-focus type="text" v-model="userInfo.verificationCode" placeholder="è¾å
¥éªè¯ç " /> |
| | | <input |
| | | v-focus |
| | | type="text" |
| | | v-model="userInfo.verificationCode" |
| | | placeholder="è¾å
¥éªè¯ç " |
| | | /> |
| | | <div class="code" @click="getVierificationCode"> |
| | | <img v-show="codeImgSrc != ''" :src="codeImgSrc" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="loging-btn"> |
| | | <el-button size="large" :loading="loading" color="#3a6cd1" :dark="true" @click="login" long> |
| | | <el-button |
| | | size="large" |
| | | :loading="loading" |
| | | color="#3a6cd1" |
| | | :dark="true" |
| | | @click="login" |
| | | long |
| | | > |
| | | <span v-if="!loading">ç»å½</span> |
| | | <span v-else>æ£å¨ç»å½...</span> |
| | | </el-button> |
| | |
| | | ref, |
| | | reactive, |
| | | toRefs, |
| | | getCurrentInstance |
| | | } from 'vue'; |
| | | import { useRouter, useRoute } from 'vue-router'; |
| | | import store from '../store/index'; |
| | | import http from '@/../src/api/http.js'; |
| | | getCurrentInstance, |
| | | } from "vue"; |
| | | import { useRouter, useRoute } from "vue-router"; |
| | | import store from "../store/index"; |
| | | import http from "@/../src/api/http.js"; |
| | | export default defineComponent({ |
| | | setup(props, context) { |
| | | store.commit('clearUserInfo', ''); |
| | | store.commit("clearUserInfo", ""); |
| | | const loading = ref(false); |
| | | const codeImgSrc = ref(''); |
| | | const codeImgSrc = ref(""); |
| | | const userInfo = reactive({ |
| | | userName: '', |
| | | password: '', |
| | | verificationCode: '', |
| | | UUID: undefined |
| | | userName: "", |
| | | password: "", |
| | | verificationCode: "", |
| | | UUID: undefined, |
| | | }); |
| | | |
| | | const getVierificationCode = () => { |
| | | http.get('/api/User/getVierificationCode').then((x) => { |
| | | codeImgSrc.value = 'data:image/png;base64,' + x.img; |
| | | http.get("/api/User/getVierificationCode").then((x) => { |
| | | codeImgSrc.value = "data:image/png;base64," + x.img; |
| | | userInfo.UUID = x.uuid; |
| | | }); |
| | | }; |
| | | getVierificationCode(); |
| | | |
| | | |
| | | let appContext = getCurrentInstance().appContext; |
| | | let $message = appContext.config.globalProperties.$message; |
| | | let router = useRouter(); |
| | | |
| | | const login = () => { |
| | | if (!userInfo.userName) return $message.error('请è¾å
¥ç¨æ·å'); |
| | | if (!userInfo.password) return $message.error('请è¾å
¥å¯ç '); |
| | | if (!userInfo.userName) return $message.error("请è¾å
¥ç¨æ·å"); |
| | | if (!userInfo.password) return $message.error("请è¾å
¥å¯ç "); |
| | | if (!userInfo.verificationCode) { |
| | | return $message.error('请è¾å
¥éªè¯ç '); |
| | | return $message.error("请è¾å
¥éªè¯ç "); |
| | | } |
| | | loading.value = true; |
| | | http.post('/api/User/login', userInfo, 'æ£å¨ç»å½....').then((result) => { |
| | | http.post("/api/User/login", userInfo, "æ£å¨ç»å½....").then((result) => { |
| | | if (!result.status) { |
| | | loading.value = false; |
| | | getVierificationCode(); |
| | | return $message.error(result.message); |
| | | } |
| | | $message.success('ç»å½æå,æ£å¨è·³è½¬!'); |
| | | store.commit('setUserInfo', result.data); |
| | | router.push({ path: '/' }); |
| | | $message.success("ç»å½æå,æ£å¨è·³è½¬!"); |
| | | store.commit("setUserInfo", result.data); |
| | | |
| | | router.push({ path: "/" }); |
| | | }); |
| | | }; |
| | | const loginPress = (e) => { |
| | |
| | | } |
| | | }; |
| | | const openUrl = (url) => { |
| | | window.open(url, '_blank'); |
| | | window.open(url, "_blank"); |
| | | }; |
| | | return { |
| | | loading, |
| | |
| | | login, |
| | | userInfo, |
| | | loginPress, |
| | | openUrl |
| | | openUrl, |
| | | }; |
| | | }, |
| | | directives: { |
| | | focus: { |
| | | inserted: function (el) { |
| | | el.focus(); |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | }, |
| | | }); |
| | | </script> |
| | | <style lang="less" scoped> |
| | |
| | | |
| | | <style lang="less" scoped> |
| | | @media screen and (max-width: 700px) { |
| | | |
| | | .login-bg, |
| | | .account-info, |
| | | .app-link, |