hazardousWaste_app/pages/login/login.vue

<template>
  <view class="container">
    <view class="huanying">HELLO，</view>
    <view class="huanyingText">
      欢迎登录
      <text>智汇仓储管理</text>
    </view>
    <view class="huanyingDes">
      <!-- 近距离、快响应，即时补给线 -->
    </view>
    <uv-form labelPosition="left" :model="formModel" labelWidth="80" :rules="rules" class="formContent" ref="formRef">
      <uv-form-item label="用户名" prop="userInfo.username" borderBottom>
        <uv-input v-model="formModel.userInfo.username" border="none" placeholder="请输入用户名" />
      </uv-form-item>
      <uv-form-item label="密码" prop="userInfo.password" borderBottom>
        <uv-input v-model="formModel.userInfo.password" :type="showPass ? '' : 'password'" border="none"
          placeholder="请输入密码" />
        <template v-slot:right>
          <uv-icon name="eye" @tap="changePassStatus" v-show="!showPass"></uv-icon>
          <uv-icon name="eye-off-outline" @tap="changePassStatus" v-show="showPass"></uv-icon>
        </template>
      </uv-form-item>
      <uv-form-item label="验证码" prop="userInfo.code" v-if="captchaEnabled" borderBottom>
        <uv-input v-model="formModel.userInfo.code" border="none" placeholder="请输入验证码" />
        <uv-image :src="codeUrl" @click="getCode" width="200rpx" height="70rpx"></uv-image>
      </uv-form-item>
      <uv-button type="primary" size="large" text="登 录" shape="circle" color="#199793" customStyle="margin-top: 50px"
        @click="submit"></uv-button>
    </uv-form>
  </view>
</template>

<script setup>
import { ref } from "vue";
import {removeStorage} from '../until';

import { userLogin, getCodeImg, getInfo } from "@/api/login"

const formModel = ref({
  userInfo: {
    username: "admin",
    password: "admin123",
    code: "",
    uuid: ""
  },
})
const formRef = ref()

const codeUrl = ref("")
const captchaEnabled = ref(true)// 验证码开关

const showPass = ref(false)

const rules = ({
  'userInfo.username': {
    type: 'string',
    required: true,
    message: '输入用户名',
    trigger: ['blur', 'change']
  },
  'userInfo.password': {
    type: 'string',
    required: true,
    message: '请填写密码',
    trigger: ['blur', 'change']
  },
  'userInfo.code': {
    type: 'string',
    required: true,
    message: '请填写验证码',
    trigger: ['blur', 'change']
  },
})
function getCode() {
  getCodeImg().then(res => {
    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
    if (captchaEnabled.value) {
      codeUrl.value = "data:image/gif;base64," + res.img
      formModel.value.userInfo.uuid = res.uuid
    }
  })
}

const changePassStatus = () => {
  showPass.value = !showPass.value
}

// 提交
const submit = () => {
  // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
  formRef.value.validate().then(res => {
    userLogin(formModel.value.userInfo).then(res => {
      uni.setStorageSync('app_token', res.token)
      if (res) {
        getInfo().then(user => {
          if (user.code == 200) {
            uni.setStorageSync('app_user', user.user)
            uni.setStorageSync('app_roles', user.roles)
            uni.setStorageSync('app_permissions', user.permissions)
            removeStorage()
            uni.switchTab({
              url: "/pages/index/index"
            })
          }
        })
      }
    }).catch(e => {
      if (e?.data?.code == 500) {
        getCode()
      }

    })
  }).catch(errors => {
    console.log(errors, '')
  })
}
getCode()
</script>

<style lang="scss" scoped>
.container {
  padding: 0 56rpx;
  .title {
    font-size: 72rpx;
  }

  .formContent {
    margin-top: 140rpx;
  }

  .huanyingText {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 34rpx;
    color: #000000;
    line-height: 44rpx;
    font-style: normal;
    margin-top: 38rpx;

    text {
      color: #199793;
    }
  }

  .huanying {
    margin-top: 130rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 72rpx;
    color: #000000;
  }

  .huanyingDes {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    line-height: 44rpx;
    font-style: normal;
    margin-top: 24rpx;
  }
}

::v-deep .uv-input__content {
  flex-direction: column;
  align-items: unset;
}
</style>