feat: 我的、设置、打印指南页面开发完成

2026-05-07 16:32:49 +08:00
parent 0737c6165e
commit c732111e12
43 changed files with 1702 additions and 837 deletions
@@ -200,45 +200,7 @@ Page({
        }
    },

-    async onBuildTap() {
-        if (this.data.building) return;
-
-        const confirmed = await new Promise<boolean>((resolve) => {
-            wx.showModal({
-                title: '更新分类页数据',
-                content:
-                    '将根据当前线上 worksheet 重新生成分类页数据，确认继续？',
-                success: (res) => resolve(!!res.confirm),
-                fail: () => resolve(false),
-            });
-        });
-        if (!confirmed) return;
-
-        this.setData({ building: true });
-
-        try {
-            const result = await callCloudFunction<{
-                version: number;
-                stats: Record<string, number>;
-            }>('pageContentBuild', { page: 'category' });
-
-            if (!result.success) {
-                throw new Error(result.message || '生成失败');
-            }
-
-            const version = result.data?.version || 0;
-            wx.showToast({
-                title: `生成成功 v${version}`,
-                icon: 'success',
-            });
-        } catch (error) {
-            wx.showToast({
-                title:
-                    error instanceof Error ? error.message : '生成失败',
-                icon: 'none',
-            });
-        } finally {
-            this.setData({ building: false });
-        }
-    },
+    // [v3.0] 分类页已改为实时接口查询，不再需要手动更新分类数据
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onBuildTap() {},
 });
@@ -90,7 +90,7 @@
        </view>
    </view>

-    <!-- Build Button -->
+    <!-- [v3.0] 分类页已改为实时接口查询，不再需要手动更新分类数据
    <view class="ccm-page__build">
        <toy-button
            type="primary"
@@ -101,4 +101,5 @@
            {{building ? '生成中...' : '更新分类页数据'}}
        </toy-button>
    </view>
+    -->
 </view>
@@ -1,6 +1,11 @@
 {
+    "navigationStyle": "custom",
    "navigationBarTitleText": "打印指南",
    "navigationBarTextStyle": "black",
-    "navigationBarBackgroundColor": "#f7ee47",
-    "backgroundColor": "#F6F6F6"
+    "navigationBarBackgroundColor": "#F8F0E0",
+    "backgroundColor": "#F8F0E0",
+    "usingComponents": {
+        "van-icon": "@vant/weapp/icon/index",
+        "nav-bar": "../../components3.0/nav-bar/nav-bar"
+    }
 }
