ruoyi-vue-pro/yudao-ui-app/pages/login/login.vue

<template>
	<view class="container">

    <view class="unp-header">
      <view class="unp-logo">
        <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
      </view>
    </view>

    <view class="unp-box">
      <u--form class="unp-form" labelPosition="left" :model="formData" :rules="rules" ref="form">
        <u-form-item label="账号" prop="username" borderBottom ref="item-username">
          <u-input type="text" maxlength="20" v-model="formData.username" clearable placeholder="账号由数字和字母组成" border="none" @change="handleUsernameChange"></u-input>
        </u-form-item>

        <u-gap height="20"></u-gap>

        <u-form-item label="密码" prop="password" borderBottom ref="item-password">
            <u-input :type="inputType" maxlength="20" v-model="formData.password" placeholder="密码由数字、字母和符号组成" border="none" @change="handlePasswordChange">
              <template slot="suffix">
              <u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill" @click="inputType = 'text'"></u-icon>
              <u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off" @click="inputType = 'password'"></u-icon>
              </template>
            </u-input>
        </u-form-item>

        <view class="lk-group">
          <navigator url="/pages/register/register" hover-class="none">
            <text class="register">注册账号</text>
          </navigator>
          <navigator url="/pages/forgot/forgot" hover-class="none">
            <text class="forgot">忘记密码</text>
          </navigator>
        </view>

        <u-button
            type="primary"
            text="登录"
            customStyle="margin-top: 50px"
            @click="handleSubmit"
        ></u-button>

        <u-gap height="20"></u-gap>
        <u-button type="info" text="返回" @click="navigateBack()"></u-button>

      </u--form>


    </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
        inputType: 'password',
        formData: {
          username: '',
          password: '',
        },
        rules: {
          'username': {
            type: 'string',
            max: 20,
            required: true,
            message: '请输入您的账号',
            trigger: ['blur', 'change']
          },
          'password': {
            type: 'string',
            max: 20,
            required: true,
            message: '请输入您的密码',
            trigger: ['blur', 'change']
          }
        }
			}
		},
		onLoad() {

		},
		methods: {
      handleUsernameChange(e){
        let str = uni.$u.trim(e, 'all');
        this.$nextTick(() => {
          this.formData.username = str
        })
      },
      handlePasswordChange(e){
        let str = uni.$u.trim(e, 'all');
        this.$nextTick(() => {
          this.formData.password = str
        })
      },
      handleSubmit() {
        this.$refs.form.validate().then(res => {
          uni.$u.toast('点击了登录')
        }).catch(err => {

        })
      },
      navigateBack() {
        uni.navigateBack()
      }
		}
	}
</script>

<style lang="scss" scoped>

.unp-header {
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .unp-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

.unp-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .unp-form{
    width: 560rpx;
  }
}

.lk-group {
  height: 40rpx;
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12rpx;

  color: #3c9cff;
  text-decoration: #3c9cff;
}


</style>