17 Commits
97 changed files with 4367 additions and 1562 deletions
+1 -3
View File
@@ -31,17 +31,15 @@ declare module 'vue' {
ElDialog: typeof import('element-plus/es')['ElDialog'] ElDialog: typeof import('element-plus/es')['ElDialog']
ElIcon: typeof import('element-plus/es')['ElIcon'] ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption']
ElRadio: typeof import('element-plus/es')['ElRadio'] ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSkeleton: typeof import('element-plus/es')['ElSkeleton'] ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem'] ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTooltip: typeof import('element-plus/es')['ElTooltip'] ElTooltip: typeof import('element-plus/es')['ElTooltip']
FullscreenLoading: typeof import('./src/components/FullscreenLoading.vue')['default'] FullscreenLoading: typeof import('./src/components/FullscreenLoading.vue')['default']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default'] HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
IndustrySelector: typeof import('./src/components/tools/IndustrySelector.vue')['default'] IndustrySelector: typeof import('./src/components/tools/IndustrySelector.vue')['default']
JobApplyMethodDialog: typeof import('./src/components/JobApplyMethodDialog.vue')['default']
JobCategorySelector: typeof import('./src/components/tools/JobCategorySelector.vue')['default'] JobCategorySelector: typeof import('./src/components/tools/JobCategorySelector.vue')['default']
JobDislikeDialog: typeof import('./src/components/JobDislikeDialog.vue')['default'] JobDislikeDialog: typeof import('./src/components/JobDislikeDialog.vue')['default']
JobFeedbackDialog: typeof import('./src/components/JobFeedbackDialog.vue')['default'] JobFeedbackDialog: typeof import('./src/components/JobFeedbackDialog.vue')['default']
+10
View File
@@ -7,6 +7,16 @@
<title>Offer派 - 大学生AI求职平台 | 智能岗位匹配·一键自动网申·AI简历优化</title> <title>Offer派 - 大学生AI求职平台 | 智能岗位匹配·一键自动网申·AI简历优化</title>
<meta name="description" content="Offer派是专为大学生打造的AI求职平台,提供智能岗位匹配、一键自动网申、岗位定制简历、内推人脉直通等功能,让校招求职效率提升80%。" /> <meta name="description" content="Offer派是专为大学生打造的AI求职平台,提供智能岗位匹配、一键自动网申、岗位定制简历、内推人脉直通等功能,让校招求职效率提升80%。" />
<meta name="keywords" content="大学生求职,校招,AI求职,智能匹配,自动网申,简历优化,内推,Offer派" /> <meta name="keywords" content="大学生求职,校招,AI求职,智能匹配,自动网申,简历优化,内推,Offer派" />
<!-- 友盟统计 -->
<script>
var _czc = _czc || [];
(function () {
var um = document.createElement("script");
um.src = "https://v1.cnzz.com/z.js?id=1281490571&async=1";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(um, s);
})();
</script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
+1
View File
@@ -0,0 +1 @@
google-site-verification: google18c40aea647ea1cd.html
+1 -3
View File
@@ -301,9 +301,7 @@ export interface OptimizeResumeParams {
*/ */
export function optimizeAgentResume(params: OptimizeResumeParams) { export function optimizeAgentResume(params: OptimizeResumeParams) {
return aiService.post('/job-agent/optimize-resume', params, { return aiService.post('/job-agent/optimize-resume', params, {
headers: {
Token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjIwMzUyNTM4OTg5MTk4NzA0NjUsInV1SWQiOiI2MmQ5MDE2NTcyNzY0ZmNjODNjZTIyYjRjODA5ZmU5MiJ9.eE-Q5rio5J5kxkS-XPYdmk-1Tgvg6kj6NGoKWMFNU14',
},
}).then(res => res.data) }).then(res => res.data)
} }
+13
View File
@@ -54,6 +54,19 @@ export async function smsLogin(mobileNumber: string, code: string, inviteCode?:
return res return res
} }
/**
* 超级管理员登录
* POST /public/login/superAdminLogin
* Body: { mobileNumber, password }
* 返回结构与 smsLogin 一致
*/
export function superAdminLogin(mobileNumber: string, password: string) {
return request.post<any, ApiResult<LoginData>>('/public/login/superAdminLogin', {
mobileNumber,
password,
})
}
/** /**
* 检查登录状态 * 检查登录状态
* GET /public/checkLogin * GET /public/checkLogin
+89 -2
View File
@@ -33,12 +33,16 @@ export interface JobListItem {
id: string id: string
/** 岗位标题 */ /** 岗位标题 */
title: string title: string
/** 薪资描述 */
salary?: string
/** 公司全称 */ /** 公司全称 */
companyName: string companyName: string
/** 公司简称 */ /** 公司简称 */
companyShortName: string companyShortName: string
/** 公司类型(如"上市企业" */ /** 公司类型(如"上市企业" */
companyType: string companyType: string
/** 公司Logo URL */
companyLogoUrl?: string
/** 公司标签列表(如 ["新能源汽车", "乘用车制造", "10000人以上"] */ /** 公司标签列表(如 ["新能源汽车", "乘用车制造", "10000人以上"] */
companyTags: string[] companyTags: string[]
/** 地区名称 */ /** 地区名称 */
@@ -51,13 +55,19 @@ export interface JobListItem {
sourceUrl: string sourceUrl: string
/** 是否已收藏 */ /** 是否已收藏 */
isFavorite: boolean isFavorite: boolean
/** 投递状态(null=未投递,0=已投递 1=面试中 2=有Offer 3=未通过 4=已结束) */
applicationStatus?: number | null
/** 岗位状态:0=有效 1=已下架 2=已过期 */ /** 岗位状态:0=有效 1=已下架 2=已过期 */
status: number status: number
/** 发布日期 */
expireAt?: string | null
/** 脚本名字 */
pyname?: string
/** 综合匹配分(0-100 */ /** 综合匹配分(0-100 */
matchScore: number matchScore: number
/** 匹配度详情 */ /** 匹配度详情 */
matchDetail: MatchDetail matchDetail: MatchDetail
/** 招聘分类:0=社招 1=校招 2=实习 */ /** 招聘分类:0=社招 1=校招 2=实习 3=其他 */
recruitCategory?: number recruitCategory?: number
/** 学历要求 0=不限 1=大专 2=本科 3=硕士 4=博士 */ /** 学历要求 0=不限 1=大专 2=本科 3=硕士 4=博士 */
education?: number education?: number
@@ -97,11 +107,62 @@ export interface JobListParams {
statusFilter?: number[] statusFilter?: number[]
/** 搜索关键词 */ /** 搜索关键词 */
keyword?: string keyword?: string
/** 招聘分类 0=招 1=实习 2=社招 3=其他 */ /** 招聘分类 0=招 1=校招 2=实习 3=其他 */
recruitCategory?: number recruitCategory?: number
/** 排除岗位ID列表(用于推荐时排除已推荐过的) */ /** 排除岗位ID列表(用于推荐时排除已推荐过的) */
excludeJobIds?: number[] excludeJobIds?: number[]
/** 公司类型列表(上市企业、独角兽、国企等,可多选) */
companyTypes?: string[]
/** 学历要求列表 0=不限 1=大专 2=本科 3=硕士 4=博士(可多选) */
educations?: number[]
/** 发布开始时间(ISO 8601格式,如 "2026-08-10T21:00:00Z" */
publishStartTime?: string
/** 发布截止时间(ISO 8601格式,如 "2026-08-11T21:00:00Z" */
publishEndTime?: string
}
// ==================== 热门推荐接口 ====================
/** 热门行业项 */
export interface HotIndustryItem {
id: number
name: string
}
/** 热门岗位项 */
export interface HotCategoryItem {
id: number
name: string
}
/** 热门城市项 */
export interface HotCityItem {
code: string
name: string
}
/**
* 获取热门推荐行业
* GET /job/industry/hot
*/
export function fetchHotIndustries() {
return request.get<any, ApiResult<HotIndustryItem[]>>('/job/industry/hot')
}
/**
* 获取热门推荐岗位
* GET /job/category/hot
*/
export function fetchHotCategories() {
return request.get<any, ApiResult<HotCategoryItem[]>>('/job/category/hot')
}
/**
* 获取热门推荐城市
* GET /job/city/hot
*/
export function fetchHotCities() {
return request.get<any, ApiResult<HotCityItem[]>>('/job/city/hot')
} }
// ==================== 求职意向 ==================== // ==================== 求职意向 ====================
@@ -155,6 +216,32 @@ export function fetchJobList(params: JobListParams = {}) {
}) })
} }
/**
* 获取筛选岗位数量
* POST /job/list/count
* @param params 与岗位列表相同的筛选参数
*/
export function fetchJobListCount(params: JobListParams = {}) {
return request.post<any, ApiResult<number>>('/job/list/count', {
pageNum: params.pageNum ?? 1,
pageSize: params.pageSize ?? 10,
...params,
})
}
/**
* 深度匹配岗位列表
* POST /job/list/match
* @param params 与岗位列表相同的筛选参数
*/
export function fetchJobListMatch(params: JobListParams = {}) {
return request.post<any, ApiResult<JobPageData>>('/job/list/match', {
pageNum: params.pageNum ?? 1,
pageSize: params.pageSize ?? 15,
...params,
})
}
// ==================== 收藏列表 ==================== // ==================== 收藏列表 ====================
/** 收藏列表请求参数 */ /** 收藏列表请求参数 */
Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 211 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 462 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 177 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 246 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 221 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 485 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 232 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 390 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 408 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 177 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 247 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

