dukang/杜康好客-v3.4.18-门店体验与登录态优化.md

杜康好客 · v3.4.18 门店体验与登录态优化

2026-08-17 · mini-user 3.4.18 / h5-partner / h5-shop / API 目标：用户小程序端门店电话与套餐图体验优化；城市合伙人「暂停」账号禁止登录；门店端结算页留白对齐与「休息中能否开张核销」交互。

范围

项	交付
A. mini-user 门店座机电话脱敏	maskPhone 统一「中间四位隐藏」；门店详情已调用
B. mini-user 套餐详情图 1/5 + 自动轮播	ProductCarousel detail 变体 autoplay + 右下角 1/5 计数
C. 合伙人账号暂停禁止登录	非 ACTIVE → 登录/发码均拒，提示「该账号已暂停使用，请联系客服人员」
D. 门店端 申请提现 / 筛选栏留白对齐	WithdrawPage 左右内边距统一 --space-page
E. 门店端 休息中核销 → 是否开启营业	核销页拦截时弹「是否开启营业？」，确认即开张后继续核销
F. mini-user 门店套餐图片自适应完整显示	ProductCarousel 新增 imageFit="adaptive"（widthFix + 动态高度），门店套餐详情不再裁剪

A. mini-user 门店座机电话脱敏（中间四位隐藏）

门店对外电话 store.phone（= contactPhone ?? loginPhone，见 server/.../common/compat/v31-compat.ts 的 resolveStoreContactPhone）在门店详情以「电话: {maskPhone(...)}」展示（apps/mini-user/src/pages/store-detail/index.tsx ~L393-402）。

• 脱敏规则（座机）：区号 + 本地号前 2 位 + **** + 本地号后 2 位，隐藏本地号中间四位。
  • 0379-12345678 → 0379-12****78
  • 010-87654321 → 010-87****21
  • 无分机同理；手机号仍按 138****8000 不变。
• 实现点：apps/mini-user/src/lib/phone.ts 的 maskPhone 座机分支（当前保留末 2~4 位）→ 改为保留首 2 + 末 2、中间以 **** 替代。
• 拨号仍走 toDialablePhone（明文），不受脱敏影响。
• 无 Prisma / API 变更；仅前端 maskPhone 规则调整。

B. mini-user 套餐详情图 1/5 计数 + 自动轮播

入口：apps/mini-user/src/pages/store-package-detail/index.tsx 渲染 <ProductCarousel images={imageUrls} variant="detail" previewable />，图片来自 GET /stores/:id 的 packages[index].imageUrls（最多 20 张，由 normalizeStorePackageImageUrls 归一化）。

• 组件：apps/mini-user/src/components/ProductCarousel.tsx
  • variant='detail' 时给 <Swiper> 增加 autoplay + interval（建议 3500ms），仅 slides.length > 1 时生效（现有 circular 已满足）。
  • 右下角叠加分页计数：${activeIndex + 1}/${slides.length}（白底圆角胶囊，绝对定位于 .detail-carousel-wrap 右下角）；保留原居中圆点（dots）或改为以右下计数为主。
  • 单图（slides.length === 1）不展示计数、不开轮播。
• 图片容器 .store-package-detail-gallery 预留右下角定位锚点（如需）。
• 无 API / schema 变更。

C. 合伙人账号暂停禁止登录

• 后端 POST /partner/auth/login/sms（server/.../modules/iam/auth.service.ts 的 loginPartner ~L1063、assertPartnerAccountByPhone ~L307）：账号 status !== 'ACTIVE' 时当前抛「合伙人账号已停用」。
  • 改为抛出：该账号已暂停使用，请联系客服人员。
  • 同时覆盖发码预检 assertSmsSendAllowed（PARTNER_LOGIN 场景 ~L341）与 checkPartnerPhone，使「暂停」账号无法获取短信验证码。
• 前端 apps/h5-partner/src/pages/LoginPage.tsx：
  • formatPartnerError（~L69）：命中「已暂停 / 已停用」分支时返回 该账号已暂停使用，请联系客服人员。
  • formatWechatError（~L80）：同上，覆盖微信登录路径。
• 枚举现状：AccountStatus 仅 ACTIVE / DISABLED（schema.prisma ~L244）。本次复用 DISABLED 即视为暂停，不新增枚举，避免迁移；若后续需区分「暂停（可恢复）」与「停用（永久）」，再评估新增 SUSPENDED。
• 统一文案：该账号已暂停使用，请联系客服人员。

D. 门店端 申请提现 / 筛选栏左右留白对齐

页面：apps/h5-shop/src/pages/WithdrawPage.tsx（门店管理 / 结算提现）。

• 申请提现按钮 .shop-withdraw-btn（~L135）：当前 width:100%; margin-top:12px，置于 .shop-records-main（无左右 padding）内，贴边满宽。
• 下方筛选栏 .shop-records-filters（~L147，position: sticky; top:0）与 .shop-records-status-chips：当前左右 padding:0，chips 贴屏幕边缘。
• 同页 .shop-records-summary / .shop-records-list / .shop-records-list-head 均使用页面级 token var(--space-page) 左右内缩。
• 改动：.shop-records-filters 增加 padding: 0 var(--space-page)（sticky 背景保留）；申请提现按钮区域同样左右内缩 var(--space-page)（或其父容器加 padding: 0 var(--space-page)），使其与上下组件留白一致。仅样式调整，无逻辑 / API 变更。

E. 门店端 休息中核销 → 是否开启营业

