微信小程序页面迁移校验之前 P5任务处理之前

apps/miniprogram - 副本/miniprogram/pages/notes/notes.json

@@ -0,0 +1,8 @@
+{
+  "navigationStyle": "custom",
+  "enablePullDownRefresh": false,
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-loading": "tdesign-miniprogram/loading/loading"
+  }
+}

apps/miniprogram - 副本/miniprogram/pages/notes/notes.ts

@@ -0,0 +1,45 @@
+import { mockNotes } from '../../utils/mock-data'
+import type { Note } from '../../utils/mock-data'
+
+Page({
+  data: {
+    loading: true,
+    error: false,
+    notes: [] as Note[],
+    /** 系统状态栏高度（px），用于自定义导航栏顶部偏移 */
+    statusBarHeight: 20,
+  },
+
+  onLoad() {
+    // 获取真实状态栏高度，兼容所有机型（iPhone 刘海屏、安卓异形屏等）
+    const sysInfo = wx.getSystemInfoSync()
+    this.setData({ statusBarHeight: sysInfo.statusBarHeight || 20 })
+    this.loadData()
+  },
+
+  loadData() {
+    this.setData({ loading: true, error: false })
+
+    setTimeout(() => {
+      // TODO: 替换为真实 API 调用 GET /api/xcx/notes
+      try {
+        this.setData({
+          loading: false,
+          notes: mockNotes,
+        })
+      } catch {
+        this.setData({ loading: false, error: true })
+      }
+    }, 400)
+  },
+
+  /** 返回上一页 */
+  onBack() {
+    wx.navigateBack()
+  },
+
+  /** 错误态重试 */
+  onRetry() {
+    this.loadData()
+  },
+})

apps/miniprogram - 副本/miniprogram/pages/notes/notes.wxml

@@ -0,0 +1,45 @@
+<!-- 自定义顶部导航栏 -->
+<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
+  <view class="nav-bar-inner">
+    <view class="nav-back" bindtap="onBack">
+      <t-icon name="chevron-left" size="40rpx" color="#4b4b4b" />
+    </view>
+    <text class="nav-title">备注</text>
+  </view>
+</view>
+
+<!-- 加载态 -->
+<view class="page-loading" wx:if="{{loading}}">
+  <t-loading theme="circular" size="80rpx" text="加载中..." />
+</view>
+
+<!-- 错误态 -->
+<view class="page-error" wx:elif="{{error}}">
+  <text class="error-text">加载失败，请点击重试</text>
+  <view class="retry-btn" bindtap="onRetry">
+    <text>重试</text>
+  </view>
+</view>
+
+<!-- 空数据态 -->
+<view class="page-empty" wx:elif="{{notes.length === 0}}">
+  <t-icon name="edit-1" size="120rpx" color="#dcdcdc" />
+  <text class="empty-text">暂无备注记录</text>
+</view>
+
+<!-- 正常态 — 备注列表 -->
+<view class="note-list" wx:else>
+  <view
+    class="note-card"
+    wx:for="{{notes}}"
+    wx:key="id"
+  >
+    <text class="note-content">{{item.content}}</text>
+    <view class="note-bottom">
+      <text class="note-tag {{item.tagType === 'coach' ? 'tag-coach' : 'tag-customer'}}">{{item.tagLabel}}</text>
+      <text class="note-time">{{item.createdAt}}</text>
+    </view>
+  </view>
+</view>
+
+<dev-fab />

apps/miniprogram - 副本/miniprogram/pages/notes/notes.wxss

@@ -0,0 +1,130 @@
+/* ========== 自定义导航栏 ========== */
+.nav-bar {
+  /* padding-top 由 JS 动态设置（wx.getSystemInfoSync().statusBarHeight） */
+  background-color: #ffffff;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+.nav-bar-inner {
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  position: relative;
+  border-bottom: 2rpx solid #eeeeee;
+  padding: 0 32rpx;
+}
+.nav-back {
+  position: absolute;
+  left: 32rpx;
+  padding: 8rpx;
+}
+.nav-title {
+  flex: 1;
+  text-align: center;
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #242424;
+}
+
+/* ========== 页面背景 ========== */
+page {
+  background-color: #f3f3f3;
+  min-height: 100vh;
+}
+
+/* ========== 加载态 / 空态 / 错误态 ========== */
+.page-loading,
+.page-empty,
+.page-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  gap: 24rpx;
+}
+.empty-text,
+.error-text {
+  font-size: 28rpx;
+  color: #a6a6a6;
+}
+.retry-btn {
+  margin-top: 16rpx;
+  padding: 12rpx 48rpx;
+  background-color: #0052d9;
+  border-radius: 16rpx;
+}
+.retry-btn text {
+  font-size: 28rpx;
+  color: #ffffff;
+}
+
+/* ========== 备注列表 ========== */
+.note-list {
+  padding: 32rpx;
+}
+
+/* 卡片间距：H5 原型 space-y-3 = 24rpx */
+.note-card + .note-card {
+  margin-top: 24rpx;
+}
+
+/* ========== 备注卡片 ========== */
+/* H5: bg-white rounded-2xl p-4 shadow-sm */
+.note-card {
+  background-color: #ffffff;
+  border-radius: 32rpx;
+  padding: 32rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+/* 备注正文 */
+/* H5: text-sm text-gray-13 leading-relaxed mb-3 */
+.note-content {
+  display: block;
+  font-size: 28rpx;
+  color: #242424;
+  line-height: 1.625;
+  margin-bottom: 24rpx;
+}
+
+/* 底部行：标签 + 时间 */
+/* H5: flex items-center justify-between */
+.note-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* ========== 标签样式 ========== */
+/* H5: .note-tag { padding: 4px 10px; font-size: 12px; border-radius: 8px; border: 1px solid; } */
+.note-tag {
+  padding: 8rpx 20rpx;
+  font-size: 24rpx;
+  border-radius: 16rpx;
+  border: 2rpx solid;
+}
+
+/* 客户标签 */
+/* H5: .tag-customer { background: linear-gradient(135deg, #ecf2fe, #e8eeff); color: #0052d9; border-color: #c5d4f7; } */
+.tag-customer {
+  background: linear-gradient(135deg, #ecf2fe, #e8eeff);
+  color: #0052d9;
+  border-color: #c5d4f7;
+}
+
+/* 助教标签 */
+/* H5: .tag-coach { background: linear-gradient(135deg, #e8faf0, #e0f7ea); color: #00a870; border-color: #b3e6d0; } */
+.tag-coach {
+  background: linear-gradient(135deg, #e8faf0, #e0f7ea);
+  color: #00a870;
+  border-color: #b3e6d0;
+}
+
+/* 时间 */
+/* H5: text-xs text-gray-6 */
+.note-time {
+  font-size: 24rpx;
+  color: #a6a6a6;
+}