From 1fa15e84aeb3ae2409c573bf242c7204b0011029 Mon Sep 17 00:00:00 2001 From: dzq Date: Tue, 9 Dec 2025 16:01:24 +0800 Subject: [PATCH] =?UTF-8?q?feat(api/user):=20=E6=B7=BB=E5=8A=A0=E5=BE=AE?= =?UTF-8?q?=E4=BF=A1=E5=B0=8F=E7=A8=8B=E5=BA=8F=E7=94=A8=E6=88=B7=E7=BB=91?= =?UTF-8?q?=E5=AE=9A=E6=8E=A5=E5=8F=A3=E5=92=8C=E7=99=BB=E5=BD=95=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加 BindWxMpUserByOpenidCommand 类型定义和 bindWxMpUserByOpenid API 接口 在个人中心页面新增汇邦云登录表单和提交逻辑 修复 API 路径前导斜杠问题 添加 wot-design-uni 组件文档 --- doc/wot-design-uni/wot-design-uni组件清单.md | 516 +++++++++++++++++++ src/api/ab98/index.ts | 19 +- src/api/ab98/types.ts | 11 + src/pages/me/index.vue | 96 +++- 4 files changed, 633 insertions(+), 9 deletions(-) create mode 100644 doc/wot-design-uni/wot-design-uni组件清单.md diff --git a/doc/wot-design-uni/wot-design-uni组件清单.md b/doc/wot-design-uni/wot-design-uni组件清单.md new file mode 100644 index 0000000..355dff1 --- /dev/null +++ b/doc/wot-design-uni/wot-design-uni组件清单.md @@ -0,0 +1,516 @@ +# wot-design-uni 组件清单 + +本文档列出了 wot-design-uni 组件库中所有可用的组件及其简介。 + +> 文档生成时间: 2025-11-17 +> 组件总数: 78 + +--- + +## 1. ActionSheet 动作面板 + +从底部弹出的动作菜单面板。 + +**文档路径**: `doc/wot-design-uni/docs/component/action-sheet.md` + +## 2. Backtop 回到顶部 + +用于返回页面顶部的操作按钮。 + +**文档路径**: `doc/wot-design-uni/docs/component/backtop.md` + +## 3. Badge 徽标 + +出现在按钮、图标旁的数字或状态标记。 + +**文档路径**: `doc/wot-design-uni/docs/component/badge.md` + +## 4. Button 按钮 + +按钮用于触发一个操作，如提交表单或打开链接。 + +**文档路径**: `doc/wot-design-uni/docs/component/button.md` + +## 5. CalendarView 日历面板组件 + +提供日历单选、多选、范围选择、周维度、月维度等功能。可以根据实际业务场景基于该组件进行封装高度定制化组件。 + +**文档路径**: `doc/wot-design-uni/docs/component/calendar-view.md` + +## 6. Calendar 日历选择器 + +提供日历单选、多选、范围选择、周维度、月维度等功能。 + +**文档路径**: `doc/wot-design-uni/docs/component/calendar.md` + +## 7. Card 卡片 + +用于展示商品的图片、价格等信息。 + +**文档路径**: `doc/wot-design-uni/docs/component/card.md` + +## 8. Cell 单元格 + +单元格为列表中的单个展示项。 + +**文档路径**: `doc/wot-design-uni/docs/component/cell.md` + +## 9. Checkbox 复选框 + +复选框用于在一组备选项中进行多选。 + +**文档路径**: `doc/wot-design-uni/docs/component/checkbox.md` + +## 10. Circle 环形进度条 + +圆环形的进度条组件，支持进度渐变动画。 + +**文档路径**: `doc/wot-design-uni/docs/component/circle.md` + +## 11. ColPicker 多列选择器 + +使用多列选择器来做级联，交互效果较好，多列选择器支持无限级选择。 + +**文档路径**: `doc/wot-design-uni/docs/component/col-picker.md` + +## 12. Collapse 折叠面板 + +将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。 + +**文档路径**: `doc/wot-design-uni/docs/component/collapse.md` + +## 13. ConfigProvider 全局配置 + +用于全局配置 Wot 组件，提供深色模式、主题定制等能力。 + +**文档路径**: `doc/wot-design-uni/docs/component/config-provider.md` + +## 14. CountDown 倒计时 + +用于实时展示倒计时数值，支持毫秒精度。 + +**文档路径**: `doc/wot-design-uni/docs/component/count-down.md` + +## 15. CountTo 数字滚动 + +数字滚动组件。 + +**文档路径**: `doc/wot-design-uni/docs/component/count-to.md` + +## 16. Curtain 幕帘 + +一般用于公告类的图片弹窗。 + +**文档路径**: `doc/wot-design-uni/docs/component/curtain.md` + +## 17. DatetimePicker 日期时间选择器 + +为 DatetimePickerView 组件的封装，在其内部构建好日期时间选项。 + +**文档路径**: `doc/wot-design-uni/docs/component/datetime-picker.md` + +## 18. DatetimePickerView 日期时间选择器视图 + +为 Picker 组件的封装，在其内部构建好日期时间选项。 + +**文档路径**: `doc/wot-design-uni/docs/component/datetime-picker-view.md` + +## 19. Divider 分割线 + +用于将内容分隔为多个区域。 + +**文档路径**: `doc/wot-design-uni/docs/component/divider.md` + +## 20. DropMenu 下拉菜单 + +向下或向上弹出的菜单列表。 + +**文档路径**: `doc/wot-design-uni/docs/component/drop-menu.md` + +## 21. Fab 悬浮按钮 + +悬浮动作按钮组件，按下可显示一组动作按钮。 + +**文档路径**: `doc/wot-design-uni/docs/component/fab.md` + +## 22. FloatingPanel 浮动面板 + +浮动在页面底部的面板，用户可以通过上下拖动面板来浏览内容，常用于地图导航。 + +**文档路径**: `doc/wot-design-uni/docs/component/floating-panel.md` + +## 23. Form 表单 + +用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型。 + +**文档路径**: `doc/wot-design-uni/docs/component/form.md` + +## 24. Gap 间隔槽 + +一般用于页面布局时代替margin或者padding;或者充当（底部）占位元素。 + +**文档路径**: `doc/wot-design-uni/docs/component/gap.md` + +## 25. Grid 宫格 + +宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。 + +**文档路径**: `doc/wot-design-uni/docs/component/grid.md` + +## 26. Icon 图标 + +基于字体的图标集。 + +**文档路径**: `doc/wot-design-uni/docs/component/icon.md` + +## 27. Img 图片 + +增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载完成、加载失败。 + +**文档路径**: `doc/wot-design-uni/docs/component/img.md` + +## 28. ImgCropper 图片裁剪 + +图片剪裁组件，用于图片裁剪，支持拖拽、缩放、旋转等操作。 + +**文档路径**: `doc/wot-design-uni/docs/component/img-cropper.md` + +## 29. IndexBar 索引栏 + +用于列表的索引分类显示和快速定位。 + +**文档路径**: `doc/wot-design-uni/docs/component/index-bar.md` + +## 30. Input 输入框 + +用户可以在文本框里输入内容。 + +**文档路径**: `doc/wot-design-uni/docs/component/input.md` + +## 31. InputNumber 计数器 + +由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。 + +**文档路径**: `doc/wot-design-uni/docs/component/input-number.md` + +## 32. Keyboard 虚拟键盘 + +虚拟数字键盘，用于输入数字、密码、身份证或车牌号等场景。 + +**文档路径**: `doc/wot-design-uni/docs/component/keyboard.md` + +## 33. Layout 布局 + +用于快速进行布局。 + +**文档路径**: `doc/wot-design-uni/docs/component/layout.md` + +## 34. Loading 加载指示器 + +加载动画，用于表示加载中的过渡状态。 + +**文档路径**: `doc/wot-design-uni/docs/component/loading.md` + +## 35. Loadmore 加载更多 + +用于在列表底部展示加载状态。 + +**文档路径**: `doc/wot-design-uni/docs/component/loadmore.md` + +## 36. MessageBox 弹框 + +弹出对话框，常用于消息提示、消息确认等，支持函数调用。 + +**文档路径**: `doc/wot-design-uni/docs/component/message-box.md` + +## 37. Navbar 导航栏 + +为页面提供导航功能，常用于页面顶部。 + +**文档路径**: `doc/wot-design-uni/docs/component/navbar.md` + +## 38. NoticeBar 通知栏 + +通知栏组件，用于在页面顶部展示通知提醒。 + +**文档路径**: `doc/wot-design-uni/docs/component/notice-bar.md` + +## 39. Notify 消息通知 + +通知类组件，用于在页面顶部展示通知信息。 + +**文档路径**: `doc/wot-design-uni/docs/component/notify.md` + +## 40. NumberKeyboard 数字键盘 + +虚拟数字键盘，用于输入数字、密码或身份证等场景（已废弃，请使用Keyboard组件）。 + +**文档路径**: `doc/wot-design-uni/docs/component/number-keyboard.md` + +## 41. Overlay 遮罩层 + +创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。 + +**文档路径**: `doc/wot-design-uni/docs/component/overlay.md` + +## 42. Pagination 分页 + +当数据量过多时，使用分页分解数据。 + +**文档路径**: `doc/wot-design-uni/docs/component/pagination.md` + +## 43. PasswordInput 密码输入框 + +带网格的输入框组件，可以用于输入密码、短信验证码等场景。 + +**文档路径**: `doc/wot-design-uni/docs/component/password-input.md` + +## 44. Picker 选择器 + +Picker 组件为 popup 和 pickerView 的组合。 + +**文档路径**: `doc/wot-design-uni/docs/component/picker.md` + +## 45. PickerView 选择器视图 + +选择器视图，用于从一组数据中选择单个或多个值。 + +**文档路径**: `doc/wot-design-uni/docs/component/picker-view.md` + +## 46. Popover 气泡 + +常用于展示提示信息。 + +**文档路径**: `doc/wot-design-uni/docs/component/popover.md` + +## 47. Popup 弹出层 + +弹出层组件，用于展示弹窗、信息提示等内容。 + +**文档路径**: `doc/wot-design-uni/docs/component/popup.md` + +## 48. Progress 进度条 + +用于展示操作的当前进度。 + +**文档路径**: `doc/wot-design-uni/docs/component/progress.md` + +## 49. Radio 单选框 + +单选框，用于在一组备选项中进行单选。 + +**文档路径**: `doc/wot-design-uni/docs/component/radio.md` + +## 50. Rate 评分 + +用于快速的评价操作，或对评价进行展示。 + +**文档路径**: `doc/wot-design-uni/docs/component/rate.md` + +## 51. Resize 监听元素尺寸变化 + +当组件包裹的文档流尺寸发生变化时，触发 resize 事件。 + +**文档路径**: `doc/wot-design-uni/docs/component/resize.md` + +## 52. RootPortal 根节点传送 + +是否从页面中脱离出来，用于解决各种 fixed 失效问题，主要用于制作弹窗、弹出层等。 + +**文档路径**: `doc/wot-design-uni/docs/component/root-portal.md` + +## 53. Search 搜索框 + +搜索框组件，支持输入框聚焦、失焦、输入、搜索、取消、清空事件。 + +**文档路径**: `doc/wot-design-uni/docs/component/search.md` + +## 54. Segmented 分段器 + +分段器用于展示多个选项并允许用户选择其中单个选项。 + +**文档路径**: `doc/wot-design-uni/docs/component/segmented.md` + +## 55. SelectPicker 单复选选择器 + +用于从一组选项中进行单选或多选。 + +**文档路径**: `doc/wot-design-uni/docs/component/select-picker.md` + +## 56. Sidebar 侧边导航 + +垂直展示的导航栏，用于在不同的内容区域之间进行切换。 + +**文档路径**: `doc/wot-design-uni/docs/component/sidebar.md` + +## 57. Signature 签名 + +用于签名场景，基于 Canvas 实现的签名组件。 + +**文档路径**: `doc/wot-design-uni/docs/component/signature.md` + +## 58. Skeleton 骨架屏 + +用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。 + +**文档路径**: `doc/wot-design-uni/docs/component/skeleton.md` + +## 59. Slider 滑块 + +支持单向滑块和双向滑块。 + +**文档路径**: `doc/wot-design-uni/docs/component/slider.md` + +## 60. SortButton 排序按钮 + +用于展示排序按钮，支持升序、降序、重置三种状态。 + +**文档路径**: `doc/wot-design-uni/docs/component/sort-button.md` + +## 61. StatusTip 缺省提示 + +一般用于兜底占位展示。 + +**文档路径**: `doc/wot-design-uni/docs/component/status-tip.md` + +## 62. Steps 步骤条 + +用于引导用户按照流程完成任务或向用户展示当前状态。 + +**文档路径**: `doc/wot-design-uni/docs/component/steps.md` + +## 63. Sticky 粘性布局 + +粘性布局组件，用于在页面滚动时将元素固定在指定位置。 + +**文档路径**: `doc/wot-design-uni/docs/component/sticky.md` + +## 64. SwipeAction 滑动操作 + +常用于单元格左右滑删除等手势操作。 + +**文档路径**: `doc/wot-design-uni/docs/component/swipe-action.md` + +## 65. Swiper 轮播 + +用于创建轮播，它支持水平和垂直方向的滑动。 + +**文档路径**: `doc/wot-design-uni/docs/component/swiper.md` + +## 66. Switch 开关 + +用来打开或关闭选项。 + +**文档路径**: `doc/wot-design-uni/docs/component/switch.md` + +## 67. Table 表格 + +用于展示多条结构类似的数据，可对数据进行排序等操作。 + +**文档路径**: `doc/wot-design-uni/docs/component/table.md` + +## 68. Tabs 标签页 + +标签页组件，用于在不同的内容区域之间进行切换。 + +**文档路径**: `doc/wot-design-uni/docs/component/tabs.md` + +## 69. Tabbar 标签栏 + +底部导航栏，用于在不同页面之间进行切换。 + +**文档路径**: `doc/wot-design-uni/docs/component/tabbar.md` + +## 70. Tag 标签 + +用于标记状态或者概括主要内容。 + +**文档路径**: `doc/wot-design-uni/docs/component/tag.md` + +## 71. Text 文本 + +文本组件，用于展示文本信息。 + +**文档路径**: `doc/wot-design-uni/docs/component/text.md` + +## 72. Textarea 文本域 + +用于输入多行文本信息。 + +**文档路径**: `doc/wot-design-uni/docs/component/textarea.md` + +## 73. Toast 轻提示 + +轻提示组件，用于消息通知、加载提示、操作结果提示等场景，支持函数式调用。 + +**文档路径**: `doc/wot-design-uni/docs/component/toast.md` + +## 74. Tooltip 文字提示 + +常用于展示提示信息。 + +**文档路径**: `doc/wot-design-uni/docs/component/tooltip.md` + +## 75. Transition 动画 + +用于在元素进入或离开时应用过渡效果。 + +**文档路径**: `doc/wot-design-uni/docs/component/transition.md` + +## 76. Upload 上传 + +图片、视频和文件上传组件。 + +**文档路径**: `doc/wot-design-uni/docs/component/upload.md` + +## 77. Watermark 水印 + +在页面或组件上添加指定的图片或文字，可用于版权保护、品牌宣传等场景。 + +**文档路径**: `doc/wot-design-uni/docs/component/watermark.md` + +## 78. useCountDown + +用于处理倒计时相关的逻辑。 + +**文档路径**: `doc/wot-design-uni/docs/component/use-count-down.md` + +--- + +## Hooks / Composables + +以下是 wot-design-uni 提供的 Hooks（组合式函数），用于在代码中便捷地调用组件功能。 + +## 79. useMessage + +用于便捷地调用 MessageBox 弹框组件。 + +**文档路径**: `doc/wot-design-uni/docs/component/use-message.md` + +## 80. useNotify + +用于便捷地调用 Notify 消息通知组件。 + +**文档路径**: `doc/wot-design-uni/docs/component/use-notify.md` + +## 81. useToast + +用于便捷地调用 Toast 轻提示组件。 + +**文档路径**: `doc/wot-design-uni/docs/component/use-toast.md` + +## 82. useUpload + +用于处理文件上传和选择相关的逻辑。 + +**文档路径**: `doc/wot-design-uni/docs/component/use-upload.md` + +--- + +## 总结 + +本文档共列出了 **82 个可用组件和工具函数**： +- **78 个 UI 组件**：涵盖基础组件、表单组件、反馈组件、展示组件、导航组件等 +- **4 个 Hooks/Composables**：提供便捷的函数式调用方式 + +更多详细信息和使用示例，请查看各组件的详细文档。 diff --git a/src/api/ab98/index.ts b/src/api/ab98/index.ts index 26cc978..c8ac57b 100644 --- a/src/api/ab98/index.ts +++ b/src/api/ab98/index.ts @@ -1,6 +1,7 @@ import { http } from "@/http/http"; import type { BindQyUserCommand, + BindWxMpUserByOpenidCommand, GetTokenParams, LoginData, LogoutResponse, @@ -13,34 +14,38 @@ import type { ab98UserDTO } from '@/api/shop/types'; /** 获取临时令牌 */ export async function getTokenApi(appName: string) { - return await http.get("/wx/login/getToken", { appName }); + return await http.get("wx/login/getToken", { appName }); } /** 获取微信登录二维码 */ export async function getWechatQrCodeApi(token: string) { - return await http.get("/wx/login/wechat/qrcode", { token }); + return await http.get("wx/login/wechat/qrcode", { token }); } /** 发送短信验证码 */ export async function sendSmsApi(token: string, tel: string) { - return await http.post("/wx/login/sendSms", { token, tel }); + return await http.post("wx/login/sendSms", { token, tel }); } /** 验证短信验证码 */ export async function verifySmsApi(params: VerifySmsParams) { - return await http.post("/wx/login/verifySms", params); + return await http.post("wx/login/verifySms", params); } /** 用户退出登录 */ export async function logoutApi(token: string) { - return await http.post("/wx/login/logout", { token }); + return await http.post("wx/login/logout", { token }); } /** ab98Token登录 */ export async function tokenLogin(token: string, userid: string, openid: string) { - return await http.get("/wx/login/tokenLogin", { token, userid, openid }); + return await http.get("wx/login/tokenLogin", { token, userid, openid }); } export async function bindQyUserApi(data: BindQyUserCommand) { - return await http.post("/wx/login/bindQyUser", data); + return await http.post("wx/login/bindQyUser", data); +} + +export async function bindWxMpUserByOpenid(data: BindWxMpUserByOpenidCommand) { + return await http.post("wx/login/bindWxMpUserByOpenid", data); } \ No newline at end of file diff --git a/src/api/ab98/types.ts b/src/api/ab98/types.ts index c27e65b..bca045c 100644 --- a/src/api/ab98/types.ts +++ b/src/api/ab98/types.ts @@ -64,4 +64,15 @@ export interface BindQyUserCommand { qyUserId: number; name: string; idNum: string; +} + +export interface BindWxMpUserByOpenidCommand { + /** 企业微信应用ID */ + corpid: string; + /** 企业微信用户ID */ + openid: string; + /** 汇邦云用户姓名 */ + name: string; + /** 汇邦云号 */ + idNum: string; } \ No newline at end of file diff --git a/src/pages/me/index.vue b/src/pages/me/index.vue index 5a0be44..849e77f 100644 --- a/src/pages/me/index.vue +++ b/src/pages/me/index.vue @@ -7,6 +7,8 @@ import { storeToRefs } from 'pinia' import { toHttpsUrl } from '@/utils' import { generateDynamicCode, getWxUserByOpenid } from '@/api/users' import { DynamicCodeResponse } from '@/api/users/types' +import { bindWxMpUserByOpenid } from '@/api/ab98' +import { BindWxMpUserByOpenidCommand } from '@/api/ab98/types' import { useToast } from 'wot-design-uni' definePage({ @@ -42,6 +44,15 @@ const dynamicCodeActionSheet = ref(false) const dynamicCodeData = ref(null) const toast = useToast() +// 汇邦云登录相关 +const hbLoginPopupVisible = ref(false) +const hbLoginForm = ref({ + corpid: wxStore.corpid, + openid: wxStore.openid, + name: '', + idNum: '' +}) + // wx参数展示弹窗 const wxParamsActionSheet = ref(false); // 连点计数器 @@ -130,6 +141,38 @@ const handleGenerateDynamicCode = async () => { toast.show('获取动态码失败') } } + +// 汇邦云登录表单提交 +const handleHbLoginSubmit = async () => { + if (!hbLoginForm.value.name || !hbLoginForm.value.idNum) { + toast.show('请填写完整信息') + return + } + + try { + // 更新 corpid 和 openid + hbLoginForm.value.corpid = wxStore.corpid + hbLoginForm.value.openid = wxStore.openid + + const res = await bindWxMpUserByOpenid(hbLoginForm.value) + if (res && res.code == 0) { + toast.show('汇邦云登录成功') + hbLoginPopupVisible.value = false + + // 重新加载用户信息 + const wxUser = await getWxUserByOpenid(wxStore.openid); + await wxStore.processUserInfo(wxUser.data, wxStore.corpid); + } else { + toast.error({ + msg: res?.msg || '汇邦云登录失败', + duration: 5000 + }) + } + } catch (error) { + console.error('汇邦云登录失败:', error) + toast.error('汇邦云登录失败') + } +}