Blame view

src/views/sys/lock/LockPage.vue 6.69 KB
vben authored
1
<template>
vben authored
2
3
4
5
6
7
  <div
    :class="prefixCls"
    class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center"
  >
    <div
      :class="`${prefixCls}__unlock`"
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
      class="
        absolute
        top-0
        left-1/2
        flex
        pt-5
        h-16
        items-center
        justify-center
        sm:text-md
        xl:text-xl
        text-white
        flex-col
        cursor-pointer
        transform
        translate-x-1/2
      "
vben authored
25
26
27
      @click="handleShowForm(false)"
      v-show="showDate"
    >
vben authored
28
29
30
31
      <LockOutlined />
      <span>{{ t('sys.lock.unlock') }}</span>
    </div>
vben authored
32
33
34
35
36
37
    <div class="flex w-screen h-screen justify-center items-center">
      <div :class="`${prefixCls}__hour`" class="relative mr-5 md:mr-20 w-2/5 h-2/5 md:h-4/5">
        <span>{{ hour }}</span>
        <span class="meridiem absolute left-5 top-5 text-md xl:text-xl" v-show="showDate">
          {{ meridiem }}
        </span>
vben authored
38
      </div>
vben authored
39
40
      <div :class="`${prefixCls}__minute w-2/5 h-2/5 md:h-4/5 `">
        <span> {{ minute }}</span>
41
      </div>
vben authored
42
43
44
45
    </div>
    <transition name="fade-slide">
      <div :class="`${prefixCls}-entry`" v-show="!showDate">
        <div :class="`${prefixCls}-entry-content`">
vben authored
46
          <div :class="`${prefixCls}-entry__header enter-x`">
47
            <img :src="userinfo.avatar || headerImg" :class="`${prefixCls}-entry__header-img`" />
48
            <p :class="`${prefixCls}-entry__header-name`">
49
              {{ userinfo.realName }}
50
            </p>
vben authored
51
          </div>
vben authored
52
53
54
55
56
          <InputPassword
            :placeholder="t('sys.lock.placeholder')"
            class="enter-x"
            v-model:value="password"
          />
Vben authored
57
          <span :class="`${prefixCls}-entry__err-msg enter-x`" v-if="errMsg">
vben authored
58
59
            {{ t('sys.lock.alert') }}
          </span>
vben authored
60
          <div :class="`${prefixCls}-entry__footer enter-x`">
vben authored
61
62
63
            <a-button
              type="link"
              size="small"
vben authored
64
              class="mt-2 mr-2 enter-x"
Vben authored
65
              :disabled="loading"
vben authored
66
67
              @click="handleShowForm(true)"
            >
vben authored
68
              {{ t('common.back') }}
vben authored
69
70
71
72
            </a-button>
            <a-button
              type="link"
              size="small"
vben authored
73
              class="mt-2 mr-2 enter-x"
Vben authored
74
              :disabled="loading"
vben authored
75
76
77
78
              @click="goLogin"
            >
              {{ t('sys.lock.backToLogin') }}
            </a-button>
Vben authored
79
            <a-button class="mt-2" type="link" size="small" @click="unLock()" :loading="loading">
vben authored
80
81
82
83
84
85
86
              {{ t('sys.lock.entry') }}
            </a-button>
          </div>
        </div>
      </div>
    </transition>
vben authored
87
88
89
    <div class="absolute bottom-5 w-full text-gray-300 xl:text-xl 2xl:text-3xl text-center enter-y">
      <div class="text-5xl mb-4 enter-x" v-show="!showDate">
        {{ hour }}:{{ minute }} <span class="text-3xl">{{ meridiem }}</span>
vben authored
90
      </div>
vben authored
91
      <div class="text-2xl"> {{ year }}/{{ month }}/{{ day }} {{ week }} </div>
vben authored
92
93
94
95
96
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
97
  import { Input } from 'ant-design-vue';
vben authored
98
Vben authored
99
100
  import { useUserStore } from '/@/store/modules/user';
  import { useLockStore } from '/@/store/modules/lock';
vben authored
101
102
103
104
105
106
  import { useI18n } from '/@/hooks/web/useI18n';

  import { useNow } from './useNow';
  import { useDesign } from '/@/hooks/web/useDesign';

  import { LockOutlined } from '@ant-design/icons-vue';
