1.18整合
This commit is contained in:
皮
391
pages/login/login.vue
Normal file
391
pages/login/login.vue
Normal file
@@ -0,0 +1,391 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user