12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- <template>
- <view class="formLogin">
- <a-form
- :model="formState"
- name="basic"
- :label-col="{ span: 8 }"
- :wrapper-col="{ span: 16 }"
- autocomplete="off"
- @finish="onFinish"
- @finishFailed="onFinishFailed"
- >
- <a-form-item
- label="账号:"
- name="username"
- :rules="[{ required: true, message: '请输入账号!' }]"
- >
- <a-input v-model:value="formState.username" style="width: 15vw"/>
- </a-form-item>
- <a-form-item
- label="密码:"
- name="password"
- :rules="[{ required: true, message: '请输入密码!' }]"
- >
- <a-input-password v-model:value="formState.password" style="width: 15vw"/>
- </a-form-item>
- <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
- <a-button type="primary" @click="checkPassword" html-type="submit">登 录</a-button>
- </a-form-item>
- </a-form>
- </view>
- </template>
- <script lang="ts">
- import { defineComponent, reactive } from 'vue';
- interface FormState {
- username: string;
- password: string;
- }
- const formState = reactive<FormState>({
- username: '',
- password: '',
- });
- const onFinish = (values: any) => {
- console.log('Success:', values);
- };
- const onFinishFailed = (errorInfo: any) => {
- console.log('Failed:', errorInfo);
- };
- export default defineComponent({
- name: 'password',
- data() {
- return {
- errorMessage: '',
- formState,
- onFinish,
- onFinishFailed
- };
- },
- methods: {
- checkPassword() {
- const accont = 'zgsst';
- const correctPassword = 'lttc123$';
- if (formState.password === correctPassword && formState.username === accont) {
- const expirationTime = Date.now() + (15* 60 * 1000); // 30分钟后的时间戳
- localStorage.setItem('hasPassedPasswordCheck', "true");
- localStorage.setItem('hasPassedPasswordCheck_expiration', expirationTime.toString());
- uni.reLaunch({
- url: './backend'
- });
- } else {
- this.errorMessage = '密码错误,请重试';
- }
- }
- },
- });
- </script>
- <style>
- .formLogin{
- display: flex;
- justify-content: center; /* 水平居中 */
- align-items: center; /* 垂直居中 */
- height: 100vh; /* 让容器充满整个视口高度 */
- }
- </style>
|