feat(login): 重构登录页面并优化认证流程
- 重新设计登录界面UI，增加装饰元素和动画效果 - 更新登录表单布局，添加图标和标签 - 修改存储的token名称为inspur-admin-Token和fourLevelLinkage-token - 在帮助筛选页面添加Bearer前缀到授权头 - 从帮助筛选页面传递goal_person_id参数到跟进页面 - 禁用智能推荐按钮并注释相关代码 - 移除首页招聘会服务项的权限检查条件 - 在跟进页面保存成功后刷新列表数据 - 从路由参数获取goal_person_id并设置到人员信息中
This commit is contained in:
hanguangpu01
@@ -1,18 +1,64 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppLayout title="" :use-scroll-view="false">
|
<AppLayout title="" :use-scroll-view="false">
|
||||||
<view class="wrap">
|
<view class="login-container">
|
||||||
<view class="login_index">
|
<!-- 顶部装饰 -->
|
||||||
<input class="input" placeholder="请输入账号" placeholder-class="inputplace" v-model="form.username" />
|
<view class="header-decoration">
|
||||||
<view class="login_yzm">
|
<view class="decoration-circle circle-1"></view>
|
||||||
<input class="input" type="password" placeholder="请输入密码" placeholder-class="inputplace"
|
<view class="decoration-circle circle-2"></view>
|
||||||
v-model="form.password" />
|
|
||||||
</view>
|
|
||||||
<view class="login_yzm">
|
|
||||||
<input class="input" placeholder="请输入验证码" placeholder-class="inputplace" v-model="form.code" />
|
|
||||||
<image class="yzm" :src="codeUrl" @click="getCodeImg"></image>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<button class="com-btn" @click="register">登 录</button>
|
<!-- Logo区域 -->
|
||||||
|
<view class="logo-section">
|
||||||
|
<view class="logo-wrapper">
|
||||||
|
<text class="logo-icon">✦</text>
|
||||||
|
</view>
|
||||||
|
<text class="logo-title">欢迎回来</text>
|
||||||
|
<text class="logo-subtitle">请登录您的账号</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 登录表单 -->
|
||||||
|
<view class="form-section">
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">账号</view>
|
||||||
|
<view class="input-wrapper">
|
||||||
|
<text class="input-icon">👤</text>
|
||||||
|
<input class="form-input" placeholder="请输入账号" placeholder-class="inputplace" v-model="form.username" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">密码</view>
|
||||||
|
<view class="input-wrapper">
|
||||||
|
<text class="input-icon">🔒</text>
|
||||||
|
<input class="form-input" type="password" placeholder="请输入密码" placeholder-class="inputplace" v-model="form.password" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">验证码</view>
|
||||||
|
<view class="input-wrapper verify-wrapper">
|
||||||
|
<text class="input-icon">✧</text>
|
||||||
|
<input class="form-input verify-input" placeholder="请输入验证码" placeholder-class="inputplace" v-model="form.code" />
|
||||||
|
<image class="verify-code" :src="codeUrl" @click="getCodeImg"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 登录按钮 -->
|
||||||
|
<view class="button-section">
|
||||||
|
<button class="login-btn" @click="register">
|
||||||
|
<text class="btn-text">登 录</text>
|
||||||
|
<text class="btn-arrow">→</text>
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部装饰 -->
|
||||||
|
<view class="footer-decoration">
|
||||||
|
<view class="decoration-dots">
|
||||||
|
<view class="dot"></view>
|
||||||
|
<view class="dot dot-active"></view>
|
||||||
|
<view class="dot"></view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</AppLayout>
|
</AppLayout>
|
||||||
@@ -139,7 +185,9 @@
|
|||||||
})
|
})
|
||||||
}else if(flag.value=='nw'){
|
}else if(flag.value=='nw'){
|
||||||
$api.myRequest('/auth/login',form,'post',9100).then((res) => {
|
$api.myRequest('/auth/login',form,'post',9100).then((res) => {
|
||||||
uni.setStorageSync('Padmin-Token', res.data.access_token)
|
uni.setStorageSync('inspur-admin-Token', res.data.access_token)
|
||||||
|
uni.setStorageSync('fourLevelLinkage-token', res.data.access_token)
|
||||||
|
|
||||||
uni.reLaunch({
|
uni.reLaunch({
|
||||||
url: '/packageB/priority/helpFilter'
|
url: '/packageB/priority/helpFilter'
|
||||||
})
|
})
|
||||||
@@ -172,130 +220,220 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
<style scoped lang="stylus">
|
||||||
.wrap {
|
/* 主题色变量 */
|
||||||
background-color: #ffffff;
|
$primary-color = #46ca98
|
||||||
height: 100vh;
|
$primary-light = #e8f8f0
|
||||||
position: relative;
|
$primary-dark = #3ab882
|
||||||
|
$text-primary = #1a1a1a
|
||||||
|
$text-secondary = #666666
|
||||||
|
$text-placeholder = #b5b5b5
|
||||||
|
$bg-light = #f8faf9
|
||||||
|
$border-color = #e8e8e8
|
||||||
|
|
||||||
.lg-head {
|
.login-container
|
||||||
height: 480rpx;
|
background: linear-gradient(180deg, #f8faf9 0%, #ffffff 100%)
|
||||||
background: #46ca98;
|
min-height: 100vh
|
||||||
position: relative;
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
align-items: center
|
||||||
|
position: relative
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
.view_logo {
|
/* 顶部装饰 */
|
||||||
text-align: center;
|
.header-decoration
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
right: 0
|
||||||
|
height: 400rpx
|
||||||
|
pointer-events: none
|
||||||
|
|
||||||
.login_logo {
|
.decoration-circle
|
||||||
width: 300rpx;
|
position: absolute
|
||||||
height: 300rpx;
|
border-radius: 50%
|
||||||
margin-top: 100rpx;
|
background: linear-gradient(135deg, rgba(70, 202, 152, 0.1) 0%, rgba(70, 202, 152, 0.05) 100%)
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-cover {
|
.circle-1
|
||||||
position: absolute;
|
width: 300rpx
|
||||||
bottom: -4rpx;
|
height: 300rpx
|
||||||
left: 0;
|
top: -100rpx
|
||||||
right: 0;
|
right: -80rpx
|
||||||
height: 30rpx;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.login_index {
|
.circle-2
|
||||||
font-size: 36rpx;
|
width: 200rpx
|
||||||
font-weight: 500;
|
height: 200rpx
|
||||||
width: 596rpx;
|
top: 60rpx
|
||||||
margin: 0 auto;
|
left: -60rpx
|
||||||
|
background: linear-gradient(135deg, rgba(70, 202, 152, 0.08) 0%, rgba(70, 202, 152, 0.02) 100%)
|
||||||
|
|
||||||
::v-deep .is-input-border {
|
/* Logo区域 */
|
||||||
border: 0;
|
.logo-section
|
||||||
border-bottom: 1px solid #dcdfe6 !important;
|
margin-top: 160rpx
|
||||||
border-radius: 0;
|
display: flex
|
||||||
}
|
flex-direction: column
|
||||||
|
align-items: center
|
||||||
|
animation: fadeInUp 0.6s ease-out
|
||||||
|
|
||||||
::v-deep .uni-input-input {
|
.logo-wrapper
|
||||||
font-size: 32rpx;
|
width: 140rpx
|
||||||
padding-left: 10rpx;
|
height: 140rpx
|
||||||
}
|
background: linear-gradient(145deg, $primary-color 0%, $primary-dark 100%)
|
||||||
|
border-radius: 36rpx
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
box-shadow: 0 16rpx 40rpx rgba(70, 202, 152, 0.3)
|
||||||
|
margin-bottom: 40rpx
|
||||||
|
|
||||||
::v-deep .uniui-contact-filled:before {
|
.logo-icon
|
||||||
color: #46ca98;
|
font-size: 60rpx
|
||||||
font-size: 50rpx;
|
color: #ffffff
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .uniui-locked-filled:before {
|
.logo-title
|
||||||
color: #46ca98;
|
font-size: 48rpx
|
||||||
font-size: 50rpx;
|
font-weight: 600
|
||||||
}
|
color: $text-primary
|
||||||
|
letter-spacing: 2rpx
|
||||||
|
margin-bottom: 12rpx
|
||||||
|
|
||||||
.login_yzm {
|
.logo-subtitle
|
||||||
margin-top: 40rpx;
|
font-size: 28rpx
|
||||||
display: flex;
|
color: $text-secondary
|
||||||
align-items: center;
|
letter-spacing: 1rpx
|
||||||
|
|
||||||
.yzm {
|
/* 表单区域 */
|
||||||
width: 200rpx;
|
.form-section
|
||||||
height: 80rpx;
|
width: 600rpx
|
||||||
}
|
margin-top: 80rpx
|
||||||
}
|
animation: fadeInUp 0.6s ease-out 0.15s backwards
|
||||||
|
|
||||||
.com-btn {
|
.form-item
|
||||||
height: 100rpx;
|
margin-bottom: 40rpx
|
||||||
background: #46ca98;
|
|
||||||
border-radius: 50rpx;
|
|
||||||
color: #fff;
|
|
||||||
margin-top: 100rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login_wt {
|
.form-label
|
||||||
margin: 0 auto;
|
font-size: 26rpx
|
||||||
text-align: right;
|
color: $text-secondary
|
||||||
font-size: 24rpx;
|
margin-bottom: 16rpx
|
||||||
color: rgba(134, 134, 136, 1);
|
padding-left: 8rpx
|
||||||
}
|
letter-spacing: 1rpx
|
||||||
}
|
|
||||||
|
|
||||||
.lg-bottom {
|
.input-wrapper
|
||||||
position: absolute;
|
display: flex
|
||||||
bottom: -3px;
|
align-items: center
|
||||||
left: 0;
|
background: #ffffff
|
||||||
width: 100%;
|
border-radius: 24rpx
|
||||||
|
padding: 0 32rpx
|
||||||
|
height: 100rpx
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04)
|
||||||
|
border: 2rpx solid transparent
|
||||||
|
transition: all 0.3s ease
|
||||||
|
|
||||||
.bottom-svg {
|
&:focus-within
|
||||||
position: absolute;
|
border-color: $primary-color
|
||||||
bottom: -3px;
|
box-shadow: 0 4rpx 24rpx rgba(70, 202, 152, 0.15)
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.login_tongyi {
|
.input-icon
|
||||||
|
font-size: 36rpx
|
||||||
|
margin-right: 20rpx
|
||||||
|
opacity: 0.7
|
||||||
|
|
||||||
font-size: 26rpx;
|
.form-input
|
||||||
color: rgba(196, 196, 196, 1);
|
flex: 1
|
||||||
width: 620rpx;
|
height: 100%
|
||||||
margin: 32rpx auto;
|
font-size: 30rpx
|
||||||
text-align: center;
|
color: $text-primary
|
||||||
|
|
||||||
text {
|
.verify-wrapper
|
||||||
color: rgba(86, 176, 236, 1);
|
padding-right: 16rpx
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
.verify-input
|
||||||
padding: 0 30rpx 0 80rpx;
|
flex: 1
|
||||||
height: 80rpx;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 75rpx 75rpx 75rpx 75rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inputplace {
|
.verify-code
|
||||||
font-weight: 400;
|
width: 180rpx
|
||||||
font-size: 28rpx;
|
height: 72rpx
|
||||||
color: #B5B5B5;
|
border-radius: 16rpx
|
||||||
}
|
margin-left: 16rpx
|
||||||
|
cursor: pointer
|
||||||
|
transition: transform 0.2s ease
|
||||||
|
|
||||||
|
&:active
|
||||||
|
transform: scale(0.95)
|
||||||
|
|
||||||
|
/* 输入框占位符 */
|
||||||
|
.inputplace
|
||||||
|
font-weight: 400
|
||||||
|
font-size: 28rpx
|
||||||
|
color: $text-placeholder
|
||||||
|
|
||||||
|
/* 按钮区域 */
|
||||||
|
.button-section
|
||||||
|
width: 600rpx
|
||||||
|
margin-top: 60rpx
|
||||||
|
animation: fadeInUp 0.6s ease-out 0.3s backwards
|
||||||
|
|
||||||
|
.login-btn
|
||||||
|
width: 100%
|
||||||
|
height: 108rpx
|
||||||
|
background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%)
|
||||||
|
border-radius: 54rpx
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
box-shadow: 0 12rpx 32rpx rgba(70, 202, 152, 0.35)
|
||||||
|
transition: all 0.3s ease
|
||||||
|
border: none
|
||||||
|
|
||||||
|
&:active
|
||||||
|
transform: translateY(2rpx)
|
||||||
|
box-shadow: 0 8rpx 24rpx rgba(70, 202, 152, 0.3)
|
||||||
|
|
||||||
|
.btn-text
|
||||||
|
font-size: 34rpx
|
||||||
|
font-weight: 500
|
||||||
|
color: #ffffff
|
||||||
|
letter-spacing: 8rpx
|
||||||
|
|
||||||
|
.btn-arrow
|
||||||
|
font-size: 32rpx
|
||||||
|
color: #ffffff
|
||||||
|
margin-left: 16rpx
|
||||||
|
transition: transform 0.3s ease
|
||||||
|
|
||||||
|
.login-btn:active .btn-arrow
|
||||||
|
transform: translateX(8rpx)
|
||||||
|
|
||||||
|
/* 底部装饰 */
|
||||||
|
.footer-decoration
|
||||||
|
position: absolute
|
||||||
|
bottom: 60rpx
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
align-items: center
|
||||||
|
animation: fadeInUp 0.6s ease-out 0.45s backwards
|
||||||
|
|
||||||
|
.decoration-dots
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
gap: 16rpx
|
||||||
|
|
||||||
|
.dot
|
||||||
|
width: 12rpx
|
||||||
|
height: 12rpx
|
||||||
|
border-radius: 50%
|
||||||
|
background: rgba(70, 202, 152, 0.3)
|
||||||
|
|
||||||
|
.dot-active
|
||||||
|
width: 36rpx
|
||||||
|
border-radius: 6rpx
|
||||||
|
background: $primary-color
|
||||||
|
|
||||||
|
/* 动画 */
|
||||||
|
@keyframes fadeInUp
|
||||||
|
from
|
||||||
|
opacity: 0
|
||||||
|
transform: translateY(30rpx)
|
||||||
|
to
|
||||||
|
opacity: 1
|
||||||
|
transform: translateY(0)
|
||||||
</style>
|
</style>
|
||||||
@@ -158,7 +158,7 @@
|
|||||||
<view class="form-btns">
|
<view class="form-btns">
|
||||||
<button class="mini-btn form-box-btn detail-btn" size="mini" v-if="false">详情</button>
|
<button class="mini-btn form-box-btn detail-btn" size="mini" v-if="false">详情</button>
|
||||||
<button class="mini-btn form-box-btn follow-btn" size="mini" @click="goFollow(item)">跟进</button>
|
<button class="mini-btn form-box-btn follow-btn" size="mini" @click="goFollow(item)">跟进</button>
|
||||||
<button class="mini-btn form-box-btn recommend-btn" size="mini" @click="goRecommend(item)">智能推荐</button>
|
<!-- <button class="mini-btn form-box-btn recommend-btn" size="mini" @click="goRecommend(item)">智能推荐</button> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -267,7 +267,7 @@ function getTaskTypeLabelByValue(value) {
|
|||||||
// 加载某一级的数据（parentId 为空表示根）
|
// 加载某一级的数据（parentId 为空表示根）
|
||||||
async function loadLevelData(parentId,node) {
|
async function loadLevelData(parentId,node) {
|
||||||
let header = {
|
let header = {
|
||||||
'Authorization': uni.getStorageSync('fourLevelLinkage-token'),
|
'Authorization': 'Bearer ' + uni.getStorageSync('fourLevelLinkage-token'),
|
||||||
'Content-Type': "application/x-www-form-urlencoded"
|
'Content-Type': "application/x-www-form-urlencoded"
|
||||||
};
|
};
|
||||||
let params = { parentId };
|
let params = { parentId };
|
||||||
@@ -384,7 +384,7 @@ function getDataList(type = 'add') {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
function goFollow(item) {
|
function goFollow(item) {
|
||||||
navTo(`/packageB/priority/helpFollow?task_id=${item.task_id}&person_id=${item.person_id}&&name=${item.name}&&taskType=${getTaskTypeLabelByValue(item.task_type)}`);
|
navTo(`/packageB/priority/helpFollow?task_id=${item.task_id}&person_id=${item.person_id}&goal_person_id=${item.goal_person_id}&name=${item.name}&&taskType=${getTaskTypeLabelByValue(item.task_type)}`);
|
||||||
}
|
}
|
||||||
//智能推荐
|
//智能推荐
|
||||||
const goRecommend = (item) => {
|
const goRecommend = (item) => {
|
||||||
|
|||||||
@@ -162,7 +162,7 @@ const onDateChange = ( e) => {
|
|||||||
}
|
}
|
||||||
function getFollowList(){
|
function getFollowList(){
|
||||||
let header={
|
let header={
|
||||||
'Authorization':uni.getStorageSync('fourLevelLinkage-token'),
|
'Authorization':'Bearer ' + uni.getStorageSync('fourLevelLinkage-token'),
|
||||||
'Content-Type': "application/x-www-form-urlencoded"
|
'Content-Type': "application/x-www-form-urlencoded"
|
||||||
}
|
}
|
||||||
let params={
|
let params={
|
||||||
@@ -211,13 +211,14 @@ const handleSubmit = () => {
|
|||||||
formRef.value?.validate()
|
formRef.value?.validate()
|
||||||
.then(() => {
|
.then(() => {
|
||||||
let header={
|
let header={
|
||||||
'Authorization':uni.getStorageSync('fourLevelLinkage-token')
|
'Authorization':'Bearer ' + uni.getStorageSync('fourLevelLinkage-token')
|
||||||
}
|
}
|
||||||
formData.goalPersonId=personInfo.value.goalPersonId
|
formData.goalPersonId=personInfo.value.goalPersonId
|
||||||
$api.myRequest('/dispatch/assist/records/addRecords', formData,'post',9100,header).then((resData) => {
|
$api.myRequest('/dispatch/assist/records/addRecords', formData,'post',9100,header).then((resData) => {
|
||||||
console.log("resData",resData)
|
console.log("resData",resData)
|
||||||
if(resData && resData.code == 200){
|
if(resData && resData.code == 200){
|
||||||
handleReset()
|
handleReset()
|
||||||
|
getFollowList()
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '保存成功',
|
title: '保存成功',
|
||||||
icon: 'success',
|
icon: 'success',
|
||||||
@@ -247,6 +248,8 @@ const handleReset = () => {
|
|||||||
formData.nextContactDate = '';
|
formData.nextContactDate = '';
|
||||||
}
|
}
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
|
console.log(options)
|
||||||
|
personInfo.value.goalPersonId=options.goal_person_id
|
||||||
personInfo.value.person_id=options.person_id
|
personInfo.value.person_id=options.person_id
|
||||||
personInfo.value.name=options.name
|
personInfo.value.name=options.name
|
||||||
personInfo.value.taskType=options.taskType
|
personInfo.value.taskType=options.taskType
|
||||||
|
|||||||
@@ -160,7 +160,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="service-title">招聘会</view>
|
<view class="service-title">招聘会</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="service-item press-button" v-if="isFourLevelLinkagePurview" @click="helpClick">
|
<view class="service-item press-button" @click="helpClick">
|
||||||
<view class="service-icon service-icon-1">
|
<view class="service-icon service-icon-1">
|
||||||
<uni-icons type="shop" size="32" color="#FFFFFF"></uni-icons>
|
<uni-icons type="shop" size="32" color="#FFFFFF"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
Reference in New Issue
Block a user