@@ -1,45 +1,105 @@
-.guide-page {
-    min-height: 100vh;
-    background: #f6f6f6;
-    padding-bottom: 48rpx;
+@import '../../style/theme.less';
+
+page {
+    min-height: 100%;
+    background: @bg-header;
 }

+.guide-page {
+    min-height: 100vh;
+    background: @bg-header;
+    box-sizing: border-box;
+}
+
+.guide-page__body {
+    padding: @section-gap-xs @page-padding-x;
+    padding-bottom: calc(48rpx + env(safe-area-inset-bottom));
+    box-sizing: border-box;
+}
+
+/* Hero 主卡（参考 profile-hero） */
 .guide-page__hero {
-    background: linear-gradient(180deg, #f7ee47 0%, #e6d520 100%);
-    padding: 60rpx 40rpx;
+    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
+    padding: 80rpx @page-padding-inner-x 56rpx;
+    background: @bg-white;
+    border-radius: @radius-xl;
+    border: 1rpx solid rgba(124, 118, 106, 0.12);
+    box-shadow: @shadow;
+    overflow: hidden;
+    margin-bottom: @section-gap-xs;
+}
+
+.guide-page__hero-tint {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 192rpx;
+    background: @brand;
+    opacity: 0.1;
+    pointer-events: none;
+}
+
+.guide-page__hero-icon-wrap {
+    position: relative;
+    width: 144rpx;
+    height: 144rpx;
+    border-radius: 50%;
+    background: @brand;
+    border: 8rpx solid @bg-white;
+    box-shadow: @shadow;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    margin-top: 16rpx;
 }

 .guide-page__hero-icon {
-    font-size: 80rpx;
-    margin-bottom: 24rpx;
+    font-size: 72rpx;
+    line-height: 1;
 }

 .guide-page__hero-title {
+    margin-top: 32rpx;
    font-size: 40rpx;
-    font-weight: 700;
-    color: #333;
+    font-weight: 800;
+    color: @text-title;
+    text-align: center;
+    line-height: 1.2;
 }

+.guide-page__hero-sub {
+    margin-top: 16rpx;
+    font-size: 24rpx;
+    font-weight: 600;
+    color: @text-secondary;
+    text-align: center;
+    letter-spacing: 0.04em;
+}
+
+/* 步骤时间线卡片 */
 .guide-page__steps {
    position: relative;
-    padding: 40rpx 32rpx 24rpx 32rpx;
-    margin: 0 24rpx;
-    margin-top: -24rpx;
-    background: #fff;
-    border-radius: 24rpx;
-    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
+    padding: 56rpx 40rpx 16rpx;
+    background: @bg-white;
+    border-radius: @radius-xl;
+    border: 1rpx solid rgba(124, 118, 106, 0.12);
+    box-shadow: @shadow;
+    margin-bottom: @section-gap-xs;
+    box-sizing: border-box;
 }

 .guide-page__timeline-line {
    position: absolute;
-    left: 62rpx;
-    top: 100rpx;
-    bottom: 100rpx;
+    left: 70rpx;
+    top: 110rpx;
+    bottom: 110rpx;
    width: 4rpx;
-    background: #eee;
+    background: @bg-gray;
    z-index: 0;
 }

@@ -48,62 +108,66 @@
    z-index: 1;
    display: flex;
    flex-direction: row;
-    margin-bottom: 48rpx;
+    margin-bottom: 56rpx;
 }

 .guide-page__step--last {
-    margin-bottom: 0;
+    margin-bottom: 40rpx;
 }

 .guide-page__step-num-wrap {
    flex-shrink: 0;
    width: 64rpx;
-    margin-right: 24rpx;
+    margin-right: 32rpx;
    display: flex;
    justify-content: center;
 }

 .guide-page__step-num {
-    width: 60rpx;
-    height: 60rpx;
+    width: 64rpx;
+    height: 64rpx;
    border-radius: 50%;
-    background: #f7ee47;
-    font-size: 28rpx;
-    font-weight: 700;
-    color: #333;
+    background: @brand;
+    font-size: 30rpx;
+    font-weight: 800;
+    color: @text-selected-btn;
    display: flex;
    align-items: center;
    justify-content: center;
+    box-shadow: @shadow;
 }

 .guide-page__step-body {
    flex: 1;
    padding-top: 4rpx;
+    min-width: 0;
 }

 .guide-page__step-title {
    display: block;
    font-size: 32rpx;
-    font-weight: 600;
-    color: #333;
-    margin-bottom: 12rpx;
+    font-weight: 700;
+    color: @text-title;
+    margin-bottom: 16rpx;
 }

 .guide-page__step-desc {
    display: block;
-    font-size: 28rpx;
-    color: #666;
-    line-height: 1.55;
-    margin-bottom: 16rpx;
+    font-size: 26rpx;
+    color: @text-secondary;
+    line-height: 1.6;
+    margin-bottom: 20rpx;
 }

+/* 通用 Tip（弱提示） */
 .guide-page__tip {
-    background: #fff8e1;
-    border-radius: 16rpx;
+    background: @bg-header;
+    border-radius: @radius;
    padding: 20rpx 24rpx;
-    font-size: 26rpx;
-    color: #666;
-    line-height: 1.5;
+    font-size: 24rpx;
+    color: @text-secondary;
+    line-height: 1.55;
+    border: 1rpx solid rgba(124, 118, 106, 0.12);
 }

 .guide-page__tip-line {
@@ -115,36 +179,114 @@
    margin-bottom: 0;
 }

-.guide-page__faq-title {
-    font-size: 32rpx;
+/* 相册权限提示卡 */
+.guide-page__perm {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 24rpx 28rpx;
+    border-radius: @radius;
+    background: fade(@brand, 18%);
+    border: 1rpx solid fade(@brand, 36%);
+    box-sizing: border-box;
+}
+
+.guide-page__perm--granted {
+    background: fade(@brand, 12%);
+    border-color: fade(@brand, 28%);
+}
+
+.guide-page__perm--denied {
+    background: fade(@brand, 22%);
+    border-color: fade(@brand, 50%);
+}
+
+.guide-page__perm-icon-wrap {
+    flex-shrink: 0;
+    width: 56rpx;
+    height: 56rpx;
+    border-radius: 50%;
+    background: @bg-white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 20rpx;
+    box-shadow: @shadow;
+}
+
+.guide-page__perm-body {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.guide-page__perm-title {
+    display: block;
+    font-size: 26rpx;
    font-weight: 700;
-    color: #333;
-    padding: 40rpx 32rpx 16rpx;
+    color: @text-title;
+    line-height: 1.4;
+}
+
+.guide-page__perm-desc {
+    display: block;
+    margin-top: 8rpx;
+    font-size: 24rpx;
+    color: @text-secondary;
+    line-height: 1.55;
+}
+
+.guide-page__perm-btn {
+    align-self: flex-start;
+    margin-top: 20rpx;
+    padding: 14rpx 32rpx;
+    border-radius: 999rpx;
+    background: @brand;
+    color: @text-selected-btn;
+    font-size: 24rpx;
+    font-weight: 700;
+    box-shadow: @shadow;
+    line-height: 1;
+}
+
+/* FAQ */
+.guide-page__faq-title {
+    font-size: @fs-section-head-title;
+    font-weight: 800;
+    color: @text-title;
+    padding: 16rpx 8rpx 24rpx;
 }

 .guide-page__faq {
-    padding: 0 24rpx;
+    display: flex;
+    flex-direction: column;
 }

 .guide-page__faq-item {
-    background: #fff;
-    border-radius: 16rpx;
-    padding: 28rpx 32rpx;
-    margin-bottom: 20rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+    background: @bg-white;
+    border-radius: @radius-lg;
+    border: 1rpx solid rgba(124, 118, 106, 0.12);
+    padding: 32rpx 36rpx;
+    margin-bottom: 24rpx;
+    box-sizing: border-box;
+}
+
+.guide-page__faq-item--last {
+    margin-bottom: 0;
 }

 .guide-page__faq-q {
    display: block;
    font-size: 28rpx;
    font-weight: 700;
-    color: #333;
+    color: @text-title;
    margin-bottom: 12rpx;
 }

 .guide-page__faq-a {
    display: block;
    font-size: 26rpx;
-    color: #999;
-    line-height: 1.55;
-}
+    color: @text-secondary;
+    line-height: 1.6;
+}
@@ -1,7 +1,75 @@
+type AlbumAuthState = 'unknown' | 'granted' | 'denied';
+
+const ALBUM_SCOPE = 'scope.writePhotosAlbum';
+
 Page({
-    data: {},
+    data: {
+        albumAuthState: 'unknown' as AlbumAuthState,
+    },

    onLoad() {
-        // 静态说明页，无额外逻辑
+        this.refreshAlbumAuthState();
+    },
+
+    onShow() {
+        this.refreshAlbumAuthState();
+    },
+
+    refreshAlbumAuthState() {
+        wx.getSetting({
+            success: (res) => {
+                const auth = res.authSetting?.[ALBUM_SCOPE];
+                let state: AlbumAuthState = 'unknown';
+                if (auth === true) {
+                    state = 'granted';
+                } else if (auth === false) {
+                    state = 'denied';
+                }
+                this.setData({ albumAuthState: state });
+            },
+            fail: () => {
+                this.setData({ albumAuthState: 'unknown' });
+            },
+        });
+    },
+
+    onHandleAlbumPerm() {
+        const { albumAuthState } = this.data;
+
+        // 已被拒绝过：只能去系统设置打开
+        if (albumAuthState === 'denied') {
+            wx.openSetting({
+                success: (res) => {
+                    const granted = !!res.authSetting?.[ALBUM_SCOPE];
+                    this.setData({
+                        albumAuthState: granted ? 'granted' : 'denied',
+                    });
+                    if (granted) {
+                        wx.showToast({
+                            title: '已开启相册权限',
+                            icon: 'success',
+                            duration: 1500,
+                        });
+                    }
+                },
+            });
+            return;
+        }
+
+        // 未授权过：直接发起授权请求
+        wx.authorize({
+            scope: ALBUM_SCOPE,
+            success: () => {
+                this.setData({ albumAuthState: 'granted' });
+                wx.showToast({
+                    title: '已开启相册权限',
+                    icon: 'success',
+                    duration: 1500,
+                });
+            },
+            fail: () => {
+                this.setData({ albumAuthState: 'denied' });
+            },
+        });
    },
 });
@@ -1,63 +1,132 @@
 <view class="guide-page">
-    <view class="guide-page__hero">
-        <text class="guide-page__hero-icon">🖨️</text>
-        <text class="guide-page__hero-title">3 步完成打印</text>
-    </view>
+    <nav-bar title="打印指南" />

-    <view class="guide-page__steps">
-        <view class="guide-page__timeline-line" />
-
-        <view class="guide-page__step">
-            <view class="guide-page__step-num-wrap">
-                <view class="guide-page__step-num">1</view>
-            </view>
-            <view class="guide-page__step-body">
-                <text class="guide-page__step-title">保存到相册</text>
-                <text class="guide-page__step-desc">在练习纸预览页点击「保存」或「保存到相册」，授权后即可保存图片。</text>
-                <view class="guide-page__tip">提示：建议先关闭深色模式截图，打印对比度更好。</view>
+    <view class="guide-page__body">
+        <!-- Hero 卡片：白底大圆角 + 顶条品牌色（参考 profile 主卡） -->
+        <view class="guide-page__hero">
+            <view class="guide-page__hero-tint"></view>
+            <view class="guide-page__hero-icon-wrap">
+                <text class="guide-page__hero-icon">🖨️</text>
            </view>
+            <text class="guide-page__hero-title">3 步完成打印</text>
+            <text class="guide-page__hero-sub"
+                >保存图片 → 连接打印机 → 一键打印</text
+            >
        </view>

-        <view class="guide-page__step">
-            <view class="guide-page__step-num-wrap">
-                <view class="guide-page__step-num">2</view>
-            </view>
-            <view class="guide-page__step-body">
-                <text class="guide-page__step-title">连接打印机</text>
-                <text class="guide-page__step-desc">确保打印机与手机处于同一 Wi-Fi，或按打印机说明完成蓝牙配对。</text>
-                <view class="guide-page__tip">家用喷墨 / 激光打印机均可；A4 纸竖向打印即可。</view>
-            </view>
-        </view>
+        <!-- 步骤时间线 -->
+        <view class="guide-page__steps">
+            <view class="guide-page__timeline-line" />

-        <view class="guide-page__step guide-page__step--last">
-            <view class="guide-page__step-num-wrap">
-                <view class="guide-page__step-num">3</view>
+            <view class="guide-page__step">
+                <view class="guide-page__step-num-wrap">
+                    <view class="guide-page__step-num">1</view>
+                </view>
+                <view class="guide-page__step-body">
+                    <text class="guide-page__step-title">保存到相册</text>
+                    <text class="guide-page__step-desc">
+                        在练习纸预览页点击「保存到相册」，授权后即可下载图片到手机相册。
+                    </text>
+
+                    <!-- 相册权限提示（动态状态） -->
+                    <view
+                        class="guide-page__perm guide-page__perm--{{albumAuthState}}">
+                        <view class="guide-page__perm-icon-wrap">
+                            <van-icon
+                                wx:if="{{albumAuthState === 'granted'}}"
+                                name="checked"
+                                size="36rpx"
+                                color="#1fe000" />
+                            <van-icon
+                                wx:elif="{{albumAuthState === 'denied'}}"
+                                name="warning-o"
+                                size="36rpx"
+                                color="#e8793a" />
+                            <van-icon
+                                wx:else
+                                name="info-o"
+                                size="36rpx"
+                                color="#605b50" />
+                        </view>
+                        <view class="guide-page__perm-body">
+                            <text class="guide-page__perm-title"
+                                >{{albumAuthState === 'granted' ?
+                                '已开启相册权限' : albumAuthState === 'denied' ?
+                                '相册权限未开启' : '检查相册权限'}}</text
+                            >
+                            <text class="guide-page__perm-desc"
+                                >{{albumAuthState === 'granted' ?
+                                '可正常将练习纸保存到手机相册。' :
+                                albumAuthState === 'denied' ?
+                                '需要在系统设置中开启「保存到相册」权限，才能下载图片。'
+                                :
+                                '请确认是否已授权小程序保存图片到相册。'}}</text
+                            >
+                            <view
+                                wx:if="{{albumAuthState !== 'granted'}}"
+                                class="guide-page__perm-btn"
+                                bindtap="onHandleAlbumPerm"
+                                >{{albumAuthState === 'denied' ? '前往设置开启'
+                                : '立即检查授权'}}</view
+                            >
+                        </view>
+                    </view>
+                </view>
            </view>
-            <view class="guide-page__step-body">
-                <text class="guide-page__step-title">从相册打印</text>
-                <text class="guide-page__step-desc">打开手机相册，选中刚保存的练习纸图片，点击分享或打印。</text>
-                <view class="guide-page__tip">
-                    <text class="guide-page__tip-line">iPhone：分享 → 打印 → 选择打印机。</text>
-                    <text class="guide-page__tip-line">Android：更多 → 打印 或 使用系统相册自带的打印入口。</text>
+
+            <view class="guide-page__step">
+                <view class="guide-page__step-num-wrap">
+                    <view class="guide-page__step-num">2</view>
+                </view>
+                <view class="guide-page__step-body">
+                    <text class="guide-page__step-title">连接打印机</text>
+                    <text class="guide-page__step-desc">
+                        确保打印机与手机处于同一
+                        Wi-Fi，或按打印机说明完成蓝牙配对。
+                    </text>
+                    <view class="guide-page__tip">
+                        家用喷墨 / 激光打印机均可，A4 纸竖向打印即可。
+                    </view>
+                </view>
+            </view>
+
+            <view class="guide-page__step guide-page__step--last">
+                <view class="guide-page__step-num-wrap">
+                    <view class="guide-page__step-num">3</view>
+                </view>
+                <view class="guide-page__step-body">
+                    <text class="guide-page__step-title">从相册打印</text>
+                    <text class="guide-page__step-desc">
+                        打开手机相册，选中刚保存的练习纸图片，点击分享或打印。
+                    </text>
+                    <view class="guide-page__tip">
+                        <text class="guide-page__tip-line">
+                            iPhone：分享 → 打印 → 选择打印机。
+                        </text>
+                        <text class="guide-page__tip-line">
+                            Android：更多 → 打印，或使用系统相册自带的打印入口。
+                        </text>
+                    </view>
                </view>
            </view>
        </view>
-    </view>

-    <view class="guide-page__faq-title">常见问题</view>
+        <!-- FAQ -->
+        <view class="guide-page__faq-title">常见问题</view>

-    <view class="guide-page__faq">
-        <view class="guide-page__faq-item">
-            <text class="guide-page__faq-q">保存失败怎么办？</text>
-            <text class="guide-page__faq-a">请在小程序设置中开启相册写入权限，并检查手机存储空间是否充足。</text>
-        </view>
-        <view class="guide-page__faq-item">
-            <text class="guide-page__faq-q">打印出来太小/太大？</text>
-            <text class="guide-page__faq-a">在打印预览中选择「适应页面」或调整缩放比例，通常 100% 即可。</text>
-        </view>
-        <view class="guide-page__faq-item">
-            <text class="guide-page__faq-q">没有打印机？</text>
-            <text class="guide-page__faq-a">可将图片发到电脑或拷贝至 U 盘，在打印店完成打印。</text>
+        <view class="guide-page__faq">
+            <view class="guide-page__faq-item">
+                <text class="guide-page__faq-q">保存失败怎么办？</text>
+                <text class="guide-page__faq-a">
+                    请在小程序设置中开启相册写入权限，并检查手机存储空间是否充足。
+                </text>
+            </view>
+            <view class="guide-page__faq-item guide-page__faq-item--last">
+                <text class="guide-page__faq-q">没有打印机？</text>
+                <text class="guide-page__faq-a">
+                    可将图片发到电脑或拷贝至 U 盘，在打印店完成打印。
+                </text>
+            </view>
        </view>
    </view>
 </view>
@@ -0,0 +1,10 @@
+{
+    "navigationStyle": "custom",
+    "navigationBarTitleText": "设置",
+    "navigationBarTextStyle": "black",
+    "navigationBarBackgroundColor": "#F8F0E0",
+    "backgroundColor": "#F8F0E0",
+    "usingComponents": {
+        "nav-bar": "../../components3.0/nav-bar/nav-bar"
+    }
+}
@@ -0,0 +1,59 @@
+@import '../../style/theme.less';
+
+page {
+    min-height: 100%;
+    background: @bg-header;
+}
+
+.settings-page {
+    min-height: 100vh;
+    background: @bg-header;
+    box-sizing: border-box;
+}
+
+.settings-body {
+    padding: @section-gap-xs @page-padding-x;
+    box-sizing: border-box;
+}
+
+.settings-section {
+    background: @bg-white;
+    border-radius: @radius-lg;
+    border: 1rpx solid rgba(124, 118, 106, 0.12);
+    box-shadow: @shadow;
+    overflow: hidden;
+}
+
+.settings-action {
+    display: flex;
+    align-items: center;
+    padding: 36rpx @page-padding-inner-x;
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: @page-padding-inner-x;
+        right: @page-padding-inner-x;
+        bottom: 0;
+        height: 1rpx;
+        background: rgba(50, 46, 37, 0.08);
+    }
+
+    &:last-child::after {
+        display: none;
+    }
+
+    &:active {
+        background: rgba(50, 46, 37, 0.04);
+    }
+}
+
+.settings-action__text {
+    font-size: 30rpx;
+    color: @text-primary;
+}
+
+.settings-action--danger .settings-action__text {
+    color: #e53e3e;
+}
@@ -0,0 +1,74 @@
+import { clearUser } from '../../utils/auth';
+
+Page({
+    onClearProfile() {
+        wx.showModal({
+            title: '确认删除',
+            content: '删除后头像和昵称将恢复为默认状态，是否继续？',
+            confirmColor: '#e53e3e',
+            success: (res) => {
+                if (res.confirm) {
+                    this.doClearProfile();
+                }
+            },
+        });
+    },
+
+    async doClearProfile() {
+        wx.showLoading({ title: '处理中...', mask: true });
+        try {
+            const res = await wx.cloud.callFunction({
+                name: 'userSettings',
+                data: { action: 'clearProfile' },
+            });
+            const result = (res?.result as any) || {};
+            if (result.code !== 0) {
+                throw new Error(result.message || '操作失败');
+            }
+            clearUser();
+            wx.hideLoading();
+            wx.showToast({ title: '已删除', icon: 'success' });
+        } catch (e) {
+            wx.hideLoading();
+            console.error('clearProfile failed', e);
+            wx.showToast({ title: '操作失败，请稍后重试', icon: 'none' });
+        }
+    },
+
+    onDeleteAccount() {
+        wx.showModal({
+            title: '注销账户',
+            content:
+                '注销后您的所有数据（包括收藏、下载记录等）将被永久删除且无法恢复，确认要注销吗？',
+            confirmText: '确认注销',
+            confirmColor: '#e53e3e',
+            success: (res) => {
+                if (res.confirm) {
+                    this.doDeleteAccount();
+                }
+            },
+        });
+    },
+
+    async doDeleteAccount() {
+        wx.showLoading({ title: '处理中...', mask: true });
+        try {
+            const res = await wx.cloud.callFunction({
+                name: 'userSettings',
+                data: { action: 'deleteAccount' },
+            });
+            const result = (res?.result as any) || {};
+            if (result.code !== 0) {
+                throw new Error(result.message || '操作失败');
+            }
+            clearUser();
+            wx.hideLoading();
+
+            wx.reLaunch({ url: '/pages/home/home' });
+        } catch (e) {
+            wx.hideLoading();
+            console.error('deleteAccount failed', e);
+            wx.showToast({ title: '操作失败，请稍后重试', icon: 'none' });
+        }
+    },
+});
@@ -0,0 +1,16 @@
+<view class="settings-page">
+    <nav-bar title="设置" />
+
+    <view class="settings-body">
+        <view class="settings-section">
+            <view class="settings-action" bindtap="onClearProfile">
+                <text class="settings-action__text">删除头像和昵称</text>
+            </view>
+            <view
+                class="settings-action settings-action--danger"
+                bindtap="onDeleteAccount">
+                <text class="settings-action__text">注销账户</text>
+            </view>
+        </view>
+    </view>
+</view>