pizhengyu/threeonecheck_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

一单n制等功能，接入随手拍之前我先提交一版本

Browse Source
This commit is contained in:
王利强
2026-08-12 14:43:53 +08:00
parent ec76d588e2
commit 47deeedb22
664 changed files with 1429 additions and 2894 deletions
Download Patch File Download Diff File Expand all files Collapse all files

455
pages/login/login.vue
View File

@@ -1,48 +1,56 @@
<template>
<view class="content">
<view class="header">
<image src="/static/index/index_bg.png" class="bg-image"></image>
<view class="padding login">
<view class="text-xl text-black text-bold">账号登录</view>
<view class="padding-top">欢迎登录湘西州“三个一”安全管理平台</view>
<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="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 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 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 class="agreement">
<navigator url="reg" open-type="navigate" class="link">注册成员账号</navigator>
<navigator url="forget" open-type="navigate" class="link">忘记密码?</navigator>
</view> -->
</view>
<view class="padding-lr">
<button class="button-login" hover-class="button-hover" @click="handleLogin">
登录
</button>
<!-- <view class="button-login" hover-class="button-hover" @tap="handleLogin('member')">
<text>登录普通成员</text>
</view> -->
<!-- <view class="button-report margin-top" hover-class="button-hover" @tap="goToReport">
<image src="/static/index/photos.png" class="icon-image"></image>
<text>随手拍举报</text>
</view> -->
<!-- <view class="protocol-box">
<navigator url="agreement" open-type="navigate" class="protocol-link">《用户协议》</navigator>
</view> -->
</view>
</view>
</template>
@@ -50,30 +58,74 @@
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 changePassword = () => {
showPassword.value = !showPassword.value;
}
const selectRole = (roleId) => {
if (roleId === 'supervision') {
navigateToSupervisionMiniProgram();
return;
}
selectedRole.value = roleId;
};
const getPhoneNumber = () => {
// 获取手机号的逻辑，可以接入一键登录SDK
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: '获取手机号功能待实现',
title: '请在微信小程序中使用',
icon: 'none'
});
}
// #endif
};
const changePassword = () => {
showPassword.value = !showPassword.value;
};
const handleLogin = async () => {
console.log('点击登录按钮');
console.log('用户名:', username.value);
console.log('密码:', password.value);
// 验证用户名
if (!username.value) {
uni.showToast({
icon: 'none',
@@ -81,8 +133,7 @@ const handleLogin = async () => {
});
return;
}
// 验证密码
if (!password.value) {
uni.showToast({
icon: 'none',
@@ -90,39 +141,35 @@ const handleLogin = async () => {
});
return;
}
try {
console.log('开始调用登录接口...');
const res = await login({
username: username.value,
password: password.value
});
console.log('登录接口返回:', res);
if (res.code === 0) {
// 登录成功，保存token和用户信息
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
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'
@@ -141,110 +188,131 @@ const handleLogin = async () => {
icon: 'none'
});
}
}
// const handleLogin = () => {
// if (phone.value.length != 11) {
// uni.showToast({
// icon: 'none',
// title: '手机号不正确'
// });
// return;
// }
// if (password.value.length < 6) {
// uni.showToast({
// icon: 'none',
// title: '密码不正确'
// });
// return;
// }
// // 登录请求
// uni.request({
// url: 'http://example.com/api/login',
// data: {
// phone: phone.value,
// password: password.value
// },
// method: 'POST',
// dataType: 'json',
// success: (res) => {
// if (res.data.code != 200) {
// uni.showToast({
// title: res.data.msg || '登录失败',
// icon: 'none'
// });
// } else {
// // 登录成功，保存token等信息
// uni.setStorageSync('token', res.data.data.token);
// uni.setStorageSync('userInfo', JSON.stringify(res.data.data.userInfo));
// // 返回上一页或首页
// uni.navigateBack({
// delta: 1,
// fail: () => {
// uni.switchTab({
// url: '/pages/index/index'
// });
// }
// });
// }
// },
// fail: () => {
// uni.showToast({
// title: '网络请求失败',
// icon: 'none'
// });
// }
// });
// }
const goToReport = () => {
//跳转到主页面 跳到分包
uni.navigateTo({
url: '/subpackages/suishoupai/pages/index/index'
})
}
};
</script>
<style lang="scss" scoped>
page {
background-color: #FFFFFF;
background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 45%, #ffffff 100%);
}
.content {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #FFFFFF;
background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 45%, #ffffff 100%);
padding-bottom: 60rpx;
box-sizing: border-box;
}
.header {
.status-bar {
width: 100%;
position: relative;
margin-bottom: 0;
.bg-image {
width: 100%;
vertical-align: bottom;
}
flex-shrink: 0;
}
.login {
position: absolute;
top: 50%;
color: #666666;
font-size: 28rpx;
.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;
padding-top: 50rpx;
padding-left: 70rpx;
padding-right: 70rpx;
background-color: #FFFFFF;
margin-top: -2rpx; /* 消除可能的间隙 */
background-color: transparent;
.list-call {
display: flex;
@@ -256,8 +324,12 @@ page {
background: #F5F7FB;
border-radius: 16rpx;
border: 2rpx solid #F5F7FB;
margin-top: 30rpx;
margin-top: 24rpx;
padding: 0 30rpx;
&:first-child {
margin-top: 0;
}
.img {
width: 30rpx;
@@ -278,31 +350,9 @@ page {
}
}
.agreement {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 30rpx;
margin-top: 30rpx;
color: #3D83F6;
text-align: center;
height: 40rpx;
line-height: 40rpx;
.link {
font-size: 30rpx;
color: #3D83F6;
&:active {
opacity: 0.8;
}
}
}
.padding-lr {
padding-left: 70rpx;
padding-right: 70rpx;
padding-left: 40rpx;
padding-right: 40rpx;
}
.button-login {
@@ -316,7 +366,7 @@ page {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 130rpx;
margin-top: 48rpx;
border: none;
&::after {
@@ -324,70 +374,7 @@ page {
}
}
.button-report {
color: #FFFFFF;
font-size: 34rpx;
width: 100%;
height: 100rpx;
background: linear-gradient(90deg, #FF7878 0%, #F2505B 100%);
border-radius: 50rpx;
line-height: 100rpx;
text-align: center;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}
.margin-top {
margin-top: 30rpx;
}
.button-hover {
opacity: 0.8;
}
.text-blue {
color: #3D83F6;
font-size: 28rpx;
}
.icon-image {
width: 36rpx;
height: 36rpx;
margin-right: 8rpx;
}
.text-xl {
font-size: 36rpx;
}
.text-black {
color: #000000;
}
.text-bold {
font-weight: bold;
}
.padding {
padding: 30rpx;
}
.padding-top {
padding-top: 15rpx;
}
.protocol-box {
display: flex;
justify-content: center;
margin-top: 40rpx;
.protocol-link {
font-size: 28rpx;
color: #3D83F6;
text-decoration: underline;
}
}
</style>