现状：PhoneRedeemPage.tsx / RedeemConfirmPage.tsx 拉取 GET /shop/store，status !== 'OPEN' 时 storeClosed=true，核销前拦截并报「门店未营业，无法核销」（服务端 server/.../modules/redeem/redeem.service.ts 的 loadOpenStoreAccount ~L117 亦硬校验「门店未营业」）。

• 新交互：当 storeClosed（门店 PAUSED / 休息中）且用户尝试核销时，不再仅提示无法核销，而是弹确认框「是否开启营业？」：
  • 确认 → 调用 PUT /shop/store/status { status: 'OPEN' }（复用 StatusPage.tsx 的 requestToggle/confirmToggle 调用方式），成功后 setStoreClosed(false)，放开核销、继续原流程（重新拉取或直接使用已输入金额 / 券码）。
  • 取消 → 维持 storeClosed，不放开。
• 边界：门店 auditStatus !== 'APPROVED' 时 updateShopStatus 会拒绝开张（抛「门店尚在总部审核中 / 审核未通过」），前端需捕获并提示该错误，不进入误开启。
• 适用页：PhoneRedeemPage（手机号核销）、RedeemConfirmPage（扫码核销确认）；HomePage 扫码入口本身不判状态，保持现状。
• 后端无需改动（开张接口与硬校验已存在）。

关键接口 / 文件

位置	说明
apps/mini-user/src/lib/phone.ts maskPhone	座机脱敏规则改为「中间四位隐藏」
apps/mini-user/src/pages/store-detail/index.tsx	门店详情电话展示（已用 maskPhone）
apps/mini-user/src/components/ProductCarousel.tsx	detail 变体 autoplay + 右下 1/5 计数
apps/mini-user/src/pages/store-package-detail/index.tsx	套餐详情图渲染
GET /stores/:id	门店 / 套餐数据（无变更）
server/.../modules/iam/auth.service.ts loginPartner / assertPartnerAccountByPhone / assertSmsSendAllowed	合伙人登录 / 发码非 ACTIVE 抛「该账号已暂停使用，请联系客服人员」
apps/h5-partner/src/pages/LoginPage.tsx formatPartnerError / formatWechatError	暂停文案
apps/h5-shop/src/pages/WithdrawPage.tsx + styles.css .shop-records-filters / .shop-records-status-chips / .shop-withdraw-btn	左右留白对齐 --space-page
apps/h5-shop/src/pages/PhoneRedeemPage.tsx / RedeemConfirmPage.tsx	休息中弹「是否开启营业？」
apps/h5-shop/src/pages/StatusPage.tsx requestToggle / confirmToggle	复用开张调用
PUT /shop/store/status GET /shop/store	切换营业 / 读取门店（已存在）

F. mini-user 门店套餐图片自适应完整显示（不裁剪）

门店套餐详情（apps/mini-user/src/pages/store-package-detail/index.tsx）的 ProductCarousel 此前用 variant="detail" 默认 imageFit="cover"（= aspectFill），配合 .detail-carousel-wrap 的固定 aspect-ratio: 1 与 overflow:hidden，非正方形图片被裁切 → 用户反馈「图片没显示全」。

• 新增 imageFit="adaptive" 模式（仅作用于门店套餐详情）：
  • Image 改用 mode="widthFix"，按图片真实比例缩放、完整显示、不裁剪。
  • 组件挂载时实测容器宽度（Taro.createSelectorQuery().select('.detail-carousel-wrap--adaptive').boundingClientRect），图片 onLoad 拿到自然宽高后按 容器宽 × (自然高/自然宽) 计算每张幻灯片渲染高度，赋给 <Swiper> 内联 height，实现轮播高度自适应（多图比例不一也能逐张适配，带 0.2s 过渡）。
  • 未加载前兜底高度为 容器宽 × 0.75（约 3:4）。
• 样式：product-detail.css 增加 .detail-carousel-wrap--adaptive，覆盖基类固定 aspect-ratio:1 与 overflow:hidden（aspect-ratio:auto; overflow:visible），并令 .detail-carousel-image 高度为 auto。
• autoplay（3.5s）/ 1/5 计数（feature B）在 adaptive 下保持不变。
• 仅门店套餐详情传 imageFit="adaptive"；门店头图（variant="store" 仍 contain）、商品详情（cover）不受影响。

验收

• 门店详情座机显示形如 0379-12****78（中间四位隐藏），手机号仍 138****8000；拨打为明文。
• 套餐详情图多张时右下角显示 1/5 分页计数，并自动轮播（约 3.5s 切换）；单图不计数、不轮播；点击仍可预览。
• 合伙人账号处于非 ACTIVE（暂停 / 停用）时：短信登录与微信登录均被拦截，提示「该账号已暂停使用，请联系客服人员」，无法进入。
• 门店管理（结算提现）页：申请提现按钮与筛选栏左右留白与其他区块一致（统一 --space-page），不再贴边。
• 门店休息中时进入核销：弹「是否开启营业？」；确认开张后可继续核销；取消则维持拦截；未过审门店开张被拒时给出对应提示。
• 门店套餐详情图片按真实比例完整显示、不再被裁切（轮播高度随图自适应）；自动轮播与 1/5 计数仍正常。
• A 仅 maskPhone 规则、C/D/E 仅前端样式 / 交互；均无需 Prisma 迁移（C 复用 DISABLED）。

HQ 开发计划

创建版本 v3.4.18 并关联本迭代任务；发版前再合并发布（mini-user 升 3.4.18）。