dvcp_v2_wxcp_app/src/pages/login.vue

<template>
  <section class="login">
    <u-form :model="form" ref="loginForm" label-width="140">
      <u-form-item label="账号" prop="username">
        <u-input v-model="form.username" placeholder="请输入手机号"/>
      </u-form-item>
      <u-form-item label="密码" prop="password">
        <u-input type="password" v-model="form.password" placeholder="请输入密码"/>
      </u-form-item>
    </u-form>
    <div bottom>
      <u-button type="primary" @tap="handleLogin">登录</u-button>
    </div>
  </section>
</template>

<script>
import {mapActions, mapMutations} from "vuex";

export default {
  name: "login",
  inject: ['root'],
  computed: {
    rules() {
      return {
        username: [{required: true, message: "请输入 手机号"}],
        password: [{required: true, message: "请输入 密码"}],
      }
    }
  },
  data() {
    return {
      form: {}
    }
  },
  methods: {
    ...mapActions(['getToken']),
    ...mapMutations(['login']),
    handleLogin() {
      this.$refs.loginForm.validate(v => {
        if (v) {
          this.getToken(this.form).then(() => {
            uni.navigateBack({})
          })
        }
      })
    }
  },
  mounted() {
    this.$nextTick(() => this.$refs.loginForm?.setRules(this.rules))
  }
}
</script>

<style lang="scss" scoped>
.login {
  border-top: 1px solid #D4D4D4;
  padding: 0 0 208px;
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;

  .vcode {
    color: $uni-color-primary;
    cursor: pointer;
  }
}
</style>