delivery-depot-uniapp/pages/login/login.vue

<template>
  <view class="login-container">
	<image class="bg-image" src="../../static/login/login-bj.png"></image>
	<view class="login-title">
		<view class="welcome-text">您好，欢迎使用</view>
		<view class="system-name">交收库管理系统</view>
	</view>
    <view class="login-form">
      <view class="input-group">
		  
        <view class="input-label">
			<uni-icons custom-prefix="iconfont" type="icon-yonghu_yonghuming" color="#000000" size="18"></uni-icons>
			用户名称
		</view>
		<view class="uni-input-wrapper">
			<input v-model="username" class="input-field" placeholder="请输入用户名" />
		</view>
      </view>

      <view class="input-group">
		<view class="input-label">
			<uni-icons custom-prefix="iconfont" type="icon-mima" color="#000000" size="18"></uni-icons>
			登录密码
		</view>
		<view class="uni-input-wrapper">
			<input v-model="password" class="input-field" placeholder="请输入密码" :password="showPassword" />
			<uni-icons @click="changePassword" :type="!showPassword ? 'eye' : 'eye-slash'" color="#000000" size="32"></uni-icons>
		</view>
      </view>

      <button class="login-button" @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const username = ref('');
const password = ref('');

const showPassword = ref(true)

const changePassword = () => {
	showPassword.value = !showPassword.value;
}
const handleLogin = async () => {
  if (!username.value || !password.value) {
    uni.showToast({
      title: '请输入用户名和密码',
      icon: 'none'
    });
    return;
  }
  
  uni.request({
    url: 'http://172.16.6.128:8011/admin-api/system/auth/login',
    method: 'POST',
    data: {
		username: username.value,
		password: password.value
	  },
    success: (res) => {
	  if (res.data.code === 0) {
	    uni.showToast({
	      title: '登录成功',
	      icon: 'success'
	    });
	    // 跳转到首页或其他页面
		uni.switchTab({
		  url: '/pages/home/home' // 注意路径前的斜杠
		});
	  } else {
	    uni.showToast({
	      title: res.data.msg,
	      icon: 'none'
	    });
	  }
    },
    fail: (err) => {
      console.error(err); // 失败回调
    }
  });
  
};
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
	.bg-image {
		position: absolute;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		object-fit: cover;
		z-index: -1;
	}
	.login-title{
		margin: 100rpx 30rpx 0;
		.welcome-text {
		  font-size: 58rpx;
		  margin-bottom: 15rpx;
		  letter-spacing: 5rpx;
		}
		
		.system-name {
		  font-size: 68rpx;
		  font-weight: bold;
		  letter-spacing: 10rpx;
		}
	}
	
}

.login-form {
  margin: 60rpx 30rpx 0;
  padding: 70rpx;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  border-radius: 25px 25px 0 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  height: 100vh;
}


.input-group {
  margin-bottom: 55rpx;
}

.input-label {
  font-size: 30rpx;
  margin-bottom: 10rpx;
  display: block;
}
.uni-input-wrapper {
   display: flex;
   margin: 10rpx 0;
   flex-direction: row;
   flex-wrap: nowrap;
   border: 1px solid #B2C7E6;
   background-color: #ffffff;
   padding: 0px 10px 0 20px;
   border-radius: 4px;
   align-items: center;
 }
.input-field {
  width: 100%;
  padding: 10px 0;
}

.login-button {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 10rpx;
  background-color: #1E5FDF;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}

.login-button:hover {
  background-color: #005bb5;
}
</style>