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,21 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"name": "uni-preset-vue",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev:custom": "uni -p",
|
||||
"dev:h5": "uni",
|
||||
"dev:h5:ssr": "uni --ssr",
|
||||
"dev:mp-alipay": "uni -p mp-alipay",
|
||||
"dev:mp-baidu": "uni -p mp-baidu",
|
||||
"dev:mp-jd": "uni -p mp-jd",
|
||||
"dev:mp-kuaishou": "uni -p mp-kuaishou",
|
||||
"dev:mp-lark": "uni -p mp-lark",
|
||||
"dev:mp-qq": "uni -p mp-qq",
|
||||
"dev:mp-toutiao": "uni -p mp-toutiao",
|
||||
"dev:mp-harmony": "uni -p mp-harmony",
|
||||
"dev:mp-weixin": "uni -p mp-weixin",
|
||||
"dev:mp-xhs": "uni -p mp-xhs",
|
||||
"dev:quickapp-webview": "uni -p quickapp-webview",
|
||||
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
|
||||
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
|
||||
"build:custom": "uni build -p",
|
||||
"build:h5": "uni build",
|
||||
"build:h5:ssr": "uni build --ssr",
|
||||
"build:mp-alipay": "uni build -p mp-alipay",
|
||||
"build:mp-baidu": "uni build -p mp-baidu",
|
||||
"build:mp-jd": "uni build -p mp-jd",
|
||||
"build:mp-kuaishou": "uni build -p mp-kuaishou",
|
||||
"build:mp-lark": "uni build -p mp-lark",
|
||||
"build:mp-qq": "uni build -p mp-qq",
|
||||
"build:mp-toutiao": "uni build -p mp-toutiao",
|
||||
"build:mp-harmony": "uni build -p mp-harmony",
|
||||
"build:mp-weixin": "uni build -p mp-weixin",
|
||||
"build:mp-xhs": "uni build -p mp-xhs",
|
||||
"build:quickapp-webview": "uni build -p quickapp-webview",
|
||||
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
|
||||
"build:quickapp-webview-union": "uni build -p quickapp-webview-union",
|
||||
"type-check": "vue-tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dcloudio/uni-app": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-app-harmony": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-app-plus": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-components": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-h5": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-mp-alipay": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-mp-baidu": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-mp-harmony": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-mp-jd": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-mp-kuaishou": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-mp-lark": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-mp-qq": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-mp-toutiao": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-mp-weixin": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-mp-xhs": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-quickapp-webview": "3.0.0-5020420260813003",
|
||||
"vue": "^3.4.21",
|
||||
"vue-i18n": "^9.1.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@dcloudio/types": "^3.4.8",
|
||||
"@dcloudio/uni-automator": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-cli-shared": "3.0.0-5020420260813003",
|
||||
"@dcloudio/uni-stacktracey": "3.0.0-5020420260813003",
|
||||
"@dcloudio/vite-plugin-uni": "3.0.0-5020420260813003",
|
||||
"@vue/runtime-core": "^3.4.21",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"sass": "^1.105.0",
|
||||
"typescript": "^4.9.4",
|
||||
"vite": "5.2.8",
|
||||
"vue-tsc": "^1.0.24"
|
||||
}
|
||||
}
|
||||
Generated
+8446
File diff suppressed because it is too large
Load Diff
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
/// <reference types='@dcloudio/types' />
|
||||
import 'vue'
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
type Hooks = App.AppInstance & Page.PageInstance;
|
||||
|
||||
interface ComponentCustomOptions extends Hooks {
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
|
||||
onLaunch(() => {
|
||||
console.log("App Launch");
|
||||
});
|
||||
onShow(() => {
|
||||
console.log("App Show");
|
||||
});
|
||||
onHide(() => {
|
||||
console.log("App Hide");
|
||||
});
|
||||
</script>
|
||||
<style></style>
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* 小程序端配置。
|
||||
*
|
||||
* ⚠️ API 地址在三种场景下不一样,写死会导致"开发者工具里好好的,真机打不开":
|
||||
*
|
||||
* 1. 微信开发者工具:可以用 http://localhost:8080,
|
||||
* 但必须在「详情 → 本地设置」里勾上 **「不校验合法域名、web-view、TLS 版本以及 HTTPS 证书」**。
|
||||
* 不勾的话请求会被拦,报错是「不在以下 request 合法域名列表中」——
|
||||
* 而那句话看起来像"域名没配",会让人跑去小程序后台白改一通。
|
||||
*
|
||||
* 2. 真机预览/体验版:localhost 是**手机自己**,不是你的电脑。
|
||||
* 要把地址换成电脑的局域网 IP(如 http://192.168.1.5:8080),
|
||||
* 并确保手机与电脑在同一网络、电脑防火墙放行 8080。
|
||||
*
|
||||
* 3. 正式发布:必须是 **HTTPS + 已在微信后台配好 request 合法域名**(见待办:域名白名单),
|
||||
* 且域名不能带端口、不能是 IP。
|
||||
*
|
||||
* 所以这里留成一处配置,而不是散在请求代码里。
|
||||
*/
|
||||
export const API_BASE_URL = 'http://localhost:8080'
|
||||
|
||||
/** 主题色(与 PC 管理端同一套腾讯云 TDesign 色板,两端视觉要一致)。 */
|
||||
export const THEME = {
|
||||
primary: '#0052D9',
|
||||
success: '#00A870',
|
||||
warning: '#ED7B2F',
|
||||
danger: '#E34D59',
|
||||
pageBg: '#F3F3F3',
|
||||
textPrimary: '#000000E6',
|
||||
textSecondary: '#00000099',
|
||||
textPlaceholder: '#0000004D'
|
||||
} as const
|
||||
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue'
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { createSSRApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App);
|
||||
return {
|
||||
app,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"name" : "填报通",
|
||||
"appid" : "",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wxf01d3fa60f87f0b7",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics": {
|
||||
"enable": false
|
||||
},
|
||||
"vueVersion" : "3"
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "材料填报",
|
||||
"navigationBarBackgroundColor": "#0052D9",
|
||||
"navigationBarTextStyle": "white",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarTitleText": "填报通",
|
||||
"navigationBarBackgroundColor": "#0052D9",
|
||||
"backgroundColor": "#F3F3F3"
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
export {}
|
||||
|
||||
declare module "vue" {
|
||||
type Hooks = App.AppInstance & Page.PageInstance;
|
||||
interface ComponentCustomOptions extends Hooks {}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
@@ -0,0 +1,76 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$uni-text-color: #333; // 基本色
|
||||
$uni-text-color-inverse: #fff; // 反色
|
||||
$uni-text-color-grey: #999; // 辅助灰色,如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable: #c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color: #fff;
|
||||
$uni-bg-color-grey: #f8f8f8;
|
||||
$uni-bg-color-hover: #f1f1f1; // 点击状态颜色
|
||||
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色
|
||||
|
||||
/* 边框颜色 */
|
||||
$uni-border-color: #c8c7cc;
|
||||
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm: 12px;
|
||||
$uni-font-size-base: 14px;
|
||||
$uni-font-size-lg: 16;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm: 20px;
|
||||
$uni-img-size-base: 26px;
|
||||
$uni-img-size-lg: 40px;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 2px;
|
||||
$uni-border-radius-base: 3px;
|
||||
$uni-border-radius-lg: 6px;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 5px;
|
||||
$uni-spacing-row-base: 10px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 4px;
|
||||
$uni-spacing-col-base: 8px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2c405a; // 文章标题颜色
|
||||
$uni-font-size-title: 20px;
|
||||
$uni-color-subtitle: #555; // 二级标题颜色
|
||||
$uni-font-size-subtitle: 18px;
|
||||
$uni-color-paragraph: #3f536e; // 文章段落颜色
|
||||
$uni-font-size-paragraph: 15px;
|
||||
@@ -0,0 +1,57 @@
|
||||
import { API_BASE_URL } from '@/config'
|
||||
|
||||
/**
|
||||
* 请求封装。
|
||||
*
|
||||
* 后端契约是 `{ code, msg, data }` —— 与 PC 管理端同一套。
|
||||
* ⚠️ 关键差异:**业务错误返回的 HTTP 状态码是 200**,
|
||||
* 真正的错误码在响应体的 `code` 里(只有 401/403/429/5xxxx 才占用真 HTTP 状态码)。
|
||||
* 所以判断成功必须看 `code === 0`,**不能看 HTTP 状态码** ——
|
||||
* 只看状态码会把"业务失败"当成"成功",然后拿着空 data 往下走。
|
||||
*/
|
||||
export interface ApiResult<T> {
|
||||
code: number
|
||||
msg: string
|
||||
data: T
|
||||
}
|
||||
|
||||
export function request<T>(options: {
|
||||
url: string
|
||||
method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
|
||||
data?: Record<string, unknown>
|
||||
/** 已登录时带上(登录流程见契约 §5.x 的 /mp/login,属 M3) */
|
||||
token?: string
|
||||
}): Promise<T> {
|
||||
const { url, method = 'GET', data, token } = options
|
||||
return new Promise<T>((resolve, reject) => {
|
||||
uni.request({
|
||||
url: API_BASE_URL + url,
|
||||
method,
|
||||
data,
|
||||
header: {
|
||||
'Content-Type': 'application/json; charset=utf-8',
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {})
|
||||
},
|
||||
success: (res) => {
|
||||
const body = res.data as ApiResult<T> | undefined
|
||||
if (!body || typeof body.code !== 'number') {
|
||||
reject(new Error(`响应格式不对(HTTP ${res.statusCode})`))
|
||||
return
|
||||
}
|
||||
if (body.code !== 0) {
|
||||
// 把后端的 msg 原样带出去:这些 message 是刻意写成人话的
|
||||
// (例如"本次收集已截止,如需补交请联系班主任"),
|
||||
// 前端再包一层"请求失败"只会把有用信息盖掉
|
||||
reject(new Error(body.msg || `请求失败(code=${body.code})`))
|
||||
return
|
||||
}
|
||||
resolve(body.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
// 最常见的失败是域名未放行 / 真机访问了 localhost,
|
||||
// 这两种都不是"网络不好",所以提示要指向配置见 src/config/index.ts
|
||||
reject(new Error(`网络请求失败:${err.errMsg || '未知原因'}(请检查 API 地址配置)`))
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
"lib": ["esnext", "dom"],
|
||||
"types": ["@dcloudio/types"]
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from "vite";
|
||||
import uni from "@dcloudio/vite-plugin-uni";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [uni()],
|
||||
});
|
||||
Reference in New Issue
Block a user