parking_operation/pages/login/login.vue

<template>
  <view class="login">
    <view class="login-box">
      <view class="login-box-title">
        <view>智慧停车</view>
        <view>运营数据系统</view>
      </view>
      <view class="login-box-form">
        <view class="login-box-form-box">
          <u--form :model="form" :rules="rules" ref="uForm">
            <u-form-item label prop="phoneNumber">
              <u--input
                v-model="form.phoneNumber"
                :prefixIcon="require('@/static/icons/job-number-icon.svg')"
                placeholder="请输入手机号"
                :maxlength="11"
                type="number"
                border="none"
                class="custom-input"
                :prefixIconStyle="{ marginRight: '10px' }"
                fontSize="14px"
                color="#ffffff"
                placeholderStyle="color: #fff"
              />
            </u-form-item>
            <u-form-item label prop="password">
              <u--input
                v-model="form.password"
                :prefixIcon="require('@/static/icons/password-icon.svg')"
                placeholder="请输入密码"
                :password="true"
                border="none"
                class="custom-input"
                :prefixIconStyle="{ marginRight: '10px' }"
                fontSize="14px"
                color="#ffffff"
                placeholderStyle="color: #fff"
              />
            </u-form-item>
          </u--form>
        </view>
        <view class="login-box-form-btn">
          <u-button
            class="login-btn"
            type="primary"
            text="登录"
            :loading="loading"
            @click="submitLogin"
          ></u-button>
        </view>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        phoneNumber: '',
        password: ''
      },
      loading: false,
      rules: {
        phoneNumber: {
          required: true,
          message: '请输入手机号',
          trigger: ['change', 'blur']
        },
        password: {
          required: true,
          message: '请输入密码',
          trigger: ['change', 'blur']
        }
      }
    };
  },
  methods: {
    /**
     * 登录提交
     */
    submitLogin() {
      this.$refs.uForm
        .validate()
        .then((res) => {
          this.loading = true;
          const form = {
            ...this.form
          };
          uni.$u.api
            .loginApi({
              telephone: form.phoneNumber,
              loginPwd: form.password
            })
            .then((res) => {
              if (res.code === 200) {
                uni.$u.vuex('vuex_token', res.data.token);
                this.$u.vuex('vuex_user', res.data);
                this.$u.vuex('vuex_isLogin', true);
                this.$refs.uToast.show({
                  loading: true,
                  message: '登录成功!',
                  type: 'success',
                  complete() {
                    uni.$u.route({
                      url: 'pages/index/index',
                      type: 'redirect'
                    });
                  }
                });
              } else {
                this.$refs.uToast.show({
                  loading: true,
                  message: res.msg || '登录失败',
                  type: 'error'
                });
              }
            })
            .catch((err) => {
              this.loading = false;
            });
        })
        .catch((errors) => {
          uni.$u.toast(errors[0].message || '必填项不能为空!');
        });
    }
  }
};
</script>

<style lang="scss">
page {
  height: 100vh;
  background: linear-gradient(183deg, #2d82fb 0%, #1558f8 100%);
}
</style>

<style lang="scss" scoped>
@import './login.scss';
</style>