381 lines
7.7 KiB
Vue
381 lines
7.7 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||
|
||
<view class="brand-section">
|
||
<view class="brand-logo">
|
||
<image class="brand-logo-image" src="/static/logo1.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="brand-title">湘西州三个一安全管理平台</view>
|
||
<view class="brand-subtitle">隐患早发现、风险早处置，守护安全生产</view>
|
||
</view>
|
||
|
||
<view class="role-card">
|
||
<view class="role-card-title">选择角色</view>
|
||
<view class="role-grid">
|
||
<view
|
||
v-for="item in roleList"
|
||
:key="item.id"
|
||
class="role-item"
|
||
:class="{ 'role-item--active': selectedRole === item.id }"
|
||
@click="selectRole(item.id)"
|
||
>
|
||
<view class="role-icon-wrap">
|
||
<u-icon
|
||
:name="item.icon"
|
||
:size="22"
|
||
:color="selectedRole === item.id ? '#ffffff' : '#b0b8c8'"
|
||
></u-icon>
|
||
</view>
|
||
<text class="role-name">{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="login-card">
|
||
<view class="list">
|
||
<view class="list-call">
|
||
<image class="img" src="/static/index/phone.png"></image>
|
||
<input class="sl-input" v-model="username" type="text" placeholder="请输入用户名" />
|
||
</view>
|
||
<view class="list-call">
|
||
<image class="img" src="/static/index/lock.png"></image>
|
||
<input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="请输入密码" :password="showPassword"/>
|
||
<image class="eye-img" :src="showPassword ? '/static/index/cl.png' : '/static/index/op.png'" @click="changePassword"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="padding-lr">
|
||
<button class="button-login" hover-class="button-hover" @click="handleLogin">
|
||
登录
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { login } from '@/request/api.js';
|
||
|
||
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
|
||
|
||
// 督导组跳转目标小程序配置
|
||
const SUPERVISION_MINI_PROGRAM = {
|
||
appId: 'wxe3533791db8a8734',
|
||
path: 'pages/index/index',
|
||
// develop=开发版 trial=体验版 release=正式版
|
||
envVersion: 'release'
|
||
};
|
||
|
||
const roleList = [
|
||
{ id: 'enterprise', name: '企业', icon: 'home-fill' },
|
||
{ id: 'personal', name: '个人', icon: 'account-fill' },
|
||
{ id: 'supervision', name: '督导组', icon: 'man-add-fill' },
|
||
{ id: 'government', name: '政务', icon: 'order' }
|
||
// { id: 'family', name: '家庭', icon: 'home' }
|
||
];
|
||
|
||
const selectedRole = ref('enterprise');
|
||
const username = ref('');
|
||
const password = ref('');
|
||
const showPassword = ref(true);
|
||
|
||
const selectRole = (roleId) => {
|
||
if (roleId === 'supervision') {
|
||
navigateToSupervisionMiniProgram();
|
||
return;
|
||
}
|
||
selectedRole.value = roleId;
|
||
};
|
||
|
||
const navigateToSupervisionMiniProgram = () => {
|
||
// #ifdef MP-WEIXIN
|
||
uni.navigateToMiniProgram({
|
||
appId: SUPERVISION_MINI_PROGRAM.appId,
|
||
path: SUPERVISION_MINI_PROGRAM.path,
|
||
extraData: {
|
||
from: 'threeonecheck',
|
||
role: 'supervision'
|
||
},
|
||
envVersion: SUPERVISION_MINI_PROGRAM.envVersion,
|
||
success() {
|
||
console.log('跳转督导组小程序成功');
|
||
},
|
||
fail(err) {
|
||
console.error('跳转督导组小程序失败:', err);
|
||
uni.showModal({
|
||
title: '跳转失败',
|
||
content: '请确认两个小程序已关联，且目标小程序已添加您为开发者。开发阶段可在微信开发者工具中测试。',
|
||
showCancel: false
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
|
||
// #ifndef MP-WEIXIN
|
||
uni.showToast({
|
||
title: '请在微信小程序中使用',
|
||
icon: 'none'
|
||
});
|
||
// #endif
|
||
};
|
||
|
||
const changePassword = () => {
|
||
showPassword.value = !showPassword.value;
|
||
};
|
||
|
||
const handleLogin = async () => {
|
||
if (!username.value) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请输入用户名'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!password.value) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请输入密码'
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const res = await login({
|
||
username: username.value,
|
||
password: password.value
|
||
});
|
||
|
||
if (res.code === 0) {
|
||
if (res.data.token) {
|
||
uni.setStorageSync('token', res.data.token);
|
||
}
|
||
|
||
const userInfo = {
|
||
userId: res.data.userId,
|
||
username: res.data.username,
|
||
nickName: res.data.nickName,
|
||
deptId: res.data.deptId,
|
||
deptName: res.data.deptName,
|
||
role: res.data.role,
|
||
isDept: res.data.isDept
|
||
};
|
||
uni.setStorageSync('userInfo', JSON.stringify(userInfo));
|
||
uni.setStorageSync('loginRole', selectedRole.value);
|
||
|
||
uni.showToast({
|
||
title: '登录成功',
|
||
icon: 'success'
|
||
});
|
||
|
||
setTimeout(() => {
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
});
|
||
}, 1500);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || '登录失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('登录失败:', error);
|
||
uni.showToast({
|
||
title: '网络请求失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 45%, #ffffff 100%);
|
||
}
|
||
|
||
.content {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 45%, #ffffff 100%);
|
||
padding-bottom: 60rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.status-bar {
|
||
width: 100%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.brand-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 120rpx 48rpx 32rpx;
|
||
}
|
||
|
||
.brand-logo {
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.brand-logo-image {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
display: block;
|
||
}
|
||
|
||
.brand-title {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
color: #1a1a2e;
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.brand-subtitle {
|
||
margin-top: 16rpx;
|
||
font-size: 26rpx;
|
||
color: #8a94a6;
|
||
text-align: center;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.role-card {
|
||
margin: 0 40rpx 16rpx;
|
||
padding: 32rpx 28rpx 28rpx;
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(47, 108, 242, 0.08);
|
||
}
|
||
|
||
.role-card-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #1a1a2e;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.role-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.role-item {
|
||
width: 22%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.role-icon-wrap {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 20rpx;
|
||
background: #f5f7fb;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.role-item--active .role-icon-wrap {
|
||
background: linear-gradient(145deg, #4a8af7 0%, #2f6cf2 100%);
|
||
box-shadow: 0 8rpx 20rpx rgba(47, 108, 242, 0.3);
|
||
}
|
||
|
||
.role-name {
|
||
margin-top: 12rpx;
|
||
font-size: 24rpx;
|
||
color: #8a94a6;
|
||
line-height: 1.2;
|
||
text-align: center;
|
||
}
|
||
|
||
.role-item--active .role-name {
|
||
color: #2f6cf2;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.login-card {
|
||
margin: 16rpx 40rpx 0;
|
||
padding: 32rpx 28rpx;
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(47, 108, 242, 0.08);
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: transparent;
|
||
|
||
.list-call {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 100rpx;
|
||
color: #333333;
|
||
background: #F5F7FB;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #F5F7FB;
|
||
margin-top: 24rpx;
|
||
padding: 0 30rpx;
|
||
|
||
&:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.img {
|
||
width: 30rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.sl-input {
|
||
flex: 1;
|
||
text-align: left;
|
||
font-size: 32rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.eye-img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.padding-lr {
|
||
padding-left: 40rpx;
|
||
padding-right: 40rpx;
|
||
}
|
||
|
||
.button-login {
|
||
color: #FFFFFF;
|
||
font-size: 34rpx;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
background: linear-gradient(90deg, #3E95F1 0%, #4269F5 100%);
|
||
border-radius: 50rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
margin-top: 48rpx;
|
||
border: none;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.button-hover {
|
||
opacity: 0.8;
|
||
}
|
||
</style>
|