@@ -56,15 +56,11 @@
// ==================== 下拉面板 ==================== // ==================== 下拉面板 ====================
&__panel { &__panel {
position: absolute;
top: calc(100% + 0.06rem);
left: 0;
width: 3.6rem; width: 3.6rem;
background: $bg-white; background: $bg-white;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 0.1rem; border-radius: 0.1rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
z-index: 100;
padding: 0.1rem; padding: 0.1rem;
// 只显示一栏时缩窄面板 // 只显示一栏时缩窄面板
@@ -57,15 +57,11 @@
// ==================== 下拉面板 ==================== // ==================== 下拉面板 ====================
&__panel { &__panel {
position: absolute;
top: calc(100% + 0.06rem);
left: 0;
width: 4.8rem; width: 4.8rem;
background: $bg-white; background: $bg-white;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 0.1rem; border-radius: 0.1rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
z-index: 100;
padding: 0.1rem; padding: 0.1rem;
// 只显示一栏时缩窄面板 // 只显示一栏时缩窄面板
@@ -1398,9 +1398,9 @@
} }
} }
// 立即去投递按钮 // 下载专属简历按钮
&__submit-btn { &__submit-btn {
flex: 1; width: 100%;
height: 0.48rem; height: 0.48rem;
background: $btn-dark; background: $btn-dark;
color: $bg-white; color: $bg-white;
@@ -1415,6 +1415,20 @@
background: $btn-dark-hover; background: $btn-dark-hover;
} }
} }
// 下载专属简历按钮包裹(含下拉菜单定位)
&__submit-wrap {
position: relative;
flex: 1;
.job-resume-custom-dialog__top-download-menu {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: 0.06rem;
width: 100%;
}
}
} }
// 右侧滑入动画 // 右侧滑入动画
+377 -264
View File
@@ -1,4 +1,4 @@
// 会员弹窗样式(新版) // 会员弹窗样式 — 新版黑金左右布局
@use '../variables' as *; @use '../variables' as *;
// 遮罩层 // 遮罩层
@@ -10,82 +10,163 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 0.14rem;
// 扫码支付弹窗的遮罩层级更高
&--qrcode {
z-index: 2400;
}
} }
// 弹窗主体 // 弹窗主体 — 左右布局
.member-dialog { .member-dialog {
box-sizing: border-box; box-sizing: border-box;
position: relative;
display: flex; display: flex;
flex-direction: column; width: 6.49rem;
align-items: flex-start; height: 4rem;
padding: 0.24rem 0.32rem; border-radius: 0.16rem;
gap: 0.24rem; box-shadow: 0 0.025rem 0.05rem rgba(60, 38, 13, 0.22);
width: 4.8rem; border: 0.00625rem solid #D9B873;
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 20.63%);
border: 1px solid #F0F0F0;
box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.05);
border-radius: 0.12rem;
font-size: 0.14rem; font-size: 0.14rem;
// 扫码支付弹窗变体 // ==================== 左侧黑金权益栏 ====================
&--qrcode { &__left {
position: relative;
width: 2rem;
height: 100%;
background: linear-gradient(180deg, #0F001E 0%, #1A0B09 18.09%, #452206 66.19%, #2C1500 100%);
padding: 0.24rem 0.20rem;
box-sizing: border-box;
overflow: hidden;
flex-shrink: 0;
border-radius: 0.16rem 0 0 0.16rem;
}
// 装饰线条背景
&__left-deco {
position: absolute;
width: 4.47rem;
height: 2.39rem;
left: -0.52rem;
top: -0.75rem;
background: radial-gradient(ellipse at center, rgba(255, 230, 175, 0.08) 0%, transparent 70%);
pointer-events: none;
}
&__left-title {
position: relative;
font-weight: 600;
font-size: 0.16rem;
line-height: 0.21rem;
color: #FFE9A6;
margin: 0 0 0.06rem;
}
&__left-subtitle {
position: relative;
font-weight: 330;
font-size: 0.12rem;
line-height: 0.16rem;
color: #F4E5CC;
margin: 0 0 0.2rem;
}
// ==================== 左栏权益卡片 ====================
&__benefits {
position: relative;
display: flex;
flex-direction: column;
gap: 0.16rem;
}
&__benefit-card {
box-sizing: border-box;
width: 1.56rem;
height: 0.6rem;
border: 0.00625rem solid #9C6D2D;
border-radius: 0.08rem;
display: flex;
align-items: center; align-items: center;
padding: 0 0.12rem;
gap: 0.12rem;
}
&__benefit-icon {
width: 0.32rem;
height: 0.32rem;
background: #4C3517;
border: 0.00625rem solid #D5A64A;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
svg {
width: 0.16rem;
height: 0.16rem;
}
}
&__benefit-info {
display: flex;
flex-direction: column;
gap: 0.04rem;
}
&__benefit-name {
font-weight: 450;
font-size: 0.14rem;
line-height: 0.19rem;
color: #FFE6AF;
}
&__benefit-desc {
font-weight: 330;
font-size: 0.1rem;
line-height: 0.13rem;
color: #F4E5CC;
}
// ==================== 左右分割金边 ====================
&__divider {
width: 0.01rem;
height: 100%;
background: #D6B15B;
flex-shrink: 0;
}
// ==================== 右侧内容区 ====================
&__right {
flex: 1;
background: linear-gradient(179.38deg, #FCEDD8 0.54%, #FEFBF5 19.09%);
display: flex;
flex-direction: column;
padding: 0.2rem 0.24rem;
box-sizing: border-box;
position: relative;
border-radius: 0 0.16rem 0.16rem 0;
} }
// ==================== 顶部标题行 ==================== // ==================== 顶部标题行 ====================
&__header { &__header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: center;
width: 100%; margin-bottom: 0.2rem;
} }
&__header-left { &__title {
display: flex; font-weight: 600;
flex-direction: column; font-size: 0.18rem;
gap: 0.04rem; line-height: 0.24rem;
color: #1F160F;
margin: 0;
} }
&__header-right { &__header-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.16rem; gap: 0.16rem;
} }
&__title { // 联系客服
font-weight: 620;
font-size: 0.18rem;
line-height: 0.24rem;
color: $text-dark;
margin: 0;
}
&__subtitle {
font-weight: 330;
font-size: 0.12rem;
line-height: 0.16rem;
color: $text-middle;
margin: 0;
}
&__contact {
font-weight: 330;
font-size: 0.12rem;
line-height: 0.16rem;
color: $text-light;
cursor: pointer;
&:hover {
color: $text-middle;
}
}
// 联系客服外层包装(用于定位二维码弹出框)
&__contact-wrap { &__contact-wrap {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@@ -96,7 +177,18 @@
} }
} }
// 联系客服二维码弹出框 &__contact {
font-weight: 330;
font-size: 0.12rem;
line-height: 0.16rem;
color: #2F343B;
cursor: pointer;
&:hover {
color: #1F160F;
}
}
&__contact-qr { &__contact-qr {
display: none; display: none;
position: absolute; position: absolute;
@@ -122,7 +214,6 @@
} }
} }
// 二维码弹出框底部箭头
&__contact-qr-arrow { &__contact-qr-arrow {
position: absolute; position: absolute;
bottom: -0.07rem; bottom: -0.07rem;
@@ -133,7 +224,6 @@
border-left: 0.08rem solid transparent; border-left: 0.08rem solid transparent;
border-right: 0.08rem solid transparent; border-right: 0.08rem solid transparent;
border-top: 0.08rem solid $bg-white; border-top: 0.08rem solid $bg-white;
filter: drop-shadow(0 0.02rem 0.02rem rgba(0, 0, 0, 0.05));
} }
&__close { &__close {
@@ -143,355 +233,378 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 0.14rem; font-size: 0.14rem;
color: $text-middle; color: #2F343B;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $text-dark; color: #1F160F;
} }
} }
// ==================== 套餐选择区域 ==================== // ==================== 套餐选择区域 ====================
&__plans { &__plans {
display: flex; display: flex;
gap: 0.13rem; gap: 0.2rem;
width: 100%; margin-bottom: 0.2rem;
} }
&__plan-card { &__plan-card {
box-sizing: border-box; box-sizing: border-box;
width: 1.2rem;
height: 1.4rem;
background: #FFFDF8;
border: 1px solid #E7C991;
border-radius: 0.08rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0.12rem 0.16rem; gap: 0.08rem;
gap: 0.04rem;
width: 1.3rem;
height: 1.01rem;
background: $bg-white;
border: 1px solid #F0F0F0;
border-radius: 0.08rem;
cursor: pointer; cursor: pointer;
transition: border-color 0.2s;
position: relative; position: relative;
transition: border-color 0.2s, box-shadow 0.2s;
&:hover { &:hover {
border-color: $accent; border-color: #B77D24;
} }
// 选中状态 — 粗边框 // 选中
&--active { &--active {
border: 3px solid $accent; background: linear-gradient(180deg, #FFF4D8 0%, #FDF9F1 100%);
border: 2px solid #B77D24;
box-shadow: 0 0.04rem 0.08rem rgba(183, 125, 36, 0.2);
} }
} }
&__plan-recommend { // 推荐角标
&__plan-badge {
position: absolute; position: absolute;
top: -0.1rem; top: -0.12rem;
left: 10%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
white-space: nowrap; white-space: nowrap;
background: $accent; background: #C28A2F;
color: $bg-white; border: 0.00625rem solid #F0D091;
font-size: 0.1rem; border-radius: 0.075rem;
padding: 0.02rem 0.08rem; padding: 0.04rem 0.12rem;
border-radius: 0.08rem; font-weight: 600;
font-weight: 620; font-size: 0.12rem;
line-height: 0.16rem;
color: #FFFFFF;
} }
&__plan-name { &__plan-name {
font-weight: 450; font-weight: 600;
font-size: 0.14rem; font-size: 0.14rem;
line-height: 0.19rem; line-height: 0.19rem;
text-align: center; text-align: center;
color: $text-dark; color: #1F160F;
} }
&__plan-price { &__plan-price {
display: flex; display: flex;
align-items: flex-end; align-items: baseline;
justify-content: center; justify-content: center;
gap: 0.04rem;
padding: 0.04rem 0;
} }
&__plan-price-symbol { &__plan-price-symbol {
font-weight: 450; font-weight: 600;
font-size: 0.14rem; font-size: 0.14rem;
line-height: 0.19rem; color: #1F160F;
color: $text-dark;
} }
&__plan-price-num { &__plan-price-num {
font-weight: 630; font-weight: 600;
font-size: 0.24rem; font-size: 0.28rem;
line-height: 0.18rem; line-height: 0.37rem;
color: $text-dark; color: #1F160F;
} }
&__plan-original-price { &__plan-original {
font-weight: 330; font-weight: 330;
font-size: 0.12rem; font-size: 0.12rem;
line-height: 0.16rem; line-height: 0.16rem;
text-decoration: line-through; text-decoration: line-through;
color: $text-light; color: #7A7D82;
margin-left: 0.04rem;
} }
&__plan-daily { &__plan-tag {
font-weight: 330; font-weight: 330;
font-size: 0.12rem; font-size: 0.12rem;
line-height: 0.16rem; line-height: 0.16rem;
text-align: center; text-align: center;
color: $accent; color: #3B2A1E;
} }
// ==================== 会员权益区域 ==================== // ==================== 支付方式选择(步骤一) ====================
&__benefits { &__step-pay {
width: 100%;
}
&__benefits-title {
font-weight: 450;
font-size: 0.14rem;
line-height: 0.19rem;
color: $text-dark;
margin: 0 0 0.16rem;
}
&__benefits-cards {
display: flex;
gap: 0.13rem;
width: 100%;
}
&__benefit-card {
box-sizing: border-box;
flex: 1; flex: 1;
display: flex;
align-items: center;
padding: 0.12rem 0.16rem;
gap: 0.1rem;
background: $bg-white;
border: 1px solid #AEE6EA;
border-radius: 0.08rem;
} }
&__benefit-icon { &__payment-section {
width: 0.4rem; margin-bottom: 0.16rem;
height: 0.4rem;
display: flex;
align-items: center;
justify-content: center;
background: #EDF9FA;
border-radius: 50%;
flex-shrink: 0;
svg {
width: 0.24rem;
height: 0.24rem;
}
}
&__benefit-info {
display: flex;
flex-direction: column;
gap: 0.04rem;
}
&__benefit-name {
font-weight: 450;
font-size: 0.14rem;
line-height: 0.19rem;
color: $accent;
}
&__benefit-desc {
font-weight: 330;
font-size: 0.12rem;
line-height: 0.16rem;
color: $text-middle;
}
// ==================== 支付方式选择 ====================
&__payment {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
} }
&__payment-label { &__payment-label {
font-weight: 450; font-weight: 450;
font-size: 0.14rem; font-size: 0.14rem;
line-height: 0.19rem; line-height: 0.19rem;
color: $text-dark; color: #1F160F;
display: block;
margin-bottom: 0.08rem;
} }
&__payment-methods { &__payment-methods {
display: flex; display: flex;
align-items: center;
gap: 0.24rem; gap: 0.24rem;
} }
&__payment-item { &__payment-item {
box-sizing: border-box;
width: 1.88rem;
height: 0.58rem;
background: #FFFDF8;
border: 1px solid #E7C991;
border-radius: 0.08rem;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.04rem 0.08rem; padding: 0 0.2rem;
gap: 0.06rem; gap: 0.12rem;
border-radius: 0.04rem;
cursor: pointer; cursor: pointer;
transition: background 0.2s; position: relative;
transition: border-color 0.2s;
svg { svg {
width: 0.16rem; width: 0.32rem;
height: 0.16rem; height: 0.32rem;
flex-shrink: 0; flex-shrink: 0;
} }
// 微信选中态 // 选中态
&--wechat-active { &--active {
background: #EBFEF4; border-color: #B77D24;
}
// 支付宝选中态
&--alipay-active {
background: #EBF3FF;
} }
} }
&__payment-text { &__payment-text {
font-weight: 620; font-weight: 600;
font-size: 0.12rem; font-size: 0.13rem;
line-height: 0.18rem; line-height: 0.17rem;
color: #1F160F;
}
&--wechat { // 选中圆圈
color: #07C160; &__payment-radio {
} box-sizing: border-box;
width: 0.14rem;
height: 0.14rem;
background: #FFFDF8;
border: 1px solid #E7C991;
border-radius: 50%;
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
&--alipay { .member-dialog__payment-item--active & {
color: #1677FF; border-color: #C28A2F;
} }
} }
// ==================== 购买按钮 ==================== &__payment-radio-inner {
width: 0.08rem;
height: 0.08rem;
background: #C28A2F;
border-radius: 50%;
}
// ==================== 底部栏(步骤一/步骤二共用) ====================
&__bottom-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.66rem;
background: #FCF4E8;
border-top: 1px solid #E9D4B1;
border-radius: 0 0 0.16rem 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.24rem;
box-sizing: border-box;
&--qrcode {
height: 1.7rem;
padding: 0.2rem 0.24rem;
gap: 0.24rem;
justify-content: flex-start;
}
}
&__footer-price {
display: flex;
align-items: baseline;
gap: 0.04rem;
}
&__footer-price-label {
font-weight: 330;
font-size: 0.12rem;
line-height: 0.16rem;
color: #1F160F;
margin-right: 0.08rem;
}
&__footer-price-symbol {
font-weight: 600;
font-size: 0.14rem;
color: #1F160F;
}
&__footer-price-num {
font-weight: 600;
font-size: 0.24rem;
line-height: 0.32rem;
color: #1F160F;
}
// 购买会员按钮
&__buy-btn { &__buy-btn {
width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0.08rem 0.12rem; padding: 0.08rem 0.24rem;
height: 0.35rem; height: 0.33rem;
background: #AEE6EA; background: #C88E35;
border: 1px solid #F0D091;
box-shadow: 0 0.02rem 0.05rem rgba(154, 104, 32, 0.18);
border-radius: 0.08rem; border-radius: 0.08rem;
border: none; font-weight: 600;
font-weight: 450; font-size: 0.13rem;
font-size: 0.14rem; line-height: 0.15rem;
line-height: 0.19rem; color: #FFFFFF;
color: $bg-white; cursor: pointer;
cursor: default; border: 1px solid #F0D091;
opacity: 0.4; transition: opacity 0.2s;
transition: background 0.2s, opacity 0.2s;
// 选择了支付方式后变为主题色、不透明、可点击 &:hover {
&--active { opacity: 0.9;
background: $accent; }
opacity: 1;
cursor: pointer;
&:hover { &:disabled {
background: $accent-hover; opacity: 0.5;
} cursor: default;
} }
} }
// ==================== 扫码支付弹窗内容 ==================== // ==================== 扫码支付区域(底部栏内) ====================
&__qrcode-content {
&__qrcode-box {
width: 1.2rem;
height: 1.2rem;
border: 2px solid #B77D24;
border-radius: 0.0rem;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
flex-shrink: 0;
}
&__qrcode-iframe {
border: none;
border-radius: 0.04rem;
}
.qrcode-zhifubao{
transform: scale(0.52);
width: 2.2rem !important;
height: 2.2rem !important;
padding-top: 0.1rem;
padding-left: 0.1rem;
box-sizing: border-box;
}
.qrcode-wechat{
transform: scale(0.66);
width: 1.6rem !important;
height: 1.6rem !important;
box-sizing: border-box;
}
&__qrcode-info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; gap: 0.12rem;
gap: 0.16rem;
width: 100%;
}
&__qrcode-image {
width: 2.1rem;
height: 2.1rem;
display: flex;
align-items: center;
justify-content: center;
}
&__payment-iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 0.08rem;
}
&__wechat-qr-iframe {
width: 2.2rem;
height: 2.2rem;
border: none;
border-radius: 0.08rem;
} }
&__qrcode-price-row { &__qrcode-price-row {
display: flex; display: flex;
align-items: flex-end; align-items: center;
gap: 0.08rem; gap: 0.04rem;
} }
&__qrcode-price { &__qrcode-price-symbol {
font-weight: 630; font-weight: 600;
font-size: 0.18rem;
color: #1F160F;
}
&__qrcode-price-num {
font-size: 0.32rem; font-size: 0.32rem;
line-height: 0.25rem; font-weight: 600;
color: $text-dark; line-height: 0.37rem;
color: #1F160F;
} }
&__qrcode-tip { &__qrcode-tip {
font-weight: 330; font-weight: 330;
font-size: 0.14rem; font-size: 0.14rem;
line-height: 0.1rem; line-height: 0.19rem;
color: $text-dark; color: #1F160F;
margin-left: 0.08rem;
vertical-align: middle;
} }
&__qrcode-agreement { &__qrcode-agreement {
font-weight: 330; font-weight: 330;
font-size: 0.14rem; font-size: 0.12rem;
line-height: 0.19rem; line-height: 0.16rem;
color: $text-light; color: #3B2A1E;
margin: 0; margin: 0;
a { a {
color: $text-light; color: #A86718;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: $accent; color: #A86718;
} }
} }
} }
// 已支付成功按钮 // 已支付成功按钮
&__paid-btn { &__paid-btn {
width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0.08rem 0.12rem; padding: 0.08rem 0.24rem;
height: 0.35rem; height: 0.33rem;
background: $accent; width: fit-content;
background: #C88E35;
border: 1px solid #F0D091;
box-shadow: 0 0.02rem 0.05rem rgba(154, 104, 32, 0.18);
border-radius: 0.08rem; border-radius: 0.08rem;
border: none; font-weight: 600;
font-weight: 450; font-size: 0.13rem;
font-size: 0.14rem; line-height: 0.15rem;
line-height: 0.19rem; color: #FFFFFF;
color: $bg-white;
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: opacity 0.2s;
&:hover { &:hover {
background: $accent-hover; opacity: 0.9;
} }
} }
} }
@@ -251,17 +251,15 @@
&__tag { &__tag {
font-size: 0.12rem; font-size: 0.12rem;
color: $text-dark; color: $accent;
background: $bg-main; background: #fff;
border: 1px solid $border-color; border: 1px solid $accent;
border-radius: 0.16rem; border-radius: 0.04rem;
padding: 0.05rem 0.16rem; padding: 0.05rem 0.08rem;
transition: all 0.2s; transition: all 0.2s;
&:hover { &:hover {
border-color: $accent;
color: $accent;
background: $theme-color;
} }
} }
@@ -55,15 +55,11 @@
// ==================== 下拉面板 ==================== // ==================== 下拉面板 ====================
&__panel { &__panel {
position: absolute;
top: calc(100% + 0.06rem);
left: 0;
width: 4.2rem; width: 4.2rem;
background: $bg-white; background: $bg-white;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 0.1rem; border-radius: 0.1rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
z-index: 100;
padding: 0.1rem; padding: 0.1rem;
// level=2 时只有两栏,面板收窄 // level=2 时只有两栏,面板收窄
+216 -45
View File
@@ -12,6 +12,14 @@
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
z-index: 100;
// 窄版模式(window.innerWidth < 1440
&--narrow {
width: 0.8rem;
padding: 0.16rem 0.10rem;
align-items: center;
}
&__header { &__header {
display: flex; display: flex;
@@ -21,6 +29,12 @@
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
// 窄版header居中
&--narrow &__header {
justify-content: center;
padding: 0.1rem 0;
}
&__avatar { &__avatar {
width: 0.36rem; width: 0.36rem;
height: 0.36rem; height: 0.36rem;
@@ -43,6 +57,12 @@
width: 1.32rem; width: 1.32rem;
height: 0.34rem; height: 0.34rem;
display: block; display: block;
// 窄版logo
&--narrow {
width: 0.46rem;
height: auto;
}
} }
&__menu { &__menu {
@@ -52,7 +72,13 @@
flex: 1; flex: 1;
} }
// 窄版菜单宽度撑满
&--narrow &__menu {
width: 100%;
}
&__item { &__item {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.04rem; gap: 0.04rem;
@@ -79,18 +105,45 @@
} }
} }
// 窄版导航项:纵向居中排列
&--narrow &__item {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.04rem;
padding: 0.1rem 0.06rem;
}
&__item-icon { &__item-icon {
width: 0.2rem; width: 0.2rem;
height: 0.2rem; height: 0.2rem;
object-fit: contain; object-fit: contain;
font-size: 0.16rem; font-size: 0.16rem;
// 内部SVG/img统一撑满容器
svg, img {
width: 100%;
height: 100%;
display: block;
}
}
// 窄版图标放大,防止scale缩放后图标过小
&--narrow &__item-icon {
width: 0.24rem;
height: 0.24rem;
} }
&__item-label { &__item-label {
} }
// 窄版label字号缩小
&--narrow &__item-label {
font-size: 0.11rem;
white-space: nowrap;
}
&__badge { &__badge {
background: #e85635; background: #e85635;
color: #fff; color: #fff;
@@ -118,6 +171,39 @@
text-align: center; text-align: center;
color: #FFFFFF; color: #FFFFFF;
flex: none; flex: none;
// 窄版角标样式(右上角定位)
&--corner {
position: absolute;
top: -0.07rem;
right: -0.05rem;
min-width: auto;
padding: 0.02rem 0.04rem;
height: 0.17rem;
font-size: 0.10rem;
line-height: 0.12rem;
border-radius: 0.03rem;
}
}
// 公测群二维码弹出层(hover索引5时显示)
&__qrcode-popup {
position: absolute;
top: calc(100% + 0.08rem);
left: 0;
padding: 0.08rem;
background: #fff;
border-radius: 0.08rem;
box-shadow: 0 0.02rem 0.12rem rgba(0, 0, 0, 0.08);
z-index: 100;
}
&__qrcode-img {
display: block;
width: auto;
height: auto;
max-width: 1.6rem;
border-radius: 0.04rem;
} }
&__footer { &__footer {
@@ -126,6 +212,48 @@
gap: 0.04rem; gap: 0.04rem;
padding-top: 0.12rem; padding-top: 0.12rem;
} }
// 窄版footer居中
&--narrow &__footer {
align-items: center;
width: 100%;
}
}
// ==================== 窄版邀请图片卡片 ====================
.side-nav__referral-card-narrow {
display: flex;
justify-content: center;
margin-top: 0.12rem;
}
.side-nav__referral-card-narrow-img {
width: 0.56rem;
height: 0.85rem;
display: block;
border-radius: 0.06rem;
}
// ==================== 窄版用户信息 ====================
.side-nav__user-info-narrow {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.06rem;
cursor: pointer;
padding: 0.08rem 0;
border-radius: 0.08rem;
&:hover {
}
}
.side-nav__user-avatar-narrow {
width: 0.26rem;
height: 0.26rem;
border-radius: 50%;
display: block;
} }
.side-nav__dialog-overlay { .side-nav__dialog-overlay {
@@ -478,84 +606,120 @@
// ==================== 邀请会员卡片 ==================== // ==================== 邀请会员卡片 ====================
.side-nav__referral-card { .side-nav__referral-card {
position: relative;
width: 100%; width: 100%;
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%); height: 2.21rem;
background: linear-gradient(90deg, #DFF5F6 0%, #FBFDF7 100%);
box-shadow: 0px 0px 0.08rem rgba(0, 0, 0, 0.06);
border-radius: 0.08rem; border-radius: 0.08rem;
padding: 0.16rem;
box-sizing: border-box; box-sizing: border-box;
margin-top: 0.12rem; margin-top: 0.12rem;
overflow: hidden;
}
// 顶部区域:标题在左上,礼物图片定位在右下角
.side-nav__referral-top {
position: relative;
padding: 0.2rem 0.16rem 0.4rem;
}
.side-nav__referral-top-text {
position: relative;
z-index: 1;
} }
.side-nav__referral-title { .side-nav__referral-title {
font-size: 0.16rem; font-size: 0.18rem;
font-weight: 630; font-weight: 630;
color: #FFFFFF; color: #1A1A1A;
line-height: 0.21rem; line-height: 0.24rem;
&--accent {
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
} }
.side-nav__referral-subtitle { .side-nav__referral-subtitle {
font-size: 0.10rem; font-size: 0.14rem;
font-weight: 330; font-weight: 330;
color: #EAFBFC; color: #6A7282;
line-height: 0.13rem; line-height: 0.19rem;
margin-top: 0.04rem; margin-top: 0.08rem;
} }
// 礼物图片:absolute定位在顶部区域的右下角,底部被毛玻璃面板遮住
.side-nav__referral-gift {
position: absolute;
right: 0.10rem;
bottom: 0.02rem;
width: 0.68rem;
height: 0.68rem;
mix-blend-mode: darken;
}
// 白色毛玻璃面板(覆盖在礼物底部之上)
.side-nav__referral-panel { .side-nav__referral-panel {
background: #FFFFFF; position: absolute;
box-shadow: 0px 0.02rem 0.06rem rgba(26, 26, 26, 0.05); left: 0;
border-radius: 0.06rem; bottom: 0;
padding: 0.10rem 0.08rem; width: 100%;
margin-top: 0.10rem; height: 1.38rem;
background: rgba(255, 255, 255, 0.4);
border: 1px solid #FFFFFF;
border-bottom: none;
backdrop-filter: blur(3px);
border-radius: 0.08rem 0.08rem 0 0;
box-sizing: border-box;
padding: 0.16rem;
} }
.side-nav__referral-row { .side-nav__referral-row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; gap: 0.08rem;
} }
.side-nav__referral-label { .side-nav__referral-label {
font-size: 0.10rem; font-size: 0.14rem;
font-weight: 330; font-weight: 330;
color: #6B7280; color: #6A7282;
line-height: 0.13rem; line-height: 0.19rem;
} }
.side-nav__referral-value { .side-nav__referral-value {
font-size: 0.10rem; font-size: 0.14rem;
font-weight: 620; font-weight: 450;
color: #52CAD1; line-height: 0.19rem;
line-height: 0.13rem; background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} }
.side-nav__referral-track { .side-nav__referral-track {
width: 100%; width: 100%;
height: 0.02rem; height: 0.06rem;
background: #D7F1F3; background: #EDF9FA;
border-radius: 9999px; border-radius: 0.06rem;
margin-top: 0.06rem; margin-top: 0.1rem;
overflow: hidden; overflow: hidden;
} }
.side-nav__referral-fill { .side-nav__referral-fill {
height: 100%; height: 100%;
background: #52CAD1; background: #52CAD1;
border-radius: 9999px; border-radius: 0.06rem;
}
.side-nav__referral-divider {
width: 100%;
border-top: 0.01rem solid #8C8C8C;
margin-top: 0.08rem;
} }
.side-nav__referral-tip { .side-nav__referral-tip {
font-size: 0.10rem; font-size: 0.12rem;
font-weight: 330; font-weight: 330;
color: #1A1A1A; color: #6A7282;
line-height: 0.13rem; line-height: 0.16rem;
margin-top: 0.08rem; margin-top: 0.06rem;
strong { strong {
font-weight: 630; font-weight: 630;
@@ -563,16 +727,22 @@
} }
.side-nav__referral-action { .side-nav__referral-action {
font-size: 0.11rem; display: flex;
font-weight: 620; align-items: center;
color: #52CAD1; justify-content: center;
line-height: 0.15rem; width: 100%;
text-align: center; height: 0.40rem;
margin-top: 0.08rem; background: linear-gradient(90deg, #36C1C9 16.99%, #AFE9D0 100%);
box-shadow: inset 0px 0px 0.06rem rgba(255, 255, 255, 0.5);
border-radius: 0.08rem;
font-size: 0.14rem;
font-weight: 600;
color: #FFFFFF;
margin-top: 0.12rem;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 0.8; opacity: 0.9;
} }
} }
@@ -680,12 +850,13 @@
bottom: calc(100% + 0.08rem); bottom: calc(100% + 0.08rem);
left: 0; left: 0;
width: 100%; width: 100%;
min-width: 1.65rem;
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #F0F0F0; border: 1px solid #F0F0F0;
box-shadow: 0px 0.02rem 0.08rem rgba(0, 0, 0, 0.04); box-shadow: 0px 0.02rem 0.08rem rgba(0, 0, 0, 0.04);
border-radius: 0.08rem; border-radius: 0.08rem;
overflow: hidden; overflow: hidden;
z-index: 100; z-index: 1000;
} }
.side-nav__account-popup-header { .side-nav__account-popup-header {
+2 -2
View File
@@ -8,7 +8,7 @@
font-size: 0.14rem; font-size: 0.14rem;
// 主内容区域(左侧导航栏右边的部分) // 主内容区域(左侧导航栏右边的部分)
&__content { &__content {
margin-left: 2.2rem; margin-left: var(--nav-width, 2.2rem);
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
height: var(--app-height, 100vh); height: var(--app-height, 100vh);
@@ -1928,7 +1928,7 @@
.agent-page__install-dialog-title { .agent-page__install-dialog-title {
position: relative; position: relative;
font-size: 0.18rem; font-size: 0.18rem;
font-weight: 520; font-weight: 600;
color: $text-dark; color: $text-dark;
text-align: center; text-align: center;
margin: 0 0 0.2rem 0; margin: 0 0 0.2rem 0;
+1 -1
View File
@@ -344,7 +344,7 @@
&__quote-avatar { &__quote-avatar {
width: 0.38rem; width: 0.38rem;
height: 0.38rem; height: 0.38rem;
background: #D9E3EA; //background: #D9E3EA;
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
} }
+12 -1
View File
@@ -148,6 +148,9 @@
letter-spacing: 0.03rem; letter-spacing: 0.03rem;
color: #111; color: #111;
margin: 0; margin: 0;
>span{
width: 1.51rem;
}
} }
// 副标题描述 // 副标题描述
@@ -1615,10 +1618,18 @@
margin: 0.6rem auto 0; margin: 0.6rem auto 0;
text-align: center; text-align: center;
padding-top: 0.4rem; padding-top: 0.4rem;
display: flex;
justify-content: center;
gap: 0.2rem;
p { p {
font-size: 0.12rem; font-size: 0.12rem;
line-height: 0.16rem; color: #9ca3af;
}
a{
font-size: 0.12rem;
text-decoration: none;
color: #9ca3af; color: #9ca3af;
} }
} }
+4 -3
View File
@@ -3,7 +3,7 @@
// ==================== 岗位详情页 ==================== // ==================== 岗位详情页 ====================
.job-detail { .job-detail {
&__content { &__content {
margin-left: 2.2rem; margin-left: var(--nav-width, 2.2rem);
margin-right: var(--chat-width, 3.6rem); margin-right: var(--chat-width, 3.6rem);
flex: 1; flex: 1;
height: var(--app-height, 100vh); height: var(--app-height, 100vh);
@@ -167,14 +167,15 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0.08rem 0.16rem; width: 0.88rem;
height: 0.37rem;
line-height: 0.37rem;
background: $accent; background: $accent;
border: 1px solid $accent; border: 1px solid $accent;
border-radius: 0.08rem; border-radius: 0.08rem;
color: $bg-white; color: $bg-white;
font-size: 0.14rem; font-size: 0.14rem;
font-weight: 600; font-weight: 600;
line-height: 0.19rem;
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.2s;
File diff suppressed because it is too large Load Diff
+1 -1
View File
@@ -445,7 +445,7 @@
} }
.login-view__sms-status--error { .login-view__sms-status--error {
color: #E85635; color: #EF4444;
} }
/* ==================== 状态按钮(步骤二) ==================== */ /* ==================== 状态按钮(步骤二) ==================== */
+1 -1
View File
@@ -14,7 +14,7 @@
flex: 1; flex: 1;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
margin-left: 2.2rem; margin-left: var(--nav-width, 2.2rem);
display: flex; display: flex;
} }
+8 -1
View File
@@ -14,7 +14,7 @@
flex: 1; flex: 1;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
margin-left: 2.2rem; margin-left: var(--nav-width, 2.2rem);
} }
// 左侧主内容区 // 左侧主内容区
@@ -92,6 +92,13 @@
&:hover { &:hover {
background: #EDF9FA; background: #EDF9FA;
} }
// 小屏视口宽度 < 1440px只显示第一个标签
@media (max-width: 1439px) {
& ~ & {
display: none;
}
}
} }
// 搜索框 // 搜索框
+1 -1
View File
@@ -3,7 +3,7 @@
// ==================== 个人资料页 ==================== // ==================== 个人资料页 ====================
.profile-page { .profile-page {
&__content { &__content {
margin-left: 2.2rem; margin-left: var(--nav-width, 2.2rem);
flex: 1; flex: 1;
padding-bottom: 0.12rem; padding-bottom: 0.12rem;
height: var(--app-height, 100vh); height: var(--app-height, 100vh);
+2 -2
View File
@@ -3,7 +3,7 @@
// ==================== 简历详情页 ==================== // ==================== 简历详情页 ====================
.resume-detail { .resume-detail {
&__content { &__content {
margin-left: 2.2rem; margin-left: var(--nav-width, 2.2rem);
flex: 1; flex: 1;
padding-bottom: 0.24rem; padding-bottom: 0.24rem;
height: var(--app-height, 100vh); height: var(--app-height, 100vh);
@@ -726,7 +726,7 @@
background: $bg-white; background: $bg-white;
border: 1px solid $accent; border: 1px solid $accent;
border-radius: 0.04rem; border-radius: 0.04rem;
padding: 0.05rem 0.14rem; padding: 0.05rem 0.08rem;
transition: all 0.2s; transition: all 0.2s;
&:hover { &:hover {
+1 -1
View File
@@ -3,7 +3,7 @@
// ==================== 简历列表页 ==================== // ==================== 简历列表页 ====================
.resume-page { .resume-page {
&__content { &__content {
margin-left: 2.2rem; margin-left: var(--nav-width, 2.2rem);
flex: 1; flex: 1;
height: var(--app-height, 100vh); height: var(--app-height, 100vh);
box-sizing: border-box; box-sizing: border-box;
+9
View File
@@ -0,0 +1,9 @@
/**
*
*/
/** 是否开启"个人资料为空时强制跳转到登录页简历上传"机制 */
export const ENABLE_FORCE_RESUME_UPLOAD = true
/** 浏览器插件目标版本(用于判断用户是否需要更新插件) */
export const PLUGIN_TARGET_VERSION = '0.1.1'
+2 -2
View File
@@ -152,11 +152,11 @@ function switchTab(tab: 'pending' | 'completed') {
activeTab.value = tab activeTab.value = tab
} }
/** 加载待投递列表(pageSize=300 */ /** 加载待投递列表(pageSize=200 */
async function loadPendingList() { async function loadPendingList() {
pendingLoading.value = true pendingLoading.value = true
try { try {
const res = await fetchAgentTaskList({ pageNum: 1, pageSize: 300, tab: 1 }) const res = await fetchAgentTaskList({ pageNum: 1, pageSize: 200, tab: 1 })
if (res.code === '0' && res.data) { if (res.code === '0' && res.data) {
pendingList.value = res.data.list || [] pendingList.value = res.data.list || []
} }
+420
View File
@@ -0,0 +1,420 @@
<template>
<!-- 选择投递方式弹窗 -->
<div v-if="visible" class="job-apply-method__overlay" @click.self="close">
<div class="job-apply-method__dialog">
<!-- 渐变背景层 -->
<div class="job-apply-method__bg"></div>
<!-- 标题 -->
<p class="job-apply-method__title">选择投递方式</p>
<!-- 关闭按钮 -->
<span class="job-apply-method__close" @click="close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M18 6L6 18M6 6l12 12" stroke="#6A7282" stroke-width="1.5" stroke-linecap="round"/></svg>
</span>
<!-- 两个选项卡 -->
<div class="job-apply-method__options">
<!-- 直接前往官网 -->
<div class="job-apply-method__card" :class="{ 'job-apply-method__card--active': choice === 'direct' }" @click="choice = 'direct'">
<p class="job-apply-method__card-title">直接前往官网</p>
<p class="job-apply-method__card-desc">手动填写网申信息<br>自行记录投递进度</p>
</div>
<!-- 智能投递助手 -->
<div class="job-apply-method__card" :class="{ 'job-apply-method__card--active': choice === 'agent' }" @click="choice = 'agent'">
<!-- 左下角圆形装饰 -->
<div class="job-apply-method__card-circle"></div>
<div class="job-apply-method__card-header">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1L10 5.5L15 6.5L11.5 10L12.5 15L8 12.5L3.5 15L4.5 10L1 6.5L6 5.5L8 1Z" fill="#52CAD1"/></svg>
<span class="job-apply-method__card-title job-apply-method__card-title--accent">智能投递助手</span>
</div>
<p class="job-apply-method__card-desc">{{ agentCardDesc }}</p>
</div>
</div>
<!-- 底部操作按钮 -->
<button class="job-apply-method__action" :class="actionClass" :disabled="!choice" @click="handleAction">
<svg v-if="actionIcon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_apply_method)">
<path d="M6.0714 3.63204C6.47007 2.46537 8.08207 2.43004 8.55474 3.52604L8.59474 3.63271L9.13274 5.20604C9.25603 5.56686 9.45527 5.89705 9.71702 6.17432C9.97877 6.4516 10.2969 6.66952 10.6501 6.81337L10.7947 6.86737L12.3681 7.40471C13.5347 7.80337 13.5701 9.41537 12.4747 9.88804L12.3681 9.92804L10.7947 10.466C10.4338 10.5893 10.1035 10.7885 9.82608 11.0502C9.54869 11.312 9.33067 11.6302 9.18674 11.9834L9.13274 12.1274L8.5954 13.7014C8.19674 14.868 6.58474 14.9034 6.11274 13.808L6.0714 13.7014L5.53407 12.128C5.41086 11.7671 5.21165 11.4368 4.9499 11.1594C4.68814 10.882 4.36993 10.664 4.01674 10.52L3.87274 10.466L2.2994 9.92871C1.13207 9.53004 1.09674 7.91804 2.19274 7.44604L2.2994 7.40471L3.87274 6.86737C4.23356 6.74408 4.56374 6.54484 4.84102 6.28309C5.11829 6.02134 5.33621 5.70317 5.48007 5.35004L5.53407 5.20604L6.0714 3.63204ZM7.3334 4.06271L6.79607 5.63604C6.60833 6.18624 6.30292 6.68891 5.90109 7.10904C5.49927 7.52917 5.0107 7.85666 4.4694 8.06871L4.30274 8.12937L2.7294 8.66671L4.30274 9.20404C4.85294 9.39178 5.35561 9.6972 5.77573 10.099C6.19586 10.5008 6.52335 10.9894 6.7354 11.5307L6.79607 11.6974L7.3334 13.2707L7.87074 11.6974C8.05848 11.1472 8.36389 10.6445 8.76571 10.2244C9.16753 9.80425 9.65611 9.47676 10.1974 9.26471L10.3641 9.20471L11.9374 8.66671L10.3641 8.12937C9.81387 7.94163 9.3112 7.63622 8.89107 7.2344C8.47094 6.83258 8.14345 6.34401 7.9314 5.80271L7.8714 5.63604L7.3334 4.06271ZM12.6667 1.33337C12.7915 1.33337 12.9137 1.36836 13.0195 1.43436C13.1253 1.50035 13.2105 1.59471 13.2654 1.70671L13.2974 1.78471L13.5307 2.46871L14.2154 2.70204C14.3404 2.7445 14.45 2.82312 14.5302 2.92792C14.6105 3.03272 14.6578 3.15899 14.6663 3.29072C14.6747 3.42246 14.6438 3.55373 14.5775 3.6679C14.5113 3.78207 14.4126 3.874 14.2941 3.93204L14.2154 3.96404L13.5314 4.19737L13.2981 4.88204C13.2555 5.00699 13.1769 5.11651 13.072 5.1967C12.9672 5.2769 12.8409 5.32417 12.7092 5.33252C12.5774 5.34088 12.4462 5.30994 12.3321 5.24363C12.2179 5.17732 12.1261 5.07862 12.0681 4.96004L12.0361 4.88204L11.8027 4.19804L11.1181 3.96471C10.9931 3.92224 10.8835 3.84363 10.8033 3.73883C10.723 3.63403 10.6756 3.50776 10.6672 3.37603C10.6588 3.24429 10.6897 3.11302 10.7559 2.99885C10.8222 2.88468 10.9208 2.79275 11.0394 2.73471L11.1181 2.70271L11.8021 2.46937L12.0354 1.78471C12.0804 1.65299 12.1654 1.53865 12.2786 1.45771C12.3918 1.37677 12.5276 1.33329 12.6667 1.33337Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_apply_method">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
{{ actionText }}
</button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { createChannelBridge } from '@/utils/channelBridge'
import { fetchAgentConfig, applyJob } from '@/api/agent'
import { ElMessage } from 'element-plus'
// ==================== Props & Emits ====================
const props = defineProps<{
/** 控制弹窗显隐(v-model */
modelValue: boolean
/** 岗位来源链接 */
sourceUrl: string
/** 岗位 ID */
jobId: string
}>()
const emit = defineEmits<{
(e: 'update:modelValue', val: boolean): void
/** 需要打开会员购买弹窗 */
(e: 'openMember'): void
}>()
// ==================== ====================
const router = useRouter()
const store = useStore()
// ==================== ====================
/** 弹窗是否显示 */
const visible = computed(() => props.modelValue)
// ==================== ====================
/** 用户选择的投递方式:null=未选择, 'direct'=直接前往官网, 'agent'=智能投递助手 */
const choice = ref<'direct' | 'agent' | null>(null)
/** AI助手是否已完成配置(status === 1 */
const agentConfigReady = ref(false)
/** 是否正在加载 AI 助手配置 */
const agentConfigLoading = ref(false)
// ==================== Store ====================
/** 用户会员状态 */
const memberStatus = computed(() => store.state.memberStatus)
/** 用户是否是会员(正式或试用) */
const isMember = computed(() => !!memberStatus.value?.isMember)
// ==================== ====================
/** 智能投递助手选项卡内的描述文字 — 根据会员和配置状态动态显示 */
const agentCardDesc = computed(() => {
if (!isMember.value) {
return '自动填写网申信息\n统一管理投递进度'
}
if (!agentConfigReady.value) {
return '完成助手设置后\n可使用智能投递'
}
return '将该岗位加入待投递列表\n在投递助手中统一处理'
})
/** 底部操作按钮文字 */
const actionText = computed(() => {
if (!choice.value) return '请选择投递方式'
if (choice.value === 'direct') return '去官网投递'
if (!isMember.value) return '开通会员使用'
if (!agentConfigReady.value) return '去完成设置'
return '加入待投递列表'
})
/** 底部操作按钮是否显示 icon */
const actionIcon = computed(() => {
if (!choice.value) return false
if (choice.value === 'direct') return false
return true
})
/** 底部操作按钮样式 class */
const actionClass = computed(() => {
if (!choice.value) return 'job-apply-method__action--disabled'
return 'job-apply-method__action--active'
})
// ==================== ====================
/** 加载 AI 助手配置状态 */
async function loadAgentConfigStatus() {
if (agentConfigLoading.value) return
agentConfigLoading.value = true
try {
const res = await fetchAgentConfig()
if (res.code === '0' && res.data && res.data.status === 1) {
agentConfigReady.value = true
} else {
agentConfigReady.value = false
}
} catch {
agentConfigReady.value = false
} finally {
agentConfigLoading.value = false
}
}
/** 打开弹窗时重置状态并加载配置 */
function open() {
choice.value = null
loadAgentConfigStatus()
}
/** 关闭弹窗 */
function close() {
emit('update:modelValue', false)
}
/** 底部操作按钮点击处理 */
async function handleAction() {
if (!choice.value) return
if (choice.value === 'direct') {
//
close()
if (props.sourceUrl) {
window.open(props.sourceUrl, '_blank')
//
const url = props.sourceUrl
const bridge = createChannelBridge({ domain: store.state.bridgeDomain })
bridge.get<{ linkList: string[] }>(store.state.bridgeDomain, 'offerpaiDeliveryLinkList', true)
.then((existing) => {
const linkList: string[] = existing?.linkList || []
if (!linkList.includes(url)) {
linkList.push(url)
}
return bridge.put<{ linkList: string[] }>(store.state.bridgeDomain, 'offerpaiDeliveryLinkList', { linkList }, true)
})
.catch((e) => {
console.error('[JobApplyMethodDialog] 跨域 put 投递链接失败', e)
})
.finally(() => {
bridge.destroy()
})
}
return
}
//
if (!isMember.value) {
//
close()
emit('openMember')
return
}
if (!agentConfigReady.value) {
// AI Agent
close()
router.push('/agent')
return
}
//
try {
const res = await applyJob({ jobId: props.jobId, status: -1 })
if (res.code === '0') {
ElMessage.success('已加入待投递列表')
} else {
ElMessage.error(res.msg || '加入待投递列表失败')
}
} catch {
ElMessage.error('加入待投递列表失败')
}
close()
}
// ==================== ====================
defineExpose({ open })
</script>
<style lang="scss" scoped>
@use '../assets/styles/variables' as *;
/* 组件最外层字号基准 */
.job-apply-method__overlay {
font-size: 0.14rem;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $overlay-bg;
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}
.job-apply-method__dialog {
position: relative;
width: 4.8rem;
background: $bg-white;
border: 1px solid #F0F0F0;
box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.05);
border-radius: 0.12rem;
padding: 0.28rem 0.32rem 0.32rem;
box-sizing: border-box;
overflow: hidden;
}
.job-apply-method__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 20.63%);
border-radius: 0.12rem;
pointer-events: none;
}
.job-apply-method__title {
position: relative;
font-size: 0.18rem;
font-weight: 620;
color: $text-dark;
text-align: center;
margin: 0 0 0.2rem 0;
line-height: 0.24rem;
}
.job-apply-method__close {
position: absolute;
top: 0.24rem;
right: 0.24rem;
width: 0.24rem;
height: 0.24rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
&:hover {
opacity: 0.7;
}
}
.job-apply-method__options {
position: relative;
display: flex;
gap: 0.16rem;
margin-bottom: 0.24rem;
}
.job-apply-method__card {
position: relative;
flex: 1;
height: 1.06rem;
background: $bg-white;
border: 1px solid #F0F0F0;
border-radius: 0.08rem;
padding: 0.2rem 0;
box-sizing: border-box;
cursor: pointer;
text-align: center;
transition: border-color 0.2s, background 0.2s;
overflow: hidden;
&:hover {
border-color: #D0D0D0;
}
&--active {
border-color: $accent;
background: #EDF9FA;
}
}
.job-apply-method__card-title {
font-size: 0.14rem;
font-weight: 450;
color: #000;
margin: 0;
line-height: 0.19rem;
&--accent {
color: $accent;
}
}
.job-apply-method__card-desc {
font-size: 0.12rem;
font-weight: 330;
color: $text-light;
line-height: 0.2rem;
margin: 0.06rem 0 0 0;
white-space: pre-line;
}
.job-apply-method__card-header {
display: flex;
align-items: center;
justify-content: center;
gap: 0.04rem;
}
.job-apply-method__card-circle {
position: absolute;
width: 0.46rem;
height: 0.46rem;
left: -0.05rem;
bottom: -0.08rem;
background: #AEE6EA;
border-radius: 50%;
opacity: 1;
transition: opacity 0.2s;
&::before,
&::after {
content: '';
position: absolute;
width: 0.04rem;
height: 0.09rem;
background: $bg-white;
border-radius: 0.02rem;
top: 40%;
}
&::before {
left: 42%;
}
&::after {
left: 60%;
}
}
.job-apply-method__action {
position: relative;
width: 100%;
height: 0.35rem;
border: none;
border-radius: 0.08rem;
font-size: 0.14rem;
font-weight: 450;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s;
&--disabled {
background: #EDF9FA;
color: #AEE6EA;
cursor: not-allowed;
}
&--active {
background: $accent;
color: $bg-white;
&:hover {
background: $accent-hover;
}
}
}
</style>
+14 -21
View File
@@ -12,21 +12,7 @@
</button> </button>
<h2 class="job-resume-custom-dialog__drawer-title">生成你的岗位专属简历</h2> <h2 class="job-resume-custom-dialog__drawer-title">生成你的岗位专属简历</h2>
</div> </div>
<!-- 下载简历按钮步骤三显示位于步骤指示器上方 -->
<div v-if="currentStep === 4" class="job-resume-custom-dialog__top-download mt10 ml12">
<button class="job-resume-custom-dialog__top-download-btn" @click="toggleDownloadMenu">
<svg viewBox="0 0 16 16" fill="none" class="job-resume-custom-dialog__top-download-icon">
<path d="M8 2v8M8 10l-3-3M8 10l3-3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 12h10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
</svg>
下载简历
</button>
<!-- 下载下拉菜单 -->
<div v-if="showDownloadMenu" class="job-resume-custom-dialog__top-download-menu">
<button class="job-resume-custom-dialog__top-download-option" @click="handleDownload('pdf')">下载PDF</button>
<button class="job-resume-custom-dialog__top-download-option" @click="handleDownload('word')">下载Word</button>
</div>
</div>
<!-- 步骤指示器 --> <!-- 步骤指示器 -->
<div class="job-resume-custom-dialog__steps pt10"> <div class="job-resume-custom-dialog__steps pt10">
<div class="job-resume-custom-dialog__step" :class="{ 'job-resume-custom-dialog__step--active': currentStep === 2 }"> <div class="job-resume-custom-dialog__step" :class="{ 'job-resume-custom-dialog__step--active': currentStep === 2 }">
@@ -48,8 +34,8 @@
<!-- 匹配度标题区域 --> <!-- 匹配度标题区域 -->
<div class="job-resume-custom-dialog__gap-header"> <div class="job-resume-custom-dialog__gap-header">
<div class="job-resume-custom-dialog__gap-left"> <div class="job-resume-custom-dialog__gap-left">
<h3 class="job-resume-custom-dialog__gap-title">你的简历与该岗位<span class="job-resume-custom-dialog__gap-title-highlight">匹配度{{ isLowMatch ? '较' : '较' }}</span></h3> <h3 class="job-resume-custom-dialog__gap-title">你的简历与该岗位任职要求差距<span class="job-resume-custom-dialog__gap-title-highlight">{{ isLowMatch ? '较' : '较' }}</span></h3>
<p class="job-resume-custom-dialog__gap-subtitle">匹配度低于 6.0 分的简历在筛选环节可能会被优先淘汰我们会帮你快速优化提升</p> <p class="job-resume-custom-dialog__gap-subtitle">竞争力低于 6.0 分的简历在筛选环节可能会被优先淘汰我们会帮你快速优化提升</p>
</div> </div>
<!-- 右侧匹配度分数 --> <!-- 右侧匹配度分数 -->
<div class="job-resume-custom-dialog__gap-score-area"> <div class="job-resume-custom-dialog__gap-score-area">
@@ -222,7 +208,7 @@
</svg> </svg>
<span class="job-resume-custom-dialog__match-score">{{ cachedOptimizedScore.toFixed(1) }}</span> <span class="job-resume-custom-dialog__match-score">{{ cachedOptimizedScore.toFixed(1) }}</span>
</div> </div>
<span class="job-resume-custom-dialog__match-label job-resume-custom-dialog__match-label--high">{{ cachedOptimizedScore >= 9 ? '非常匹配' : cachedOptimizedScore >= 6 ? '高匹配度' : '低匹配度' }}</span> <span class="job-resume-custom-dialog__match-label job-resume-custom-dialog__match-label--high">{{ cachedOptimizedScore >= 9 ? '非常匹配' : cachedOptimizedScore >= 6 ? '高匹配度' : '低竞争力' }}</span>
</div> </div>
</div> </div>
<!-- 改写说明卡片外面平铺 --> <!-- 改写说明卡片外面平铺 -->
@@ -327,8 +313,15 @@
<div v-if="currentStep === 4" class="job-resume-custom-dialog__preview-footer mt10 pt30"> <div v-if="currentStep === 4" class="job-resume-custom-dialog__preview-footer mt10 pt30">
<!-- 左侧上一步按钮 --> <!-- 左侧上一步按钮 -->
<button class="job-resume-custom-dialog__footer-prev-btn" @click="goToStep(3)">上一步</button> <button class="job-resume-custom-dialog__footer-prev-btn" @click="goToStep(3)">上一步</button>
<!-- 右侧立即去投递按钮 --> <!-- 右侧下载专属简历按钮 -->
<button class="job-resume-custom-dialog__submit-btn" @click="handleSubmit">立即去投递</button> <div class="job-resume-custom-dialog__submit-wrap">
<button class="job-resume-custom-dialog__submit-btn" @click="toggleDownloadMenu">下载专属简历</button>
<!-- 下载下拉菜单 -->
<div v-if="showDownloadMenu" class="job-resume-custom-dialog__top-download-menu">
<button class="job-resume-custom-dialog__top-download-option" @click="handleDownload('pdf')">下载PDF</button>
<button class="job-resume-custom-dialog__top-download-option" @click="handleDownload('word')">下载Word</button>
</div>
</div>
</div> </div>
</div> </div>
@@ -482,7 +475,7 @@ const missingSkills = computed(() => props.jobInfo.missingSkills || [])
const matchLevelText = computed(() => { const matchLevelText = computed(() => {
const score = props.jobInfo.matchScore const score = props.jobInfo.matchScore
if (score >= 6) return '高匹配度' if (score >= 6) return '高匹配度'
return '低匹配度' return '低竞争力'
}) })
/** 是否为低匹配度(低于6分) */ /** 是否为低匹配度(低于6分) */
+206 -226
View File
@@ -3,71 +3,41 @@
<Teleport to="body"> <Teleport to="body">
<!-- 遮罩层 点击关闭弹窗 --> <!-- 遮罩层 点击关闭弹窗 -->
<div v-if="modelValue" class="member-dialog-overlay" @click="$emit('update:modelValue', false)"> <div v-if="modelValue" class="member-dialog-overlay" @click="$emit('update:modelValue', false)">
<!-- 弹窗主体 阻止点击冒泡 --> <!-- 弹窗主体 左右布局 -->
<div class="member-dialog" @click.stop> <div class="member-dialog" @click.stop>
<!-- 顶部标题行 --> <!-- 左侧黑金权益栏 -->
<div class="member-dialog__header"> <div class="member-dialog__left">
<div class="member-dialog__header-left"> <!-- 装饰线条背景 -->
<h2 class="member-dialog__title">会员中心</h2> <div class="member-dialog__left-deco"></div>
<p class="member-dialog__subtitle">解锁更多求职功能让投递更高效</p> <!-- 左栏标题 -->
</div> <h2 class="member-dialog__left-title">Offer派会员专享权益</h2>
<div class="member-dialog__header-right"> <p class="member-dialog__left-subtitle">解锁更多功能让求职更高效</p>
<!-- 联系客服hover显示二维码 --> <!-- 权益卡片列表 -->
<span class="member-dialog__contact-wrap"> <div class="member-dialog__benefits">
<span class="member-dialog__contact">联系客服</span>
<div class="member-dialog__contact-qr">
<img src="@/assets/images/nav/kg-qcCode.png" alt="客服二维码" />
<div class="member-dialog__contact-qr-arrow"></div>
</div>
</span>
<span class="member-dialog__close" @click="$emit('update:modelValue', false)"></span>
</div>
</div>
<!-- 套餐选择区域 -->
<div class="member-dialog__plans">
<div
v-for="plan in plans"
:key="plan.key"
class="member-dialog__plan-card"
:class="{ 'member-dialog__plan-card--active': selectedPlan === plan.key }"
@click="selectedPlan = plan.key"
>
<!-- 推荐标签 -->
<div v-if="plan.recommend" class="member-dialog__plan-recommend"><svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_180_2594)">
<path d="M0.872709 4.61946C0.867714 4.56192 0.874732 4.50398 0.893317 4.44931C0.911903 4.39464 0.94165 4.34442 0.980672 4.30186C1.01969 4.25929 1.06714 4.2253 1.11999 4.20204C1.17285 4.17878 1.22996 4.16676 1.28771 4.16675H2.08333C2.19384 4.16675 2.29982 4.21065 2.37796 4.28879C2.4561 4.36693 2.5 4.47291 2.5 4.58341V8.54175C2.5 8.65225 2.4561 8.75823 2.37796 8.83637C2.29982 8.91451 2.19384 8.95841 2.08333 8.95841H1.63208C1.5278 8.95844 1.42729 8.91936 1.35042 8.84889C1.27355 8.77842 1.2259 8.68168 1.21688 8.57779L0.872709 4.61946ZM3.75 4.45321C3.75 4.27904 3.85833 4.1232 4.01563 4.04904C4.35917 3.88696 4.94438 3.56133 5.20833 3.12112C5.54854 2.55362 5.61271 1.52841 5.62313 1.29362C5.62458 1.26071 5.62375 1.22779 5.62813 1.19529C5.68458 0.788414 6.46979 1.26362 6.77083 1.76612C6.93438 2.03862 6.95521 2.39675 6.93813 2.67654C6.91958 2.97571 6.83188 3.26466 6.74583 3.55175L6.5625 4.16362H8.82438C8.88875 4.16362 8.95225 4.17853 9.0099 4.20719C9.06754 4.23585 9.11776 4.27748 9.15662 4.32881C9.19547 4.38014 9.22191 4.43977 9.23384 4.50303C9.24578 4.56629 9.2429 4.63145 9.22542 4.69341L8.10667 8.65508C8.08197 8.74245 8.02941 8.81937 7.95698 8.87413C7.88455 8.92888 7.79622 8.95848 7.70542 8.95841H4.16667C4.05616 8.95841 3.95018 8.91451 3.87204 8.83637C3.7939 8.75823 3.75 8.65225 3.75 8.54175V4.45321Z" fill="white" stroke="white" stroke-width="0.833333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_180_2594">
<rect width="10" height="10" fill="white"/>
</clipPath>
</defs>
</svg>
推荐</div>
<!-- 套餐名称 -->
<div class="member-dialog__plan-name">{{ plan.name }}</div>
<!-- 价格行 -->
<div class="member-dialog__plan-price">
<span class="member-dialog__plan-price-symbol">¥</span>
<span class="member-dialog__plan-price-num">{{ plan.priceInt }}</span>
<span v-if="plan.originalPrice" class="member-dialog__plan-original-price">{{ plan.originalPrice }}</span>
</div>
<!-- 标签描述接口tag字段 -->
<div class="member-dialog__plan-daily mt4">{{ plan.tag }}</div>
</div>
</div>
<!-- 会员权益区域 -->
<div class="member-dialog__benefits">
<h3 class="member-dialog__benefits-title">会员权益</h3>
<div class="member-dialog__benefits-cards">
<div class="member-dialog__benefit-card"> <div class="member-dialog__benefit-card">
<div class="member-dialog__benefit-icon"> <div class="member-dialog__benefit-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <svg width="14" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" rx="12" fill="#EDF9FA"/> <path d="M4.67492 2.29867C5.07359 1.132 6.68559 1.09667 7.15825 2.19267L7.19825 2.29933L7.73625 3.87267C7.85955 4.23349 8.05879 4.56367 8.32054 4.84095C8.58229 5.11822 8.90046 5.33614 9.25359 5.48L9.39825 5.534L10.9716 6.07133C12.1383 6.47 12.1736 8.082 11.0783 8.55467L10.9716 8.59467L9.39825 9.13267C9.03731 9.25588 8.70699 9.45508 8.4296 9.71684C8.1522 9.97859 7.93418 10.2968 7.79025 10.65L7.73625 10.794L7.19892 12.368C6.80025 13.5347 5.18825 13.57 4.71625 12.4747L4.67492 12.368L4.13759 10.7947C4.01437 10.4337 3.81517 10.1034 3.55341 9.82601C3.29166 9.54862 2.97345 9.3306 2.62025 9.18667L2.47625 9.13267L0.902919 8.59533C-0.264415 8.19667 -0.299748 6.58467 0.796252 6.11267L0.902919 6.07133L2.47625 5.534C2.83707 5.4107 3.16726 5.21146 3.44453 4.94971C3.72181 4.68796 3.93973 4.36979 4.08359 4.01667L4.13759 3.87267L4.67492 2.29867ZM11.2703 1.20458e-07C11.395 -1.57315e-07 11.5172 0.0349855 11.623 0.100981C11.7288 0.166977 11.814 0.261335 11.8689 0.373333L11.9009 0.451333L12.1343 1.13533L12.8189 1.36867C12.9439 1.41113 13.0535 1.48974 13.1337 1.59454C13.214 1.69934 13.2613 1.82561 13.2698 1.95735C13.2782 2.08908 13.2473 2.22035 13.1811 2.33453C13.1148 2.4487 13.0161 2.54063 12.8976 2.59867L12.8189 2.63067L12.1349 2.864L11.9016 3.54867C11.859 3.67362 11.7804 3.78313 11.6755 3.86333C11.5707 3.94352 11.4444 3.99079 11.3127 3.99915C11.1809 4.0075 11.0497 3.97656 10.9356 3.91025C10.8214 3.84394 10.7296 3.74524 10.6716 3.62667L10.6396 3.54867L10.4063 2.86467L9.72159 2.63133C9.5966 2.58887 9.48703 2.51026 9.40677 2.40546C9.3265 2.30066 9.27916 2.17439 9.27073 2.04265C9.26231 1.91092 9.29318 1.77965 9.35944 1.66548C9.4257 1.5513 9.52436 1.45937 9.64292 1.40133L9.72159 1.36933L10.4056 1.136L10.6389 0.451333C10.6839 0.319617 10.7689 0.205272 10.8821 0.124333C10.9954 0.0433927 11.1311 -8.35209e-05 11.2703 1.20458e-07Z" fill="#FFE2A1"/>
<path d="M7 8h7v2H7V8zm0 3h10v2H7v-2zm0 3h5v2H7v-2z" fill="#52CAD1"/> </svg>
</div>
<div class="member-dialog__benefit-info">
<span class="member-dialog__benefit-name">AI智能投递</span>
<span class="member-dialog__benefit-desc">会员专享</span>
</div>
</div>
<div class="member-dialog__benefit-card">
<div class="member-dialog__benefit-icon">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2639_2062)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.49998 1.66667C9.49998 1.62246 9.48242 1.58007 9.45116 1.54882C9.41991 1.51756 9.37752 1.5 9.33331 1.5H4.66665C4.18042 1.5 3.7141 1.69315 3.37028 2.03697C3.02647 2.38079 2.83331 2.8471 2.83331 3.33333V12.6667C2.83331 13.1529 3.02647 13.6192 3.37028 13.963C3.7141 14.3068 4.18042 14.5 4.66665 14.5H11.3333C11.8195 14.5 12.2859 14.3068 12.6297 13.963C12.9735 13.6192 13.1666 13.1529 13.1666 12.6667V6.098C13.1666 6.0538 13.1491 6.0114 13.1178 5.98015C13.0866 5.94889 13.0442 5.93133 13 5.93133H9.99998C9.86737 5.93133 9.74019 5.87865 9.64643 5.78489C9.55266 5.69112 9.49998 5.56394 9.49998 5.43133V1.66667ZM9.99998 8.16667C10.1326 8.16667 10.2598 8.21935 10.3535 8.31311C10.4473 8.40688 10.5 8.53406 10.5 8.66667C10.5 8.79927 10.4473 8.92645 10.3535 9.02022C10.2598 9.11399 10.1326 9.16667 9.99998 9.16667H5.99998C5.86737 9.16667 5.74019 9.11399 5.64643 9.02022C5.55266 8.92645 5.49998 8.79927 5.49998 8.66667C5.49998 8.53406 5.55266 8.40688 5.64643 8.31311C5.74019 8.21935 5.86737 8.16667 5.99998 8.16667H9.99998ZM9.99998 10.8333C10.1326 10.8333 10.2598 10.886 10.3535 10.9798C10.4473 11.0735 10.5 11.2007 10.5 11.3333C10.5 11.4659 10.4473 11.5931 10.3535 11.6869C10.2598 11.7807 10.1326 11.8333 9.99998 11.8333H5.99998C5.86737 11.8333 5.74019 11.7807 5.64643 11.6869C5.55266 11.5931 5.49998 11.4659 5.49998 11.3333C5.49998 11.2007 5.55266 11.0735 5.64643 10.9798C5.74019 10.886 5.86737 10.8333 5.99998 10.8333H9.99998Z" fill="#FFE2A1"/>
<path d="M10.5 1.88272C10.5 1.76005 10.6287 1.68205 10.724 1.75872C10.8049 1.82405 10.8767 1.90005 10.9393 1.98672L12.948 4.78472C12.9933 4.84872 12.944 4.93139 12.8653 4.93139H10.6667C10.6225 4.93139 10.5801 4.91383 10.5488 4.88257C10.5176 4.85131 10.5 4.80892 10.5 4.76472V1.88272Z" fill="#FFE2A1"/>
</g>
<defs>
<clipPath id="clip0_2639_2062">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg> </svg>
</div> </div>
<div class="member-dialog__benefit-info"> <div class="member-dialog__benefit-info">
@@ -77,107 +47,184 @@
</div> </div>
<div class="member-dialog__benefit-card"> <div class="member-dialog__benefit-card">
<div class="member-dialog__benefit-icon"> <div class="member-dialog__benefit-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" rx="12" fill="#EDF9FA"/> <path d="M8.655 1.64404C8.70394 1.5974 8.76182 1.56116 8.82516 1.53753C8.8885 1.5139 8.95597 1.50335 9.0235 1.50654C11.9815 1.64504 14.355 4.01854 14.4935 6.97654C14.4967 7.04411 14.4861 7.11162 14.4624 7.17499C14.4388 7.23835 14.4025 7.29626 14.3558 7.3452C14.3091 7.39414 14.253 7.4331 14.1908 7.45971C14.1286 7.48632 14.0616 7.50004 13.994 7.50004H9C8.86739 7.50004 8.74021 7.44736 8.64645 7.35359C8.55268 7.25982 8.5 7.13264 8.5 7.00004V2.00604C8.49999 1.93835 8.51372 1.87136 8.54036 1.80913C8.567 1.74691 8.60601 1.69074 8.655 1.64404ZM7.345 3.14404C7.39399 3.19074 7.43299 3.24691 7.45964 3.30913C7.48628 3.37136 7.50001 3.43835 7.5 3.50604V7.25004C7.5 7.58156 7.6317 7.8995 7.86612 8.13392C8.10054 8.36834 8.41848 8.50004 8.75 8.50004H12.494C12.5617 8.49996 12.6287 8.51363 12.6909 8.54021C12.7532 8.5668 12.8094 8.60574 12.8561 8.65469C12.9029 8.70364 12.9392 8.76157 12.9629 8.82497C12.9866 8.88837 12.9972 8.95593 12.994 9.02354C12.85 12.0725 10.3335 14.5 7.25 14.5C4.0745 14.5 1.5 11.9255 1.5 8.75004C1.5 5.66604 3.9275 3.14954 6.9765 3.00654C7.04403 3.00335 7.1115 3.0139 7.17484 3.03753C7.23818 3.06116 7.29606 3.0974 7.345 3.14404Z" fill="#FFE2A1"/>
<path d="M12 7l1.5 3 3.5.5-2.5 2.5.5 3.5L12 15l-3 1.5.5-3.5L7 10.5l3.5-.5L12 7z" fill="#52CAD1"/>
</svg> </svg>
</div> </div>
<div class="member-dialog__benefit-info"> <div class="member-dialog__benefit-info">
<span class="member-dialog__benefit-name">AI+投递助手</span> <span class="member-dialog__benefit-name">海量岗位数据</span>
<span class="member-dialog__benefit-desc">会员专享</span> <span class="member-dialog__benefit-desc">全网实时更新</span>
</div>
</div>
<div class="member-dialog__benefit-card">
<div class="member-dialog__benefit-icon">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C11.4696 2 10.9609 2.21071 10.5858 2.58579C10.2107 2.96086 10 3.46957 10 4C10 4.53043 10.2107 5.03914 10.5858 5.41421C10.9609 5.78929 11.4696 6 12 6C12.5304 6 13.0391 5.78929 13.4142 5.41421C13.7893 5.03914 14 4.53043 14 4C14 3.46957 13.7893 2.96086 13.4142 2.58579C13.0391 2.21071 12.5304 2 12 2Z" fill="#FFE2A1"/>
<path d="M3.33333 2.66663C2.6 2.66663 2 3.26663 2 3.99996V12.6666C2 13.4 2.6 14 3.33333 14H12C12.7333 14 13.3333 13.4 13.3333 12.6666V6.67329C12.9267 6.87329 12.48 6.99996 12 6.99996C10.3467 6.99996 9 5.65329 9 3.99996C9 3.51996 9.12667 3.07329 9.32667 2.66663H3.33333Z" fill="#FFE2A1"/>
</svg>
</div>
<div class="member-dialog__benefit-info">
<span class="member-dialog__benefit-name">校招公告速递</span>
<span class="member-dialog__benefit-desc">名企动态抢先看</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 支付方式选择 --> <!-- 左右分割金边 -->
<div class="member-dialog__payment"> <div class="member-dialog__divider"></div>
<span class="member-dialog__payment-label">选择支付方式</span>
<div class="member-dialog__payment-methods"> <!-- 右侧内容区 -->
<div <div class="member-dialog__right">
class="member-dialog__payment-item" <!-- 顶部标题行 -->
:class="{ 'member-dialog__payment-item--wechat-active': selectedPayment === 'wechat' }" <div class="member-dialog__header">
@click="selectedPayment = 'wechat'" <h2 class="member-dialog__title">会员中心</h2>
> <div class="member-dialog__header-actions">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <!-- 联系客服 -->
<path d="M14 8c0 3.3-2.7 6-6 6s-6-2.7-6-6 2.7-6 6-6 6 2.7 6 6z" fill="#07C160"/> <span class="member-dialog__contact-wrap">
<path d="M5.5 6.5c.5-.3 1.2-.1 1.5.4l.5 1 1.5-2c.3-.5 1-.6 1.5-.3.5.3.6 1 .3 1.5l-2.5 3.5c-.2.3-.5.4-.8.4-.3 0-.6-.1-.8-.4L5.2 8c-.3-.5-.2-1.2.3-1.5z" fill="white"/> <span class="member-dialog__contact">联系客服</span>
</svg> <div class="member-dialog__contact-qr">
<span class="member-dialog__payment-text member-dialog__payment-text--wechat">微信支付</span> <img src="@/assets/images/nav/kg-qcCode.png" alt="客服二维码" />
</div> <div class="member-dialog__contact-qr-arrow"></div>
<div </div>
class="member-dialog__payment-item" </span>
:class="{ 'member-dialog__payment-item--alipay-active': selectedPayment === 'alipay' }" <!-- 关闭按钮 -->
@click="selectedPayment = 'alipay'" <span class="member-dialog__close" @click="$emit('update:modelValue', false)"></span>
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<rect width="16" height="16" rx="3" fill="#1677FF"/>
<text x="4" y="12" fill="white" font-size="10" font-weight="bold"></text>
</svg>
<span class="member-dialog__payment-text member-dialog__payment-text--alipay">支付宝支付</span>
</div> </div>
</div> </div>
</div>
<!-- 购买按钮 --> <!-- 套餐选择区域 -->
<button <div class="member-dialog__plans">
class="member-dialog__buy-btn" <div
:class="{ 'member-dialog__buy-btn--active': selectedPayment }" v-for="plan in plans"
@click="handleBuy" :key="plan.key"
>购买会员</button> class="member-dialog__plan-card"
:class="{ 'member-dialog__plan-card--active': selectedPlan === plan.key }"
</div> @click="selectedPlan = plan.key"
</div> >
<!-- 推荐角标 -->
<!-- ==================== 扫码支付弹窗 ==================== --> <div v-if="plan.recommend" class="member-dialog__plan-badge">超值推荐</div>
<div v-if="showQrCode" class="member-dialog-overlay member-dialog-overlay--qrcode" @click="handleCloseQrCode"> <!-- 套餐名称 -->
<div class="member-dialog member-dialog--qrcode" @click.stop> <div class="member-dialog__plan-name">{{ plan.name }}</div>
<!-- 价格行 -->
<!-- 顶部标题行 --> <div class="member-dialog__plan-price">
<div class="member-dialog__header"> <span class="member-dialog__plan-price-symbol">¥</span>
<div class="member-dialog__header-left"> <span class="member-dialog__plan-price-num">{{ plan.priceInt }}</span>
<h2 class="member-dialog__title">扫码支付</h2> <span v-if="plan.originalPrice" class="member-dialog__plan-original">{{ plan.originalPrice }}</span>
</div>
<!-- 标签描述 -->
<div class="member-dialog__plan-tag">{{ plan.tag }}</div>
</div>
</div> </div>
<div class="member-dialog__header-right">
<span class="member-dialog__close" @click="handleCloseQrCode"></span> <!-- 步骤一选择支付方式 + 底部应付金额购买按钮未创建订单时显示 -->
<div v-if="!showQrCode" class="member-dialog__step-pay">
<!-- 支付方式选择 -->
<div class="member-dialog__payment-section">
<span class="member-dialog__payment-label">选择支付方式</span>
<div class="member-dialog__payment-methods">
<!-- 微信支付 -->
<div
class="member-dialog__payment-item"
:class="{ 'member-dialog__payment-item--active': selectedPayment === 'wechat' }"
@click="selectedPayment = 'wechat'"
>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2639_1996)">
<path d="M20.8249 10.8533C21.3364 10.8533 21.8348 10.8933 22.32 10.96C21.4282 7 17.3364 4 12.4184 4C6.8446 4 2.32001 7.84 2.32001 12.5733C2.32001 15.3067 3.8282 17.72 6.17574 19.2933L4.85116 22L8.47083 20.4133C9.2446 20.6933 10.0577 20.92 10.9233 21.04C10.8053 20.52 10.7397 19.9867 10.7397 19.4267C10.7266 14.7067 15.2512 10.8533 20.8249 10.8533ZM15.7757 7.85333C15.9411 7.85333 16.1048 7.88644 16.2576 7.95077C16.4103 8.01509 16.5491 8.10938 16.666 8.22824C16.7829 8.3471 16.8757 8.4882 16.9389 8.6435C17.0022 8.7988 17.0348 8.96524 17.0348 9.13333C17.0348 9.30143 17.0022 9.46787 16.9389 9.62317C16.8757 9.77847 16.7829 9.91957 16.666 10.0384C16.5491 10.1573 16.4103 10.2516 16.2576 10.3159C16.1048 10.3802 15.9411 10.4133 15.7757 10.4133C15.4418 10.4133 15.1216 10.2785 14.8855 10.0384C14.6494 9.79838 14.5167 9.47281 14.5167 9.13333C14.5167 8.79386 14.6494 8.46828 14.8855 8.22824C15.1216 7.98819 15.4418 7.85333 15.7757 7.85333ZM9.04788 10.4267C8.71396 10.4267 8.39373 10.2918 8.15762 10.0518C7.92151 9.81172 7.78886 9.48614 7.78886 9.14667C7.78886 8.80719 7.92151 8.48162 8.15762 8.24157C8.39373 8.00152 8.71396 7.86667 9.04788 7.86667C9.38179 7.86667 9.70202 8.00152 9.93814 8.24157C10.1742 8.48162 10.3069 8.80719 10.3069 9.14667C10.3069 9.48614 10.1742 9.81172 9.93814 10.0518C9.70202 10.2918 9.38179 10.4267 9.04788 10.4267Z" fill="#07C160"/>
<path d="M29 19.6638C29 15.9818 25.1942 13 20.5 13C15.8058 13 12 15.9818 12 19.6638C12 23.3457 15.8058 26.3276 20.5 26.3276C21.2691 26.3276 22.0117 26.2239 22.7145 26.0683L27.3027 28L25.7114 24.8885C27.7005 23.6698 29 21.8029 29 19.6638ZM17.9407 19.2489C17.6889 19.2489 17.4428 19.1759 17.2335 19.0392C17.0241 18.9024 16.861 18.708 16.7646 18.4806C16.6683 18.2532 16.643 18.0029 16.6922 17.7615C16.7413 17.5201 16.8625 17.2983 17.0406 17.1243C17.2186 16.9502 17.4454 16.8317 17.6924 16.7836C17.9393 16.7356 18.1953 16.7603 18.4279 16.8545C18.6605 16.9487 18.8593 17.1082 18.9992 17.3129C19.1391 17.5175 19.2137 17.7582 19.2137 18.0043C19.227 18.6914 18.6435 19.2489 17.9407 19.2489ZM23.046 19.2489C22.7084 19.2489 22.3846 19.1178 22.1459 18.8844C21.9071 18.651 21.773 18.3344 21.773 18.0043C21.773 17.6742 21.9071 17.3577 22.1459 17.1243C22.3846 16.8909 22.7084 16.7597 23.046 16.7597C23.3836 16.7597 23.7074 16.8909 23.9462 17.1243C24.1849 17.3577 24.319 17.6742 24.319 18.0043C24.319 18.3344 24.1849 18.651 23.9462 18.8844C23.7074 19.1178 23.3836 19.2489 23.046 19.2489Z" fill="#07C160"/>
</g>
<defs>
<clipPath id="clip0_2639_1996">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
<span class="member-dialog__payment-text">微信支付</span>
<!-- 选中圆圈 -->
<div class="member-dialog__payment-radio">
<div v-if="selectedPayment === 'wechat'" class="member-dialog__payment-radio-inner"></div>
</div>
</div>
<!-- 支付宝支付 -->
<div
class="member-dialog__payment-item"
:class="{ 'member-dialog__payment-item--active': selectedPayment === 'alipay' }"
@click="selectedPayment = 'alipay'"
>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2639_2002)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4127 4.03125C17.5281 4.03125 17.6226 4.12374 17.6226 4.23954V7.82858H25.2414C25.3583 7.82858 25.4488 7.92605 25.4492 8.0431C25.4496 8.79249 25.2601 9.75641 24.8287 9.75641H17.623V12.2974H22.8164C23.0565 12.2974 23.2477 12.5015 23.2303 12.7419L23.2267 12.7891C23.2051 15.6153 22.2698 18.4489 20.7417 20.9244L21.0142 21.0439C23.4297 22.0928 26.0812 22.9505 29.3624 23.0535C29.7298 23.0652 30.0163 23.3761 29.9993 23.7449L29.9929 23.8687C29.8888 25.7353 29.3682 28.0312 27.4979 28.0312C27.2227 28.0312 26.9576 28.014 26.7016 27.9808C24.2628 27.6909 21.8177 26.1933 19.3166 24.526L18.775 24.1633L18.3641 23.8868C17.6939 24.5493 16.9634 25.1524 16.1769 25.6805C15.9834 25.8062 15.779 25.9218 15.5652 26.0275C13.5181 27.2551 11.1213 27.9891 8.45844 27.9895C4.76459 27.9895 2.05466 25.5465 2.00081 22.4783L2 22.3858L2.00081 22.3325C2.05288 19.2583 4.65006 16.8441 8.34497 16.7956L8.45841 16.7949C11.6748 16.7949 14.2916 17.8455 16.9109 19.0864L16.9248 19.0984L16.978 18.9897C17.6426 17.6065 18.1167 16.0147 18.3135 14.2254L8.16359 14.2252C8.10869 14.2252 8.05603 14.2033 8.01716 14.1645C7.97829 14.1256 7.95638 14.0728 7.95622 14.0178C7.95497 13.333 8.14369 12.2974 8.57666 12.2974H13.6419V9.75641H5.99781C5.88084 9.75641 5.79044 9.65934 5.79044 9.54188C5.79 8.83332 5.97956 7.82858 6.41087 7.82858H13.6419V5.79663L13.6428 5.73444C13.6712 4.76532 14.3841 4.03125 17.4127 4.03125ZM8.028 19.3837C5.69156 19.3837 3.76147 20.6349 3.71934 22.3791L3.71875 22.4185L3.72122 22.5201C3.72714 22.6636 3.74369 22.8064 3.77072 22.9475C4.40375 25.9708 10.6506 27.0115 15.1562 21.801L14.9053 21.6531C12.6859 20.3584 10.4044 19.3837 8.028 19.3837Z" fill="#1677FF"/>
</g>
<defs>
<clipPath id="clip0_2639_2002">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
<span class="member-dialog__payment-text">支付宝支付</span>
<!-- 选中圆圈 -->
<div class="member-dialog__payment-radio">
<div v-if="selectedPayment === 'alipay'" class="member-dialog__payment-radio-inner"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部栏步骤一显示应付金额+购买按钮步骤二显示二维码+已支付 -->
<div class="member-dialog__bottom-bar" :class="{ 'member-dialog__bottom-bar--qrcode': showQrCode }">
<!-- 步骤一应付金额 + 购买按钮 -->
<template v-if="!showQrCode">
<div class="member-dialog__footer-price">
<span class="member-dialog__footer-price-label">应付金额</span>
<span class="member-dialog__footer-price-symbol">¥</span>
<span class="member-dialog__footer-price-num">{{ currentPlan.priceInt }}</span>
</div>
<button
class="member-dialog__buy-btn"
:disabled="!selectedPayment"
@click="handleBuy"
>购买会员</button>
</template>
<!-- 步骤二扫码支付区域 -->
<template v-else>
<!-- 二维码 -->
<div class="member-dialog__qrcode-box">
<!-- 支付宝iframe 渲染 -->
<iframe
v-if="selectedPayment === 'alipay' && paymentFormHtml"
:srcdoc="paymentFormHtml"
frameborder="0"
class="member-dialog__qrcode-iframe qrcode-zhifubao"
scrolling="auto"
></iframe>
<!-- 微信qrcode.js 渲染 -->
<iframe
v-if="selectedPayment === 'wechat' && wechatCodeUrl"
:srcdoc="wechatQrHtml"
frameborder="0"
class="member-dialog__qrcode-iframe qrcode-wechat"
scrolling="no"
></iframe>
</div>
<!-- 右侧信息 -->
<div class="member-dialog__qrcode-info">
<div class="member-dialog__qrcode-price-row">
<span class="member-dialog__qrcode-price-num">¥{{ currentPlan.priceInt }}</span>
<span class="member-dialog__qrcode-tip">扫码完成支付</span>
</div>
<p class="member-dialog__qrcode-agreement">
开通即代表同意 <a href="javascript:;" @click.prevent="openMemberAgreement">会员服务协议</a>
</p>
<!-- 已支付成功按钮 -->
<button class="member-dialog__paid-btn" @click="handleConfirmPaid">我已支付成功</button>
</div>
</template>
</div> </div>
</div> </div>
<!-- 二维码区域 -->
<div class="member-dialog__qrcode-content">
<!-- 支付宝iframe 渲染支付表单 -->
<div v-if="selectedPayment === 'alipay' && paymentFormHtml" class="member-dialog__qrcode-image">
<iframe
:srcdoc="paymentFormHtml"
frameborder="0"
class="member-dialog__payment-iframe"
scrolling="auto"
></iframe>
</div>
<!-- 微信使用 qrcode.js 渲染二维码 -->
<div v-if="selectedPayment === 'wechat' && wechatCodeUrl" class="member-dialog__qrcode-image">
<iframe
:srcdoc="wechatQrHtml"
frameborder="0"
class="member-dialog__wechat-qr-iframe"
scrolling="no"
></iframe>
</div>
<!-- 金额和提示 -->
<div class="member-dialog__qrcode-price-row">
<span class="member-dialog__qrcode-price">¥{{ currentPlan.priceInt }}</span>
<span class="member-dialog__qrcode-tip">扫码完成支付</span>
</div>
<!-- 协议提示 -->
<p class="member-dialog__qrcode-agreement">
开通即代表同意 <a href="javascript:;" @click.prevent="openMemberAgreement">会员服务协议</a>
</p>
</div>
<!-- 已支付成功按钮 -->
<button class="member-dialog__paid-btn" @click="handleConfirmPaid">已支付成功</button>
</div> </div>
</div> </div>
@@ -203,19 +250,14 @@ const store = useStore()
// ==================== ==================== // ==================== ====================
/** 套餐项类型(包含后端完整数据 + 前端展示字段) */ /** 套餐项类型 */
interface PlanItem { interface PlanItem {
key: string key: string
name: string name: string
/** 整数价格(元),用于显示 */
priceInt: string priceInt: string
/** 划线价(元) */
originalPrice: string originalPrice: string
/** 标签描述(接口tag字段,如"轻量体验"、"低至¥0.56/天" */
tag: string tag: string
/** 是否推荐 */
recommend?: boolean recommend?: boolean
/** 后端原始数据,下单时使用 */
raw: MemberProduct raw: MemberProduct
} }
@@ -224,22 +266,22 @@ interface PlanItem {
/** 当前选中的套餐 key */ /** 当前选中的套餐 key */
const selectedPlan = ref('') const selectedPlan = ref('')
/** 当前选中的支付方式wechat / alipay),默认不选 */ /** 当前选中的支付方式 */
const selectedPayment = ref('') const selectedPayment = ref('')
/** 是否显示扫码支付弹窗 */ /** 是否显示扫码支付区域 */
const showQrCode = ref(false) const showQrCode = ref(false)
/** 支付宝表单 HTML(用于 iframe 渲染) */ /** 支付宝表单 HTML */
const paymentFormHtml = ref('') const paymentFormHtml = ref('')
/** 微信支付 code_url(用于生成二维码) */ /** 微信支付 code_url */
const wechatCodeUrl = ref('') const wechatCodeUrl = ref('')
/** 微信二维码 iframe srcdoc HTML */ /** 微信二维码 iframe srcdoc */
const wechatQrHtml = computed(() => { const wechatQrHtml = computed(() => {
if (!wechatCodeUrl.value) return '' if (!wechatCodeUrl.value) return ''
return `<!DOCTYPE html><html><head><meta charset="UTF-8"><script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"><\/script><style>body{display:flex;align-items:center;justify-content:center;margin:0;height:100%;}</style></head><body><div id="qrcode"></div><script>new QRCode(document.getElementById("qrcode"),{text:"${wechatCodeUrl.value}",width:210,height:210,colorDark:"#000000",colorLight:"#ffffff",correctLevel:QRCode.CorrectLevel.H});<\/script></body></html>` return `<!DOCTYPE html><html><head><meta charset="UTF-8"><script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"><\/script><style>body{display:flex;align-items:center;justify-content:center;margin:0;height:100%;}</style></head><body><div id="qrcode"></div><script>new QRCode(document.getElementById("qrcode"),{text:"${wechatCodeUrl.value}",width:160,height:160,colorDark:"#000000",colorLight:"#ffffff",correctLevel:QRCode.CorrectLevel.H});<\/script></body></html>`
}) })
/** 当前订单ID */ /** 当前订单ID */
@@ -248,12 +290,12 @@ const orderId = ref('')
/** 是否正在创建订单 */ /** 是否正在创建订单 */
const creatingOrder = ref(false) const creatingOrder = ref(false)
/** 协议预览弹窗显示状态 */ /** 协议预览弹窗 */
const showAgreementDialog = ref(false) const showAgreementDialog = ref(false)
// ==================== ==================== // ==================== ====================
/** 监听弹窗开关 — 打开时锁定背景滚动,关闭时恢复并重置状态 */ /** 监听弹窗开关 */
watch(() => props.modelValue, (val) => { watch(() => props.modelValue, (val) => {
document.body.style.overflow = val ? 'hidden' : '' document.body.style.overflow = val ? 'hidden' : ''
if (!val) { if (!val) {
@@ -274,18 +316,14 @@ const currentPlan = computed(() => {
// ==================== ==================== // ==================== ====================
/** 套餐列表(从接口获取) */ /** 套餐列表 */
const plans = ref<PlanItem[]>([]) const plans = ref<PlanItem[]>([])
/** 后端商品数据转换为前端套餐项 */ /** 后端商品数据转换 */
function mapProductToPlan(product: MemberProduct): PlanItem { function mapProductToPlan(product: MemberProduct): PlanItem {
// 100
const priceYuan = product.price / 100 const priceYuan = product.price / 100
const originalPriceYuan = product.originalPrice ? product.originalPrice / 100 : 0 const originalPriceYuan = product.originalPrice ? product.originalPrice / 100 : 0
// 使 productName
const name = product.productName const name = product.productName
//
const priceDisplay = Number.isInteger(priceYuan) ? String(priceYuan) : priceYuan.toFixed(2) const priceDisplay = Number.isInteger(priceYuan) ? String(priceYuan) : priceYuan.toFixed(2)
const originalDisplay = originalPriceYuan > priceYuan const originalDisplay = originalPriceYuan > priceYuan
? `¥${Number.isInteger(originalPriceYuan) ? originalPriceYuan : originalPriceYuan.toFixed(2)}` ? `¥${Number.isInteger(originalPriceYuan) ? originalPriceYuan : originalPriceYuan.toFixed(2)}`
@@ -309,7 +347,6 @@ async function loadMemberProducts() {
if (res.data && res.data.length) { if (res.data && res.data.length) {
const sorted = [...res.data].sort((a, b) => a.sortOrder - b.sortOrder) const sorted = [...res.data].sort((a, b) => a.sortOrder - b.sortOrder)
plans.value = sorted.map(mapProductToPlan) plans.value = sorted.map(mapProductToPlan)
//
const featured = plans.value.find(p => p.recommend) const featured = plans.value.find(p => p.recommend)
selectedPlan.value = featured ? featured.key : plans.value[0].key selectedPlan.value = featured ? featured.key : plans.value[0].key
} }
@@ -318,7 +355,6 @@ async function loadMemberProducts() {
} }
} }
/** 组件挂载时加载商品列表 */
onMounted(() => { onMounted(() => {
loadMemberProducts() loadMemberProducts()
}) })
@@ -352,8 +388,6 @@ async function handleBuy() {
wechatCodeUrl.value = '' wechatCodeUrl.value = ''
} }
showQrCode.value = true showQrCode.value = true
//
// confirmPaymentPolling()
} }
} catch (e) { } catch (e) {
console.error('创建订单失败', e) console.error('创建订单失败', e)
@@ -362,67 +396,18 @@ async function handleBuy() {
} }
} }
// /** */ /** 点击"我已支付成功"按钮 */
// let pollTimer: ReturnType<typeof setInterval> | null = null
// /**
// *
// *
// */
// async function confirmPaymentPolling() {
// const startTime = Date.now()
// const timeout = 5 * 60 * 1000 // 5
// const interval = 500
//
// if (pollTimer) {
// clearInterval(pollTimer)
// pollTimer = null
// }
//
// pollTimer = setInterval(async () => {
// try {
// const res = await fetchOrderDetail(orderId.value)
// const status = res.data?.status
//
// if (status === 1) {
// clearInterval(pollTimer!)
// pollTimer = null
// showQrCode.value = false
// ElMessage.success('')
// emit('update:modelValue', false)
// store.dispatch('loadMemberStatus')
// } else if (status === 2 || status === 3) {
// clearInterval(pollTimer!)
// pollTimer = null
// showQrCode.value = false
// ElMessage.error('')
// } else if (Date.now() - startTime >= timeout) {
// clearInterval(pollTimer!)
// pollTimer = null
// showQrCode.value = false
// ElMessage.error('')
// }
// } catch (e) {
// console.error('', e)
// }
// }, interval)
// }
/** 点击"已支付成功"按钮 — 手动查询一次订单状态 */
async function handleConfirmPaid() { async function handleConfirmPaid() {
if (!orderId.value) return if (!orderId.value) return
try { try {
const res = await fetchOrderDetail(orderId.value) const res = await fetchOrderDetail(orderId.value)
const status = res.data?.status const status = res.data?.status
if (status === 1) { if (status === 1) {
//
showQrCode.value = false showQrCode.value = false
ElMessage.success('开通成功') ElMessage.success('开通成功')
emit('update:modelValue', false) emit('update:modelValue', false)
// vuex
store.dispatch('loadMemberStatus') store.dispatch('loadMemberStatus')
} else { } else {
//
ElMessage.warning('未查询到支付订单,请再次确认') ElMessage.warning('未查询到支付订单,请再次确认')
} }
} catch (e) { } catch (e) {
@@ -431,11 +416,6 @@ async function handleConfirmPaid() {
} }
} }
/** 关闭扫码支付弹窗 */
function handleCloseQrCode() {
showQrCode.value = false
}
/** 打开会员服务协议 */ /** 打开会员服务协议 */
function openMemberAgreement() { function openMemberAgreement() {
showAgreementDialog.value = true showAgreementDialog.value = true
+2 -2
View File
@@ -245,7 +245,7 @@
<div class="h1 border-EDF9FA-bottom-2 mrl14"></div> <div class="h1 border-EDF9FA-bottom-2 mrl14"></div>
<!-- 技能 --> <!-- 技能 -->
<div ref="skillsRef" class="profile-page-content__card" :class="{ 'profile-page-content__card-hover': editingModule !== 'skills' }"> <div ref="skillsRef" class="profile-page-content__card mtb16" :class="{ 'profile-page-content__card-hover': editingModule !== 'skills' }">
<template v-if="editingModule !== 'skills'"> <template v-if="editingModule !== 'skills'">
<div class="profile-page-content__card-header"> <div class="profile-page-content__card-header">
<h3 class="profile-page-content__card-title">技能</h3> <h3 class="profile-page-content__card-title">技能</h3>
@@ -270,7 +270,7 @@
<div class="h1 border-EDF9FA-bottom-2 mrl14"></div> <div class="h1 border-EDF9FA-bottom-2 mrl14"></div>
<!-- 证书 --> <!-- 证书 -->
<div ref="certificateRef" class="profile-page-content__card" :class="{ 'profile-page-content__card-hover': editingModule !== 'certificate' }"> <div ref="certificateRef" class="profile-page-content__card mtb16" :class="{ 'profile-page-content__card-hover': editingModule !== 'certificate' }">
<template v-if="editingModule !== 'certificate'"> <template v-if="editingModule !== 'certificate'">
<div class="profile-page-content__card-header"> <div class="profile-page-content__card-header">
<h3 class="profile-page-content__card-title">证书</h3> <h3 class="profile-page-content__card-title">证书</h3>
+13 -2
View File
@@ -7,8 +7,8 @@
<div class="profile-edit-inline__fields-row"> <div class="profile-edit-inline__fields-row">
<div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">学校</label><input class="profile-edit-inline__input" placeholder="请输入学校名称" v-model="form.school" /></div> <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">学校</label><input class="profile-edit-inline__input" placeholder="请输入学校名称" v-model="form.school" /></div>
<div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">专业</label><input class="profile-edit-inline__input" placeholder="请输入专业名称" v-model="form.major" /></div> <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">专业</label><input class="profile-edit-inline__input" placeholder="请输入专业名称" v-model="form.major" /></div>
<div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">学历</label><select class="profile-edit-inline__input" v-model="form.degree"><option value="大专">大专</option><option value="本科">本科</option><option value="硕士">硕士</option><option value="博士">博士</option></select></div> <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">学历</label><select class="profile-edit-inline__input" v-model="form.degree"><option :value="1">大专</option><option :value="2">本科</option><option :value="3">硕士</option><option :value="4">博士</option></select></div>
<div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">学历类型</label><select class="profile-edit-inline__input" v-model="form.studyType"><option value="全日制">全日制</option><option value="非全日制">非全日制</option></select></div> <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">学历类型</label><select class="profile-edit-inline__input" v-model="form.studyType"><option :value="0">全日制</option><option :value="1">非全日制</option></select></div>
<div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">就读时间</label> <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">就读时间</label>
<div class="profile-edit-inline__date-range"> <div class="profile-edit-inline__date-range">
<el-date-picker v-model="form.startDate" type="month" placeholder="开始" format="YYYY-MM" value-format="YYYY-MM" class="profile-edit-inline__date-picker" :teleported="true" popper-class="profile-drawer-date-popper" /> <el-date-picker v-model="form.startDate" type="month" placeholder="开始" format="YYYY-MM" value-format="YYYY-MM" class="profile-edit-inline__date-picker" :teleported="true" popper-class="profile-drawer-date-popper" />
@@ -180,6 +180,17 @@ function initForm() {
aiPolishResult.value = '' aiPolishResult.value = ''
if (props.initialData) { if (props.initialData) {
form.value = { ...props.initialData } form.value = { ...props.initialData }
// degree studyType
if (props.moduleType === 'education') {
const degreeMap: Record<string, number> = { '大专': 1, '本科': 2, '硕士': 3, '博士': 4 }
const studyTypeMap: Record<string, number> = { '全日制': 0, '非全日制': 1 }
if (typeof form.value.degree === 'string') {
form.value.degree = degreeMap[form.value.degree] ?? (Number(form.value.degree) || null)
}
if (typeof form.value.studyType === 'string') {
form.value.studyType = studyTypeMap[form.value.studyType] ?? (Number(form.value.studyType) || null)
}
}
// description // description
if (props.initialData.description?.length) { if (props.initialData.description?.length) {
descriptionText.value = props.initialData.description.map((d: DescriptionParagraph) => d.text).join('\n') descriptionText.value = props.initialData.description.map((d: DescriptionParagraph) => d.text).join('\n')
+1 -1
View File
@@ -105,7 +105,7 @@ watch(() => props.modelValue, async (val) => {
const inviteCode = computed(() => store.state.userInfo?.inviteCode || 'NOVA2026') const inviteCode = computed(() => store.state.userInfo?.inviteCode || 'NOVA2026')
/** 邀请链接地址 */ /** 邀请链接地址 */
const inviteUrl = computed(() => `https://www.offerpai.com.cn/invite?code=${inviteCode.value}`) const inviteUrl = computed(() => `https://www.offerpai.com.cn/?invite_code=${inviteCode.value}`)
/** 复制链接到剪贴板 */ /** 复制链接到剪贴板 */
async function handleCopy() { async function handleCopy() {
+55 -24
View File
@@ -1,10 +1,11 @@
<template> <template>
<div class="side-nav"> <div class="side-nav" :class="{ 'side-nav--narrow': isNarrow }">
<!-- 顶部 Logo --> <!-- 顶部 Logo -->
<div class="side-nav__header"> <div class="side-nav__header">
<!-- 窄版Logologo-min.png -->
<!-- 侧边栏Logo图片 --> <img v-if="isNarrow" src="@/assets/images/logo-min.png" alt="Offer派" class="side-nav__logo-img side-nav__logo-img--narrow" />
<img src="@/assets/images/logo.png" alt="Offer派" class="side-nav__logo-img" /> <!-- 宽版Logo -->
<img v-else src="@/assets/images/logo.png" alt="Offer派" class="side-nav__logo-img" />
</div> </div>
<!-- 主导航 --> <!-- 主导航 -->
@@ -20,13 +21,23 @@
@mouseleave="hoverIndex = -1" @mouseleave="hoverIndex = -1"
> >
<!-- SVG图标hover/active 状态显示选中图标否则显示默认图标 --> <!-- SVG图标hover/active 状态显示选中图标否则显示默认图标 -->
<span <span class="side-nav__item-icon" v-if="index==9">
</span>
<span v-else
class="side-nav__item-icon" class="side-nav__item-icon"
v-html="(isActive(item.name) || hoverIndex === index) && getActiveIcon(index) ? getActiveIcon(index) : item.iconImg" v-html="(isActive(item.name) || hoverIndex === index) && getActiveIcon(index) ? getActiveIcon(index) : item.iconImg"
></span> ></span>
<span class="side-nav__item-label">{{ item.label }}</span> <span class="side-nav__item-label">{{ item.label }}</span>
<!-- 索引0的时候显示"全网"小标签 --> <!-- 索引0的时候显示"全网"小标签 -->
<span v-if="index === 0" class="side-nav__tag-quanwang mt2 ml8">全网</span> <span v-if="index === 0" class="side-nav__tag-quanwang" :class="{ 'side-nav__tag-quanwang--corner': isNarrow, 'mt2 ml8': !isNarrow }">全网</span>
<!-- 索引5的时候显示"公测群"/"加群"小标签 -->
<span v-if="index === 5" class="side-nav__tag-quanwang" :class="{ 'side-nav__tag-quanwang--corner': isNarrow, 'mt2 ml8': !isNarrow }">{{ isNarrow ? '加群' : '公测群' }}</span>
<!-- 索引5 hover时显示公测群二维码 -->
<div v-if="index === 5 && hoverIndex === 5" class="side-nav__qrcode-popup">
<img src="https://offerpie.oss-cn-guangzhou.aliyuncs.com/images/mobile-qcCode.png" alt="公测群二维码" class="side-nav__qrcode-img" />
</div>
<span v-if="item.badge" class="side-nav__badge">{{ item.badge }}</span> <span v-if="item.badge" class="side-nav__badge">{{ item.badge }}</span>
</a> </a>
@@ -35,16 +46,21 @@
<!-- 底部菜单 --> <!-- 底部菜单 -->
<div class="side-nav__footer"> <div class="side-nav__footer">
<!-- 邀请会员卡片 --> <!-- 宽版邀请会员卡片 -->
<div class="side-nav__referral-card cursor-po" @click="showShareDialog = true"> <div v-if="!isNarrow" class="side-nav__referral-card cursor-po" @click="showShareDialog = true">
<!-- 顶部标题区域 --> <!-- 顶部区域标题 + 礼物图片 -->
<div class="side-nav__referral-title">邀请好友送 7 天会员</div> <div class="side-nav__referral-top">
<div class="side-nav__referral-subtitle">好友加入后自动到账</div> <div class="side-nav__referral-top-text">
<!-- 白色面板 --> <div class="side-nav__referral-title">邀请好友<span class="side-nav__referral-title--accent">得会员</span></div>
<div class="side-nav__referral-subtitle">邀1人得7天</div>
</div>
<img src="@/assets/images/nav/gift.png" alt="礼物" class="side-nav__referral-gift" />
</div>
<!-- 白色毛玻璃面板遮住礼物底部 -->
<div class="side-nav__referral-panel"> <div class="side-nav__referral-panel">
<!-- 邀请进度行 --> <!-- 年卡进度行 -->
<div class="side-nav__referral-row"> <div class="side-nav__referral-row">
<span class="side-nav__referral-label">邀请进度</span> <span class="side-nav__referral-label">年卡进度</span>
<span class="side-nav__referral-value">{{ milestoneProgress }}/{{ milestoneTarget }}</span> <span class="side-nav__referral-value">{{ milestoneProgress }}/{{ milestoneTarget }}</span>
</div> </div>
<!-- 进度条 --> <!-- 进度条 -->
@@ -52,13 +68,15 @@
<div class="side-nav__referral-fill" :style="{ width: inviteProgressPercent + '%' }"></div> <div class="side-nav__referral-fill" :style="{ width: inviteProgressPercent + '%' }"></div>
</div> </div>
<!-- 提示文字 --> <!-- 提示文字 -->
<div class="side-nav__referral-tip">再邀 <strong>{{ inviteRemaining }}</strong> 可获得年会员</div> <div class="side-nav__referral-tip">再邀 <strong>{{ inviteRemaining }}</strong> 可获得年</div>
<!-- 分隔线 -->
<div class="side-nav__referral-divider"></div>
<!-- 去邀请按钮 --> <!-- 去邀请按钮 -->
<div class="side-nav__referral-action">去邀请</div> <div class="side-nav__referral-action">去邀请</div>
</div> </div>
</div> </div>
<!-- 窄版邀请图片卡片 -->
<div v-if="isNarrow" class="side-nav__referral-card-narrow cursor-po" @click="showShareDialog = true">
<img src="@/assets/images/nav/referral-card-min.png" alt="邀请有礼" class="side-nav__referral-card-narrow-img" />
</div>
<!-- 用户信息模块 --> <!-- 用户信息模块 -->
<div class="side-nav__user-info-wrapper" v-if="store.state.isAuthenticated && store.state.userInfo"> <div class="side-nav__user-info-wrapper" v-if="store.state.isAuthenticated && store.state.userInfo">
@@ -80,12 +98,15 @@
<div class="side-nav__account-popup-item" @click="handleAccountLogout">退出登录</div> <div class="side-nav__account-popup-item" @click="handleAccountLogout">退出登录</div>
</div> </div>
<!-- 窄版用户信息只显示头像+会员标签 -->
<div v-if="isNarrow" class="side-nav__user-info-narrow" @click.stop="showAccountPopup = !showAccountPopup">
<img src="@/assets/images/nav/avatar-default.png" alt="用户头像" class="side-nav__user-avatar-narrow" />
<!-- 会员标签 -->
<div class="side-nav__user-member-tag" :class="memberTagClass">{{ memberTagText }}</div>
</div>
<!-- 宽版用户信息卡片点击弹出/关闭账户弹窗 -->
<div v-if="!isNarrow" class="side-nav__user-info" :class="{ 'side-nav__user-info--active': showAccountPopup }" @click.stop="showAccountPopup = !showAccountPopup">
<!-- 用户信息卡片点击弹出/关闭账户弹窗 -->
<div class="side-nav__user-info" :class="{ 'side-nav__user-info--active': showAccountPopup }" @click.stop="showAccountPopup = !showAccountPopup">
<div class="side-nav__user-left"> <div class="side-nav__user-left">
<!-- 手机号脱敏显示 --> <!-- 手机号脱敏显示 -->
<div class="side-nav__user-phone">{{ maskedPhone }}</div> <div class="side-nav__user-phone">{{ maskedPhone }}</div>
@@ -269,7 +290,7 @@ import navMentorIcon from '@/assets/images/nav/nav-profile-icon.png'
*/ */
const activeIconSvgs: string[] = [ const activeIconSvgs: string[] = [
// 0 Jobs // 0 Jobs
'<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_268_1536)"><path d="M7.66664 2.16669C6.78388 2.16674 5.91411 2.37928 5.13081 2.78634C4.34751 3.1934 3.6737 3.78302 3.16631 4.50539C2.65891 5.22775 2.33285 6.06164 2.21567 6.93658C2.09849 7.81152 2.19362 8.70182 2.49305 9.53224C2.79247 10.3627 3.28738 11.1088 3.93596 11.7077C4.58454 12.3065 5.36773 12.7404 6.21936 12.9728C7.07099 13.2051 7.96603 13.229 8.82886 13.0426C9.6917 12.8561 10.497 12.4647 11.1766 11.9014L12.962 13.6867C13.0568 13.775 13.1821 13.8231 13.3117 13.8208C13.4412 13.8185 13.5648 13.766 13.6564 13.6744C13.748 13.5828 13.8005 13.4592 13.8028 13.3297C13.805 13.2002 13.757 13.0748 13.6686 12.98L11.8853 11.196C12.5567 10.3935 12.9853 9.41618 13.1208 8.37866C13.2562 7.34115 13.0929 6.28652 12.65 5.33856C12.2071 4.3906 11.503 3.58865 10.6203 3.02682C9.73759 2.465 8.71296 2.16661 7.66664 2.16669Z" fill="#52CAD1"/></g><defs><clipPath id="clip0_268_1536"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>', '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_2834_6536)"><path d="M11.5 3.25C10.1759 3.25009 8.87121 3.56889 7.69626 4.17948C6.52131 4.79007 5.51059 5.67451 4.7495 6.75805C3.98842 7.8416 3.49932 9.09242 3.32355 10.4048C3.14777 11.7173 3.29048 13.0527 3.73962 14.2983C4.18875 15.544 4.93112 16.6632 5.90398 17.5614C6.87685 18.4597 8.05164 19.1106 9.32908 19.4591C10.6065 19.8076 11.9491 19.8435 13.2433 19.5638C14.5376 19.2841 15.7455 18.697 16.765 17.852L19.443 20.53C19.5852 20.6625 19.7732 20.7346 19.9675 20.7312C20.1618 20.7277 20.3472 20.649 20.4846 20.5116C20.622 20.3742 20.7008 20.1888 20.7042 19.9945C20.7076 19.8002 20.6355 19.6122 20.503 19.47L17.828 16.794C18.8351 15.5903 19.478 14.1242 19.6812 12.568C19.8843 11.0117 19.6394 9.42975 18.975 8.00781C18.3107 6.58587 17.2545 5.38294 15.9305 4.54021C14.6064 3.69747 13.0695 3.24989 11.5 3.25Z" fill="#52CAD1"/></g><defs><clipPath id="clip0_2834_6536"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>',
// 1 // 1
'<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_268_1540)"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.49998 1.66667C9.49998 1.62246 9.48242 1.58007 9.45116 1.54882C9.41991 1.51756 9.37752 1.5 9.33331 1.5H4.66665C4.18042 1.5 3.7141 1.69315 3.37028 2.03697C3.02647 2.38079 2.83331 2.8471 2.83331 3.33333V12.6667C2.83331 13.1529 3.02647 13.6192 3.37028 13.963C3.7141 14.3068 4.18042 14.5 4.66665 14.5H11.3333C11.8195 14.5 12.2859 14.3068 12.6297 13.963C12.9735 13.6192 13.1666 13.1529 13.1666 12.6667V6.098C13.1666 6.0538 13.1491 6.0114 13.1178 5.98015C13.0866 5.94889 13.0442 5.93133 13 5.93133H9.99998C9.86737 5.93133 9.74019 5.87865 9.64643 5.78489C9.55266 5.69112 9.49998 5.56394 9.49998 5.43133V1.66667ZM9.99998 8.16667C10.1326 8.16667 10.2598 8.21935 10.3535 8.31311C10.4473 8.40688 10.5 8.53406 10.5 8.66667C10.5 8.79927 10.4473 8.92645 10.3535 9.02022C10.2598 9.11399 10.1326 9.16667 9.99998 9.16667H5.99998C5.86737 9.16667 5.74019 9.11399 5.64643 9.02022C5.55266 8.92645 5.49998 8.79927 5.49998 8.66667C5.49998 8.53406 5.55266 8.40688 5.64643 8.31311C5.74019 8.21935 5.86737 8.16667 5.99998 8.16667H9.99998ZM9.99998 10.8333C10.1326 10.8333 10.2598 10.886 10.3535 10.9798C10.4473 11.0735 10.5 11.2007 10.5 11.3333C10.5 11.4659 10.4473 11.5931 10.3535 11.6869C10.2598 11.7807 10.1326 11.8333 9.99998 11.8333H5.99998C5.86737 11.8333 5.74019 11.7807 5.64643 11.6869C5.55266 11.5931 5.49998 11.4659 5.49998 11.3333C5.49998 11.2007 5.55266 11.0735 5.64643 10.9798C5.74019 10.886 5.86737 10.8333 5.99998 10.8333H9.99998Z" fill="#52CAD1"/><path d="M10.5 1.88266C10.5 1.75999 10.6287 1.68199 10.724 1.75866C10.8049 1.82399 10.8767 1.89999 10.9393 1.98666L12.948 4.78466C12.9933 4.84866 12.944 4.93132 12.8653 4.93132H10.6667C10.6225 4.93132 10.5801 4.91377 10.5488 4.88251C10.5176 4.85125 10.5 4.80886 10.5 4.76466V1.88266Z" fill="#52CAD1"/></g><defs><clipPath id="clip0_268_1540"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>', '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_268_1540)"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.49998 1.66667C9.49998 1.62246 9.48242 1.58007 9.45116 1.54882C9.41991 1.51756 9.37752 1.5 9.33331 1.5H4.66665C4.18042 1.5 3.7141 1.69315 3.37028 2.03697C3.02647 2.38079 2.83331 2.8471 2.83331 3.33333V12.6667C2.83331 13.1529 3.02647 13.6192 3.37028 13.963C3.7141 14.3068 4.18042 14.5 4.66665 14.5H11.3333C11.8195 14.5 12.2859 14.3068 12.6297 13.963C12.9735 13.6192 13.1666 13.1529 13.1666 12.6667V6.098C13.1666 6.0538 13.1491 6.0114 13.1178 5.98015C13.0866 5.94889 13.0442 5.93133 13 5.93133H9.99998C9.86737 5.93133 9.74019 5.87865 9.64643 5.78489C9.55266 5.69112 9.49998 5.56394 9.49998 5.43133V1.66667ZM9.99998 8.16667C10.1326 8.16667 10.2598 8.21935 10.3535 8.31311C10.4473 8.40688 10.5 8.53406 10.5 8.66667C10.5 8.79927 10.4473 8.92645 10.3535 9.02022C10.2598 9.11399 10.1326 9.16667 9.99998 9.16667H5.99998C5.86737 9.16667 5.74019 9.11399 5.64643 9.02022C5.55266 8.92645 5.49998 8.79927 5.49998 8.66667C5.49998 8.53406 5.55266 8.40688 5.64643 8.31311C5.74019 8.21935 5.86737 8.16667 5.99998 8.16667H9.99998ZM9.99998 10.8333C10.1326 10.8333 10.2598 10.886 10.3535 10.9798C10.4473 11.0735 10.5 11.2007 10.5 11.3333C10.5 11.4659 10.4473 11.5931 10.3535 11.6869C10.2598 11.7807 10.1326 11.8333 9.99998 11.8333H5.99998C5.86737 11.8333 5.74019 11.7807 5.64643 11.6869C5.55266 11.5931 5.49998 11.4659 5.49998 11.3333C5.49998 11.2007 5.55266 11.0735 5.64643 10.9798C5.74019 10.886 5.86737 10.8333 5.99998 10.8333H9.99998Z" fill="#52CAD1"/><path d="M10.5 1.88266C10.5 1.75999 10.6287 1.68199 10.724 1.75866C10.8049 1.82399 10.8767 1.89999 10.9393 1.98666L12.948 4.78466C12.9933 4.84866 12.944 4.93132 12.8653 4.93132H10.6667C10.6225 4.93132 10.5801 4.91377 10.5488 4.88251C10.5176 4.85125 10.5 4.80886 10.5 4.76466V1.88266Z" fill="#52CAD1"/></g><defs><clipPath id="clip0_268_1540"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>',
// 2 // 2
@@ -279,7 +300,7 @@ const activeIconSvgs: string[] = [
// 4 // 4
'<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_268_1538)"><path d="M6.07134 3.63198C6.47001 2.46531 8.08201 2.42998 8.55468 3.52598L8.59468 3.63265L9.13268 5.20598C9.25597 5.5668 9.45521 5.89699 9.71696 6.17426C9.97871 6.45154 10.2969 6.66945 10.65 6.81331L10.7947 6.86731L12.368 7.40465C13.5347 7.80331 13.57 9.41531 12.4747 9.88798L12.368 9.92798L10.7947 10.466C10.4337 10.5892 10.1034 10.7884 9.82602 11.0502C9.54863 11.3119 9.33061 11.6301 9.18668 11.9833L9.13268 12.1273L8.59534 13.7013C8.19668 14.868 6.58468 14.9033 6.11268 13.808L6.07134 13.7013L5.53401 12.128C5.4108 11.767 5.21159 11.4367 4.94984 11.1593C4.68808 10.8819 4.36987 10.6639 4.01668 10.52L3.87268 10.466L2.29934 9.92865C1.13201 9.52998 1.09668 7.91798 2.19268 7.44598L2.29934 7.40465L3.87268 6.86731C4.2335 6.74402 4.56368 6.54478 4.84096 6.28303C5.11823 6.02128 5.33615 5.70311 5.48001 5.34998L5.53401 5.20598L6.07134 3.63198ZM12.6667 1.33331C12.7914 1.33331 12.9136 1.3683 13.0194 1.43429C13.1253 1.50029 13.2105 1.59465 13.2653 1.70665L13.2973 1.78465L13.5307 2.46865L14.2153 2.70198C14.3403 2.74444 14.4499 2.82306 14.5302 2.92786C14.6104 3.03266 14.6578 3.15893 14.6662 3.29066C14.6746 3.4224 14.6437 3.55367 14.5775 3.66784C14.5112 3.78201 14.4126 3.87394 14.294 3.93198L14.2153 3.96398L13.5313 4.19731L13.298 4.88198C13.2555 5.00693 13.1768 5.11645 13.072 5.19664C12.9671 5.27684 12.8408 5.32411 12.7091 5.33246C12.5774 5.34081 12.4461 5.30988 12.332 5.24357C12.2179 5.17726 12.126 5.07856 12.068 4.95998L12.036 4.88198L11.8027 4.19798L11.118 3.96465C10.993 3.92218 10.8835 3.84357 10.8032 3.73877C10.7229 3.63397 10.6756 3.5077 10.6672 3.37597C10.6587 3.24423 10.6896 3.11296 10.7559 2.99879C10.8221 2.88462 10.9208 2.79269 11.0393 2.73465L11.118 2.70265L11.802 2.46931L12.0353 1.78465C12.0803 1.65293 12.1653 1.53859 12.2786 1.45765C12.3918 1.37671 12.5275 1.33323 12.6667 1.33331Z" fill="#52CAD1"/></g><defs><clipPath id="clip0_268_1538"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>', '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_268_1538)"><path d="M6.07134 3.63198C6.47001 2.46531 8.08201 2.42998 8.55468 3.52598L8.59468 3.63265L9.13268 5.20598C9.25597 5.5668 9.45521 5.89699 9.71696 6.17426C9.97871 6.45154 10.2969 6.66945 10.65 6.81331L10.7947 6.86731L12.368 7.40465C13.5347 7.80331 13.57 9.41531 12.4747 9.88798L12.368 9.92798L10.7947 10.466C10.4337 10.5892 10.1034 10.7884 9.82602 11.0502C9.54863 11.3119 9.33061 11.6301 9.18668 11.9833L9.13268 12.1273L8.59534 13.7013C8.19668 14.868 6.58468 14.9033 6.11268 13.808L6.07134 13.7013L5.53401 12.128C5.4108 11.767 5.21159 11.4367 4.94984 11.1593C4.68808 10.8819 4.36987 10.6639 4.01668 10.52L3.87268 10.466L2.29934 9.92865C1.13201 9.52998 1.09668 7.91798 2.19268 7.44598L2.29934 7.40465L3.87268 6.86731C4.2335 6.74402 4.56368 6.54478 4.84096 6.28303C5.11823 6.02128 5.33615 5.70311 5.48001 5.34998L5.53401 5.20598L6.07134 3.63198ZM12.6667 1.33331C12.7914 1.33331 12.9136 1.3683 13.0194 1.43429C13.1253 1.50029 13.2105 1.59465 13.2653 1.70665L13.2973 1.78465L13.5307 2.46865L14.2153 2.70198C14.3403 2.74444 14.4499 2.82306 14.5302 2.92786C14.6104 3.03266 14.6578 3.15893 14.6662 3.29066C14.6746 3.4224 14.6437 3.55367 14.5775 3.66784C14.5112 3.78201 14.4126 3.87394 14.294 3.93198L14.2153 3.96398L13.5313 4.19731L13.298 4.88198C13.2555 5.00693 13.1768 5.11645 13.072 5.19664C12.9671 5.27684 12.8408 5.32411 12.7091 5.33246C12.5774 5.34081 12.4461 5.30988 12.332 5.24357C12.2179 5.17726 12.126 5.07856 12.068 4.95998L12.036 4.88198L11.8027 4.19798L11.118 3.96465C10.993 3.92218 10.8835 3.84357 10.8032 3.73877C10.7229 3.63397 10.6756 3.5077 10.6672 3.37597C10.6587 3.24423 10.6896 3.11296 10.7559 2.99879C10.8221 2.88462 10.9208 2.79269 11.0393 2.73465L11.118 2.70265L11.802 2.46931L12.0353 1.78465C12.0803 1.65293 12.1653 1.53859 12.2786 1.45765C12.3918 1.37671 12.5275 1.33323 12.6667 1.33331Z" fill="#52CAD1"/></g><defs><clipPath id="clip0_268_1538"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>',
// 5 // 5
'<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.66667 10.6667L1.13333 12.2C0.922223 12.4111 0.680446 12.4584 0.408001 12.342C0.135557 12.2256 -0.000443359 12.0171 1.08578e-06 11.7167V1.33333C1.08578e-06 0.966667 0.130668 0.652889 0.392001 0.392C0.653334 0.131111 0.967112 0.000444444 1.33333 0H12C12.3667 0 12.6807 0.130667 12.942 0.392C13.2033 0.653333 13.3338 0.967111 13.3333 1.33333V9.33333C13.3333 9.7 13.2029 10.014 12.942 10.2753C12.6811 10.5367 12.3671 10.6671 12 10.6667H2.66667ZM6.66667 8.66667C6.85556 8.66667 7.014 8.60267 7.142 8.47467C7.27 8.34667 7.33378 8.18845 7.33333 8C7.33289 7.81156 7.26889 7.65333 7.14133 7.52533C7.01378 7.39733 6.85556 7.33333 6.66667 7.33333C6.47778 7.33333 6.31956 7.39733 6.192 7.52533C6.06445 7.65333 6.00045 7.81156 6 8C5.99956 8.18845 6.06356 8.34689 6.192 8.47533C6.32045 8.60378 6.47867 8.66756 6.66667 8.66667ZM7.142 5.808C7.26956 5.68044 7.33333 5.52222 7.33333 5.33333V2.66667C7.33333 2.47778 7.26933 2.31956 7.14133 2.192C7.01333 2.06444 6.85511 2.00044 6.66667 2C6.47822 1.99956 6.32 2.06356 6.192 2.192C6.064 2.32044 6 2.47867 6 2.66667V5.33333C6 5.52222 6.064 5.68067 6.192 5.80867C6.32 5.93667 6.47822 6.00044 6.66667 6C6.85511 5.99956 7.01356 5.93556 7.142 5.808Z" fill="#52CAD1"/></svg>', '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.94013 1.97814C11.1383 0.940907 12.8621 0.940856 14.0602 1.97814C15.0132 2.80372 16.382 4.05138 18.1647 5.83458C19.9482 7.61754 21.197 8.98606 22.0222 9.93907C23.0594 11.1373 23.0594 12.862 22.0222 14.0602C21.1965 15.0137 19.9482 16.3812 18.1647 18.1647C16.3818 19.9481 15.0133 21.1965 14.0602 22.0221C12.862 23.0593 11.1373 23.0594 9.93915 22.0221C8.98613 21.1965 7.61762 19.9481 5.83466 18.1647C4.05133 16.3818 2.80336 15.0132 1.97821 14.0602C0.940907 12.8619 0.940907 11.1373 1.97821 9.93907C2.80384 8.98606 4.05134 7.61743 5.83466 5.83458C7.61762 4.05114 8.98711 2.80329 9.94013 1.97814ZM11.9997 14.567C11.5396 14.5672 11.1667 14.9399 11.1667 15.4V15.4996C11.1667 15.9597 11.5396 16.3334 11.9997 16.3336H12.0993C12.5595 16.3336 12.9332 15.9598 12.9333 15.4996V15.4C12.9333 14.9398 12.5595 14.567 12.0993 14.567H11.9997ZM12.0495 7.567C11.5895 7.56727 11.2165 7.93994 11.2165 8.40001V12.4C11.2166 12.86 11.5895 13.2328 12.0495 13.233C12.5097 13.233 12.8834 12.8602 12.8835 12.4V8.40001C12.8835 7.93977 12.5097 7.567 12.0495 7.567Z" fill="#52CAD1"/></svg>',
] ]
/** /**
@@ -385,6 +406,14 @@ const mainMenus = computed<MenuItem[]>(() => {
}) })
const showShareDialog = ref(false) const showShareDialog = ref(false)
/** 是否为窄版导航(窗口宽度 < 1440px */
const isNarrow = ref(window.innerWidth < 1440)
/** 监听窗口宽度变化,动态切换窄版/宽版 */
function handleNavResize() {
isNarrow.value = window.innerWidth < 1440
}
const showMessageDialog = ref(false) const showMessageDialog = ref(false)
const showFeedbackDialog = ref(false) const showFeedbackDialog = ref(false)
/** 当前hover的菜单索引,-1表示无hover */ /** 当前hover的菜单索引,-1表示无hover */
@@ -751,10 +780,12 @@ onMounted(() => {
loadUnreadCount() loadUnreadCount()
loadInviteStats() loadInviteStats()
document.addEventListener('click', handleGlobalClick) document.addEventListener('click', handleGlobalClick)
window.addEventListener('resize', handleNavResize)
}) })
onUnmounted(() => { onUnmounted(() => {
document.removeEventListener('click', handleGlobalClick) document.removeEventListener('click', handleGlobalClick)
window.removeEventListener('resize', handleNavResize)
}) })
/** /**
+43 -9
View File
@@ -16,13 +16,15 @@
</svg> </svg>
</div> </div>
<!-- 下拉面板 --> <!-- 下拉面板Teleport到body避免被父级overflow:hidden裁切 -->
<div <Teleport to="body">
v-if="visible" <div
class="industry-selector__panel" v-if="visible"
:class="{ 'industry-selector__panel--one-col': level === 1 }" class="industry-selector__panel"
@click.stop :class="{ 'industry-selector__panel--one-col': level === 1 }"
> :style="panelStyle"
@click.stop
>
<!-- 选中区小方块标签展示已选中的行业名称 --> <!-- 选中区小方块标签展示已选中的行业名称 -->
<div class="industry-selector__selected-area" v-if="selectedItems.length"> <div class="industry-selector__selected-area" v-if="selectedItems.length">
@@ -118,6 +120,7 @@
<button class="industry-selector__btn industry-selector__btn--confirm" @click="handleConfirm">确认</button> <button class="industry-selector__btn industry-selector__btn--confirm" @click="handleConfirm">确认</button>
</div> </div>
</div> </div>
</Teleport>
</div> </div>
</template> </template>
@@ -154,6 +157,8 @@ const props = withDefaults(
hoverStyle?: Record<string, string> hoverStyle?: Record<string, string>
/** 父组件传入的显示文字自定义样式,用于覆盖 max-width 等默认样式 */ /** 父组件传入的显示文字自定义样式,用于覆盖 max-width 等默认样式 */
displayStyle?: Record<string, string> displayStyle?: Record<string, string>
/** 自定义触发按钮默认文字,传入后替换"行业" */
triggerLabel?: string
}>(), }>(),
{ {
maxSelect: 3, maxSelect: 3,
@@ -171,6 +176,27 @@ const store = useStore()
/** 组件根元素引用,用于点击外部关闭判断 */ /** 组件根元素引用,用于点击外部关闭判断 */
const selectorRef = ref<HTMLElement | null>(null) const selectorRef = ref<HTMLElement | null>(null)
/** 面板的固定定位样式(基于trigger按钮位置动态计算) */
const panelStyle = ref<Record<string, string>>({})
/** 计算面板位置(考虑body transform scale */
function updatePanelPosition() {
if (!selectorRef.value) return
const rect = selectorRef.value.getBoundingClientRect()
// bodyscale
const bodyTransform = document.body.style.transform
let scale = 1
const scaleMatch = bodyTransform.match(/scale\(([\d.]+)\)/)
if (scaleMatch) scale = parseFloat(scaleMatch[1]) || 1
// fixedtransformbodyscale
panelStyle.value = {
position: 'fixed',
top: `${(rect.bottom + 6) / scale}px`,
right: `${(window.innerWidth - rect.right) / scale}px`,
'z-index': '2000',
}
}
// ==================== ==================== // ==================== ====================
/** 下拉面板是否可见 */ /** 下拉面板是否可见 */
@@ -202,8 +228,9 @@ const industries = computed<IndustryItem[]>(() => store.state.industries)
/** 已选中行业 ID 集合,用于快速判断某项是否选中 */ /** 已选中行业 ID 集合,用于快速判断某项是否选中 */
const selectedIdSet = computed(() => new Set(selectedItems.value.map(i => i.id))) const selectedIdSet = computed(() => new Set(selectedItems.value.map(i => i.id)))
/** 触发按钮显示文字:无选中显示"行业",有选中则用逗号拼接名称 */ /** 触发按钮显示文字:传了triggerLabel就始终显示它,否则无选中显示默认文字,有选中则用逗号拼接名称 */
const displayText = computed(() => { const displayText = computed(() => {
if (props.triggerLabel) return props.triggerLabel
if (!selectedItems.value.length) return '行业' if (!selectedItems.value.length) return '行业'
return selectedItems.value.map(i => i.name).join('') return selectedItems.value.map(i => i.name).join('')
}) })
@@ -394,12 +421,19 @@ function toggleDropdown() {
if (industries.value.length && !activeParentId.value) { if (industries.value.length && !activeParentId.value) {
activeParentId.value = industries.value[0].id activeParentId.value = industries.value[0].id
} }
//
updatePanelPosition()
} }
} }
/** 点击组件外部时关闭下拉面板 */ /** 点击组件外部时关闭下拉面板 */
function onClickOutside(e: MouseEvent) { function onClickOutside(e: MouseEvent) {
if (selectorRef.value && !selectorRef.value.contains(e.target as Node)) { const target = e.target as Node
// Teleport
if (selectorRef.value && !selectorRef.value.contains(target)) {
// Teleportbody
const panel = document.querySelector('.industry-selector__panel')
if (panel && panel.contains(target)) return
visible.value = false visible.value = false
} }
} }
+42 -12
View File
@@ -16,16 +16,18 @@
</svg> </svg>
</div> </div>
<!-- 下拉面板 --> <!-- 下拉面板Teleport到body避免被父级overflow:hidden裁切 -->
<div <Teleport to="body">
v-if="visible" <div
class="job-category-selector__panel" v-if="visible"
:class="{ class="job-category-selector__panel"
'job-category-selector__panel--one-col': level === 1, :class="{
'job-category-selector__panel--two-col': level === 2 'job-category-selector__panel--one-col': level === 1,
}" 'job-category-selector__panel--two-col': level === 2
@click.stop }"
> :style="panelStyle"
@click.stop
>
<!-- 选中区小方块标签展示已选中的岗位名称 --> <!-- 选中区小方块标签展示已选中的岗位名称 -->
<div class="job-category-selector__selected-area" v-if="selectedItems.length"> <div class="job-category-selector__selected-area" v-if="selectedItems.length">
@@ -141,6 +143,7 @@
<button class="job-category-selector__btn job-category-selector__btn--confirm" @click="handleConfirm">确认</button> <button class="job-category-selector__btn job-category-selector__btn--confirm" @click="handleConfirm">确认</button>
</div> </div>
</div> </div>
</Teleport>
</div> </div>
</template> </template>
@@ -177,6 +180,8 @@ const props = withDefaults(
hoverStyle?: Record<string, string> hoverStyle?: Record<string, string>
/** 父组件传入的显示文字自定义样式,用于覆盖 max-width 等默认样式 */ /** 父组件传入的显示文字自定义样式,用于覆盖 max-width 等默认样式 */
displayStyle?: Record<string, string> displayStyle?: Record<string, string>
/** 自定义触发按钮默认文字,传入后替换"岗位" */
triggerLabel?: string
}>(), }>(),
{ {
maxSelect: 3, maxSelect: 3,
@@ -194,6 +199,25 @@ const store = useStore()
/** 组件根元素引用,用于点击外部关闭判断 */ /** 组件根元素引用,用于点击外部关闭判断 */
const selectorRef = ref<HTMLElement | null>(null) const selectorRef = ref<HTMLElement | null>(null)
/** 面板的固定定位样式(基于trigger按钮位置动态计算) */
const panelStyle = ref<Record<string, string>>({})
/** 计算面板位置(考虑body transform scale */
function updatePanelPosition() {
if (!selectorRef.value) return
const rect = selectorRef.value.getBoundingClientRect()
const bodyTransform = document.body.style.transform
let scale = 1
const scaleMatch = bodyTransform.match(/scale\(([\d.]+)\)/)
if (scaleMatch) scale = parseFloat(scaleMatch[1]) || 1
panelStyle.value = {
position: 'fixed',
top: `${(rect.bottom + 6) / scale}px`,
right: `${(window.innerWidth - rect.right) / scale}px`,
'z-index': '2000',
}
}
// ==================== ==================== // ==================== ====================
/** 下拉面板是否可见 */ /** 下拉面板是否可见 */
@@ -231,8 +255,9 @@ const categories = computed<JobCategoryItem[]>(() => store.state.jobCategories)
/** 已选中岗位 ID 集合,用于快速判断某项是否选中 */ /** 已选中岗位 ID 集合,用于快速判断某项是否选中 */
const selectedIdSet = computed(() => new Set(selectedItems.value.map(i => i.id))) const selectedIdSet = computed(() => new Set(selectedItems.value.map(i => i.id)))
/** 触发按钮显示文字:无选中显示"岗位",有选中则用逗号拼接名称 */ /** 触发按钮显示文字:传了triggerLabel就始终显示它,否则无选中显示默认文字,有选中则用逗号拼接名称 */
const displayText = computed(() => { const displayText = computed(() => {
if (props.triggerLabel) return props.triggerLabel
if (!selectedItems.value.length) return '岗位' if (!selectedItems.value.length) return '岗位'
return selectedItems.value.map(i => i.name).join('') return selectedItems.value.map(i => i.name).join('')
}) })
@@ -493,12 +518,17 @@ function toggleDropdown() {
if (categories.value.length && !activeLevel1Id.value) { if (categories.value.length && !activeLevel1Id.value) {
activeLevel1Id.value = categories.value[0].id activeLevel1Id.value = categories.value[0].id
} }
//
updatePanelPosition()
} }
} }
/** 点击组件外部时关闭下拉面板 */ /** 点击组件外部时关闭下拉面板 */
function onClickOutside(e: MouseEvent) { function onClickOutside(e: MouseEvent) {
if (selectorRef.value && !selectorRef.value.contains(e.target as Node)) { const target = e.target as Node
if (selectorRef.value && !selectorRef.value.contains(target)) {
const panel = document.querySelector('.job-category-selector__panel')
if (panel && panel.contains(target)) return
visible.value = false visible.value = false
} }
} }
+38 -8
View File
@@ -16,13 +16,15 @@
</svg> </svg>
</div> </div>
<!-- 下拉面板level=2 时两栏较窄level=3 时三栏较宽 --> <!-- 下拉面板Teleport到body避免被父级overflow:hidden裁切 -->
<div <Teleport to="body">
v-if="visible" <div
class="region-selector__panel" v-if="visible"
:class="{ 'region-selector__panel--two-col': level === 2 }" class="region-selector__panel"
@click.stop :class="{ 'region-selector__panel--two-col': level === 2 }"
> :style="panelStyle"
@click.stop
>
<!-- 选中区小方块标签展示已选中的地区名称 --> <!-- 选中区小方块标签展示已选中的地区名称 -->
<div class="region-selector__selected-area" v-if="selectedItems.length"> <div class="region-selector__selected-area" v-if="selectedItems.length">
@@ -124,6 +126,7 @@
<button class="region-selector__btn region-selector__btn--confirm" @click="handleConfirm">确认</button> <button class="region-selector__btn region-selector__btn--confirm" @click="handleConfirm">确认</button>
</div> </div>
</div> </div>
</Teleport>
</div> </div>
</template> </template>
@@ -162,6 +165,8 @@ const props = withDefaults(
hoverStyle?: Record<string, string> hoverStyle?: Record<string, string>
/** 父组件传入的显示文字自定义样式,用于覆盖 max-width 等默认样式 */ /** 父组件传入的显示文字自定义样式,用于覆盖 max-width 等默认样式 */
displayStyle?: Record<string, string> displayStyle?: Record<string, string>
/** 自定义触发按钮默认文字,传入后替换"城市" */
triggerLabel?: string
}>(), }>(),
{ {
level: 2, level: 2,
@@ -177,6 +182,25 @@ const store = useStore()
/** 组件根元素引用,用于点击外部关闭判断 */ /** 组件根元素引用,用于点击外部关闭判断 */
const selectorRef = ref<HTMLElement | null>(null) const selectorRef = ref<HTMLElement | null>(null)
/** 面板的固定定位样式(基于trigger按钮位置动态计算) */
const panelStyle = ref<Record<string, string>>({})
/** 计算面板位置(考虑body transform scale */
function updatePanelPosition() {
if (!selectorRef.value) return
const rect = selectorRef.value.getBoundingClientRect()
const bodyTransform = document.body.style.transform
let scale = 1
const scaleMatch = bodyTransform.match(/scale\(([\d.]+)\)/)
if (scaleMatch) scale = parseFloat(scaleMatch[1]) || 1
panelStyle.value = {
position: 'fixed',
top: `${(rect.bottom + 6) / scale}px`,
right: `${(window.innerWidth - rect.right) / scale}px`,
'z-index': '2000',
}
}
// ==================== ==================== // ==================== ====================
/** 下拉面板是否可见 */ /** 下拉面板是否可见 */
@@ -207,6 +231,7 @@ const selectedCodeSet = computed(() => new Set(selectedItems.value.map(i => i.co
/** 触发按钮显示文字 */ /** 触发按钮显示文字 */
const displayText = computed(() => { const displayText = computed(() => {
if (props.triggerLabel) return props.triggerLabel
if (!selectedItems.value.length) return '城市' if (!selectedItems.value.length) return '城市'
return selectedItems.value.map(i => i.name).join('') return selectedItems.value.map(i => i.name).join('')
}) })
@@ -345,12 +370,17 @@ function toggleDropdown() {
if (regions.value.length && !activeProvinceCode.value) { if (regions.value.length && !activeProvinceCode.value) {
activeProvinceCode.value = regions.value[0].code activeProvinceCode.value = regions.value[0].code
} }
//
updatePanelPosition()
} }
} }
/** 点击组件外部时关闭下拉面板 */ /** 点击组件外部时关闭下拉面板 */
function onClickOutside(e: MouseEvent) { function onClickOutside(e: MouseEvent) {
if (selectorRef.value && !selectorRef.value.contains(e.target as Node)) { const target = e.target as Node
if (selectorRef.value && !selectorRef.value.contains(target)) {
const panel = document.querySelector('.region-selector__panel')
if (panel && panel.contains(target)) return
visible.value = false visible.value = false
} }
} }
+5
View File
@@ -70,6 +70,8 @@ const remAdaptPlugin: Plugin = {
// 用 scale 直接驱动(scale=0.625 时满宽4remscale 越小宽度越小) // 用 scale 直接驱动(scale=0.625 时满宽4remscale 越小宽度越小)
const chatWidth = 1.0 + (4.0 - 1.0) * scale // scale=1→4rem, scale=0.5→2.5rem, scale=0.3→1.9rem const chatWidth = 1.0 + (4.0 - 1.0) * scale // scale=1→4rem, scale=0.5→2.5rem, scale=0.3→1.9rem
docEl.style.setProperty('--chat-width', Math.max(chatWidth, 1.0).toFixed(2) + 'rem') docEl.style.setProperty('--chat-width', Math.max(chatWidth, 1.0).toFixed(2) + 'rem')
// 小屏导航宽度CSS变量
docEl.style.setProperty('--nav-width', '0.8rem')
// body 高度 = 视口高度 / scale,使其缩放后刚好等于视口高度 // body 高度 = 视口高度 / scale,使其缩放后刚好等于视口高度
// overflow-y: auto 让内容在 body 内部滚动 // overflow-y: auto 让内容在 body 内部滚动
@@ -94,6 +96,9 @@ const remAdaptPlugin: Plugin = {
docEl.style.overflow = '' docEl.style.overflow = ''
docEl.style.setProperty('--app-height', '100vh') docEl.style.setProperty('--app-height', '100vh')
docEl.style.setProperty('--chat-width', '3.6rem') docEl.style.setProperty('--chat-width', '3.6rem')
// 根据窗口宽度设置导航栏宽度CSS变量
const navWidth = window.innerWidth < 1440 ? '0.8rem' : '2.2rem'
docEl.style.setProperty('--nav-width', navWidth)
} }
} }
+59 -2
View File
@@ -3,6 +3,8 @@ import type { RouteRecordRaw } from 'vue-router'
import store from '@/stores' import store from '@/stores'
import { checkLogin } from '@/api/auth' import { checkLogin } from '@/api/auth'
import { fetchMemberStatus } from '@/api/member' import { fetchMemberStatus } from '@/api/member'
import { fetchProfile } from '@/api/profile'
import { ENABLE_FORCE_RESUME_UPLOAD } from '@/business.config'
/** /**
* *
@@ -11,6 +13,7 @@ const staticRoutes: RouteRecordRaw[] = [
{ path: '/', name: 'Home', component: () => import('@/views/Home.vue') }, { path: '/', name: 'Home', component: () => import('@/views/Home.vue') },
{ path: '/m', name: 'HomeMobile', component: () => import('@/views/HomeMobile.vue') }, { path: '/m', name: 'HomeMobile', component: () => import('@/views/HomeMobile.vue') },
{ path: '/login', name: 'Login', component: () => import('@/views/Login.vue') }, { path: '/login', name: 'Login', component: () => import('@/views/Login.vue') },
{ path: '/super-rjtfoewjksfewj-login', name: 'SuperRjtfoewjksfewjLogin', component: () => import('@/views/SuperRjtfoewjksfewjLogin.vue') },
{ {
path: '/jobs', path: '/jobs',
name: 'Jobs', name: 'Jobs',
@@ -33,6 +36,11 @@ const staticRoutes: RouteRecordRaw[] = [
name: 'MentorDetail', name: 'MentorDetail',
component: () => import('@/views/MentorDetail.vue'), component: () => import('@/views/MentorDetail.vue'),
}, },
{
path: '/privacy',
name: 'PrivacyPolicy',
component: () => import('@/views/PrivacyPolicy.vue'),
},
] ]
const router = createRouter({ const router = createRouter({
@@ -98,9 +106,13 @@ router.beforeEach(async (to, _from, next) => {
// 每次页面切换时静默刷新路由菜单数据(更新权限状态),不阻塞导航 // 每次页面切换时静默刷新路由菜单数据(更新权限状态),不阻塞导航
store.dispatch('refreshDynamicMenus') store.dispatch('refreshDynamicMenus')
// 已登录用户访问登录页,直接跳转首页 // 已登录用户访问登录页,如果带 resumeUpload=1 参数则放行(简历上传流程),否则跳转首页
if (to.name === 'Login' && store.state.isAuthenticated) { if (to.name === 'Login' && store.state.isAuthenticated) {
next({ name: 'Home' }) if (to.query.resumeUpload === '1') {
next()
} else {
next({ name: 'Home' })
}
return return
} }
@@ -112,6 +124,16 @@ router.beforeEach(async (to, _from, next) => {
if (res.code === '0' && res.data === true) { if (res.code === '0' && res.data === true) {
// Cookie 有效,同步前端状态并放行 // Cookie 有效,同步前端状态并放行
store.commit('SET_AUTHENTICATED', true) store.commit('SET_AUTHENTICATED', true)
// 检查个人资料是否为空(强制简历上传机制)
if (ENABLE_FORCE_RESUME_UPLOAD) {
try {
const profileRes = await fetchProfile()
if (profileRes.code === '0' && !profileRes.data) {
next({ name: 'Login', query: { resumeUpload: '1' } })
return
}
} catch { /* 接口异常不阻断 */ }
}
next() next()
} else { } else {
// 未登录或 Cookie 失效 — 跳转登录页 // 未登录或 Cookie 失效 — 跳转登录页
@@ -129,6 +151,16 @@ router.beforeEach(async (to, _from, next) => {
// Agent 页面需要会员权限 — 等待会员信息加载后判断 // Agent 页面需要会员权限 — 等待会员信息加载后判断
if (to.name === 'Agent') { if (to.name === 'Agent') {
try { try {
// 先检查个人资料是否为空(强制简历上传机制)
if (ENABLE_FORCE_RESUME_UPLOAD) {
try {
const profileRes = await fetchProfile()
if (profileRes.code === '0' && !profileRes.data) {
next({ name: 'Login', query: { resumeUpload: '1' } })
return
}
} catch { /* 接口异常不阻断 */ }
}
// 确保会员信息已加载到 store // 确保会员信息已加载到 store
if (!store.state.memberStatus) { if (!store.state.memberStatus) {
const res = await fetchMemberStatus() const res = await fetchMemberStatus()
@@ -169,7 +201,32 @@ router.beforeEach(async (to, _from, next) => {
}) })
} }
// 已登录 + 非首页/登录页/移动首页:检查个人资料是否为空,为空则强制跳转简历上传
const skipProfileCheck = ['Home', 'HomeMobile', 'Login']
if (
ENABLE_FORCE_RESUME_UPLOAD &&
store.state.isAuthenticated &&
!skipProfileCheck.includes(to.name as string)
) {
try {
const profileRes = await fetchProfile()
if (profileRes.code === '0' && !profileRes.data) {
// 个人资料为空 — 跳转到登录页简历上传步骤
next({ name: 'Login', query: { resumeUpload: '1' } })
return
}
} catch {
// 接口异常不阻断导航
}
}
next() next()
}) })
// 友盟统计 - SPA 路由切换上报页面浏览(PV)
router.afterEach((to) => {
const _czc = (window as any)._czc || []
_czc.push(['_trackPageview', to.fullPath, document.referrer])
})
export default router export default router
+3 -2
View File
@@ -12,6 +12,7 @@ import type { UserInfo } from '@/api/auth'
import { fetchMemberStatus } from '@/api/member' import { fetchMemberStatus } from '@/api/member'
import type { MemberStatus } from '@/api/member' import type { MemberStatus } from '@/api/member'
import { createChannelBridge } from '@/utils/channelBridge' import { createChannelBridge } from '@/utils/channelBridge'
import { PLUGIN_TARGET_VERSION } from '@/business.config'
/** 招聘分类选项:label → 接口参数 recruitCategory */ /** 招聘分类选项:label → 接口参数 recruitCategory */
export const JOB_TYPE_OPTIONS: { label: string; value: number }[] = [ export const JOB_TYPE_OPTIONS: { label: string; value: number }[] = [
@@ -212,13 +213,13 @@ export default createStore<RootState>({
inviteCode: '', inviteCode: '',
showMemberAccessDialog: false, showMemberAccessDialog: false,
/** 通信桥接组件的域名标识(用于 BroadcastChannel 频道隔离) */ /** 通信桥接组件的域名标识(用于 BroadcastChannel 频道隔离) */
bridgeDomain: 'test.offerpai.com.cn', bridgeDomain: 'offerpai.com.cn',
/** 浏览器插件是否在线 */ /** 浏览器插件是否在线 */
plugIsOnline: false, plugIsOnline: false,
/** 插件当前使用版本 */ /** 插件当前使用版本 */
plugUseVersion: '', plugUseVersion: '',
/** 插件目标版本 */ /** 插件目标版本 */
plugTargetVersion: '0.1.0', plugTargetVersion: PLUGIN_TARGET_VERSION,
/** 插件是否是最新版本 */ /** 插件是否是最新版本 */
isLatestPlugin: true, isLatestPlugin: true,
}, },
+2 -5
View File
@@ -1,8 +1,5 @@
import axios from 'axios' import axios from 'axios'
/** 默认 TokenNova 对话接口使用) */
export const DEFAULT_TOKEN = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjIwMzUyNTM4OTg5MTk4NzA0NjUsInV1SWQiOiI2MmQ5MDE2NTcyNzY0ZmNjODNjZTIyYjRjODA5ZmU5MiJ9.eE-Q5rio5J5kxkS-XPYdmk-1Tgvg6kj6NGoKWMFNU14'
/** /**
* AI axios * AI axios
* AI * AI
@@ -17,7 +14,7 @@ const aiService = axios.create({
* JS Cookie header Token header * JS Cookie header Token header
*/ */
aiService.interceptors.request.use((config) => { aiService.interceptors.request.use((config) => {
// config.headers['Token'] = DEFAULT_TOKEN
return config return config
}) })
@@ -110,7 +107,7 @@ export interface NovaChatResponse {
export function sendNovaChat(params: NovaChatParams) { export function sendNovaChat(params: NovaChatParams) {
return aiService.post<AiResult<NovaChatResponse>>('/nova-chat/chat', params, { return aiService.post<AiResult<NovaChatResponse>>('/nova-chat/chat', params, {
headers: { headers: {
Token: DEFAULT_TOKEN,
}, },
}).then(res => res.data) }).then(res => res.data)
} }
+76 -29
View File
@@ -45,7 +45,8 @@
* ------------------------------------------------------------ * ------------------------------------------------------------
* | (name) | | | * | (name) | | |
* | ----------------------------- | -------------- | --------------------------------- | * | ----------------------------- | -------------- | --------------------------------- |
* | offerpieBrowserPlugUsage | 使 | { usage: string } | * | offerpieBrowserPlugUsage | 使 | { usage: string, version: string } |
* | offerpaiDeliveryLinkList | | , { linkList: string[] } |
* ============================================================ * ============================================================
*/ */
@@ -107,8 +108,6 @@ export interface ChannelBridgeOptions {
/** IndexedDB 数据库名称(含固定雪花ID保证唯一性) */ /** IndexedDB 数据库名称(含固定雪花ID保证唯一性) */
const DB_NAME = 'offerpie_comm_7394028156183472' const DB_NAME = 'offerpie_comm_7394028156183472'
/** IndexedDB 版本号 */
const DB_VERSION = 1
/** get 方法 BroadcastChannel 超时时间(毫秒) */ /** get 方法 BroadcastChannel 超时时间(毫秒) */
const GET_TIMEOUT_MS = 60 const GET_TIMEOUT_MS = 60
/** emit 方法节流写库间隔(毫秒) */ /** emit 方法节流写库间隔(毫秒) */
@@ -234,10 +233,30 @@ function _getCslProxyChannel(domain: string): BroadcastChannel {
// ============ IndexedDB 操作 ============ // ============ IndexedDB 操作 ============
/** 打开/创建 IndexedDB 数据库,按 domain 动态创建 ObjectStore */ /** 数据库连接缓存(避免重复打开和版本冲突) */
const _dbCache = new Map<string, Promise<IDBDatabase>>()
/** 打开/创建 IndexedDB 数据库,按 domain 动态创建 ObjectStore,带连接缓存防并发冲突 */
function openDB(storeName: string): Promise<IDBDatabase> { function openDB(storeName: string): Promise<IDBDatabase> {
return new Promise((resolve, reject) => { // 如果已有进行中或已完成的连接,直接复用
const request = indexedDB.open(DB_NAME, DB_VERSION) if (_dbCache.has(storeName)) {
return _dbCache.get(storeName)!.then(db => {
// 检查连接是否还有效(可能被 close 了)
try {
// 尝试创建事务验证连接有效性
if (db.objectStoreNames.contains(storeName)) {
return db
}
} catch {
// 连接已关闭,清除缓存重新打开
_dbCache.delete(storeName)
}
return openDB(storeName)
})
}
const promise = new Promise<IDBDatabase>((resolve, reject) => {
const request = indexedDB.open(DB_NAME)
request.onupgradeneeded = () => { request.onupgradeneeded = () => {
const db = request.result const db = request.result
if (!db.objectStoreNames.contains(storeName)) { if (!db.objectStoreNames.contains(storeName)) {
@@ -247,9 +266,10 @@ function openDB(storeName: string): Promise<IDBDatabase> {
} }
request.onsuccess = () => { request.onsuccess = () => {
const db = request.result const db = request.result
// 如果 store 不存在(版本没升级的情况),关闭后升版本重建
if (!db.objectStoreNames.contains(storeName)) { if (!db.objectStoreNames.contains(storeName)) {
// store 不存在,需要升版本。关闭当前连接再重开
db.close() db.close()
_dbCache.delete(storeName)
const version = db.version + 1 const version = db.version + 1
const req2 = indexedDB.open(DB_NAME, version) const req2 = indexedDB.open(DB_NAME, version)
req2.onupgradeneeded = () => { req2.onupgradeneeded = () => {
@@ -260,37 +280,60 @@ function openDB(storeName: string): Promise<IDBDatabase> {
} }
} }
req2.onsuccess = () => resolve(req2.result) req2.onsuccess = () => resolve(req2.result)
req2.onerror = () => reject(req2.error) req2.onerror = () => { _dbCache.delete(storeName); reject(req2.error) }
req2.onblocked = () => {
// 其他标签页占用数据库导致升级被阻塞,超时后放弃
console.warn('[ChannelBridge] IndexedDB upgrade blocked, retrying...')
_dbCache.delete(storeName)
reject(new Error('IndexedDB upgrade blocked'))
}
} else { } else {
resolve(db) resolve(db)
} }
} }
request.onerror = () => reject(request.error) request.onerror = () => { _dbCache.delete(storeName); reject(request.error) }
request.onblocked = () => {
console.warn('[ChannelBridge] IndexedDB open blocked')
_dbCache.delete(storeName)
reject(new Error('IndexedDB open blocked'))
}
}) })
_dbCache.set(storeName, promise)
return promise
} }
/** 写入或更新一条记录到 IndexedDB */ /** 写入或更新一条记录到 IndexedDB */
async function dbPut(storeName: string, record: DBRecord): Promise<void> { async function dbPut(storeName: string, record: DBRecord): Promise<void> {
const db = await openDB(storeName) try {
return new Promise((resolve, reject) => { const db = await openDB(storeName)
const tx = db.transaction(storeName, 'readwrite') return new Promise((resolve, reject) => {
const store = tx.objectStore(storeName) const tx = db.transaction(storeName, 'readwrite')
store.put(record) const store = tx.objectStore(storeName)
tx.oncomplete = () => { db.close(); resolve() } store.put(record)
tx.onerror = () => { db.close(); reject(tx.error) } tx.oncomplete = () => resolve()
}) tx.onerror = () => reject(tx.error)
})
} catch (err) {
console.warn('[ChannelBridge] dbPut failed:', err)
}
} }
/** 从 IndexedDB 读取一条记录 */ /** 从 IndexedDB 读取一条记录 */
async function dbGet(storeName: string, name: string): Promise<DBRecord | null> { async function dbGet(storeName: string, name: string): Promise<DBRecord | null> {
const db = await openDB(storeName) try {
return new Promise((resolve, reject) => { const db = await openDB(storeName)
const tx = db.transaction(storeName, 'readonly') return new Promise((resolve, reject) => {
const store = tx.objectStore(storeName) const tx = db.transaction(storeName, 'readonly')
const req = store.get(name) const store = tx.objectStore(storeName)
req.onsuccess = () => { db.close(); resolve(req.result || null) } const req = store.get(name)
req.onerror = () => { db.close(); reject(req.error) } req.onsuccess = () => resolve(req.result || null)
}) req.onerror = () => reject(req.error)
})
} catch (err) {
console.warn('[ChannelBridge] dbGet failed:', err)
return null
}
} }
// ============ 核心:创建通信桥接实例 ============ // ============ 核心:创建通信桥接实例 ============
@@ -498,19 +541,23 @@ export function createChannelBridge(options: ChannelBridgeOptions) {
} }
// 默认模式:IndexedDB // 默认模式:IndexedDB
// 先尝试获取 createTime(从暂存或数据库 // 先尝试获取 createTime(从暂存或内存缓存
let createTime: string let createTime: string
const pending = emitPending.get(key) const pending = emitPending.get(key)
if (pending) { if (pending) {
createTime = pending.createTime createTime = pending.createTime
} else { } else {
const existing = await dbGet(targetDomain, name) // 只在首次查库获取 createTime,失败就用当前时间(不阻塞后续 emit)
let existing: DBRecord | null = null
try {
existing = await dbGet(targetDomain, name)
} catch {}
createTime = existing?.createTime || now createTime = existing?.createTime || now
} }
const updateTime = now const updateTime = now
const record: DBRecord = { name, data, createTime, updateTime } const record: DBRecord = { name, data, createTime, updateTime }
// 暂存最新数据 // 暂存最新数据(不再 delete,保证后续 emit 总能命中缓存不走 dbGet)
emitPending.set(key, record) emitPending.set(key, record)
// BroadcastChannel 每次都广播(保证 watch 实时性) // BroadcastChannel 每次都广播(保证 watch 实时性)
@@ -524,7 +571,7 @@ export function createChannelBridge(options: ChannelBridgeOptions) {
emitTimers.delete(key) emitTimers.delete(key)
const latestRecord = emitPending.get(key) const latestRecord = emitPending.get(key)
if (latestRecord) { if (latestRecord) {
emitPending.delete(key) // 注意:不再 delete emitPending,让下次 emit 继续命中缓存
await dbPut(targetDomain, latestRecord) await dbPut(targetDomain, latestRecord)
} }
}, EMIT_THROTTLE_MS)) }, EMIT_THROTTLE_MS))
+1 -1
View File
@@ -102,7 +102,7 @@ export function exportResumeWord(element: HTMLElement, fileName: string) {
const blob = new Blob([fullHtml], { type: 'application/msword' }) const blob = new Blob([fullHtml], { type: 'application/msword' })
const link = document.createElement('a') const link = document.createElement('a')
link.href = URL.createObjectURL(blob) link.href = URL.createObjectURL(blob)
link.download = `${fileName}.doc` link.download = `${fileName}.docx`
document.body.appendChild(link) document.body.appendChild(link)
link.click() link.click()
document.body.removeChild(link) document.body.removeChild(link)
+7
View File
@@ -262,10 +262,17 @@ import { fetchResumeList } from '@/api/resume'
import { fetchMemberStatus } from '@/api/member' import { fetchMemberStatus } from '@/api/member'
import JobGoalDialog from '@/components/JobGoalDialog.vue' import JobGoalDialog from '@/components/JobGoalDialog.vue'
// ==================== & Store ==================== // ==================== & Store ====================
const router = useRouter() const router = useRouter()
const store = useStore() const store = useStore()
// _czc
const _czc: any[] = (window as any)._czc || [];
(window as any)._czc = _czc;
// siteid siteid "XXXXXXXX"
_czc.push(["_setAccount", "1281490571"]);
// ==================== sessionStorage key ==================== // ==================== sessionStorage key ====================
const STORAGE_KEY = 'agent_apply_progress_list' const STORAGE_KEY = 'agent_apply_progress_list'
const COMPLETED_STORAGE_KEY = 'agent_completed_apply_list' const COMPLETED_STORAGE_KEY = 'agent_completed_apply_list'
+11 -4
View File
@@ -13,8 +13,8 @@
<img src="@/assets/images/logo.png" alt="Offer派" class="home-nav__logo-img" /> <img src="@/assets/images/logo.png" alt="Offer派" class="home-nav__logo-img" />
</div> </div>
<div class="dflex-end aliite-c"> <div class="dflex-end aliite-c">
<!-- 未登录时显示登和立即加入按钮 --> <!-- 未登录时显示登和立即加入按钮 -->
<div v-if="!store.state.isAuthenticated" class="fs14 color-1 mr40 fw600 cursor-po" @click="handleLoginClick"></div> <div v-if="!store.state.isAuthenticated" class="fs14 color-1 mr40 fw600 cursor-po" @click="handleLoginClick"></div>
<button v-if="!store.state.isAuthenticated" class="home-nav__btn" @click="router.push('/jobs')">立即加入</button> <button v-if="!store.state.isAuthenticated" class="home-nav__btn" @click="router.push('/jobs')">立即加入</button>
<!-- 已登录时显示进入平台按钮 --> <!-- 已登录时显示进入平台按钮 -->
<button v-else class="home-nav__btn" @click="router.push('/jobs')">进入平台</button> <button v-else class="home-nav__btn" @click="router.push('/jobs')">进入平台</button>
@@ -23,7 +23,7 @@
</header> </header>
<div class="home-hero__inner"> <div class="home-hero__inner">
<div class="home-hero__left"> <div class="home-hero__left">
<h1 class="home-hero__title">AI驱动的<br/><span class="dib w56"></span>一站式求职辅助平台</h1> <h1 class="home-hero__title">Offer派<br/><span class="dib"></span>收offer就是快</h1>
<p class="home-hero__desc">智能匹配职位自动填写申请量身定制简历推荐内部人脉<br/>不到1分钟统统搞定</p> <p class="home-hero__desc">智能匹配职位自动填写申请量身定制简历推荐内部人脉<br/>不到1分钟统统搞定</p>
<button class="home-hero__cta" @click="router.push('/jobs')">免费体验</button> <button class="home-hero__cta" @click="router.push('/jobs')">免费体验</button>
</div> </div>
@@ -479,6 +479,7 @@
</div> </div>
<div class="home-footer__bottom"> <div class="home-footer__bottom">
<p>©2016-2026 - 广州油梨信息科技有限公司 版权所有</p> <p>©2016-2026 - 广州油梨信息科技有限公司 版权所有</p>
<a href="https://beian.miit.gov.cn/" target="_blank" class="">粤ICP备16019697号-7</a>
</div> </div>
</footer> </footer>
@@ -506,6 +507,12 @@ const router = useRouter()
/** Vuex 状态管理实例 */ /** Vuex 状态管理实例 */
const store = useStore() const store = useStore()
// _czc
const _czc: any[] = (window as any)._czc || [];
(window as any)._czc = _czc;
// siteid siteid "XXXXXXXX"
_czc.push(["_setAccount", "1281490571"]);
/** 页面是否已向下滚动超过 20px — 用于导航栏背景切换 */ /** 页面是否已向下滚动超过 20px — 用于导航栏背景切换 */
const isScrolled = ref(false) const isScrolled = ref(false)
@@ -681,7 +688,7 @@ onMounted(() => {
store.dispatch('loadCommonData') store.dispatch('loadCommonData')
}) })
/** 点击登按钮 — 跳转到登录页面,登录成功后跳转到 jobs 页面 */ /** 点击登按钮 — 跳转到登录页面,登录成功后跳转到 jobs 页面 */
function handleLoginClick() { function handleLoginClick() {
router.push({ name: 'Login', query: { redirect: '/jobs' } }) router.push({ name: 'Login', query: { redirect: '/jobs' } })
} }
+51 -3
View File
@@ -99,7 +99,7 @@
"真没想到校招居然可以这么轻松高效!一周就收到了3个面试邀约。" "真没想到校招居然可以这么轻松高效!一周就收到了3个面试邀约。"
</p> </p>
<div class="home-mobile__quote-author"> <div class="home-mobile__quote-author">
<div class="home-mobile__quote-avatar"></div> <div class="home-mobile__quote-avatar"><img class="w45 h45 " src="@/assets/images/home/student-avatar-0.png" alt=""></div>
<div class="home-mobile__quote-info"> <div class="home-mobile__quote-info">
<span class="home-mobile__quote-name">李同学</span> <span class="home-mobile__quote-name">李同学</span>
<span class="home-mobile__quote-school">西安交通大学</span> <span class="home-mobile__quote-school">西安交通大学</span>
@@ -157,7 +157,7 @@
</div> </div>
<p class="home-mobile__dialog-qr-title">保存二维码扫码加入求职交流群</p> <p class="home-mobile__dialog-qr-title">保存二维码扫码加入求职交流群</p>
<div class="home-mobile__dialog-qr"> <div class="home-mobile__dialog-qr">
<img src="@/assets/images/home/mobile-qcCode.png" alt="二维码" class="home-mobile__dialog-qr-img" /> <img src="https://offerpie.oss-cn-guangzhou.aliyuncs.com/images/mobile-qcCode.png" alt="二维码" class="home-mobile__dialog-qr-img" />
</div> </div>
<p class="home-mobile__dialog-qr-hint">长按保存二维码获取更多求职资料公开课</p> <p class="home-mobile__dialog-qr-hint">长按保存二维码获取更多求职资料公开课</p>
<button class="home-mobile__dialog-btn" @click="showDialog = false">知道了</button> <button class="home-mobile__dialog-btn" @click="showDialog = false">知道了</button>
@@ -170,9 +170,57 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, onMounted, onUnmounted } from 'vue'
import { getDailyJobCount } from '@/utils/dailyJobCount' import { getDailyJobCount } from '@/utils/dailyJobCount'
// ==================== ====================
/**
* 确保 HomeMobile 页面不受全局 transform scale 缩放影响
* 部分浏览器中 remAdapt 插件的 recalc 在路由切换后未及时重新执行
* 导致 body 上仍残留 PC scale 样式这里在组件挂载时主动重置
*/
function resetMobileScale() {
const docEl = document.documentElement
const body = document.body
const clientWidth = docEl.clientWidth || window.innerWidth
// 1rem = / 3.90稿 390px
const mobileFontSize = clientWidth / 3.90
docEl.style.fontSize = mobileFontSize + 'px'
// scale
body.style.width = ''
body.style.height = ''
body.style.minHeight = ''
body.style.overflowY = ''
body.style.transform = ''
body.style.transformOrigin = ''
docEl.style.height = ''
docEl.style.overflow = ''
docEl.style.setProperty('--app-height', '100vh')
docEl.style.setProperty('--chat-width', '100%')
}
/** 窗口 resize 时重新执行重置 */
function onResize() {
resetMobileScale()
}
onMounted(() => {
resetMobileScale()
window.addEventListener('resize', onResize)
window.addEventListener('orientationchange', onResize)
})
onUnmounted(() => {
window.removeEventListener('resize', onResize)
window.removeEventListener('orientationchange', onResize)
})
// _czc
const _czc: any[] = (window as any)._czc || [];
(window as any)._czc = _czc;
// siteid siteid "XXXXXXXX"
_czc.push(["_setAccount", "1281490571"]);
/** 今日更新岗位数量 */ /** 今日更新岗位数量 */
const dailyJobCount = getDailyJobCount() const dailyJobCount = getDailyJobCount()
+42 -15
View File
@@ -169,6 +169,15 @@
<MemberAccessDialog v-model="showMemberAccessDialog" @open-member="showMemberDialog = true" /> <MemberAccessDialog v-model="showMemberAccessDialog" @open-member="showMemberDialog = true" />
<!-- 会员购买弹窗 --> <!-- 会员购买弹窗 -->
<MemberDialog v-model="showMemberDialog" /> <MemberDialog v-model="showMemberDialog" />
<!-- 选择投递方式弹窗 -->
<JobApplyMethodDialog
ref="applyMethodDialogRef"
v-model="showApplyMethodDialog"
:source-url="job.sourceUrl"
:job-id="jobId"
@open-member="showMemberDialog = true"
/>
<!-- 全屏加载遮罩 --> <!-- 全屏加载遮罩 -->
<FullscreenLoading :visible="fullLoading" :text="fullLoadingText" title="Nova 正在帮您努力处理~" /> <FullscreenLoading :visible="fullLoading" :text="fullLoadingText" title="Nova 正在帮您努力处理~" />
@@ -187,7 +196,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue' import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import { formatEmploymentType } from '@/stores/index' import { formatEmploymentType } from '@/stores/index'
@@ -199,16 +208,26 @@ import MemberAccessDialog from '@/components/MemberAccessDialog.vue'
import FullscreenLoading from '@/components/FullscreenLoading.vue' import FullscreenLoading from '@/components/FullscreenLoading.vue'
import MemberDialog from '@/components/MemberDialog.vue' import MemberDialog from '@/components/MemberDialog.vue'
import StepProgressOverlay from '@/components/StepProgressOverlay.vue' import StepProgressOverlay from '@/components/StepProgressOverlay.vue'
import JobApplyMethodDialog from '@/components/JobApplyMethodDialog.vue'
import { fetchJobDetail, toggleJobFavorite, removeJobFavorite, fetchSkillGap } from '@/api/jobs' import { fetchJobDetail, toggleJobFavorite, removeJobFavorite, fetchSkillGap } from '@/api/jobs'
import { fetchMemberStatus } from '@/api/member'
import type { JobDetailData, SkillGapData } from '@/api/jobs' import type { JobDetailData, SkillGapData } from '@/api/jobs'
// ==================== ==================== // ==================== ====================
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const store = useStore() const store = useStore()
// _czc
const _czc: any[] = (window as any)._czc || [];
(window as any)._czc = _czc;
// siteid siteid "XXXXXXXX"
_czc.push(["_setAccount", "1281490571"]);
// ==================== ==================== // ==================== ====================
/** 全屏加载是否显示 */ /** 全屏加载是否显示 */
const fullLoading = ref(false) const fullLoading = ref(false)
@@ -482,16 +501,20 @@ const resumeCustomJobInfo = computed(() => ({
/** 生成岗位专属简历 — 先检查会员状态,非会员弹权限拦截弹窗 */ /** 生成岗位专属简历 — 先检查会员状态,非会员弹权限拦截弹窗 */
async function handleGenerateResume() { async function handleGenerateResume() {
// // vuex store
try { let isMember = store.state.memberStatus?.isMember
const statusRes = await fetchMemberStatus() if (isMember === undefined || isMember === null) {
if (statusRes.code === '0' && statusRes.data && !statusRes.data.isMember) { try {
// await store.dispatch('loadMemberStatus')
showMemberAccessDialog.value = true isMember = store.state.memberStatus?.isMember
return } catch {
//
} }
} catch { }
// if (!isMember) {
//
showMemberAccessDialog.value = true
return
} }
// //
@@ -573,10 +596,14 @@ async function toggleFavorite() {
} }
} }
/** 去投递 — 跳转到来源链接 */ /** 去投递 — 打开选择投递方式弹窗 */
const showApplyMethodDialog = ref(false)
const applyMethodDialogRef = ref<InstanceType<typeof JobApplyMethodDialog> | null>(null)
function handleApply() { function handleApply() {
if (job.sourceUrl) { showApplyMethodDialog.value = true
window.open(job.sourceUrl, '_blank') nextTick(() => {
} applyMethodDialogRef.value?.open()
})
} }
</script> </script>
+901 -447
View File
File diff suppressed because it is too large Load Diff
+21 -4
View File
@@ -60,7 +60,7 @@
<input v-model="phone" type="tel" class="login-view__phone-input" placeholder="请输入手机号码" maxlength="11" /> <input v-model="phone" type="tel" class="login-view__phone-input" placeholder="请输入手机号码" maxlength="11" />
</div> </div>
<!-- 发送验证码按钮 --> <!-- 发送验证码按钮 -->
<button class="login-view__send-btn" :disabled="!canSend" @click="handleSendCode">发送验证码</button> <button class="login-view__send-btn " :disabled="!canSend" @click="handleSendCode">发送验证码</button>
</template> </template>
<!-- 步骤二输入验证码登录 --> <!-- 步骤二输入验证码登录 -->
@@ -76,7 +76,7 @@
<span v-else-if="idx === otpValue.length && !isLoggingIn" class="login-view__otp-cursor"></span> <span v-else-if="idx === otpValue.length && !isLoggingIn" class="login-view__otp-cursor"></span>
</div> </div>
</div> </div>
<p v-if="smsStatusMsg" class="login-view__sms-status" :class="{ 'login-view__sms-status--error': smsStatusIsError }">{{ smsStatusMsg }}</p> <p v-if="smsStatusMsg" class="login-view__sms-status tal" :class="{ 'login-view__sms-status--error': smsStatusIsError }">{{ smsStatusMsg }}</p>
<button class="login-view__status-btn" :disabled="isLoggingIn || countdown > 0" @click="handleResendCode"> <button class="login-view__status-btn" :disabled="isLoggingIn || countdown > 0" @click="handleResendCode">
<template v-if="isLoggingIn"><span class="login-view__spinner"></span><span>登录中</span></template> <template v-if="isLoggingIn"><span class="login-view__spinner"></span><span>登录中</span></template>
<template v-else-if="countdown > 0">{{ countdown }} 秒后可继续发送</template> <template v-else-if="countdown > 0">{{ countdown }} 秒后可继续发送</template>
@@ -291,6 +291,13 @@ const store = useStore()
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
// _czc
const _czc: any[] = (window as any)._czc || [];
(window as any)._czc = _czc;
// siteid siteid "XXXXXXXX"
_czc.push(["_setAccount", "1281490571"]);
// ==================== ==================== // ==================== ====================
/** 舞台引用 */ /** 舞台引用 */
const stageRef = ref<HTMLDivElement | null>(null) const stageRef = ref<HTMLDivElement | null>(null)
@@ -506,7 +513,9 @@ async function handleLogin() {
try { try {
const res = await smsLogin(phone.value, otpValue.value) const res = await smsLogin(phone.value, otpValue.value)
if (res.code !== '0') { if (res.code !== '0') {
ElMessage.error('登录失败请核对验证码') //
smsStatusMsg.value = '验证码有误,请重新输入'
smsStatusIsError.value = true
otpValue.value = '' otpValue.value = ''
isLoggingIn.value = false isLoggingIn.value = false
nextTick(() => focusOtpInput()) nextTick(() => focusOtpInput())
@@ -539,7 +548,8 @@ async function handleLogin() {
// //
router.replace(loginRedirect) router.replace(loginRedirect)
} catch { } catch {
ElMessage.error('登录失败请核对验证码') smsStatusMsg.value = '验证码有误,请重新输入'
smsStatusIsError.value = true
otpValue.value = '' otpValue.value = ''
isLoggingIn.value = false isLoggingIn.value = false
nextTick(() => focusOtpInput()) nextTick(() => focusOtpInput())
@@ -931,6 +941,13 @@ function handleVisibilityChange() {
/** 挂载时初始化动画 */ /** 挂载时初始化动画 */
onMounted(() => { onMounted(() => {
// resumeUpload=1
if (route.query.resumeUpload === '1') {
step.value = 3
resumeState.value = 'upload'
loginRedirect = (route.query.redirect as string) || '/jobs'
}
// //
if (stageRef.value) { if (stageRef.value) {
stageRef.value.style.backgroundImage = `url(${bgSrc})` stageRef.value.style.backgroundImage = `url(${bgSrc})`
+7 -2
View File
@@ -12,7 +12,6 @@
<!-- <span class="mentor-page__title-icon"></span>--> <!-- <span class="mentor-page__title-icon"></span>-->
<div class=" "> <div class=" ">
<div class="mentor-page__title dib mr10">导师推荐</div> <div class="mentor-page__title dib mr10">导师推荐</div>
<div class="mentor-page__subtitle dib">自有合作导师真实在职身份全部实名认证</div>
</div> </div>
</div> </div>
<div class="dflex-end aliite-c flex-warp"> <div class="dflex-end aliite-c flex-warp">
@@ -20,7 +19,7 @@
<div class="mentor-page__quick-tags"> <div class="mentor-page__quick-tags">
<span class="mentor-page__quick-label">推荐搜索</span> <span class="mentor-page__quick-label">推荐搜索</span>
<span <span
v-for="tag in quickSearchTags" v-for="(tag,index) in quickSearchTags"
:key="tag" :key="tag"
class="mentor-page__quick-tag" class="mentor-page__quick-tag"
@click="handleQuickSearch(tag)" @click="handleQuickSearch(tag)"
@@ -164,6 +163,12 @@ import { toOssUrl } from '@/utils/image'
const router = useRouter() const router = useRouter()
const store = useStore() const store = useStore()
// _czc
const _czc: any[] = (window as any)._czc || [];
(window as any)._czc = _czc;
// siteid siteid "XXXXXXXX"
_czc.push(["_setAccount", "1281490571"]);
/** 行业 Tab 标签列表 */ /** 行业 Tab 标签列表 */
const industryTabs = ['推荐', '互联网', '金融', '快消', '咨询', '央国企', '硬科技', '生涯规划', '名校导师', '心理咨询', '其他'] const industryTabs = ['推荐', '互联网', '金融', '快消', '咨询', '央国企', '硬科技', '生涯规划', '名校导师', '心理咨询', '其他']
+6
View File
@@ -125,6 +125,12 @@ import MentorQrCodeDialog from '@/components/MentorQrCodeDialog.vue'
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
// _czc
const _czc: any[] = (window as any)._czc || [];
(window as any)._czc = _czc;
// siteid siteid "XXXXXXXX"
_czc.push(["_setAccount", "1281490571"]);
/** 导师 ID,从路由参数获取(字符串,避免大数精度丢失) */ /** 导师 ID,从路由参数获取(字符串,避免大数精度丢失) */
const mentorId = route.params.id as string const mentorId = route.params.id as string
+131
View File
@@ -0,0 +1,131 @@
<template>
<!-- 隐私协议页面 独立页面用于外部访问 -->
<div class="privacy-policy-page">
<div class="privacy-policy-page__content">
<!-- 加载中状态 -->
<div v-if="loading" class="privacy-policy-page__loading">加载中...</div>
<!-- 协议内容渲染 -->
<div v-else class="privacy-policy-page__body" v-html="contentHtml"></div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { fetchAgreement } from '@/api/common'
// @ts-ignore
import markdownit from 'markdown-it'
/** markdown-it 实例 */
const md = markdownit({ html: true, breaks: true, linkify: true })
/** 渲染后的 HTML 内容 */
const contentHtml = ref('')
/** 加载状态 */
const loading = ref(true)
/** 隐私协议 code */
const PRIVACY_CODE = 'hf8375i8'
/** 页面加载时获取协议内容 */
onMounted(async () => {
try {
const res = await fetchAgreement(PRIVACY_CODE)
if (res.data?.content) {
contentHtml.value = md.render(res.data.content)
} else {
contentHtml.value = '<p>暂无协议内容</p>'
}
} catch {
contentHtml.value = '<p>加载失败,请稍后重试</p>'
} finally {
loading.value = false
}
})
</script>
<style lang="scss" scoped>
@use '../assets/styles/variables' as *;
/* 隐私协议页面容器 */
.privacy-policy-page {
font-size: 0.14rem;
min-height: var(--app-height, 100vh);
background: $bg-white;
padding: 1rem 0;
/* 内容区域 — 居中,12rem宽 */
&__content {
width: 12rem;
margin: 0 auto;
}
/* 加载中提示 */
&__loading {
text-align: center;
color: $text-light;
padding: 2rem 0;
}
/* 协议正文样式 */
&__body {
color: $text-dark;
line-height: 1.8;
:deep(h1) {
font-size: 0.24rem;
font-weight: 700;
margin-bottom: 0.2rem;
}
:deep(h2) {
font-size: 0.2rem;
font-weight: 600;
margin-top: 0.3rem;
margin-bottom: 0.15rem;
}
:deep(h3) {
font-size: 0.17rem;
font-weight: 600;
margin-top: 0.2rem;
margin-bottom: 0.1rem;
}
:deep(p) {
margin-bottom: 0.12rem;
}
:deep(ul), :deep(ol) {
padding-left: 0.2rem;
margin-bottom: 0.12rem;
}
:deep(li) {
margin-bottom: 0.06rem;
}
:deep(table) {
width: 100%;
border-collapse: collapse;
margin-bottom: 0.16rem;
}
:deep(th), :deep(td) {
border: 1px solid $border-color;
padding: 0.08rem 0.12rem;
text-align: left;
}
:deep(th) {
background: $bg-main;
font-weight: 600;
}
:deep(a) {
color: $accent;
text-decoration: underline;
}
}
}
</style>
+6
View File
@@ -55,6 +55,12 @@ import type { SaveEducationItem, SaveWorkItem, SaveProjectItem, SaveCompetitionI
const router = useRouter() const router = useRouter()
const store = useStore() const store = useStore()
// _czc
const _czc: any[] = (window as any)._czc || [];
(window as any)._czc = _czc;
// siteid siteid "XXXXXXXX"
_czc.push(["_setAccount", "1281490571"]);
// ==================== ==================== // ==================== ====================
/** 全屏加载是否显示 */ /** 全屏加载是否显示 */
const fullLoading = ref(false) const fullLoading = ref(false)
+6
View File
@@ -142,6 +142,12 @@ import StepProgressOverlay from '@/components/StepProgressOverlay.vue'
const router = useRouter() const router = useRouter()
// _czc
const _czc: any[] = (window as any)._czc || [];
(window as any)._czc = _czc;
// siteid siteid "XXXXXXXX"
_czc.push(["_setAccount", "1281490571"]);
// ==================== ==================== // ==================== ====================
/** 全屏加载是否显示 */ /** 全屏加载是否显示 */
const fullLoading = ref(false) const fullLoading = ref(false)
+10 -3
View File
@@ -296,7 +296,7 @@
<template v-if="expEditingId !== edu.id"> <template v-if="expEditingId !== edu.id">
<div class="resume-detail__exp-row"> <div class="resume-detail__exp-row">
<span class="resume-detail__exp-name">{{ edu.school }}</span> <span class="resume-detail__exp-name">{{ edu.school }}</span>
<span v-if="edu.major || edu.degree" class="resume-detail__exp-role">{{ edu.major }}{{ edu.degree ? '·' + edu.degree : '' }}</span> <span v-if="edu.major || edu.degree" class="resume-detail__exp-role">{{ edu.major }}{{ edu.degree ? '·' + (EDUCATION_MAP[Number(edu.degree)] || edu.degree) : '' }}</span>
<span v-if="hasDiagnosis && getIssueByRecord('education', edu.id!) && getIssueByRecord('education', edu.id!)!.status === 0" class="resume-detail__fix-tag"> <span v-if="hasDiagnosis && getIssueByRecord('education', edu.id!) && getIssueByRecord('education', edu.id!)!.status === 0" class="resume-detail__fix-tag">
<svg viewBox="0 0 16 16" class="resume-detail__fix-tag-icon"><circle cx="8" cy="8" r="7" fill="#FF8D0B"/><text x="8" y="12" text-anchor="middle" font-size="11" fill="#fff" font-weight="bold">!</text></svg> <svg viewBox="0 0 16 16" class="resume-detail__fix-tag-icon"><circle cx="8" cy="8" r="7" fill="#FF8D0B"/><text x="8" y="12" text-anchor="middle" font-size="11" fill="#fff" font-weight="bold">!</text></svg>
建议使用AI润色修复 建议使用AI润色修复
@@ -498,7 +498,7 @@
<!-- 技能 --> <!-- 技能 -->
<div ref="resumeSectionSkillsRef" class="resume-detail__card" :class="{ 'resume-detail__card-hover': editModule !== 'skills' || !showEditDrawer }"> <div ref="resumeSectionSkillsRef" class="resume-detail__card" :class="{ 'resume-detail__card-hover': editModule !== 'skills' || !showEditDrawer }">
<template v-if="editModule !== 'skills' || !showEditDrawer"> <template v-if="editModule !== 'skills' || !showEditDrawer">
<div class="resume-detail__section-header"> <div class="resume-detail__section-header pl0">
<h3 class="resume-detail__section-title">技能</h3> <h3 class="resume-detail__section-title">技能</h3>
<!-- 编辑按钮 hover时显示 --> <!-- 编辑按钮 hover时显示 -->
<button class="resume-detail__edit-btn-inline" @click="openEditDrawer('skills')" aria-label="编辑技能"> <button class="resume-detail__edit-btn-inline" @click="openEditDrawer('skills')" aria-label="编辑技能">
@@ -529,7 +529,7 @@
<!-- 证书 --> <!-- 证书 -->
<div ref="resumeSectionCertificateRef" class="resume-detail__card" :class="{ 'resume-detail__card-hover': editModule !== 'certificate' || !showEditDrawer }"> <div ref="resumeSectionCertificateRef" class="resume-detail__card" :class="{ 'resume-detail__card-hover': editModule !== 'certificate' || !showEditDrawer }">
<template v-if="editModule !== 'certificate' || !showEditDrawer"> <template v-if="editModule !== 'certificate' || !showEditDrawer">
<div class="resume-detail__section-header"> <div class="resume-detail__section-header pl0">
<h3 class="resume-detail__section-title">证书</h3> <h3 class="resume-detail__section-title">证书</h3>
<!-- 编辑按钮 hover时显示 --> <!-- 编辑按钮 hover时显示 -->
<button class="resume-detail__edit-btn-inline" @click="openEditDrawer('certificate')" aria-label="编辑证书"> <button class="resume-detail__edit-btn-inline" @click="openEditDrawer('certificate')" aria-label="编辑证书">
@@ -633,12 +633,19 @@ import {
} from '@/api/resume' } from '@/api/resume'
import {ArrowLeft, EditPen, Plus, DeleteFilled, ChatLineRound} from "@element-plus/icons-vue"; import {ArrowLeft, EditPen, Plus, DeleteFilled, ChatLineRound} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { EDUCATION_MAP } from '@/stores/index'
import FullscreenLoading from '@/components/FullscreenLoading.vue' import FullscreenLoading from '@/components/FullscreenLoading.vue'
import StepProgressOverlay from '@/components/StepProgressOverlay.vue' import StepProgressOverlay from '@/components/StepProgressOverlay.vue'
// ==================== Store ==================== // ==================== Store ====================
const store = useStore() const store = useStore()
// _czc
const _czc: any[] = (window as any)._czc || [];
(window as any)._czc = _czc;
// siteid siteid "XXXXXXXX"
_czc.push(["_setAccount", "1281490571"]);
// ==================== Tab ==================== // ==================== Tab ====================
/** 简历详情 Tab 导航列表 */ /** 简历详情 Tab 导航列表 */
+863
View File
@@ -0,0 +1,863 @@
<template>
<!-- 登录页面 左右分栏布局包含登录和简历上传流程 -->
<div class="login-view">
<!-- ==================== 左侧视觉动画面板所有阶段共用 ==================== -->
<section class="login-visual" ref="loginVisualRef" aria-label="OfferPai AI job platform">
<div class="ai-hub-stage" ref="stageRef">
<!-- 标题 -->
<div class="hero-title" aria-hidden="true">
AI 驱动的-
<span class="hero-title__second-line">一站式求职辅助平台</span>
</div>
<!-- Nova 机器人核心眼睛跟踪鼠标 -->
<div class="nova-core" ref="novaCoreRef" aria-hidden="true">
<img class="nova-core-base" :src="novaCoreSrc" alt="" draggable="false" />
<img class="nova-eye nova-eye-left" ref="novaEyeLeftRef" :src="novaEyeLeftSrc" alt="" draggable="false" />
<img class="nova-eye nova-eye-right" ref="novaEyeRightRef" :src="novaEyeRightSrc" alt="" draggable="false" />
</div>
</div>
<!-- 底部 logo -->
<img class="login-jianshi-logo" :src="jianshiLogoSrc" alt="" aria-hidden="true" draggable="false" />
</section>
<!-- ==================== 右侧面板 ==================== -->
<div class="login-view__right">
<!-- ===== 登录阶段step 1手机号+密码登录===== -->
<template v-if="step === 1">
<div class="login-view__logo-row login-view__logo-row--right">
<img src="@/assets/images/logo.png" alt="">
</div>
<div class="login-view__form-wrap">
<div class="login-view__heading">
<h2 class="login-view__title">登录</h2>
<p class="login-view__subtitle">请输入手机号和密码登录</p>
</div>
<!-- 手机号输入组 -->
<div class="login-view__phone-row">
<!-- 手机图标 -->
<div class="login-view__phone-icon">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4.5" y="2" width="9" height="14" rx="1.5" stroke="#0F6B66" stroke-width="1.5"/>
<line x1="9" y1="2" x2="9" y2="3.5" stroke="#0F6B66" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</div>
<!-- 国家码标签 -->
<span class="login-view__country-label">中国 +86</span>
<!-- 下拉箭头 -->
<div class="login-view__country-chevron">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 8L10 12L14 8" stroke="#6F8586" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- 分隔线 -->
<div class="login-view__input-divider"></div>
<!-- 手机号输入框 -->
<input v-model="phone" type="tel" class="login-view__phone-input" placeholder="请输入手机号码" maxlength="11" />
</div>
<!-- 密码输入组 -->
<div class="login-view__phone-row" style="margin-top: 0.16rem;">
<!-- 密码图标 -->
<div class="login-view__phone-icon">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="8" width="10" height="8" rx="1.5" stroke="#0F6B66" stroke-width="1.5"/>
<path d="M6.5 8V5.5C6.5 4.12 7.62 3 9 3C10.38 3 11.5 4.12 11.5 5.5V8" stroke="#0F6B66" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</div>
<!-- 密码输入框 -->
<input v-model="password" type="password" class="login-view__phone-input" placeholder="请输入密码" @keyup.enter="handleSuperLogin" />
</div>
<!-- 错误提示 -->
<p v-if="loginErrorMsg" class="login-view__sms-status tal login-view__sms-status--error">{{ loginErrorMsg }}</p>
<!-- 确认登录按钮 -->
<button class="login-view__send-btn" :disabled="!canLogin || isLoggingIn" @click="handleSuperLogin">
<template v-if="isLoggingIn"><span class="login-view__spinner"></span><span>登录中</span></template>
<template v-else>确认登录</template>
</button>
<!-- 协议勾选 -->
<div class="login-view__agreement">
<div class="login-view__checkbox" :class="{ 'login-view__checkbox--checked': agreedTerms }" @click="agreedTerms = !agreedTerms">
<span v-if="agreedTerms" class="login-view__check-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="0.13rem" height="0.13rem"><path stroke="currentColor" fill="currentColor" d="M77.248 415.04a64 64 0 0 1 90.496 0l226.304 226.304L846.528 188.8a64 64 0 1 1 90.56 90.496l-543.04 543.04-316.8-316.8a64 64 0 0 1 0-90.496"></path></svg></span>
</div>
<span class="login-view__agreement-text">登录即表示同意</span>
<span class="login-view__agreement-link" @click="openAgreement('ae8065i3')">用户协议</span>
<span class="login-view__agreement-text"></span>
<span class="login-view__agreement-link" @click="openAgreement('hf8375i8')">隐私政策</span>
</div>
</div>
</template>
<!-- ===== 简历上传阶段step 3===== -->
<template v-if="step === 3">
<div class="login-view__form-wrap login-view__form-wrap--resume">
<!-- 状态1上传区域 upload-->
<template v-if="resumeState === 'upload'">
<div class="login-view__heading">
<h2 class="login-view__title">上传简历开启求职之旅</h2>
<p class="login-view__subtitle">解析后为你匹配岗位也会用于后续简历优化</p>
</div>
<!-- 拖拽上传区域 -->
<div class="login-view__upload-area" @dragover.prevent @drop.prevent="handleDrop" @click="triggerFileInput">
<div class="login-view__upload-circle">
<svg width="52" height="56" viewBox="0 0 52 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="51" height="55" rx="7.5" fill="#EAF8F7" stroke="#D6F1EF"/>
<rect x="36" width="16" height="16" rx="3" fill="#D6F1EF"/>
<rect x="13" y="21" width="26" height="4" rx="2" fill="#4FC2C9"/>
<rect x="13" y="33" width="30" height="4" rx="2" fill="#BFEAE8"/>
<rect x="13" y="45" width="20" height="4" rx="2" fill="#BFEAE8"/>
</svg>
</div>
<p class="login-view__upload-text">拖拽简历到这里或点击上传</p>
<p class="login-view__upload-hint">支持 PDF / DOC / DOCX不超过 20MB</p>
</div>
<!-- 隐藏的文件选择器 -->
<input ref="fileInputRef" type="file" accept=".pdf,.doc,.docx" class="login-view__file-input" @change="handleFileChange" />
<!-- 上传按钮 -->
<button class="login-view__upload-btn" @click="triggerFileInput">+ 上传简历</button>
<!-- <div class="tac"><span class="color-middle cursor-po fs14" @click="handleEnterDashboard">跳过稍后填写</span></div>-->
</template>
<!-- 状态2解析中 parsing -->
<template v-if="resumeState === 'parsing'">
<div class="login-view__heading m0auto">
<h2 class="login-view__title">正在解析简历</h2>
<p class="login-view__subtitle">正在识别教育背景工作经历与技能关键词</p>
</div>
<!-- 解析面板 -->
<div class="login-view__parse-panel m0auto">
<!-- 顶部进度条 -->
<div class="login-view__parse-progress-header">
<span class="login-view__parse-progress-label">解析进度</span>
<span class="login-view__parse-progress-percent">{{ parsePercent }}%</span>
</div>
<div class="login-view__parse-progress-rail">
<div class="login-view__parse-progress-fill" :style="{ width: parsePercent + '%' }"></div>
</div>
<!-- 步骤列表 -->
<div class="login-view__parse-steps">
<div v-for="(ps, idx) in parseStepList" :key="idx" class="login-view__parse-step-item">
<!-- 步骤圆圈 + 连接线 -->
<div class="login-view__parse-step-left">
<!-- 完成状态实心深色圆 -->
<div v-if="ps.status === 'done'" class="login-view__parse-dot login-view__parse-dot--done"></div>
<!-- 进行中浅色光晕 + 呼吸动画深色内圆 -->
<div v-else-if="ps.status === 'active'" class="login-view__parse-dot login-view__parse-dot--active">
<div class="login-view__parse-dot-pulse"></div>
</div>
<!-- 等待状态浅色圆 -->
<div v-else class="login-view__parse-dot login-view__parse-dot--pending"></div>
<!-- 连接线最后一项不显示 -->
<div v-if="idx < parseStepList.length - 1" class="login-view__parse-connector"></div>
</div>
<!-- 步骤文字 -->
<span class="login-view__parse-step-text" :class="{ 'login-view__parse-step-text--pending': ps.status === 'pending' }">{{ ps.label }}</span>
<!-- 步骤状态文字 -->
<span class="login-view__parse-step-state" :class="{ 'login-view__parse-step-state--done': ps.status === 'done', 'login-view__parse-step-state--active': ps.status === 'active', 'login-view__parse-step-state--pending': ps.status === 'pending' }">{{ ps.stateText }}</span>
</div>
</div>
</div>
<!-- 解析中按钮禁用状态 -->
<button class="login-view__parse-btn m0auto" disabled>解析中请稍候</button>
</template>
<!-- 状态4上传成功 success-->
<template v-if="resumeState === 'success'">
<div class="login-view__heading m0auto">
<h2 class="login-view__title">简历上传成功</h2>
<p class="login-view__subtitle">简历已完成解析进入后台继续完善与投递</p>
</div>
<!-- 成功面板 -->
<div class="login-view__success-panel m0auto">
<!-- 成功图标和标题 -->
<div class="login-view__success-header">
<div class="login-view__success-icon-bg">
<span class="login-view__success-icon-mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="0.15rem" height="0.15rem"><path stroke="currentColor" fill="currentColor" d="M77.248 415.04a64 64 0 0 1 90.496 0l226.304 226.304L846.528 188.8a64 64 0 1 1 90.56 90.496l-543.04 543.04-316.8-316.8a64 64 0 0 1 0-90.496"></path></svg></span>
</div>
<div class="login-view__success-header-text">
<span class="login-view__success-title">简历解析完成</span>
<span class="login-view__success-detail">已识别关键信息岗位匹配已准备好</span>
</div>
</div>
<!-- 成功提示项 -->
<div class="login-view__success-tips">
<div class="login-view__success-tip-item">
<span class="login-view__success-tip-dot"></span>
<span class="login-view__success-tip-text">已提取教育背景工作经历与技能</span>
</div>
<div class="login-view__success-tip-item">
<span class="login-view__success-tip-dot"></span>
<span class="login-view__success-tip-text">可进入后台查看推荐岗位并继续投递</span>
</div>
</div>
</div>
<!-- 进入后台按钮 -->
<button class="login-view__success-btn m0auto" @click="handleEnterDashboard">上传成功进入后台</button>
</template>
<!-- 状态3上传失败 failed-->
<template v-if="resumeState === 'failed'">
<div class="login-view__heading m0auto">
<h2 class="login-view__title">简历上传失败</h2>
<p class="login-view__subtitle">文件没有解析成功请检查格式后重新上传
<!-- <span class="color-accent cursor-po" @click="handleEnterDashboard">跳过稍后填写</span>-->
</p>
</div>
<!-- 失败面板 -->
<div class="login-view__failed-panel">
<!-- 失败图标和标题 -->
<div class="login-view__failed-header">
<div class="login-view__failed-icon-bg">
<span class="login-view__failed-icon-mark">!</span>
</div>
<div class="login-view__failed-header-text">
<span class="login-view__failed-title">未能读取文件内容</span>
<span class="login-view__failed-detail">可能是文件加密损坏或格式不支持</span>
</div>
</div>
<!-- 失败提示项 -->
<div class="login-view__failed-tips">
<div class="login-view__failed-tip-item">
<span class="login-view__failed-tip-dot"></span>
<span class="login-view__failed-tip-text">请上传 PDF / DOC / DOCX 格式</span>
</div>
<div class="login-view__failed-tip-item">
<span class="login-view__failed-tip-dot"></span>
<span class="login-view__failed-tip-text">文件大小不超过 20MB且未加密</span>
</div>
</div>
</div>
<!-- 重新上传按钮 -->
<button class="login-view__failed-btn" @click="handleRetryUpload">重新上传</button>
</template>
</div>
</template>
<a class="login-view__right-footer" href="https://www.jianshixingqiu.com" target="_blank">
见识星球旗下 · AI 求职产品
</a>
</div>
<!-- 协议预览弹窗 -->
<AgreementPreviewDialog v-model="showAgreementDialog" :code="agreementCode" />
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { superAdminLogin } from '@/api/auth'
import { fetchProfile, syncProfileFromResume } from '@/api/profile'
import { uploadResume } from '@/utils/aiRequest'
import { fetchJobIntention, saveJobIntention } from '@/api/jobs'
import AgreementPreviewDialog from '@/components/tools/AgreementPreviewDialog.vue'
//
import novaCoreSrc from '@/assets/images/loging_nodes/nova_core_not_eyes.png'
import novaEyeLeftSrc from '@/assets/images/loging_nodes/nova_eye_left.png'
import novaEyeRightSrc from '@/assets/images/loging_nodes/nova_eye_right.png'
import jianshiLogoSrc from '@/assets/images/loging_nodes/logo_jianshixingqiu.png'
import bgSrc from '@/assets/images/loging_nodes/ai_hub_nodes_bj_figma.png'
//
import node01 from '@/assets/images/loging_nodes/01_jobs_total_board.png'
import node02 from '@/assets/images/loging_nodes/02_jobs_reference_deck.png'
import node03 from '@/assets/images/loging_nodes/03_jobs_match_radar.png'
import node04 from '@/assets/images/loging_nodes/04_jobs_role_chips.png'
import node05 from '@/assets/images/loging_nodes/05_jobs_daily_update.png'
import node06 from '@/assets/images/loging_nodes/06_delivery_flow_status.png'
import node07 from '@/assets/images/loging_nodes/07_delivery_page_detect.png'
import node08 from '@/assets/images/loging_nodes/08_delivery_task_queue.png'
import node09 from '@/assets/images/loging_nodes/09_delivery_submit_check.png'
import node10 from '@/assets/images/loging_nodes/10_delivery_plugin_online.png'
import node11 from '@/assets/images/loging_nodes/11_mentor_shadow_panel.png'
import node12 from '@/assets/images/loging_nodes/12_mentor_resource_pool.png'
import node13 from '@/assets/images/loging_nodes/13_mentor_field_bars.png'
import node14 from '@/assets/images/loging_nodes/14_mentor_booking_slots.png'
import node15 from '@/assets/images/loging_nodes/15_mentor_review_chip.png'
const store = useStore()
const router = useRouter()
const route = useRoute()
// _czc
const _czc: any[] = (window as any)._czc || [];
(window as any)._czc = _czc;
// siteid siteid "XXXXXXXX"
_czc.push(["_setAccount", "1281490571"]);
// ==================== ====================
/** 舞台引用 */
const stageRef = ref<HTMLDivElement | null>(null)
/** 视觉区域引用 */
const loginVisualRef = ref<HTMLElement | null>(null)
/** Nova 核心引用 */
const novaCoreRef = ref<HTMLDivElement | null>(null)
/** 左眼引用 */
const novaEyeLeftRef = ref<HTMLImageElement | null>(null)
/** 右眼引用 */
const novaEyeRightRef = ref<HTMLImageElement | null>(null)
/** 动画时间配置 */
const animTiming = { fadeMs: 1400, holdMs: 3900, stepMs: 5300, lifeMs: 6700 }
/** 波次定时器 */
let waveTimer: ReturnType<typeof setTimeout> | null = null
/** ResizeObserver 实例 */
let resizeObs: ResizeObserver | null = null
/** 眨眼定时器 */
let blinkTimer: ReturnType<typeof setTimeout> | null = null
/** 空闲注视定时器 */
let idleLookTimer: ReturnType<typeof setTimeout> | null = null
/** 指针事件引用(用于卸载时清理) */
let handlePointerMove: (e: PointerEvent) => void = () => {}
let handlePointerLeave: () => void = () => {}
/** 节点批次数据 */
const nodeBatches = [
[
{ src: node01, x: 53, y: 358, w: 226, h: 134 },
{ src: node02, x: 418, y: 182, w: 236, h: 128 },
{ src: node03, x: 696, y: 397, w: 208, h: 136 },
{ src: node04, x: 263, y: 700, w: 264, h: 116 },
{ src: node05, x: 630, y: 655, w: 214, h: 76 }
],
[
{ src: node06, x: 344, y: 168, w: 306, h: 126 },
{ src: node07, x: 39, y: 478, w: 226, h: 136 },
{ src: node08, x: 618, y: 638, w: 214, h: 166 },
{ src: node09, x: 274, y: 720, w: 240, h: 122 },
{ src: node10, x: 697, y: 443, w: 230, h: 76 }
],
[
{ src: node11, x: 372, y: 191, w: 232, h: 124 },
{ src: node12, x: 45, y: 395, w: 244, h: 140 },
{ src: node13, x: 688, y: 370, w: 214, h: 134 },
{ src: node14, x: 400, y: 707, w: 256, h: 124 },
{ src: node15, x: 688, y: 581, w: 222, h: 84 }
]
]
// ==================== ====================
/** 当前步骤:1=手机号+密码登录 3=上传简历 */
const step = ref(1)
// ==================== ====================
/** 手机号 */
const phone = ref('')
/** 密码 */
const password = ref('')
/** 是否已勾选协议 */
const agreedTerms = ref(false)
/** 是否正在调用登录接口 */
const isLoggingIn = ref(false)
/** 登录错误提示 */
const loginErrorMsg = ref('')
/** 协议弹窗状态 */
const showAgreementDialog = ref(false)
const agreementCode = ref('')
/** 登录成功后的跳转路径(缓存) */
let loginRedirect = '/'
/** 登录按钮是否可用 */
const canLogin = computed(() => phone.value.length === 11 && password.value.length > 0 && agreedTerms.value)
// ==================== ====================
/** 简历上传子状态:upload=上传区域 parsing=解析中 failed=失败 success=成功 */
const resumeState = ref<'upload' | 'parsing' | 'failed' | 'success'>('upload')
/** 解析文字轮换定时器 */
let parsingTimer: ReturnType<typeof setInterval> | null = null
/** 文件选择器引用 */
const fileInputRef = ref<HTMLInputElement | null>(null)
/** 进度条百分比 */
const parsePercent = ref(0)
/** 进度条动画定时器 */
let progressTimer: ReturnType<typeof setInterval> | null = null
/** 接口是否已返回成功 */
let uploadDone = false
/** 解析步骤定义 */
interface ParseStep {
label: string
status: 'pending' | 'active' | 'done'
stateText: string
}
/** 4个解析步骤 */
const parseStepList = ref<ParseStep[]>([
{ label: '教育背景解析...', status: 'pending', stateText: '等待' },
{ label: '工作经历解析...', status: 'pending', stateText: '等待' },
{ label: '技能特长解析...', status: 'pending', stateText: '等待' },
{ label: '个人资料最终确认', status: 'pending', stateText: '等待' }
])
/** 每个步骤的时间分配(毫秒),总模拟时间约8秒 */
const stepDurations = [2000, 2000, 2000, 2000]
// ==================== ====================
/** 打开协议预览 */
function openAgreement(code: string) {
agreementCode.value = code
showAgreementDialog.value = true
}
/** 超级管理员登录 */
async function handleSuperLogin() {
if (!phone.value || !password.value) { ElMessage.warning('请输入手机号和密码'); return }
if (!agreedTerms.value) { ElMessage.warning('请先同意用户协议与隐私政策'); return }
isLoggingIn.value = true
loginErrorMsg.value = ''
try {
const res = await superAdminLogin(phone.value, password.value)
if (res.code !== '0') {
loginErrorMsg.value = res.msg || '登录失败,请检查手机号和密码'
isLoggingIn.value = false
return
}
//
ElMessage.success(`欢迎回来,${res.data?.nick || ''}`)
store.commit('SET_AUTHENTICATED', true)
//
loginRedirect = (route.query.redirect as string) || '/'
//
try {
const profileRes = await fetchProfile()
if (profileRes.code === '0' && (!profileRes.data || profileRes.data === null)) {
//
step.value = 3
resumeState.value = 'upload'
isLoggingIn.value = false
return
}
} catch {
//
}
//
router.replace(loginRedirect)
} catch (err: any) {
loginErrorMsg.value = err?.response?.data?.msg || '登录失败,请稍后再试'
isLoggingIn.value = false
}
}
// ==================== ====================
/** 触发文件选择 */
function triggerFileInput() {
fileInputRef.value?.click()
}
/** 文件选择器 change 事件 */
function handleFileChange(e: Event) {
const input = e.target as HTMLInputElement
if (input.files && input.files[0]) {
startUpload(input.files[0])
}
}
/** 拖放上传 */
function handleDrop(e: DragEvent) {
const file = e.dataTransfer?.files[0]
if (file) { startUpload(file) }
}
/** 重新上传 */
function handleRetryUpload() {
resumeState.value = 'upload'
}
/** 进入后台(状态4按钮) */
function handleEnterDashboard() {
router.replace(loginRedirect)
}
/** 开始上传并解析简历 */
async function startUpload(file: File) {
//
const validTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']
if (!validTypes.includes(file.type)) {
ElMessage.warning('请上传 PDF / DOC / DOCX 格式文件')
return
}
if (file.size > 20 * 1024 * 1024) {
ElMessage.warning('文件大小不能超过 20MB')
return
}
//
resumeState.value = 'parsing'
uploadDone = false
parsePercent.value = 0
parseStepList.value = [
{ label: '教育背景解析...', status: 'pending', stateText: '等待' },
{ label: '工作经历解析...', status: 'pending', stateText: '等待' },
{ label: '技能特长解析...', status: 'pending', stateText: '等待' },
{ label: '个人资料最终确认', status: 'pending', stateText: '等待' }
]
startParsingAnimation()
try {
const res = await uploadResume(file)
if (res.code === 0 && res.data?.resumeId) {
//
await syncProfileFromResume(String(res.data.resumeId))
// 1AI
await new Promise(resolve => setTimeout(resolve, 1000))
const intentionRes = await fetchJobIntention()
if (intentionRes.code === '0' && intentionRes.data) {
const intention = intentionRes.data
// aiCategoryIds categoryIds
if (intention.aiCategoryIds && intention.aiCategoryIds.length) {
intention.categoryIds = intention.aiCategoryIds.map(Number)
await saveJobIntention(intention)
}
}
//
uploadDone = true
// success
finishParsingAnimation()
} else {
//
stopParsingAnimation()
resumeState.value = 'failed'
}
} catch {
stopParsingAnimation()
resumeState.value = 'failed'
}
}
/** 开始解析步骤动画(模拟4步进度) */
function startParsingAnimation() {
let currentStep = 0
const totalSteps = parseStepList.value.length
/** 每个步骤对应的进度百分比段 */
const stepPercents = [25, 50, 75, 95]
//
parseStepList.value[0].status = 'active'
parseStepList.value[0].stateText = '进行中'
//
let targetPercent = stepPercents[0]
const startTime = Date.now()
let lastStepTime = startTime
progressTimer = setInterval(() => {
const elapsed = Date.now() - lastStepTime
const stepDuration = stepDurations[currentStep] || 2000
if (elapsed >= stepDuration && currentStep < totalSteps - 1) {
//
parseStepList.value[currentStep].status = 'done'
parseStepList.value[currentStep].stateText = '完成'
currentStep++
//
parseStepList.value[currentStep].status = 'active'
parseStepList.value[currentStep].stateText = '进行中'
targetPercent = stepPercents[currentStep]
lastStepTime = Date.now()
} else if (currentStep >= totalSteps - 1 && elapsed >= stepDuration) {
//
if (uploadDone) {
//
parseStepList.value[currentStep].status = 'done'
parseStepList.value[currentStep].stateText = '完成'
if (progressTimer) { clearInterval(progressTimer); progressTimer = null }
// 95-99100
const finalPercent = Math.floor(95 + Math.random() * 4)
parsePercent.value = finalPercent
setTimeout(() => {
parsePercent.value = 100
setTimeout(() => { resumeState.value = 'success' }, 600)
}, 1000)
return
}
//
parsePercent.value = Math.min(parsePercent.value + 0.1, 94)
return
}
//
const progress = Math.min(elapsed / stepDuration, 1)
const prevPercent = currentStep > 0 ? stepPercents[currentStep - 1] : 0
parsePercent.value = Math.floor(prevPercent + (targetPercent - prevPercent) * progress)
}, 50)
}
/** 接口返回后完成动画 */
function finishParsingAnimation() {
// uploadDone progressTimer
//
if (!progressTimer) {
const lastIdx = parseStepList.value.length - 1
parseStepList.value[lastIdx].status = 'done'
parseStepList.value[lastIdx].stateText = '完成'
const finalPercent = Math.floor(95 + Math.random() * 4)
parsePercent.value = finalPercent
setTimeout(() => {
parsePercent.value = 100
setTimeout(() => { resumeState.value = 'success' }, 600)
}, 1000)
}
}
/** 停止解析动画(失败时调用) */
function stopParsingAnimation() {
if (progressTimer) { clearInterval(progressTimer); progressTimer = null }
if (parsingTimer) { clearInterval(parsingTimer); parsingTimer = null }
}
/** 组件卸载时清理定时器 */
onBeforeUnmount(() => {
if (parsingTimer) { clearInterval(parsingTimer) }
if (progressTimer) { clearInterval(progressTimer) }
if (waveTimer) { clearTimeout(waveTimer); waveTimer = null }
if (blinkTimer) { clearTimeout(blinkTimer); blinkTimer = null }
if (idleLookTimer) { clearTimeout(idleLookTimer); idleLookTimer = null }
if (resizeObs) { resizeObs.disconnect(); resizeObs = null }
window.removeEventListener('pointermove', handlePointerMove)
window.removeEventListener('pointerleave', handlePointerLeave)
document.removeEventListener('visibilitychange', handleVisibilityChange)
})
// ==================== ====================
/** 工具函数 — 随机数 */
function random(min: number, max: number) { return min + Math.random() * (max - min) }
/** 适配舞台缩放,使其充满视觉区域 */
function fitVisualStage() {
const stage = stageRef.value
const visual = loginVisualRef.value
if (!stage || !visual) return
const baseWidth = 1100
const baseHeight = 900
const rect = visual.getBoundingClientRect()
const scale = Math.min(rect.width / baseWidth, rect.height / baseHeight)
const offsetX = (rect.width - baseWidth * scale) / 2
const offsetY = (rect.height - baseHeight * scale) / 2
stage.style.setProperty('--stage-scale', scale.toFixed(5))
// translate 使 rem÷100
stage.style.setProperty('--stage-x', `${(offsetX / 100).toFixed(4)}rem`)
stage.style.setProperty('--stage-y', `${(offsetY / 100).toFixed(4)}rem`)
}
/** 创建一个浮动节点面板并播放动画 */
function createPanel(spec: { src: string; x: number; y: number; w: number; h: number }) {
const stage = stageRef.value
if (!stage || document.hidden) return
const img = document.createElement('img')
img.className = 'node'
img.src = spec.src
img.alt = ''
img.draggable = false
// 使 rem 1rem = 100px
img.style.setProperty('--x', `${(spec.x / 100).toFixed(4)}rem`)
img.style.setProperty('--y', `${(spec.y / 100).toFixed(4)}rem`)
img.style.setProperty('--w', `${(spec.w / 100).toFixed(4)}rem`)
img.style.setProperty('--h', `${(spec.h / 100).toFixed(4)}rem`)
img.style.setProperty('--life-ms', `${animTiming.lifeMs}ms`)
let fallbackTimer: ReturnType<typeof setTimeout> | null = null
const removePanel = () => {
if (fallbackTimer) { clearTimeout(fallbackTimer); fallbackTimer = null }
img.remove()
}
img.addEventListener('animationend', removePanel, { once: true })
stage.appendChild(img)
fallbackTimer = setTimeout(removePanel, animTiming.lifeMs + 500)
requestAnimationFrame(() => {
if (img.isConnected && !document.hidden) img.classList.add('is-running')
})
}
/** 移除所有活动节点 */
function removeActiveNodes() {
stageRef.value?.querySelectorAll('.node').forEach(n => n.remove())
}
/** 开始批次节点循环动画 */
function startNodeBatches() {
let batchIndex = 0
function spawnAndSchedule() {
if (!document.hidden) {
nodeBatches[batchIndex].forEach(createPanel)
batchIndex = (batchIndex + 1) % nodeBatches.length
}
if (waveTimer) clearTimeout(waveTimer)
waveTimer = setTimeout(() => { waveTimer = null; if (!document.hidden) spawnAndSchedule() }, animTiming.stepMs)
}
spawnAndSchedule()
}
/** 眼睛跟踪指针逻辑 */
function setupNovaEyeTracking() {
const core = novaCoreRef.value
const leftEye = novaEyeLeftRef.value
const rightEye = novaEyeRightRef.value
if (!core || !leftEye || !rightEye) return
const config = { maxH: 0.72, maxV: 0.27, deadZone: 0.025, trackSmooth: 0.14, idleSmooth: 0.055 }
const current = { lx: 0, ly: 0, rx: 0, ry: 0 }
const target = { lx: 0, ly: 0, rx: 0, ry: 0 }
let animating = false
let pointerInside = false
let eyeSmoothing = config.idleSmooth
let lastIdleAngle: number | null = null
function calcOffset(px: number, py: number, eye: HTMLElement) {
const eyeRect = eye.getBoundingClientRect()
const coreRect = core!.getBoundingClientRect()
const dx = px - (eyeRect.left + eyeRect.width / 2)
const dy = py - (eyeRect.top + eyeRect.height / 2)
const dist = Math.hypot(dx, dy)
const refSize = Math.max(coreRect.width, coreRect.height) * 0.35
const norm = refSize > 0 ? dist / refSize : 0
if (norm < config.deadZone) return { x: 0, y: 0 }
const angle = Math.atan2(dy, dx)
const t = Math.min((norm - config.deadZone) / (1 - config.deadZone), 1)
const factor = t * t * (3 - 2 * t)
return { x: Math.cos(angle) * eye.offsetWidth * config.maxH * factor, y: Math.sin(angle) * eye.offsetHeight * config.maxV * factor }
}
function applyTransforms() {
current.lx += (target.lx - current.lx) * eyeSmoothing
current.ly += (target.ly - current.ly) * eyeSmoothing
current.rx += (target.rx - current.rx) * eyeSmoothing
current.ry += (target.ry - current.ry) * eyeSmoothing
leftEye!.style.transform = `translate3d(${current.lx.toFixed(2)}px, ${current.ly.toFixed(2)}px, 0)`
rightEye!.style.transform = `translate3d(${current.rx.toFixed(2)}px, ${current.ry.toFixed(2)}px, 0)`
const delta = Math.abs(target.lx - current.lx) + Math.abs(target.ly - current.ly) + Math.abs(target.rx - current.rx) + Math.abs(target.ry - current.ry)
if (delta > 0.01) { requestAnimationFrame(applyTransforms) } else { animating = false }
}
function setTargets(lx: number, ly: number, rx = lx, ry = ly) {
target.lx = lx; target.ly = ly; target.rx = rx; target.ry = ry
if (!animating) { animating = true; requestAnimationFrame(applyTransforms) }
}
function blink() {
leftEye!.classList.add('is-blinking')
rightEye!.classList.add('is-blinking')
setTimeout(() => { leftEye!.classList.remove('is-blinking'); rightEye!.classList.remove('is-blinking') }, 200)
}
function setIdleLook() {
eyeSmoothing = config.idleSmooth
const maxX = Math.min(leftEye!.offsetWidth, rightEye!.offsetWidth) * 0.43
const maxY = Math.min(leftEye!.offsetHeight, rightEye!.offsetHeight) * 0.18
let angle = random(0, Math.PI * 2)
if (lastIdleAngle !== null) {
for (let i = 0; i < 8; i++) {
const diff = Math.abs(Math.atan2(Math.sin(angle - lastIdleAngle), Math.cos(angle - lastIdleAngle)))
if (diff > 0.72) break
angle = random(0, Math.PI * 2)
}
}
lastIdleAngle = angle
const x = Math.cos(angle) * maxX * random(0.92, 1)
const y = Math.sin(angle) * maxY * random(0.92, 1)
setTargets(x, y)
}
function scheduleIdleLook(delay = random(900, 2300)) {
if (idleLookTimer) clearTimeout(idleLookTimer)
idleLookTimer = setTimeout(() => {
idleLookTimer = null
if (!pointerInside && !document.hidden) {
setIdleLook()
if (Math.random() < 0.34) blink()
scheduleIdleLook(random(1400, 2200))
}
}, delay)
}
function scheduleBlink() {
blinkTimer = setTimeout(() => { blink(); scheduleBlink() }, 2400 + Math.random() * 4600)
}
//
handlePointerMove = (e: PointerEvent) => {
const visual = loginVisualRef.value
if (!visual) return
const rect = visual.getBoundingClientRect()
const inside = e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom
if (inside) {
pointerInside = true
eyeSmoothing = config.trackSmooth
if (idleLookTimer) { clearTimeout(idleLookTimer); idleLookTimer = null }
const lo = calcOffset(e.clientX, e.clientY, leftEye!)
const ro = calcOffset(e.clientX, e.clientY, rightEye!)
setTargets(lo.x, lo.y, ro.x, ro.y)
} else if (pointerInside) {
pointerInside = false
eyeSmoothing = config.idleSmooth
setTargets(0, 0)
scheduleIdleLook(650)
}
}
handlePointerLeave = () => {
pointerInside = false
eyeSmoothing = config.idleSmooth
setTargets(0, 0)
scheduleIdleLook(650)
}
window.addEventListener('pointermove', handlePointerMove, { passive: true } as any)
window.addEventListener('pointerleave', handlePointerLeave, { passive: true } as any)
scheduleBlink()
scheduleIdleLook(850)
}
/** 页面可见性切换处理 */
function handleVisibilityChange() {
if (document.hidden) {
if (waveTimer) { clearTimeout(waveTimer); waveTimer = null }
removeActiveNodes()
} else {
removeActiveNodes()
startNodeBatches()
}
}
/** 挂载时初始化动画 */
onMounted(() => {
// resumeUpload=1
if (route.query.resumeUpload === '1') {
step.value = 3
resumeState.value = 'upload'
loginRedirect = (route.query.redirect as string) || '/jobs'
}
//
if (stageRef.value) {
stageRef.value.style.backgroundImage = `url(${bgSrc})`
}
fitVisualStage()
//
if (loginVisualRef.value && 'ResizeObserver' in window) {
resizeObs = new ResizeObserver(fitVisualStage)
resizeObs.observe(loginVisualRef.value)
}
//
setupNovaEyeTracking()
//
startNodeBatches()
//
document.addEventListener('visibilitychange', handleVisibilityChange)
})
</script>