CRM系统前端
查看 | 历史 | 提交 | 提交对比
nebv
2020-10-11 03b6025d07e4df99474f80d3fa57e8b5238ba40c
提交 | 用户 | age
2f6253 1 <template>
03b602 2   <div class="login">
N 3     <div class="login-mask" />
4     <div class="login-form-wrap">
5       <div class="login-form mx-6">
6         <div class="login-form__content px-2 py-10">
7           <header>
8             <img src="/@/assets/images/logo.png" class="mr-4" />
9             <h1>{{ title }}</h1>
2f6253 10           </header>
陈 11
03b602 12           <a-form class="mx-auto mt-10" :model="formData" :rules="formRules" ref="formRef">
2f6253 13             <a-form-item name="account">
陈 14               <a-input size="large" v-model:value="formData.account" placeholder="vben" />
15             </a-form-item>
16             <a-form-item name="password">
17               <a-input-password
18                 autofocus="autofocus"
19                 size="large"
20                 visibilityToggle
21                 v-model:value="formData.password"
22                 placeholder="123456"
23               />
24             </a-form-item>
25             <a-form-item name="verify" v-if="openLoginVerify">
26               <BasicDragVerify v-model:value="formData.verify" ref="verifyRef" />
27             </a-form-item>
28             <a-form-item>
29               <a-button
30                 type="primary"
31                 size="large"
32                 class="rounded-sm"
33                 block
34                 @click="login"
35                 :loading="formState.loading"
36                 >登录</a-button
37               >
38             </a-form-item>
39           </a-form>
40         </div>
41       </div>
42     </div>
43   </div>
44 </template>
45 <script lang="ts">
46   import { defineComponent, reactive, ref, unref, toRaw, computed } from 'vue';
47   import { BasicDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
48   import { userStore } from '/@/store/modules/user';
49   import { appStore } from '/@/store/modules/app';
50   import { useMessage } from '/@/hooks/web/useMessage';
03b602 51   import { useSetting } from '/@/hooks/core/useSetting';
2f6253 52   export default defineComponent({
陈 53     components: { BasicDragVerify },
54     setup() {
03b602 55       const { globSetting } = useSetting();
2f6253 56       const { notification } = useMessage();
陈 57       const formRef = ref<any>(null);
58       const verifyRef = ref<RefInstanceType<DragVerifyActionType>>(null);
59
60       const openLoginVerifyRef = computed(() => appStore.getProjectConfig.openLoginVerify);
61
62       const formData = reactive({
63         account: '',
64         password: '',
65         verify: undefined,
66       });
67       const formState = reactive({
68         loading: false,
69       });
70
71       const formRules = reactive({
72         account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
73         password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
74         verify: unref(openLoginVerifyRef) ? [{ required: true, message: '请通过验证码校验' }] : [],
75       });
76
77       function resetVerify() {
78         const verify = unref(verifyRef);
79         if (!verify) return;
80         formData.verify && verify.$.resume();
81         formData.verify = undefined;
82       }
83
84       async function handleLogin() {
85         const form = unref(formRef);
86         if (!form) return;
87         formState.loading = true;
88         try {
89           const data = await form.validate();
90           const userInfo = await userStore.login(
91             toRaw({
92               password: data.password,
93               username: data.account,
94             })
95           );
96           if (userInfo) {
97             notification.success({
98               message: '登录成功',
99               description: `欢迎回来: ${userInfo.realName}`,
100               duration: 3,
101             });
102           }
103         } catch (error) {
104         } finally {
105           resetVerify();
106           formState.loading = false;
107         }
108       }
109
110       return {
111         formRef,
112         verifyRef,
113         formData,
114         formState,
115         formRules,
116         login: handleLogin,
117         openLoginVerify: openLoginVerifyRef,
03b602 118         title: globSetting && globSetting.title,
2f6253 119       };
陈 120     },
121   });
122 </script>
123 <style lang="less" scoped>
03b602 124   @import (reference) '../../../design/index.less';
N 125
2f6253 126   .login {
03b602 127     position: relative;
N 128     height: 100vh;
2f6253 129     background: url(../../../assets/images/login/login-bg.png) no-repeat;
陈 130     background-size: 100% 100%;
131
132     &-mask {
03b602 133       display: none;
N 134       height: 100%;
2f6253 135       background: url(../../../assets/images/login/login-in.png) no-repeat;
陈 136       background-size: 100% 100%;
03b602 137
N 138       .respond-to(large, { display: block;});
2f6253 139     }
陈 140
141     &-form {
03b602 142       width: 100%;
N 143       background: @white;
144       border: 10px solid rgba(255, 255, 255, 0.5);
2f6253 145       border-width: 10px;
03b602 146       border-radius: 4px;
N 147       background-clip: padding-box;
148       .respond-to(xlarge, { margin: 0 56px});
149
150       &-wrap {
151         position: absolute;
152         top: 0;
153         right: 0;
154         display: flex;
155         width: 100%;
156         height: 100%;
157         justify-content: center;
158         align-items: center;
159         .respond-to(large, { width: 40%;});
160         .respond-to(xlarge, { width: 33.3%;});
161       }
162
163       &__content {
164         width: 100%;
165         height: 100%;
166         border: 1px solid #999;
167         border-radius: 2px;
168
169         header {
170           display: flex;
171           justify-content: center;
172           align-items: center;
173
174           img {
175             display: inline-block;
176             width: 48px;
177           }
178
179           h1 {
180             margin-bottom: 0;
181             font-size: 24px;
182             color: @primary-color;
183             text-align: center;
184           }
185         }
186
187         form {
188           width: 80%;
189         }
190       }
2f6253 191     }
陈 192   }
193 </style>