feat(profile): 添加用户资料完善功能

- 新增 profile-setup 页面用于完善用户头像、昵称和手机号 - 实现 nicknameCheck 工具函数检查用户是否需要完善资料 - 在登录流程中集成资料完善检查和跳转逻辑 - 更新上传和用户页面以支持资料完善前置验证 - 配置新页面路由和导航栏样式设置

feat(profile): 添加用户资料完善功能
- 新增 profile-setup 页面用于完善用户头像、昵称和手机号 - 实现 nicknameCheck 工具函数检查用户是否需要完善资料 - 在登录流程中集成资料完善检查和跳转逻辑 - 更新上传和用户页面以支持资料完善前置验证 - 配置新页面路由和导航栏样式设置
王天杨 · 王天杨
1 parent 3a3dc915
Showing 7 changed files with 416 additions and 4 deletions
稻城亚丁小程序/uniapp/src/pages.json
稻城亚丁小程序/uniapp/src/pages/login/login.vue
稻城亚丁小程序/uniapp/src/pages/profile-setup/profile-setup.vue
稻城亚丁小程序/uniapp/src/pages/upload/upload.vue
稻城亚丁小程序/uniapp/src/pages/user/user.vue
稻城亚丁小程序/uniapp/src/utils/guestTabGuard.ts
稻城亚丁小程序/uniapp/src/utils/nicknameCheck.ts
@@ -54,6 +54,14 @@
       }
     },
     {
+      "path": "pages/profile-setup/profile-setup",
+      "style": {
+        "navigationBarTitleText": "完善资料",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black"
+      }
+    },
+    {
       "path": "pages/photo-detail/photo-detail",
       "style": {
         "navigationBarTitleText": "作品详情",
@@ -83,6 +83,7 @@ import {
 } from "@/config/api";
 import { getMpToken } from "@/utils/api/http";
 import { getMpLoginChannel, loginAsGuest, loginWithPhone, loginWithWeixin } from "@/utils/api/mpSession";
+import { needsProfileSetup } from "@/utils/nicknameCheck";
 import { staticAsset } from "@/utils/staticAsset";
 const statusBarHeight = ref(20);
 const headerBg = staticAsset("login-header.png");
@@ -190,17 +191,26 @@ function normalizeAuditSafeMessage(msg: string): string {
   return m;
 }
-async function onWeixinLogin() {
+async function onWeixinLogin(_e?: any) {
   errMsg.value = "";
   loading.value = true;
   try {
     // #ifdef MP-WEIXIN
-    await loginWithWeixin();
+    const user = await loginWithWeixin();
     // #endif
     // #ifndef MP-WEIXIN
     await loginAsGuest();
+    const user = null;
     // #endif
     uni.showToast({ title: "登录成功", icon: "success" });
+    // #ifdef MP-WEIXIN
+    if (needsProfileSetup()) {
+      setTimeout(() => {
+        uni.navigateTo({ url: "/pages/profile-setup/profile-setup" });
+      }, 500);
+      return;
+    }
+    // #endif
     afterLoginNavigate();
   } catch (e: unknown) {
     const raw = appendLoopbackConnectHint(pickErr(e, "登录失败"));
+<template>
+  <view class="page">
+    <view class="header">
+      <text class="title">完善个人资料</text>
+      <text class="sub">设置头像、昵称和手机号，让作品更有辨识度</text>
+    </view>
+
+    <!-- 头像 -->
+    <view class="avatar-section">
+      <button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
+        <image
+          v-if="avatarTemp"
+          class="avatar-img"
+          :src="avatarTemp"
+          mode="aspectFill"
+        />
+        <view v-else class="avatar-placeholder">
+          <text class="avatar-placeholder-icon">+</text>
+          <text class="avatar-placeholder-text">点击设置头像</text>
+        </view>
+      </button>
+    </view>
+
+    <!-- 昵称 -->
+    <view class="name-section">
+      <text class="label">昵称</text>
+      <input
+        class="name-input"
+        type="nickname"
+        v-model="nickname"
+        maxlength="16"
+        placeholder="填写昵称"
+        placeholder-class="name-ph"
+      />
+      <view class="line" />
+    </view>
+
+    <!-- 手机号 -->
+    <!-- #ifdef MP-WEIXIN -->
+    <view class="phone-section">
+      <text class="label">手机号</text>
+      <button
+        class="phone-btn"
+        open-type="getPhoneNumber"
+        @getphonenumber="onGetPhoneNumber"
+      >
+        <text v-if="phoneNumber" class="phone-val">{{ phoneNumber }}</text>
+        <text v-else class="phone-ph">点击获取微信绑定手机号</text>
+      </button>
+      <view class="line" />
+    </view>
+    <!-- #endif -->
+
+    <view class="actions">
+      <button class="btn-save" :disabled="saving" @click="onSubmit">
+        <text v-if="saving">保存中…</text>
+        <text v-else>完成</text>
+      </button>
+      <text class="skip-link" @click="goHome">跳过，以后再设</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import { loadUserProfile, saveUserProfile } from "@/utils/userProfileStorage";
+import { uploadImage, post } from "@/utils/api/http";
+import { isAlreadyPersistedAvatarUrl } from "@/utils/avatarUpload";
+import { bindWechatPhone } from "@/utils/api/mpSession";
+
+const nickname = ref("");
+const avatarTemp = ref("");
+const phoneNumber = ref("");
+const saving = ref(false);
+
+onLoad(() => {
+  const profile = loadUserProfile();
+  nickname.value = profile.nickname || "";
+  avatarTemp.value = profile.avatarUrl || "";
+  phoneNumber.value = profile.phone || "";
+});
+
+function onChooseAvatar(e: any) {
+  const url = e?.detail?.avatarUrl;
+  if (url) {
+    avatarTemp.value = url;
+  }
+}
+
+async function onGetPhoneNumber(e: any) {
+  const code = e?.detail?.code;
+  if (!code) {
+    uni.showToast({ title: "未获取到手机号授权", icon: "none" });
+    return;
+  }
+  try {
+    const phone = await bindWechatPhone(code);
+    phoneNumber.value = phone;
+    uni.showToast({ title: "手机号已获取", icon: "success" });
+  } catch (err: unknown) {
+    const msg =
+      err && typeof err === "object" && "msg" in err
+        ? (err as { msg: string }).msg
+        : "手机号绑定失败";
+    uni.showToast({ title: msg as string, icon: "none" });
+  }
+}
+
+function goHome() {
+  uni.switchTab({ url: "/pages/home/home" });
+}
+
+async function onSubmit() {
+  const nick = nickname.value.trim();
+  // #ifdef MP-WEIXIN
+  const phone = phoneNumber.value.trim();
+  if (!phone) {
+    uni.showToast({ title: "请先绑定手机号", icon: "none" });
+    return;
+  }
+  // #endif
+
+  saving.value = true;
+  try {
+    let avatarUrl = avatarTemp.value.trim();
+    if (avatarUrl && !isAlreadyPersistedAvatarUrl(avatarUrl)) {
+      try {
+        avatarUrl = await uploadImage(avatarUrl);
+      } catch {
+        uni.showToast({ title: "头像上传失败，请重试", icon: "none" });
+        saving.value = false;
+        return;
+      }
+    }
+
+    // #ifdef MP-WEIXIN
+    if (phone) {
+      saveUserProfile({
+        nickname: nick,
+        avatarUrl,
+        bio: loadUserProfile().bio,
+        gender: loadUserProfile().gender,
+        phone,
+      });
+    }
+    // #endif
+
+    await post("/api/v1/me/profile", {
+      nickname: nick || undefined,
+      avatarUrl: avatarUrl || undefined,
+    });
+
+    // #ifndef MP-WEIXIN
+    saveUserProfile({
+      nickname: nick,
+      avatarUrl,
+      bio: loadUserProfile().bio,
+      gender: loadUserProfile().gender,
+      phone: loadUserProfile().phone,
+    });
+    // #endif
+
+    uni.showToast({ title: "已保存", icon: "success" });
+    setTimeout(() => goHome(), 500);
+  } catch {
+    uni.showToast({ title: "保存失败，请重试", icon: "none" });
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 100rpx 48rpx 0;
+  box-sizing: border-box;
+  background: #fff;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 60rpx;
+}
+
+.title {
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 16rpx;
+}
+
+.sub {
+  font-size: 26rpx;
+  color: #9ca3af;
+}
+
+.avatar-section {
+  margin-bottom: 48rpx;
+}
+
+.avatar-btn {
+  width: 160rpx;
+  height: 160rpx;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  overflow: visible;
+  line-height: 1;
+}
+
+.avatar-btn::after {
+  display: none;
+}
+
+.avatar-img {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 50%;
+}
+
+.avatar-placeholder {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 50%;
+  border: 4rpx dashed #d1d5db;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #f9fafb;
+}
+
+.avatar-placeholder-icon {
+  font-size: 48rpx;
+  color: #9ca3af;
+  line-height: 1;
+  margin-bottom: 4rpx;
+}
+
+.avatar-placeholder-text {
+  font-size: 20rpx;
+  color: #9ca3af;
+}
+
+.name-section,
+.phone-section {
+  width: 100%;
+  margin-bottom: 40rpx;
+}
+
+.label {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 16rpx;
+}
+
+.name-input {
+  display: block;
+  width: 100%;
+  height: 80rpx;
+  padding: 0 4rpx;
+  font-size: 32rpx;
+  color: #111827;
+  background: transparent;
+}
+
+.name-ph {
+  color: #c4c4c4;
+  font-size: 28rpx;
+}
+
+.phone-btn {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 80rpx;
+  padding: 0 4rpx;
+  margin: 0;
+  border: none;
+  background: transparent;
+  text-align: left;
+  font-size: 32rpx;
+  line-height: 1;
+}
+
+.phone-btn::after {
+  display: none;
+}
+
+.phone-val {
+  color: #111827;
+}
+
+.phone-ph {
+  color: #c4c4c4;
+  font-size: 28rpx;
+}
+
+.line {
+  height: 1rpx;
+  margin-top: 8rpx;
+  background: #e5e7eb;
+}
+
+.actions {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20rpx;
+}
+
+.btn-save {
+  width: 100%;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24rpx;
+  padding: 0;
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #fff;
+  background: #2185ff;
+  border: none;
+  border-radius: 999rpx;
+}
+
+.btn-save::after {
+  display: none;
+}
+
+.btn-save[disabled] {
+  opacity: 0.6;
+}
+
+.skip-link {
+  font-size: 26rpx;
+  color: #9ca3af;
+  padding: 16rpx;
+}
+</style>
@@ -167,7 +167,7 @@ import {
   uploadImage,
 } from "@/utils/api/http";
 import { ensureMpSession, getMpLoginChannel } from "@/utils/api/mpSession";
-import { reLaunchLoginIfNoBoundPhone } from "@/utils/guestTabGuard";
+import { reLaunchLoginIfNoBoundPhone, redirectToProfileSetupIfNeeded } from "@/utils/guestTabGuard";
 import { consumeUploadFormClearFlag } from "@/utils/uploadTabClear";
 import { resolveMediaUrl } from "@/utils/mediaUrl";
 import { consumeUploadResubmitWorkId } from "@/utils/uploadResubmit";
@@ -277,6 +277,9 @@ onShow(() =&gt; {
   if (reLaunchLoginIfNoBoundPhone()) {
     return;
   }
+  if (redirectToProfileSetupIfNeeded()) {
+    return;
+  }
   const rid = consumeUploadResubmitWorkId();
   if (apiOn.value && rid > 0) {
     void loadWorkForEdit(rid);
@@ -287,7 +287,7 @@ import {
   isMpSessionExpiredError,
 } from "@/utils/api/http";
 import { ensureMpSession, getMpLoginChannel } from "@/utils/api/mpSession";
-import { reLaunchLoginIfNoBoundPhone } from "@/utils/guestTabGuard";
+import { reLaunchLoginIfNoBoundPhone, redirectToProfileSetupIfNeeded } from "@/utils/guestTabGuard";
 import { resolveMediaUrl } from "@/utils/mediaUrl";
 const statusBarHeight = ref(20);
@@ -511,6 +511,9 @@ onShow(() =&gt; {
   if (reLaunchLoginIfNoBoundPhone()) {
     return;
   }
+  if (redirectToProfileSetupIfNeeded()) {
+    return;
+  }
   profile.value = loadUserProfile();
   void loadUserFromApi();
 });
+import { needsProfileSetup } from "./nicknameCheck";
+
 /**
  * 先浏览后登录；不再强制绑定手机号后才可使用上传/我的。
  * 保留函数签名，避免各处 import 大面积改动；始终视为「未处于仅差手机号」状态。
@@ -10,3 +12,15 @@ export function isLoggedInWithoutBoundPhone(): boolean {
 export function reLaunchLoginIfNoBoundPhone(): boolean {
   return false;
 }
+
+/**
+ * 检查当前用户是否缺少必要资料（昵称为占位名 或 未绑定手机号），
+ * 若是则跳转到资料完善页。返回 true 表示已触发跳转。
+ */
+export function redirectToProfileSetupIfNeeded(): boolean {
+  if (needsProfileSetup()) {
+    uni.navigateTo({ url: "/pages/profile-setup/profile-setup" });
+    return true;
+  }
+  return false;
+}
+import { loadUserProfile } from "./userProfileStorage";
+
+/**
+ * 检查当前用户昵称是否为通用占位名
+ * （微信用户 / 游客 / 空 表示用户尚未完善个人资料）
+ */
+export function isGenericNickname(): boolean {
+  const profile = loadUserProfile();
+  const name = String(profile.nickname || "").trim();
+  return name === "" || name === "微信用户" || name === "游客";
+}
+
+/**
+ * 检查用户是否缺少必要资料（昵称为占位名 或 手机号为空）
+ */
+export function needsProfileSetup(): boolean {
+  const profile = loadUserProfile();
+  const name = String(profile.nickname || "").trim();
+  const phone = String(profile.phone || "").trim();
+  return name === "" || name === "微信用户" || name === "游客" || phone === "";
+}