checkPassword.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <view class="formLogin">
  3. <a-form
  4. :model="formState"
  5. name="basic"
  6. :label-col="{ span: 8 }"
  7. :wrapper-col="{ span: 16 }"
  8. autocomplete="off"
  9. @finish="onFinish"
  10. @finishFailed="onFinishFailed"
  11. >
  12. <a-form-item
  13. label="账号:"
  14. name="username"
  15. :rules="[{ required: true, message: '请输入账号!' }]"
  16. >
  17. <a-input v-model:value="formState.username" style="width: 15vw"/>
  18. </a-form-item>
  19. <a-form-item
  20. label="密码:"
  21. name="password"
  22. :rules="[{ required: true, message: '请输入密码!' }]"
  23. >
  24. <a-input-password v-model:value="formState.password" style="width: 15vw"/>
  25. </a-form-item>
  26. <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
  27. <a-button type="primary" @click="checkPassword" html-type="submit">登 录</a-button>
  28. </a-form-item>
  29. </a-form>
  30. </view>
  31. </template>
  32. <script lang="ts">
  33. import { defineComponent, reactive } from 'vue';
  34. interface FormState {
  35. username: string;
  36. password: string;
  37. }
  38. const formState = reactive<FormState>({
  39. username: '',
  40. password: '',
  41. });
  42. const onFinish = (values: any) => {
  43. console.log('Success:', values);
  44. };
  45. const onFinishFailed = (errorInfo: any) => {
  46. console.log('Failed:', errorInfo);
  47. };
  48. export default defineComponent({
  49. name: 'password',
  50. data() {
  51. return {
  52. errorMessage: '',
  53. formState,
  54. onFinish,
  55. onFinishFailed
  56. };
  57. },
  58. methods: {
  59. checkPassword() {
  60. const accont = 'zgsst';
  61. const correctPassword = 'lttc123$';
  62. if (formState.password === correctPassword && formState.username === accont) {
  63. const expirationTime = Date.now() + (15* 60 * 1000); // 30分钟后的时间戳
  64. localStorage.setItem('hasPassedPasswordCheck', "true");
  65. localStorage.setItem('hasPassedPasswordCheck_expiration', expirationTime.toString());
  66. uni.reLaunch({
  67. url: './backend'
  68. });
  69. } else {
  70. this.errorMessage = '密码错误,请重试';
  71. }
  72. }
  73. },
  74. });
  75. </script>
  76. <style>
  77. .formLogin{
  78. display: flex;
  79. justify-content: center; /* 水平居中 */
  80. align-items: center; /* 垂直居中 */
  81. height: 100vh; /* 让容器充满整个视口高度 */
  82. }
  83. </style>