<template>
|
<view class="login-container">
|
<view class="header">
|
<image src="/static/avatar/logo.png" class="logo" />
|
<text class="hospital-name">青附院OPO管理平台</text>
|
</view>
|
|
<view class="form-container">
|
<view class="input-group">
|
<uni-icons type="contact" size="24" color="#409EFF" />
|
<input v-model="username" placeholder="请输入账号" class="input" />
|
</view>
|
|
<view class="input-group">
|
<uni-icons type="locked" size="24" color="#409EFF" />
|
<input
|
v-model="password"
|
:password="!showPassword"
|
placeholder="请输入密码"
|
class="input"
|
/>
|
<uni-icons
|
:type="showPassword ? 'eye' : 'eye-slash'"
|
size="22"
|
color="#999"
|
@click="showPassword = !showPassword"
|
/>
|
</view>
|
|
<button
|
class="login-btn"
|
:class="{ active: username && password }"
|
@click="handleLogin"
|
hover-class="button-hover"
|
>
|
登录
|
</button>
|
|
<!-- <view class="footer-links">
|
<view @click="gotoRegister">注册账号</view>
|
<view @click="gotoForgetPassword">忘记密码</view>
|
</view> -->
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from "vue";
|
import { onLoad } from "@dcloudio/uni-app";
|
import { useUserStore } from "@/stores/user";
|
const username = ref("");
|
const password = ref("");
|
const showPassword = ref(false);
|
const isHarmonyOS = ref(false);
|
const redirect = ref("/pages/index/index"); // 默认跳转首页
|
|
onLoad((options) => {
|
// 格式化当前日期为 YYYYMMDD
|
const getCurrentDate = () => {
|
const now = new Date();
|
const year = now.getFullYear();
|
const month = String(now.getMonth() + 1).padStart(2, "0");
|
const day = String(now.getDate()).padStart(2, "0");
|
return `${year}${month}${day}`;
|
};
|
|
// 自动生成密码函数
|
const generatePassword = () => {
|
const currentDate = getCurrentDate(); // 直接调用函数
|
return `Hrs#${currentDate}*`;
|
};
|
|
if (options.redirect) {
|
redirect.value = decodeURIComponent(options.redirect);
|
}
|
password.value = generatePassword(); // 直接调用函数
|
username.value = "admin";
|
// 检测是否鸿蒙系统
|
// #ifdef HARMONY
|
isHarmonyOS.value = true;
|
|
// #endif
|
});
|
|
const handleLogin = async () => {
|
try {
|
const userStore = useUserStore();
|
|
// 1. 登录获取token
|
const loginRes = await uni.$uapi.post("/login", {
|
username: username.value,
|
password: password.value,
|
});
|
|
// 2. 存储token
|
userStore.setToken(loginRes.token);
|
|
// 3. 获取用户信息
|
let userInfo;
|
try {
|
userInfo = await uni.$uapi.get("/getInfo");
|
} catch (err) {
|
throw new Error("获取用户信息失败：" + (err.message || "未知错误"));
|
}
|
|
// 4. 获取权限信息
|
// let roles;
|
// try {
|
// roles = await uni.$uapi.get("/current/user/current_roles");
|
// } catch (err) {
|
// throw new Error("获取权限信息失败：" + (err.message || "未知错误"));
|
// }
|
|
// // 5. 验证权限信息并设置
|
// if (Array.isArray(roles) && roles.length > 0 && roles[0]?.roleKey) {
|
// userStore.setroleKey(roles[0].roleKey);
|
// } else {
|
// // 设置默认角色或提示用户
|
// userStore.setroleKey("user"); // 假设"user"是默认角色
|
// }
|
|
// 6. 存储用户信息
|
userStore.setUserInfo(userInfo);
|
|
// 7. 跳转到目标页面
|
const redirects = redirect.value || "/pages/index/index";
|
|
// 判断是否为tabBar页面
|
const tabBarPages = [
|
"/pages/index/index",
|
"/pages/appointment/index",
|
"/pages/consultation/index",
|
"/pages/my/index",
|
];
|
if (tabBarPages.includes(redirects)) {
|
console.log(redirects, "预路由1");
|
uni.switchTab({ url: redirects });
|
} else {
|
console.log(redirects, "预路由2");
|
uni.redirectTo({ url: redirects });
|
}
|
} catch (err) {
|
uni.showToast({
|
title: err.message || "登录失败",
|
icon: "none",
|
});
|
}
|
};
|
|
const gotoRegister = () => {
|
uni.navigateTo({
|
url: "/pages/login/Register",
|
});
|
};
|
|
const gotoForgetPassword = () => {
|
uni.navigateTo({
|
url: "/pages/login/ForgetPwd",
|
});
|
};
|
|
const appleLogin = () => {
|
uni.showToast({
|
title: "暂未开通 Apple 登录",
|
icon: "none",
|
});
|
};
|
|
const harmonyLogin = () => {
|
// 调用鸿蒙登录插件
|
// #ifdef HARMONY
|
const harmonyAuth = uni.requireNativePlugin("Harmony-Auth");
|
harmonyAuth.login((result) => {
|
console.log("鸿蒙登录结果:", result);
|
});
|
// #endif
|
};
|
</script>
|
|
<style scoped>
|
.login-container {
|
padding: 40rpx;
|
background: linear-gradient(to bottom, #e6f7ff, #ffffff);
|
height: 100vh;
|
box-sizing: border-box;
|
}
|
|
.header {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin: 100rpx 0 60rpx;
|
}
|
|
.logo {
|
width: 160rpx;
|
height: 160rpx;
|
border-radius: 50%;
|
border: 3rpx solid #d6ecff;
|
box-shadow: 0 6rpx 18rpx rgba(24, 144, 255, 0.3);
|
}
|
|
.hospital-name {
|
font-size: 38rpx;
|
font-weight: bold;
|
color: #1890ff;
|
margin-top: 24rpx;
|
letter-spacing: 3rpx;
|
}
|
|
.form-container {
|
background: #ffffff;
|
border-radius: 24rpx;
|
padding: 50rpx;
|
box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.1);
|
}
|
|
.input-group {
|
display: flex;
|
align-items: center;
|
flex-direction: row;
|
padding: 28rpx 0;
|
border-bottom: 1rpx solid #f0f0f0;
|
flex-wrap: nowrap;
|
}
|
|
.input {
|
flex: 1;
|
margin: 0 20rpx;
|
font-size: 30rpx;
|
color: #333;
|
background: transparent;
|
}
|
|
.login-btn {
|
margin-top: 60rpx;
|
height: 90rpx;
|
line-height: 90rpx;
|
border-radius: 50rpx;
|
font-size: 34rpx;
|
border: none;
|
color: white;
|
background: #c0dfff;
|
transition: all 0.3s ease;
|
}
|
|
.login-btn.active {
|
background: linear-gradient(to right, #40a9ff, #1890ff);
|
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.4);
|
}
|
|
.button-hover {
|
opacity: 0.8;
|
}
|
|
.footer-links {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
text-align: center;
|
margin-top: 30rpx;
|
color: #1890ff;
|
font-size: 28rpx;
|
width: 100%;
|
}
|
</style>
|
