feat(协议): 新增用户协议与隐私政策页面及入口

2026-09-16 02:45:38 +08:00
parent fb92782c92
commit 98c45f2c1e
11 changed files with 827 additions and 21 deletions
@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "navigation-bar": "/components/navigation-bar/navigation-bar"
+  }
+}
@@ -0,0 +1,49 @@
+import { LEGAL_DOCS, LEGAL_META, LegalDoc } from '../../utils/legal'
+import { navScroll } from '../../utils/nav'
+import { logger } from '../../utils/logger'
+
+// 日志模块名
+const LOG = 'agreement'
+
+type LegalType = 'user' | 'privacy'
+
+/**
+ * 协议页（《用户协议》/《隐私政策》共用）
+ *
+ * 入口：我的 → 设置 → 用户协议 / 隐私政策；登录页底部协议链接。
+ * 通过 query.type 区分文档，页面内可一键切换到另一份，保证随时可查阅。
+ * 本页不发起任何网络请求，未登录状态同样可访问。
+ */
+Page({
+  data: {
+    type: 'user' as LegalType,
+    doc: LEGAL_DOCS.user as LegalDoc,
+    meta: LEGAL_META,
+    tabs: [
+      { key: 'user', label: '用户协议' },
+      { key: 'privacy', label: '隐私政策' },
+    ],
+    // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
+    navScrolled: false,
+  },
+
+  // scroll-view 滚动 → 导航收缩为玻璃小标题
+  onNavScroll: navScroll,
+
+  onLoad(query: Record<string, string>) {
+    const type: LegalType = query && query.type === 'privacy' ? 'privacy' : 'user'
+    this.setData({ type, doc: LEGAL_DOCS[type] })
+    logger.debug(LOG, '协议页加载, type=', type)
+  },
+
+  onSwitchTab(e: WechatMiniprogram.TouchEvent) {
+    const type = (e.currentTarget.dataset as { type?: LegalType }).type
+    if (!type || type === this.data.type) return
+    logger.debug(LOG, '切换协议, type=', type)
+    // 用 redirectTo 重建页面：天然回到顶部，且不增加页面栈（避免返回时回到上一份协议）
+    wx.redirectTo({
+      url: `/pages/agreement/agreement?type=${type}`,
+      fail: (err) => logger.warn(LOG, '切换协议失败, err=', err && err.errMsg),
+    })
+  },
+})
@@ -0,0 +1,57 @@
+<view class="page page-flex">
+  <navigation-bar title="{{doc.title}}" scrolled="{{navScrolled}}" />
+
+  <scroll-view scroll-y class="scroll-body" bindscroll="onNavScroll">
+    <!-- 页头：衬线大标题 + 生效/更新日期 -->
+    <view class="head">
+      <view class="eyebrow">{{doc.enTitle}}</view>
+      <view class="display ag-title">{{doc.title}}</view>
+      <view class="ag-meta">
+        <text>生效日期 {{doc.effectiveAt}}</text>
+        <text class="ag-meta-sep">·</text>
+        <text>更新日期 {{doc.updatedAt}}</text>
+      </view>
+    </view>
+
+    <!-- 两份协议一键互切 -->
+    <view class="ag-tabs">
+      <view
+        wx:for="{{tabs}}"
+        wx:key="key"
+        class="ag-tab {{type === item.key ? 'is-on' : ''}}"
+        data-type="{{item.key}}"
+        bindtap="onSwitchTab"
+      >{{item.label}}</view>
+    </view>
+
+    <!-- 导语 -->
+    <view class="ag-body">
+      <view class="ag-lead">
+        <view wx:for="{{doc.intro}}" wx:key="*this" class="ag-p">{{item}}</view>
+      </view>
+
+      <!-- 正文：条目编号 + 小标题 + 段落/列表 -->
+      <view class="ag-sec" wx:for="{{doc.sections}}" wx:for-index="si" wx:key="title">
+        <view class="ag-hd">
+          <text class="ag-no num">{{si + 1}}</text>
+          <text class="ag-hd-t">{{item.title}}</text>
+        </view>
+        <block wx:for="{{item.blocks}}" wx:for-item="b" wx:for-index="bi" wx:key="c">
+          <view wx:if="{{b.t === 'h'}}" class="ag-sub">{{b.c}}</view>
+          <view wx:elif="{{b.t === 'li'}}" class="ag-li">
+            <view class="ag-bullet"></view>
+            <text class="ag-li-t">{{b.c}}</text>
+          </view>
+          <view wx:else class="ag-p">{{b.c}}</view>
+        </block>
+      </view>
+
+      <!-- 页脚：主体信息 -->
+      <view class="foot-note ag-foot">
+        <text>{{meta.operatorName}}</text>
+        <text wx:if="{{meta.filingNo}}"> · {{meta.filingNo}}</text>
+      </view>
+      <view class="gap-64"></view>
+    </view>
+  </scroll-view>
+</view>
@@ -0,0 +1,153 @@
+/** 协议页：杂志内页排版 —— 衬线大标题 + 条目编号 + 竖排编号长文 **/
+.page-flex {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.scroll-body {
+  flex: 1;
+  height: 0;
+}
+
+.ag-title {
+  margin-top: 18rpx;
+}
+
+.ag-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12rpx;
+  margin-top: 24rpx;
+  font-size: 22rpx;
+  color: var(--ink-3);
+  letter-spacing: .02em;
+  font-variant-numeric: tabular-nums;
+}
+
+.ag-meta-sep {
+  color: var(--ink-4);
+}
+
+/* 协议互切：下划线式极简分段 */
+.ag-tabs {
+  display: flex;
+  gap: 40rpx;
+  padding: 48rpx var(--pad) 0;
+}
+
+.ag-tab {
+  position: relative;
+  padding-bottom: 16rpx;
+  font-size: 28rpx;
+  color: var(--ink-3);
+  transition: color .2s var(--ease);
+}
+
+.ag-tab.is-on {
+  color: var(--ink);
+  font-weight: 500;
+}
+
+.ag-tab.is-on::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3rpx;
+  border-radius: 2rpx;
+  background: var(--ink);
+}
+
+.ag-body {
+  padding: 44rpx var(--pad) 0;
+}
+
+/* 导语 */
+.ag-lead {
+  padding-bottom: 12rpx;
+  border-bottom: 1rpx solid var(--hairline);
+}
+
+/* 正文段落 */
+.ag-p {
+  display: block;
+  font-size: 28rpx;
+  line-height: 1.9;
+  color: var(--ink-2);
+  margin-bottom: 20rpx;
+}
+
+/* 条目 */
+.ag-sec {
+  padding-top: 48rpx;
+}
+
+.ag-hd {
+  display: flex;
+  align-items: baseline;
+  gap: 18rpx;
+  margin-bottom: 24rpx;
+}
+
+.ag-no {
+  font-family: var(--serif);
+  font-size: 30rpx;
+  font-weight: 500;
+  color: var(--ink-4);
+  min-width: 34rpx;
+}
+
+.ag-hd-t {
+  flex: 1;
+  font-family: var(--serif);
+  font-size: 36rpx;
+  font-weight: 500;
+  letter-spacing: -.005em;
+  line-height: 1.35;
+  color: var(--ink);
+}
+
+/* 条目内小标题（如「1. 微信授权登录信息」） */
+.ag-sub {
+  font-size: 29rpx;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--ink);
+  margin: 28rpx 0 14rpx;
+}
+
+.ag-sec .ag-sub:first-child {
+  margin-top: 0;
+}
+
+/* 列表项：发丝级圆点 + 悬挂缩进 */
+.ag-li {
+  display: flex;
+  align-items: flex-start;
+  gap: 16rpx;
+  margin-bottom: 18rpx;
+}
+
+.ag-bullet {
+  width: 8rpx;
+  height: 8rpx;
+  border-radius: 50%;
+  background: var(--ink-4);
+  margin-top: 22rpx;
+  flex-shrink: 0;
+}
+
+.ag-li-t {
+  flex: 1;
+  font-size: 28rpx;
+  line-height: 1.9;
+  color: var(--ink-2);
+}
+
+.ag-foot {
+  padding-top: 64rpx;
+}