From 92ee5c531162e8ebb74c306c77dee1f648248796 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=86=AF=E8=BE=89?= <13935151924@163.com> Date: Fri, 24 Oct 2025 11:34:11 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=81=E4=B8=9A=E6=88=91=E7=9A=84=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/企业我的页面功能说明.md | 117 ++++++++++++++ pages.json | 21 +++ pages/mine/company-info.vue | 263 +++++++++++++++++++++++++++++++ pages/mine/company-mine.vue | 218 +++++++++++++++++++++++++ pages/mine/mine.vue | 74 ++++++++- pages/test/company-mine-test.vue | 156 ++++++++++++++++++ 6 files changed, 846 insertions(+), 3 deletions(-) create mode 100644 docs/企业我的页面功能说明.md create mode 100644 pages/mine/company-info.vue create mode 100644 pages/mine/company-mine.vue create mode 100644 pages/test/company-mine-test.vue diff --git a/docs/企业我的页面功能说明.md b/docs/企业我的页面功能说明.md new file mode 100644 index 0000000..ca259c9 --- /dev/null +++ b/docs/企业我的页面功能说明.md @@ -0,0 +1,117 @@ +# 企业我的页面功能说明 + +## 功能概述 + +本功能为企业用户提供了专门的"我的"页面和企业信息展示页面,实现了根据用户类型显示不同内容的功能。 + +## 页面结构 + +### 1. 企业我的页面 (`pages/mine/company-mine.vue`) +- **功能**: 企业用户的个人中心页面 +- **特点**: + - 显示企业头像、名称和信息完整度 + - 包含服务专区(实名认证、通知与提醒) + - 提供退出登录功能 + - 点击头像区域可跳转到企业信息页面 + +### 2. 企业信息展示页面 (`pages/mine/company-info.vue`) +- **功能**: 显示详细的企业信息 +- **特点**: + - 显示企业头像编辑功能 + - 展示完整的企业信息(名称、统一社会代码、注册地点等) + - 支持编辑各项企业信息 + - 包含企业联系人和法人信息 + +### 3. 修改后的我的页面 (`pages/mine/mine.vue`) +- **功能**: 根据用户类型显示不同的内容 +- **特点**: + - 企业用户显示企业信息卡片 + - 求职者用户显示个人简历信息 + - 自动根据 `userInfo.isCompanyUser` 字段判断用户类型 + +## 用户类型判断 + +系统通过 `userInfo.isCompanyUser` 字段来判断用户类型: +- `0` = 企业用户 +- `1` = 求职者 +- `2` = 网格员 +- `3` = 政府人员 + +## 页面跳转逻辑 + +### 从我的页面跳转 +- **企业用户**: 点击头像区域 → 跳转到企业信息页面 (`/pages/mine/company-info`) +- **求职者用户**: 点击头像区域 → 跳转到简历页面 (`/packageA/pages/myResume/myResume`) + +### 企业信息页面功能 +- 点击头像 → 编辑头像(调用相册选择图片) +- 点击各项信息 → 跳转到对应的编辑页面(需要后续开发) + +## 路由配置 + +新增的路由配置: +```json +{ + "path": "pages/mine/company-mine", + "style": { + "navigationBarTitleText": "我的", + "navigationStyle": "custom" + } +}, +{ + "path": "pages/mine/company-info", + "style": { + "navigationBarTitleText": "企业信息", + "navigationStyle": "custom" + } +} +``` + +## 测试页面 + +创建了测试页面 `pages/test/company-mine-test.vue` 用于测试功能: +- 用户类型切换测试 +- 页面跳转测试 +- 用户信息显示 + +## 样式特点 + +### 企业信息卡片 +- 白色背景,圆角设计 +- 阴影效果,现代化UI +- 头像圆形显示 +- 信息完整度显示 + +### 企业信息页面 +- 清晰的信息层级 +- 可点击的编辑区域 +- 统一的视觉风格 + +## 数据流 + +1. 用户登录时设置 `userInfo.isCompanyUser` 字段 +2. 我的页面根据此字段判断显示内容 +3. 企业用户点击头像跳转到企业信息页面 +4. 企业信息页面展示详细的企业数据 + +## 后续开发建议 + +1. **编辑功能**: 为每个信息项创建对应的编辑页面 +2. **数据接口**: 连接真实的企业信息API +3. **头像上传**: 完善头像上传功能 +4. **表单验证**: 添加企业信息编辑的表单验证 +5. **权限控制**: 根据用户权限控制可编辑的字段 + +## 使用方法 + +1. 在测试页面切换用户类型为企业用户 +2. 访问我的页面,查看企业信息卡片 +3. 点击头像区域跳转到企业信息页面 +4. 在企业信息页面查看详细的企业信息 + +## 注意事项 + +- 确保用户类型字段正确设置 +- 企业信息数据需要从后端API获取 +- 头像上传功能需要配置服务器接口 +- 编辑页面需要根据实际需求进行开发 diff --git a/pages.json b/pages.json index 40e3e7c..8d809b5 100644 --- a/pages.json +++ b/pages.json @@ -96,6 +96,13 @@ "navigationStyle": "custom" } }, + { + "path": "pages/test/company-mine-test", + "style": { + "navigationBarTitleText": "企业我的页面测试", + "navigationStyle": "custom" + } + }, { "path": "pages/job/publishJob", "style": { @@ -135,6 +142,20 @@ "navigationBarTitleText": "", "navigationStyle": "custom" } + }, + { + "path": "pages/mine/company-mine", + "style": { + "navigationBarTitleText": "我的", + "navigationStyle": "custom" + } + }, + { + "path": "pages/mine/company-info", + "style": { + "navigationBarTitleText": "企业信息", + "navigationStyle": "custom" + } } ], diff --git a/pages/mine/company-info.vue b/pages/mine/company-info.vue new file mode 100644 index 0000000..9a7aea4 --- /dev/null +++ b/pages/mine/company-info.vue @@ -0,0 +1,263 @@ + + + + + diff --git a/pages/mine/company-mine.vue b/pages/mine/company-mine.vue new file mode 100644 index 0000000..7d21872 --- /dev/null +++ b/pages/mine/company-mine.vue @@ -0,0 +1,218 @@ + + + + + diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue index 677a3e4..48d057a 100644 --- a/pages/mine/mine.vue +++ b/pages/mine/mine.vue @@ -2,7 +2,22 @@ - + + + + + + + {{ companyInfo.name || '科里喀什分公司' }} + 信息完整度 {{ companyInfo.completeness || '100%' }} + + + + + + + + @@ -114,6 +129,13 @@ import { tabbarManager } from '@/utils/tabbarManager'; const popup = ref(null); const { userInfo, Completion } = storeToRefs(useUserStore()); const counts = ref({}); + +// 企业信息数据 +const companyInfo = reactive({ + name: '科里喀什分公司', + avatar: '/static/icon/company-avatar.png', + completeness: '100%' +}); function logOut() { popup.value.open(); } @@ -140,9 +162,11 @@ function getUserstatistics() { }); } function seeDetail() { - if (userInfo.isCompanyUser) { - navTo('/packageA/pages/myResume/corporateInformation'); + if (userInfo.isCompanyUser === 0) { + // 企业用户跳转到企业信息页面 + navTo('/pages/mine/company-info'); } else { + // 求职者用户跳转到简历页面 navTo('/packageA/pages/myResume/myResume'); } } @@ -326,4 +350,48 @@ function seeDetail() { border-radius: 2rpx background: #A2A2A2; transform: rotate(45deg) + +// 企业信息卡片样式 +.company-info-card { + display: flex; + align-items: center; + padding: 30rpx; + background: #FFFFFF; + margin: 20rpx; + border-radius: 20rpx; + box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); + + .company-avatar { + width: 100rpx; + height: 100rpx; + border-radius: 50%; + overflow: hidden; + margin-right: 24rpx; + + .company-avatar-img { + width: 100%; + height: 100%; + } + } + + .company-details { + flex: 1; + + .company-name { + font-size: 36rpx; + font-weight: 600; + color: #333333; + margin-bottom: 8rpx; + } + + .company-completeness { + font-size: 28rpx; + color: #6C7282; + } + } + + .company-arrow { + margin-left: 20rpx; + } +} diff --git a/pages/test/company-mine-test.vue b/pages/test/company-mine-test.vue new file mode 100644 index 0000000..be88145 --- /dev/null +++ b/pages/test/company-mine-test.vue @@ -0,0 +1,156 @@ + + + + +