index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  1. <template>
  2. <div
  3. class="login-content"
  4. :style="{ 'background-image': 'url(' + login.config.background + ')' }"
  5. >
  6. <el-row>
  7. <el-col :xs="0" :sm="0" :md="13" :lg="14" :xl="14"></el-col>
  8. <el-col class="main" :xs="24" :sm="24" :md="11" :lg="10" :xl="10">
  9. <transition name="el-zoom-in-center">
  10. <!-- 使用账号密码登录 -->
  11. <div v-if="login.type == 'input'" class="login-wrap sa-flex sa-flex-center sa-flex-1">
  12. <div class="admin-name">
  13. <div>
  14. <div class="sa-line-1">欢迎来到{{ appName }}</div>
  15. <div class="admin-welcome">很高兴再次见到您</div>
  16. </div>
  17. </div>
  18. <el-form
  19. :model="form.data"
  20. :rules="form.rules"
  21. label-position="left"
  22. ref="formRef"
  23. label-width="0"
  24. >
  25. <el-form-item prop="account">
  26. <el-input :class="form.data.account ? 'is-focus' : ''" v-model="form.data.account">
  27. <template #prefix>
  28. <div class="label">账号</div>
  29. </template>
  30. </el-input>
  31. </el-form-item>
  32. <el-form-item prop="pwd">
  33. <el-input
  34. :class="form.data.pwd ? 'is-focus' : ''"
  35. v-model="form.data.pwd"
  36. :type="showPwd ? 'password' : 'text'"
  37. autocomplete="new-password"
  38. >
  39. <template #prefix>
  40. <div class="label">密码</div>
  41. </template>
  42. <template #suffix>
  43. <span v-if="showPwd" @click="showPwd = false">
  44. <sa-svg name="sa-password-hide" size="24"></sa-svg>
  45. </span>
  46. <span v-if="!showPwd" @click="showPwd = true">
  47. <sa-svg name="sa-password-show" size="24"></sa-svg>
  48. </span>
  49. </template>
  50. </el-input>
  51. </el-form-item>
  52. <div>
  53. <el-checkbox
  54. v-model="login.last.rememberMe"
  55. @change="changeRememberMe"
  56. label="记住我"
  57. ></el-checkbox>
  58. </div>
  59. <el-button type="primary" :loading="loginLoading" @click="accountLogin"
  60. >登录
  61. </el-button>
  62. </el-form>
  63. </div>
  64. <!-- 有记住的用户 -->
  65. <div
  66. v-else-if="login.type == 'rememberMe'"
  67. class="login-wrap sa-flex sa-flex-center sa-flex-1"
  68. >
  69. <div class="admin-name sa-flex sa-row-center">
  70. <sa-image :url="login.last.info.avatar" size="80" radius="40"></sa-image>
  71. </div>
  72. <el-form
  73. :model="form.data"
  74. :rules="form.rules"
  75. label-position="left"
  76. ref="formRef"
  77. label-width="0"
  78. >
  79. <el-form-item prop="account">
  80. <div class="sa-flex-1 sa-flex sa-row-center">
  81. {{ login.last.info.nickname }}
  82. </div>
  83. </el-form-item>
  84. <el-form-item prop="pwd">
  85. <el-input
  86. :class="form.data.pwd ? 'is-focus' : ''"
  87. v-model="form.data.pwd"
  88. :type="showPwd ? 'password' : 'text'"
  89. autocomplete="new-password"
  90. >
  91. <template #prefix>
  92. <div class="label">密码</div>
  93. </template>
  94. <template #suffix>
  95. <span v-if="showPwd" @click="showPwd = false">
  96. <sa-svg name="sa-password-hide" size="24"></sa-svg>
  97. </span>
  98. <span v-if="!showPwd" @click="showPwd = true">
  99. <sa-svg name="sa-password-show" size="24"></sa-svg>
  100. </span>
  101. </template>
  102. </el-input>
  103. </el-form-item>
  104. <el-button type="primary" :loading="loginLoading" @click="accountLogin"
  105. >登录
  106. </el-button>
  107. <el-button @click="changeLoginType('input')"> 使用其他账号登录 </el-button>
  108. </el-form>
  109. </div>
  110. </transition>
  111. </el-col>
  112. </el-row>
  113. </div>
  114. </template>
  115. <script setup>
  116. import { reactive, ref, unref, computed, onBeforeMount, onMounted, onUnmounted } from 'vue';
  117. import router from '@/sheep/router';
  118. import { useRoute } from 'vue-router';
  119. import adminApi from '@/sheep/local-data/admin';
  120. import storage from '@/sheep/utils/storage';
  121. import sheep from '@/sheep';
  122. import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
  123. import { ElMessage } from 'element-plus';
  124. const accountStore = sheep.$store('account');
  125. const appStore = sheep.$store('app');
  126. const routeQuery = useRoute().query;
  127. if (routeQuery.token) {
  128. accountStore.setToken(`${routeQuery.token}`);
  129. }
  130. const appName = computed(() => appStore.info.name);
  131. const showPwd = ref(true);
  132. const loginLoading = ref(false);
  133. const formRef = ref(null);
  134. const form = reactive({
  135. data: {
  136. account: '',
  137. pwd: '',
  138. },
  139. rules: {
  140. account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  141. pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  142. },
  143. });
  144. // 登录
  145. const accountLogin = async () => {
  146. // 表单验证
  147. unref(formRef).validate(async (valid) => {
  148. if (!valid) return;
  149. loginLoading.value = true;
  150. let submit = form.data;
  151. const { code } = await accountStore.login(submit);
  152. loginLoading.value = false;
  153. if (code == '200') {
  154. ElMessage.success('登录成功');
  155. storage.set('lastLogin', login.last);
  156. await appStore.appLoad();
  157. router.push('/');
  158. }
  159. });
  160. };
  161. const login = reactive({
  162. config: {
  163. background: '',
  164. },
  165. type: 'input',
  166. last: {},
  167. });
  168. // 初始化登陆表单
  169. function checkLastLogin() {
  170. login.last = storage.get('lastLogin', { rememberMe: false });
  171. if (login.last.rememberMe) {
  172. login.type = 'rememberMe';
  173. form.data.account = login.last.info.account;
  174. }
  175. }
  176. function changeLoginType(type) {
  177. login.type = type;
  178. if (type == 'input') {
  179. form.data.account = '';
  180. form.data.pwd = '';
  181. initLogin();
  182. }
  183. }
  184. function changeRememberMe(e) {
  185. login.last.rememberMe = e;
  186. }
  187. onBeforeMount(async () => {
  188. // 检测登录态
  189. if (accountStore.isLogin) {
  190. await appStore.appLoad();
  191. router.push('/');
  192. } else {
  193. initLogin();
  194. checkLastLogin();
  195. }
  196. });
  197. onMounted(() => {
  198. document.addEventListener('keyup', enterKey);
  199. });
  200. onUnmounted(() => {
  201. document.removeEventListener('keyup', enterKey);
  202. });
  203. function enterKey(event) {
  204. const code = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
  205. if (code == 13) {
  206. accountLogin();
  207. }
  208. }
  209. async function initLogin() {
  210. const { data } = adminApi.loginConfig();
  211. console.log(data);
  212. login.config = data;
  213. login.config.background = login.config.background;
  214. }
  215. </script>
  216. <style lang="scss">
  217. .login-content {
  218. .el-form {
  219. width: 100%;
  220. .el-button {
  221. width: 100%;
  222. height: 48px;
  223. line-height: 1;
  224. margin-top: 10px;
  225. }
  226. .el-button--default {
  227. margin-top: 0;
  228. .sa-svg {
  229. font-size: 22px;
  230. margin-right: 6px;
  231. }
  232. }
  233. .el-form-item {
  234. margin-bottom: 32px;
  235. }
  236. .el-form-item__content {
  237. line-height: unset;
  238. }
  239. }
  240. }
  241. </style>
  242. <style lang="scss" scoped>
  243. .login-content {
  244. height: 100%;
  245. color: var(--sa-subtitle);
  246. background-size: cover;
  247. background-repeat: no-repeat;
  248. background-color: var(--sa-background-assist);
  249. @media only screen and (max-width: 768px) {
  250. background-position: center;
  251. }
  252. .el-row {
  253. height: 100%;
  254. .el-col {
  255. display: flex;
  256. align-items: center;
  257. }
  258. @media only screen and (max-width: 992px) {
  259. .el-col {
  260. justify-content: center;
  261. }
  262. }
  263. }
  264. .main {
  265. position: relative;
  266. }
  267. .login-wrap {
  268. width: 460px;
  269. flex-direction: column;
  270. padding: 56px 52px 64px;
  271. border-radius: 8px;
  272. background: var(--sa-background-assist);
  273. filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.2));
  274. position: absolute;
  275. .admin-name {
  276. width: 100%;
  277. height: 112px;
  278. font-size: 32px;
  279. text-align: center;
  280. .admin-welcome {
  281. font-size: 20px;
  282. margin-top: 16px;
  283. text-align: center;
  284. }
  285. .sa-image {
  286. margin-bottom: 32px;
  287. }
  288. }
  289. }
  290. .login-wrap {
  291. height: 500px;
  292. }
  293. @media only screen and (max-width: 768px) {
  294. .login-wrap {
  295. width: 100%;
  296. max-width: unset;
  297. height: 100%;
  298. border-radius: 0;
  299. padding: 56px 20px 64px;
  300. background: transparent;
  301. filter: unset;
  302. .admin-name {
  303. font-size: 26px;
  304. }
  305. }
  306. }
  307. :deep() {
  308. .el-input {
  309. --el-input-height: 48px;
  310. max-width: unset;
  311. .el-input__wrapper {
  312. position: relative;
  313. .label {
  314. display: flex;
  315. align-items: center;
  316. width: fit-content;
  317. height: 20px;
  318. position: absolute;
  319. top: 14px;
  320. left: 11px;
  321. pointer-events: none;
  322. font-size: 18px;
  323. color: var(--sa-subfont);
  324. }
  325. &.is-focus {
  326. .label {
  327. top: 4px;
  328. font-size: 12px;
  329. transition: ease-in-out 0.2s;
  330. }
  331. .el-input__inner {
  332. padding: 25px 0 9px;
  333. }
  334. }
  335. }
  336. &.is-focus {
  337. .label {
  338. top: 4px;
  339. font-size: 12px;
  340. transition: ease-in-out 0.2s;
  341. }
  342. .el-input__inner {
  343. padding: 25px 0 9px;
  344. }
  345. }
  346. }
  347. }
  348. }
  349. </style>