android-cloud-H5/pages/login.vue

<template>
  <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"
            placeholder="请输入"
            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="密码"
            placeholder="请输入"
            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>
export default {
  auth: 'guest',
  name: 'LoginPage',
  data() {
    return {
      form: {
        phone: '',
        password: '',
      },
      submitting: false,
    };
  },
  methods: {
    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();
    },
  },
};
</script>