vben authored
107
  import headerImg from '/@/assets/images/header.jpg';
vben authored
108
109
110

  export default defineComponent({
    name: 'LockPage',
111
    components: { LockOutlined, InputPassword: Input.Password },
vben authored
112
113

    setup() {
Vben authored
114
115
116
      const password = ref('');
      const loading = ref(false);
      const errMsg = ref(false);
vben authored
117
118
119
      const showDate = ref(true);

      const { prefixCls } = useDesign('lock-page');
Vben authored
120
121
      const lockStore = useLockStore();
      const userStore = useUserStore();
vben authored
122
123
      const { ...state } = useNow(true);
vben authored
124
125
126

      const { t } = useI18n();
127
128
      const userinfo = computed(() => {
        return userStore.getUserInfo || {};
vben authored
129
130
131
132
133
134
      });

      /**
       * @description: unLock
       */
      async function unLock() {
Vben authored
135
        if (!password.value) {
vben authored
136
137
          return;
        }
Vben authored
138
        let pwd = password.value;
vben authored
139
        try {
Vben authored
140
141
142
          loading.value = true;
          const res = await lockStore.unLock(pwd);
          errMsg.value = !res;
vben authored
143
        } finally {
Vben authored
144
          loading.value = false;
vben authored
145
146
147
148
        }
      }

      function goLogin() {
149
        userStore.logout(true);
vben authored
150
151
152
153
154
155
156
157
158
        lockStore.resetLockInfo();
      }

      function handleShowForm(show = false) {
        showDate.value = show;
      }

      return {
        goLogin,
159
        userinfo,
vben authored
160
        unLock,
Vben authored
161
162
        errMsg,
        loading,
vben authored
163
164
165
        t,
        prefixCls,
        showDate,
Vben authored
166
        password,
vben authored
167
        handleShowForm,
vben authored
168
        headerImg,
vben authored
169
170
171
172
173
174
175
176
177
        ...state,
      };
    },
  });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-lock-page';

  .@{prefix-cls} {
vben authored
178
    z-index: @lock-page-z-index;
vben authored
179
180
181
182
183
184
185
186
187
188

    &__unlock {
      transform: translate(-50%, 0);
    }

    &__hour,
    &__minute {
      display: flex;
      font-weight: 700;
      color: #bababa;
189
      background-color: #141313;
vben authored
190
191
192
193
      border-radius: 30px;
      justify-content: center;
      align-items: center;
vben authored
194
195
196
197
      @media screen and (max-width: @screen-md) {
        span:not(.meridiem) {
          font-size: 160px;
        }
vben authored
198
      }
199
vben authored
200
201
202
      @media screen and (min-width: @screen-md) {
        span:not(.meridiem) {
          font-size: 160px;
203
        }
vben authored
204
      }
205
vben authored
206
207
208
      @media screen and (max-width: @screen-sm) {
        span:not(.meridiem) {
          font-size: 90px;
209
        }
vben authored
210
      }
vben authored
211
212
213
      @media screen and (min-width: @screen-lg) {
        span:not(.meridiem) {
          font-size: 220px;
vben authored
214
215
216
        }
      }
vben authored
217
218
219
220
221
222
223
224
225
      @media screen and (min-width: @screen-xl) {
        span:not(.meridiem) {
          font-size: 260px;
        }
      }
      @media screen and (min-width: @screen-2xl) {
        span:not(.meridiem) {
          font-size: 320px;
        }
vben authored
226
227
228
229
230
231
232
233
234
235
      }
    }

    &-entry {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 100%;
236
      background-color: rgba(0, 0, 0, 0.5);
vben authored
237
238
239
240
241
242
243
244
245
246
247
248
249
      backdrop-filter: blur(8px);
      justify-content: center;
      align-items: center;

      &-content {
        width: 260px;
      }

      &__header {
        text-align: center;

        &-img {
          width: 70px;
250
          margin: 0 auto;
vben authored
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
          border-radius: 50%;
        }

        &-name {
          margin-top: 5px;
          font-weight: 500;
          color: #bababa;
        }
      }

      &__err-msg {
        display: inline-block;
        margin-top: 10px;
        color: @error-color;
      }

      &__footer {
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>