frontend-admin / Daocheng-Yading

<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>