392 lines
7.5 KiB
Vue
392 lines
7.5 KiB
Vue
<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>
|
||
</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>
|
||
<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>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { login } from '@/request/api.js';
|
||
|
||
// 响应式数据
|
||
const username = ref('');
|
||
const password = ref('');
|
||
const showPassword = ref(true);
|
||
|
||
// 方法定义
|
||
const changePassword = () => {
|
||
showPassword.value = !showPassword.value;
|
||
}
|
||
|
||
const getPhoneNumber = () => {
|
||
// 获取手机号的逻辑，可以接入一键登录SDK
|
||
uni.showToast({
|
||
title: '获取手机号功能待实现',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
|
||
const handleLogin = async () => {
|
||
console.log('点击登录按钮');
|
||
console.log('用户名:', username.value);
|
||
console.log('密码:', password.value);
|
||
|
||
// 验证用户名
|
||
if (!username.value) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请输入用户名'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 验证密码
|
||
if (!password.value) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请输入密码'
|
||
});
|
||
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
|
||
};
|
||
uni.setStorageSync('userInfo', JSON.stringify(userInfo));
|
||
|
||
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'
|
||
});
|
||
}
|
||
}
|
||
|
||
// 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;
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.header {
|
||
width: 100%;
|
||
position: relative;
|
||
margin-bottom: 0;
|
||
|
||
.bg-image {
|
||
width: 100%;
|
||
vertical-align: bottom;
|
||
}
|
||
}
|
||
|
||
.login {
|
||
position: absolute;
|
||
top: 50%;
|
||
color: #666666;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-top: 50rpx;
|
||
padding-left: 70rpx;
|
||
padding-right: 70rpx;
|
||
background-color: #FFFFFF;
|
||
margin-top: -2rpx; /* 消除可能的间隙 */
|
||
|
||
.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: 30rpx;
|
||
padding: 0 30rpx;
|
||
|
||
.img {
|
||
width: 30rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.sl-input {
|
||
flex: 1;
|
||
text-align: left;
|
||
font-size: 32rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.eye-img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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: 130rpx;
|
||
border: none;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.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>
|