feat-登录表单

pnpm-lock.yaml

@@ -90,6 +90,19 @@ devDependencies:
 
 packages:
 
+  registry.nlark.com/ee-first/1.1.1:
+    resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/ee-first/download/ee-first-1.1.1.tgz}
+    name: ee-first
+    version: 1.1.1
+    dev: true
+
+  registry.nlark.com/utils-merge/1.0.1:
+    resolution: {integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/utils-merge/download/utils-merge-1.0.1.tgz}
+    name: utils-merge
+    version: 1.0.1
+    engines: {node: '>= 0.4.0'}
+    dev: true
+
   registry.npmmirror.com/@ampproject/remapping/2.2.0:
     resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.0.tgz}
     name: '@ampproject/remapping'
@@ -2702,12 +2715,6 @@ packages:
       sigmund: registry.npmmirror.com/sigmund/1.0.1
     dev: true
 
-  registry.npmmirror.com/ee-first/1.1.1:
-    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz}
-    name: ee-first
-    version: 1.1.1
-    dev: true
-
   registry.npmmirror.com/electron-to-chromium/1.4.148:
     resolution: {integrity: sha512-8MJk1bcQUAYkuvCyWZxaldiwoDG0E0AMzBGA6cv3WfuvJySiPgfidEPBFCRRH3cZm6SVZwo/oRlK1ehi1QNEIQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.148.tgz}
     name: electron-to-chromium
@@ -3319,7 +3326,7 @@ packages:
       setprototypeof: registry.npmmirror.com/setprototypeof/1.2.0
       statuses: registry.npmmirror.com/statuses/2.0.1
       type-is: registry.npmmirror.com/type-is/1.6.18
-      utils-merge: registry.npmmirror.com/utils-merge/1.0.1
+      utils-merge: registry.nlark.com/utils-merge/1.0.1
       vary: registry.npmmirror.com/vary/1.1.2
     transitivePeerDependencies:
       - supports-color
@@ -4871,7 +4878,7 @@ packages:
     version: 2.4.1
     engines: {node: '>= 0.8'}
     dependencies:
-      ee-first: registry.npmmirror.com/ee-first/1.1.1
+      ee-first: registry.nlark.com/ee-first/1.1.1
     dev: true
 
   registry.npmmirror.com/once/1.4.0:
@@ -6441,13 +6448,6 @@ packages:
     name: util-deprecate
     version: 1.0.2
 
-  registry.npmmirror.com/utils-merge/1.0.1:
-    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/utils-merge/-/utils-merge-1.0.1.tgz}
-    name: utils-merge
-    version: 1.0.1
-    engines: {node: '>= 0.4.0'}
-    dev: true
-
   registry.npmmirror.com/v8-compile-cache/2.3.0:
     resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz}
     name: v8-compile-cache

src/components/BasicInput/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <input :type="type" v-bind="$attrs" />
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    name: 'BasicInput',
+    props: {
+      type: {
+        type: String,
+        default: 'text',
+      },
+    },
+    setup(props) {
+      const test = 'Test';
+      return { test };
+    },
+  });
+</script>
+
+<style lang="scss" scoped></style>

src/components/test/Test.vue

@@ -1,16 +0,0 @@
-<template>Test Component-----{{ msg }}</template>
-
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'Test',
-    setup() {
-      const msg = 'sdfa';
-      return {
-        msg,
-      };
-    },
-  });
-</script>
-<style scoped lang="scss"></style>

src/pages/index/index.vue

@@ -4,7 +4,6 @@
     <view class="text-area bg-rose-500 h-30rpx p-20rpx red">
       <text class="">{{ title }}</text>
     </view>
-    <Test />
     <view>
       <button @tap="jumLogin">登录</button>
     </view>
@@ -19,7 +18,6 @@
 
 <script setup lang="ts">
   import { ref, reactive } from 'vue';
-  import Test from '@/components/test/Test.vue';
   import { router } from '@/utils/router';
   const title = ref('Hello');
   type Data = {

src/pages/login/index.vue

@@ -1,19 +1,24 @@
 <template>
-  <view class="container">
-    <view>
-      <label
-        >邮箱:
-        <input class="border border-gray-500" v-model="form.email" type="text" />
+  <view class="max-w-4/5 mx-auto py-36rpx text-center pt-280rpx">登录</view>
+  <view class="shadow-lg max-w-4/5 mx-auto py-36rpx px-24rpx">
+    <form class="form" @submit="submit">
+      <label class="h-44px flex items-center border-0 border-b-3rpx border-solid border-blue-100">
+        <view class="min-w-96rpx">邮箱:</view>
+        <view class="flex-grow"><BasicInput name="email" :value="form.email" /></view>
       </label>
-      <label
-        >密码:
-        <input class="border border-gray-500" v-model="form.password" type="text" />
+      <label class="h-44px flex items-center border-0 border-b-3rpx border-solid border-blue-100">
+        <view class="min-w-96rpx">密码:</view>
+        <view class="flex-grow"
+          ><BasicInput type="password" name="password" :value="form.password"
+        /></view>
       </label>
-      <button v-if="isLogin" @tap="loginOut">login out</button>
-      <button v-else @tap="submit">login</button>
-      {{ loginType }}
-      <view>{{ token }}---</view>
-    </view>
+      <button
+        form-type="submit"
+        class="border-4rp mt-44rpx h-88rpx flex items-center justify-center border-solid border-blue-200 bg-blue-400 hover:bg-blue-500 text-xs text-light-100 hover:text-light-100"
+        hover-class="none"
+        >登录</button
+      >
+    </form>
   </view>
 </template>
 
@@ -21,32 +26,25 @@
   import { reactive, ref } from 'vue';
   import { useAuthStore } from '@/state/modules/auth';
   import { onLoad } from '@dcloudio/uni-app';
+  import BasicInput from '@/components/BasicInput/index.vue';
+  import { Toast } from '@/utils/uniApi';
+  import { router } from '@/utils/router';
   const redirect = ref<string | undefined>(undefined);
   onLoad((query) => {
-    console.log('log onLOad', query);
     redirect.value = query.redirect || undefined;
   });
 
   const form = reactive({
-    email: 'catch@admin.com',
-    password: 'catchadmin',
+    email: 'uni-app@test.com',
+    password: 'Vue3_Ts_Vite',
   });
-  const loginType = ref('');
-
   const authStore = useAuthStore();
-
-  const token = ref<string | undefined>(authStore.getToken);
-  const isLogin = ref<boolean>(authStore.isLogin);
-  const submit = () => {
-    authStore.login(form).then((res) => {
-      token.value = res.token;
-      isLogin.value = authStore.isLogin;
-    });
-  };
-  const loginOut = () => {
-    authStore.loginOut().then((res) => {
-      token.value = res.token;
-      isLogin.value = authStore.isLogin;
+  const submit = (e: any) => {
+    authStore.login(e.detail.value).then((res) => {
+      Toast('登录成功', { duration: 1500 });
+      setTimeout(() => {
+        router.pushTab('/pages/about/index');
+      }, 1500);
     });
   };
 </script>