Browse Source

feat(login): upd

曾志翔 3 years ago
parent
commit
86771aabf0
5 changed files with 92 additions and 63 deletions
  1. 2 23
      pages/index.vue
  2. 2 2
      pages/inspire.vue
  3. 58 16
      pages/login.vue
  4. 20 16
      pages/register-for-invite.vue
  5. 10 6
      schemes/password.js

+ 2 - 23
pages/index.vue

@@ -1,13 +1,8 @@
 <template>
   <div>
     <div>
-      <div>title</div>
       <div>
-        <button @click="$router.push('/inspire')">inspire</button>
-      </div>
-      <div class="justify-end">
-        <button @click="getContentByType()">getContentByType</button>
-        <button @click="message()">message</button>
+        <v-btn to="/inspire" nuxt>inspire</v-btn>
       </div>
     </div>
     <div class="">{{ FILE_PREFIX }}</div>
@@ -24,7 +19,6 @@
 </template>
 
 <script>
-import { getContentByType } from '~/api/public/agreement.js';
 export default {
   name: 'IndexPage',
   auth: false,
@@ -42,21 +36,6 @@ export default {
   },
   fetch() {},
   mounted() {},
-  methods: {
-    async getContentByType() {
-      const data = await getContentByType(this, 'XYPZYHXY2004', 1);
-      console.log(
-        '🚀 ~ file: index.vue ~ line 24 ~ getContentByType ~ data',
-        data,
-      );
-    },
-    message() {
-      this.$message({
-        app: true,
-        content: '123456798',
-        icon: '$success',
-      });
-    },
-  },
+  methods: {},
 };
 </script>

+ 2 - 2
pages/inspire.vue

@@ -6,8 +6,8 @@
         <div class="">{{ $auth.user }}</div>
       </div>
       <div class="justify-end">
-        <button v-if="$auth.loggedIn" @click="$auth.logout()">logout</button>
-        <button v-else @click="$auth.redirect('login')">login</button>
+        <v-btn v-if="$auth.loggedIn" @click="$auth.logout()">logout</v-btn>
+        <v-btn v-else @click="$auth.redirect('login')">login</v-btn>
       </div>
     </div>
   </div>

+ 58 - 16
pages/login.vue

@@ -1,16 +1,48 @@
 <template>
-  <div>
-    <div>
-      <div>
-        <input v-model="form.phone" />
-        <input v-model="form.password" />
-      </div>
-      <div>
-        <button v-if="$auth.loggedIn" @click="logout()">logout</button>
-        <button v-else @click="login()">login</button>
-      </div>
-    </div>
-  </div>
+  <v-container class="login-page" fluid>
+    <validation-observer ref="observer" v-slot="{ invalid }" slim>
+      <v-form @submit.prevent="submit()">
+        <validation-provider
+          v-slot="{ errors }"
+          ref="providerPhome"
+          name="手机号码"
+          rules="required|min:11|max:11"
+          slim
+        >
+          <v-text-field
+            v-model="form.phone"
+            label="手机号码"
+            name="phone"
+            required
+            :error-messages="errors"
+            maxlength="11"
+            type="tel"
+          />
+        </validation-provider>
+        <validation-provider
+          v-slot="{ errors }"
+          ref="providerPassword"
+          name="密码"
+          rules="required"
+          slim
+        >
+          <v-text-field
+            v-model="form.password"
+            label="手机号码"
+            name="phone"
+            required
+            :error-messages="errors"
+            type="password"
+          />
+        </validation-provider>
+        <div class="">
+          <v-btn type="submit" :disabled="invalid" :loading="submitting"
+            >login</v-btn
+          >
+        </div>
+      </v-form>
+    </validation-observer>
+  </v-container>
 </template>
 
 <script>
@@ -22,13 +54,23 @@ export default {
         phone: '17600000010',
         password: '1234567890',
       },
+      submitting: false,
     };
   },
   methods: {
-    login() {
-      return this.$auth.loginWith('password', {
-        data: this.form,
-      });
+    async submit() {
+      try {
+        this.submitting = true;
+        const valid = await this.$refs.observer.validate();
+        if (valid) {
+          await this.login(this.form);
+        }
+      } finally {
+        this.submitting = false;
+      }
+    },
+    async login(data) {
+      await this.$auth.loginWith('password', data);
     },
     logout() {
       return this.$auth.logout();

+ 20 - 16
pages/register-for-invite.vue

@@ -5,6 +5,7 @@
       <v-form @submit.prevent="submit()">
         <validation-provider
           v-slot="{ errors }"
+          ref="providerPhome"
           name="手机号码"
           rules="required|min:11|max:11"
           slim
@@ -88,9 +89,9 @@ export default {
     async submit() {
       try {
         this.submitting = true;
-        this.$tongji.trackEvent('活动', '注册', '', 0);
-        const validationResult = await this.$refs.observer.validate();
-        if (validationResult) {
+        const valid = await this.$refs.observer.validate();
+        if (valid) {
+          this.$tongji.trackEvent('活动', '注册', '', 0);
           const res = await registerForInvite(this, this.form);
           this.$toast.success(res.msg);
         }
@@ -101,19 +102,22 @@ export default {
     async sendSmsCode() {
       try {
         this.codeSending = true;
-        this.$tongji.trackEvent('活动', '发送短信', '', 0);
-        const res = await sendSmsCode(this, {
-          type: 'common',
-          authorizationType: 4,
-          phone: this.form.phone,
-        });
-        this.codeTime = 60;
-        this.codeInterval = setInterval(() => {
-          if (--this.codeTime <= 0) {
-            clearInterval(this.codeInterval);
-          }
-        }, 1000);
-        this.$toast.success(res.msg);
+        const validationResult = await this.$refs.providerPhome.validate();
+        if (validationResult.valid) {
+          this.$tongji.trackEvent('活动', '发送短信', '', 0);
+          const res = await sendSmsCode(this, {
+            type: 'common',
+            authorizationType: 4,
+            phone: this.form.phone,
+          });
+          this.codeTime = 60;
+          this.codeInterval = setInterval(() => {
+            if (--this.codeTime <= 0) {
+              clearInterval(this.codeInterval);
+            }
+          }, 1000);
+          this.$toast.success(res.msg);
+        }
       } finally {
         this.codeSending = false;
       }

+ 10 - 6
schemes/password.js

@@ -6,8 +6,12 @@ let publicKey;
 const encrypt = new JSEncrypt();
 
 export default class CustomScheme extends LocalScheme {
-  async login(endpoint, { reset = true } = {}) {
-    endpoint.data = Object.assign({}, endpoint.data);
+  async login(data, { reset = true } = {}) {
+    const endpoint = { data: Object.assign({}, data) };
+
+    // endpoint.data = Object.assign({}, endpoint.data);
+
+    // endpoint.data = endpoint.data;
 
     if (!this.options.endpoints.login) {
       return;
@@ -31,10 +35,10 @@ export default class CustomScheme extends LocalScheme {
       ).data.publicKey;
       encrypt.setPublicKey(publicKey);
     }
-    console.log(
-      '🚀 ~ file: password.js ~ line 37 ~ CustomScheme ~ login ~ publicKey',
-      publicKey,
-    );
+    // console.log(
+    //   '🚀 ~ file: password.js ~ line 37 ~ CustomScheme ~ login ~ publicKey',
+    //   publicKey,
+    // );
     const md5 = createHash('md5');
 
     endpoint.data.password = encrypt.encrypt(