feat(mp): 小程序端骨架 + 扫码落地页（scene 识别租户）
小程序端从零建起来了，并在微信开发者工具里真机模拟跑通： 扫 scene=t1-k17 → 显示「示范职业学校 / 2026年9月机电专业认定材料收集 / 尚未发布」。 交付： · frontend-mp/（uni-app，官方 uni-preset-vue#vite-ts 模板），appid 已填 · src/pages/index/index.vue 扫码落地页：读 scene → 调后端 → 显示 「哪个学校 / 填什么 / 现在能不能填」 · GET /api/v1/mp/scene-context（匿名）：登录前的落地页查询 · 主题色与 PC 管理端同一套（腾讯云 TDesign 色板），两端视觉一致 为什么落地页必然是匿名接口： 学生扫开的第一屏要回答"这是哪个学校、要填什么、能不能填"， 而这发生在绑定身份之前。它与契约里的 POST /mp/login（code+scene 换 session） 不是一回事 —— 那个要换 openid，属 M3。 ⚠️ 一个必踩的坑（撞上并绕开了）： FillTenantLineHandler.getTenantId() 在**匿名请求下直接抛 40101**， 所以不能用 taskMapper.selectById()。正确写法是专用 Mapper + 每条查询 @InterceptorIgnore(tenantLine="true") 并显式带 tenant_id（项目注释称此为 一次代码审查点）。见 module/mp/mapper/MpSceneMapper.java —— 把这几条集中在 一个文件里，正是为了让"关掉框架保护后由人保证隔离"这件事有地方审。 ⚠️ scene 可穷举（t1-k1、t1-k2…），所以匿名接口： ① 只返回落地页必须的最少信息，不往里加"顺带能查出来"的东西； ② 按 IP 限流（20 次/分钟，Redis INCR，复用项目的 GATE_RATE_LIMITED 40071）。 E2E 专门验了"前 20 次通过、第 21 次起被限、清掉计数器立刻恢复"。 状态文案分五种而不是合并成"当前不可填报"：学生的下一步动作完全不同 —— 「已截止」要找班主任、「已暂停」要等通知、「尚未发布」是根本不该现在扫。 顺带记两个环境坑（写进交接摘要）： · 微信开发者工具的「服务端口」默认关闭，HBuilderX 运行时报 `IDE service port disabled` 然后退出，**调不起开发者工具**。 解法：开发者工具 → 设置 → 安全设置 → 服务端口 → 开启； 或直接「导入项目」dist/dev/mp-weixin 绕过。 · HBuilderX 把这个项目当 CLI 型项目，产物在 dist/dev/mp-weixin， **不是** unpackage/。模拟扫码要在「编译模式」里设 进入场景=扫描二维码、 启动参数 scene=t1-k17。 · <style lang="scss"> 需要装 sass（模板没带），已 pnpm add -D sass。 ⚠️ 对上线计划最重要的一条结论（已写进交接摘要）： 开发版（develop）只有开发者能扫、且会过期；体验版（trial）只有体验成员能扫； **只有正式版（release）学生才能扫**，而它需要提交审核，涉及小程序类目与资质。 所以 C1「小程序资质法务确认」不是"以后再说"，它直接决定学生能不能开始填报。 已知缺口： · 填报主流程（/mp/login 门禁核验 表单填写）属 M3； 现在点「开始填报」给的是明确的"开发中"提示，不是静默无反应。 · frontend-mp 还没套项目既有的 ESLint/Stylelint 规范。 验收：e2e-m1-scene.py 31/31；八条 E2E 合计 389 项断言全通过； 微信开发者工具里人工确认页面渲染与 scene 传递正确。
This commit is contained in:
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<view class="land">
|
||||
<!-- 顶部：这是哪个学校、要填什么 -->
|
||||
<view class="land__hero">
|
||||
<text class="land__tenant">{{ ctx.tenantName || '填报通' }}</text>
|
||||
<text class="land__task">{{ ctx.taskName || title }}</text>
|
||||
<view v-if="ctx.taskStatusText" class="land__badge" :class="badgeClass">
|
||||
{{ ctx.taskStatusText }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态提示。文案由后端给（"已截止，如需补交请联系班主任"这类），
|
||||
前端不自己编 —— 五句话对应五种完全不同的下一步动作 -->
|
||||
<view v-if="message" class="land__msg" :class="{ 'land__msg--error': isError }">
|
||||
{{ message }}
|
||||
</view>
|
||||
|
||||
<!-- 带班级的码：告诉学生"你属于哪个班" -->
|
||||
<view v-if="ctx.orgName" class="land__row">
|
||||
<text class="land__label">班级</text>
|
||||
<text class="land__value">{{ ctx.orgName }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 主按钮 -->
|
||||
<button v-if="ctx.canSubmit" class="land__btn" hover-class="land__btn--active" @click="start">
|
||||
开始填报
|
||||
</button>
|
||||
<view v-else-if="loading" class="land__btn land__btn--disabled">正在读取…</view>
|
||||
|
||||
<!-- 排查信息：扫码进不来时，这一行能立刻区分是
|
||||
"scene 没传到"还是"后端解析失败"，省掉一轮猜测 -->
|
||||
<view class="land__debug">
|
||||
<text class="land__debug-item">scene：{{ scene || '（未获取到）' }}</text>
|
||||
<text v-if="rawScene && rawScene !== scene" class="land__debug-item">
|
||||
原始值：{{ rawScene }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="land__footer">职业技能等级认定材料收集中台</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
|
||||
import { request } from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 扫码落地页。
|
||||
*
|
||||
* 学生扫班主任发的二维码进来，第一屏要回答三个问题：
|
||||
* 「这是哪个学校的收集」「要我填什么」「现在能不能填」。
|
||||
* 前两个来自 scene，第三个来自任务状态。
|
||||
*
|
||||
* ⚠️ scene 的取法有两个坑，都踩过：
|
||||
*
|
||||
* 1. **小程序码的 scene 是 URL 编码的**，必须 `decodeURIComponent`。
|
||||
* 不解码时 `t1-k17` 通常会原样出来（因为它没有需要转义的字符），
|
||||
* 但一旦 scene 里出现特殊字符就会静默出错 —— 所以无论如何都要解。
|
||||
*
|
||||
* 2. **普通二维码走的是另一个入口**：微信把整个 URL 放在 `options.q` 里
|
||||
* （同样 URL 编码）。这两个入口都要接，否则"用普通二维码扫"这条
|
||||
* 产品上必然要支持的路径会在客户现场直接失效。
|
||||
*
|
||||
* 另外 `onLoad` 的参数可能为空（比如从"最近使用的小程序"直接进入，
|
||||
* 没有扫码），这时不能报错，而要提示用户去扫码。
|
||||
*/
|
||||
defineOptions({ name: 'Index' })
|
||||
|
||||
interface SceneContext {
|
||||
valid: boolean
|
||||
scene: string
|
||||
tenantName: string | null
|
||||
taskId: number | null
|
||||
taskName: string | null
|
||||
taskStatus: number | null
|
||||
taskStatusText: string | null
|
||||
canSubmit: boolean
|
||||
orgId: number | null
|
||||
orgName: string | null
|
||||
message: string | null
|
||||
}
|
||||
|
||||
const ctx = ref<Partial<SceneContext>>({})
|
||||
const scene = ref('')
|
||||
const rawScene = ref('')
|
||||
const message = ref('')
|
||||
const isError = ref(false)
|
||||
const loading = ref(false)
|
||||
const title = ref('材料填报')
|
||||
|
||||
const badgeClass = computed(() => {
|
||||
switch (ctx.value.taskStatus) {
|
||||
case 1: return 'land__badge--ok'
|
||||
case 2: return 'land__badge--warn'
|
||||
case 3: return 'land__badge--muted'
|
||||
case 4: return 'land__badge--danger'
|
||||
default: return 'land__badge--muted'
|
||||
}
|
||||
})
|
||||
|
||||
/** 从 onLoad 参数里取出 scene，兼容小程序码与普通二维码两个入口。 */
|
||||
function pickScene(options?: Record<string, string | undefined>): string {
|
||||
if (!options) return ''
|
||||
// 小程序码：options.scene
|
||||
if (options.scene) {
|
||||
try {
|
||||
return decodeURIComponent(options.scene)
|
||||
} catch {
|
||||
return options.scene
|
||||
}
|
||||
}
|
||||
// 普通二维码：options.q 是整个 URL，scene 在查询串里
|
||||
if (options.q) {
|
||||
try {
|
||||
const url = decodeURIComponent(options.q)
|
||||
const m = /[?&]scene=([^&#]+)/.exec(url)
|
||||
if (m) return decodeURIComponent(m[1])
|
||||
// 有些配置下二维码里不放 scene，而是放完整页面路径 —— 这时没有 scene 可用
|
||||
return ''
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
async function load() {
|
||||
if (!scene.value) {
|
||||
loading.value = false
|
||||
isError.value = true
|
||||
message.value = '请扫描班主任发的「填报二维码」进入，或让班主任重新发一次'
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
isError.value = false
|
||||
try {
|
||||
const data = await request<SceneContext>({
|
||||
url: `/api/v1/mp/scene-context?scene=${encodeURIComponent(scene.value)}`
|
||||
})
|
||||
ctx.value = data
|
||||
message.value = data.message || ''
|
||||
isError.value = data.valid === false
|
||||
if (data.valid === false) {
|
||||
// 码不是本系统的：把标题也换掉，免得显示成"某某学校"误导学生
|
||||
title.value = '无法识别这个二维码'
|
||||
}
|
||||
} catch (e) {
|
||||
isError.value = true
|
||||
message.value = e instanceof Error ? e.message : '读取任务信息失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function start() {
|
||||
// 填报主流程属 M3（/mp/login → 门禁核验 → 表单），当前骨架先给出明确预期，
|
||||
// 而不是静默什么都不做 —— 后者会被当成"按钮坏了"
|
||||
uni.showModal({
|
||||
title: '填报功能开发中',
|
||||
content: `已识别任务「${ctx.value.taskName ?? ''}」。填报主流程（身份核验与表单填写）属下一阶段开发。`,
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
rawScene.value = options?.scene || options?.q || ''
|
||||
scene.value = pickScene(options)
|
||||
load()
|
||||
})
|
||||
|
||||
// 下拉刷新：任务被截止/恢复后，学生不必杀进程重进
|
||||
onPullDownRefresh(async () => {
|
||||
await load()
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* 主题色与 PC 管理端同一套（腾讯云 TDesign 色板），两端视觉要一致 */
|
||||
$primary: #0052d9;
|
||||
$success: #00a870;
|
||||
$warning: #ed7b2f;
|
||||
$danger: #e34d59;
|
||||
$page-bg: #f3f3f3;
|
||||
|
||||
page {
|
||||
background-color: $page-bg;
|
||||
}
|
||||
|
||||
.land {
|
||||
min-height: 100vh;
|
||||
padding: 32rpx;
|
||||
|
||||
&__hero {
|
||||
padding: 48rpx 32rpx;
|
||||
background: linear-gradient(135deg, $primary 0%, #2b6fe0 100%);
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 82, 217, 0.18);
|
||||
}
|
||||
|
||||
&__tenant {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
&__task {
|
||||
display: block;
|
||||
margin-top: 16rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: inline-block;
|
||||
margin-top: 20rpx;
|
||||
padding: 4rpx 20rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
color: #fff;
|
||||
|
||||
&--ok { background: $success; }
|
||||
&--warn { background: $warning; }
|
||||
&--danger { background: $danger; }
|
||||
&--muted { background: rgba(255, 255, 255, 0.22); }
|
||||
}
|
||||
|
||||
&__msg {
|
||||
margin-top: 24rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.7;
|
||||
color: #00000099;
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
|
||||
&--error {
|
||||
color: $danger;
|
||||
background: #fef0f0;
|
||||
}
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 16rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 28rpx;
|
||||
color: #00000099;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #000000e6;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
margin-top: 48rpx;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
background: $primary;
|
||||
border-radius: 12rpx;
|
||||
|
||||
&::after { border: none; }
|
||||
|
||||
&--active { background: #0046bb; }
|
||||
|
||||
&--disabled {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #0000004d;
|
||||
background: #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
&__debug {
|
||||
margin-top: 40rpx;
|
||||
padding: 16rpx 20rpx;
|
||||
font-size: 22rpx;
|
||||
color: #0000004d;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
&__debug-item {
|
||||
display: block;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
margin-top: 40rpx;
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
color: #0000004d;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user