From e192296ea7529a5b4fdb68f83cbefd268348f58b Mon Sep 17 00:00:00 2001 From: weicw1996 Date: Mon, 12 Oct 2026 16:11:58 +0800 Subject: [PATCH] =?UTF-8?q?feat(UI):=20=E9=A6=96=E9=A1=B5=E4=B8=8E?= =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E6=8C=89=E5=8E=9F=E5=9E=8B?= =?UTF-8?q?=E6=94=B9=E7=89=88=EF=BC=8C=E4=BF=AE=E5=A4=8D=E7=BA=AF=E7=99=BD?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E5=9C=A8=E7=99=BD=E5=BA=95=E4=B8=8A=E4=B8=8D?= =?UTF-8?q?=E5=8F=AF=E8=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 一、首页两个入口按钮改版（用户反馈「太小了」） 原为「裸图标 + 单行文字」的矮按钮（min-height 76rpx），改为 「白色圆角图标块 + 右侧主副两行文字」的大卡片（padding 22rpx 20rpx）： - 自主填报：便捷填报，快速提交 - 填报记录：历史记录，随时查看 主按钮渐变由 #f97316→#ef4444 改为 #f9863c→#f2620f 并加橙色投影。 结构对齐 create.vue 已有的 sales-entry-* 卡片。 二、个人中心三张卡片改版（用户提供原型图） - 积分卡：改为「绿底图标块 + 大号数字 + 我的积分」，右侧新增 「积分明细 ›」胶囊按钮；去掉原先那条突兀的 20px 绿色粗顶边。 数字字号 30rpx → 40rpx。 - 自主填报 / 客户拜访：由单行居中文字改为「图标块 + 主标题 + 副标题」， 副标题分别为「及时上报、真实记录」「拜访记录、有效跟进」。 - 药审核：改为整行卡片（图标 + 药审核/待审核任务 + 红色数字徽标 + 箭头）， 徽标数据来自新增接口 /yxe/yxe-audit/pending-count（见 yxe-java 侧提交）， 仅 can_auth === 1 时拉取，退出登录时清零。 三、修复纯白图标在近白底上不可见（用户反馈「图片是白色的看不清」） 根因不在 opacity 或主题色，而是图源本身就是纯白图形 + 透明背景： 文件 颜色构成 内容占画布 0fd31838....png (驻店) 透明 + #FFFFFF 75% x 50% f5fbb2e4....png (跑店) 白色及半透明白 88% x 88% 9c6c9884....png (新任务) 纯白 90% x 90% eebe6469....png (已完成) 纯白 - 而承载它们的底色分别是 #f8fafc（选择页卡片）与平均亮度 250/255 的 近白底图（首页 tab），白图标贴白底自然完全看不见。此类图标只适合 放在深色/彩色底上，同一张 0fd31838....png 在个人中心药审核卡里 配金色底时一直正常，故长期未暴露。 改法：统一垫一层绿色圆角底块反衬白色图形 - select.vue：新增 .type-icon-wrap（未选中 #2fc6a7→#1aa88c， 选中加深为 #16a085→#0e7a66 + 投影，顺带强化选中态） - index.vue：新增 .tab-icon-wrap（未激活绿圆底；激活时置 background:none，避免两层绿有色差露出一圈描边） 顺带修一个隐藏问题：两张填报图源的内容占比差很多，同尺寸渲染会让 驻店图标明显偏小，故为 store 单独放大（.type-icon-store 92rpx）。 验证：用 Pillow 按 rpx→px 实际比例合成修复前后对比图逐张核对， 确认修复前未激活图标完全不可见、修复后清晰、激活态无色差边。 模板标签、style 括号、类名定义/引用均通过脚本校验。 注：f5fbb2e4....png 渲染出来实际是「时钟」形状，用在「跑店填报」 语义是否合适待确认，本次只解决可见性，未更换图标资源。 --- api/user.js | 3 + packageUser/self-report/select.vue | 36 ++++- pages/index/index.vue | 115 +++++++++++--- pages/mine/index.vue | 235 ++++++++++++++++++++++++----- 4 files changed, 321 insertions(+), 68 deletions(-) diff --git a/api/user.js b/api/user.js index 9e27b00..ecb9bd7 100644 --- a/api/user.js +++ b/api/user.js @@ -12,6 +12,9 @@ export const updateUserReq = data => put('/system/user/self', data) export const countUserIncomeReq = () => get('/system/user/countUserIncome') +// 药审核待审计数（药动销 / 跑店巡店 / 驻店填报 / 跑店填报 / 药分享 汇总） +export const auditPendingCountReq = () => get('/yxe/yxe-audit/pending-count') + export const userInfoUpdateReq = data => post('/system/user/update', data) export const userInfoUpdateDataReq = data => post('/system/user/update-data', data) diff --git a/packageUser/self-report/select.vue b/packageUser/self-report/select.vue index 3fef2da..8f16801 100644 --- a/packageUser/self-report/select.vue +++ b/packageUser/self-report/select.vue @@ -25,7 +25,10 @@ :class="['type-card', form.type === item.value ? 'type-card-active' : '']" @tap="form.type = item.value" > - + + + {{ item.title }} {{ item.desc }} @@ -217,10 +220,35 @@ export default { background: #f1fbf8; } -.type-icon { - width: 108rpx; - height: 96rpx; +/* 图标本身是纯白图形 + 透明底，直接放浅色卡片上会看不见， + 所以垫一层彩色圆角底块反衬；选中后加深，兼作选中态提示。 + 底色取偏深的绿，保证白色图形有足够对比度。 */ +.type-icon-wrap { flex-shrink: 0; + width: 112rpx; + height: 100rpx; + border-radius: 24rpx; + background: linear-gradient(135deg, #2fc6a7, #1aa88c); + display: flex; + align-items: center; + justify-content: center; +} + +.type-icon-wrap-active { + background: linear-gradient(135deg, #16a085, #0e7a66); + box-shadow: 0 8rpx 20rpx rgba(47, 198, 167, 0.32); +} + +.type-icon { + width: 62rpx; + height: 62rpx; +} + +/* 两张图源的内容占比差得多（visit 约占画布 88%×88%，store 只占 75%×50%）， + 同尺寸渲染会让驻店图标明显偏小，这里按可见图形补正。 */ +.type-icon-store { + width: 92rpx; + height: 92rpx; } .type-body { diff --git a/pages/index/index.vue b/pages/index/index.vue index c3cd2c9..2cf9097 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -29,12 +29,22 @@ - - 自主填报 + + + + + 自主填报 + 便捷填报，快速提交 + - - 填报记录 + + + + + 填报记录 + 历史记录，随时查看 + @@ -43,15 +53,17 @@ - - - + + + + + {{ tab }} {{ pendingCount }} @@ -736,9 +748,29 @@ export default { line-height: 1; } +/* tab 图标是纯白图形 + 透明底，而 tab 底图接近纯白， + 未激活时白图标贴白底看不清，所以垫一层浅绿圆底反衬。 + 激活态下 .tab-main 自己已填 #2fc6a7，两层绿会透出一圈色差边， + 所以激活时改成完全透明，白图标直接坐在药丸底上。 */ +.tab-icon-wrap { + flex-shrink: 0; + width: 34rpx; + height: 34rpx; + border-radius: 999rpx; + background: #2fc6a7; + display: flex; + align-items: center; + justify-content: center; +} + +.tab.active .tab-icon-wrap { + background: none; + box-shadow: none; +} + .tab-icon { - width: 28rpx; - height: 28rpx; + width: 24rpx; + height: 24rpx; } .tab.active .tab-main { @@ -845,23 +877,56 @@ export default { .entry-btn { flex: 1; - min-height: 76rpx; - border-radius: 20rpx; - border: 1rpx solid #f2a75e; - background: #fff4de; - color: #d9661f; + min-width: 0; + box-sizing: border-box; + padding: 22rpx 20rpx; + border-radius: 24rpx; + border: 1rpx solid #f6dcb4; + background: #fff5e2; + color: #e0631a; display: flex; align-items: center; - justify-content: center; - gap: 10rpx; - font-size: 26rpx; - font-weight: 700; + gap: 14rpx; } .entry-btn.primary { - background: linear-gradient(to right, #f97316, #ef4444); + background: linear-gradient(135deg, #f9863c, #f2620f); border-color: transparent; color: #ffffff; + box-shadow: 0 8rpx 20rpx rgba(242, 98, 15, 0.25); +} + +.entry-icon { + flex-shrink: 0; + width: 72rpx; + height: 72rpx; + border-radius: 20rpx; + background: #ffffff; + display: flex; + align-items: center; + justify-content: center; +} + +.entry-text { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 6rpx; +} + +.entry-title { + font-size: 32rpx; + font-weight: 700; + line-height: 1.2; + white-space: nowrap; +} + +.entry-desc { + font-size: 20rpx; + line-height: 1.2; + opacity: 0.72; + white-space: nowrap; } .category-wrap { diff --git a/pages/mine/index.vue b/pages/mine/index.vue index c181e75..4dea3f6 100644 --- a/pages/mine/index.vue +++ b/pages/mine/index.vue @@ -46,11 +46,20 @@ - - {{ pointSummary.currentPoints }} - 积分 + + + + + + {{ pointSummary.currentPoints }} + 积分 + + 我的积分 + + + 积分明细 + - 我的积分 @@ -81,17 +90,36 @@ - 自主填报 + + + + + 自主填报 + 及时上报、真实记录 + - 客户拜访 + + + + + 客户拜访 + 拜访记录、有效跟进 + - - 药审核 + + + + + 药审核 + 待审核任务 + + + {{ auditPendingCount }} + + @@ -254,7 +282,7 @@