num/client/pages/profile/edit.vue

<template>
  <view class="page-edit">
    <view class="header">
      <text class="title">编辑资料</text>
    </view>

    <view class="form">
      <!-- Avatar -->
      <view class="form-item avatar-item" @click="chooseAvatar">
        <image class="avatar" :src="form.avatarUrl || '/static/default-avatar.png'" mode="aspectFill" />
        <text class="avatar-hint">点击更换头像</text>
      </view>

      <!-- Nickname -->
      <view class="form-item">
        <text class="label">昵称</text>
        <input class="input" v-model="form.nickname" placeholder="输入昵称" maxlength="20" />
      </view>

      <!-- Gender -->
      <view class="form-item">
        <text class="label">性别</text>
        <view class="radio-group">
          <text class="radio" :class="{ active: form.gender === 1 }" @click="form.gender = 1">男</text>
          <text class="radio" :class="{ active: form.gender === 2 }" @click="form.gender = 2">女</text>
        </view>
      </view>

      <!-- Birth date -->
      <view class="form-item">
        <text class="label">出生日期</text>
        <picker mode="date" :value="form.birthDate" @change="onBirthDateChange" class="picker">
          <text class="picker-text" :class="{ muted: !form.birthDate }">
            {{ form.birthDate || '请选择出生日期' }}
          </text>
        </picker>
      </view>

      <!-- Bio -->
      <view class="form-item">
        <text class="label">个人简介</text>
        <textarea class="textarea" v-model="form.bio" placeholder="简单介绍一下自己" maxlength="100" />
        <text class="char-counter">{{ form.bio.length }}/100</text>
      </view>

      <!-- City -->
      <view class="form-item">
        <text class="label">所在城市</text>
        <input class="input" v-model="form.city" placeholder="输入城市" maxlength="50" />
      </view>

      <!-- Interest tags -->
      <view class="form-item">
        <text class="label">兴趣标签</text>
        <view class="tag-grid">
          <text
            v-for="tag in interestOptions"
            :key="tag"
            class="tag-item"
            :class="{ active: selectedTags.includes(tag) }"
            @click="toggleTag(tag)"
          >{{ tag }}</text>
        </view>
      </view>

      <!-- Looking for -->
      <view class="form-item">
        <text class="label">想认识</text>
        <view class="radio-group">
          <text
            v-for="opt in lookingOptions"
            :key="opt.value"
            class="radio"
            :class="{ active: form.lookingFor === opt.value }"
            @click="form.lookingFor = opt.value"
          >{{ opt.label }}</text>
        </view>
      </view>

      <!-- Submit -->
      <button class="submit-btn" @click="handleSubmit" :disabled="submitting">
        {{ submitting ? '保存中...' : '保存' }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { profileApi } from '@/utils/api'

const userStore = useUserStore()
const submitting = ref(false)

const interestOptions = ['读书', '运动', '音乐', '旅行', '禅修', '创业', '心理学', '玄学']
const lookingOptions = [
  { value: 0, label: '不限' },
  { value: 1, label: '朋友' },
  { value: 2, label: '导师' },
  { value: 3, label: '同修' }
]

const form = reactive({
  avatarUrl: '',
  nickname: '',
  gender: 0,
  birthDate: '',
  bio: '',
  city: '',
  tags: '',
  lookingFor: 0
})

const selectedTags = ref([])

onMounted(() => {
  // Pre-populate from store
  form.avatarUrl = userStore.avatarUrl || ''
  form.nickname = userStore.nickname || ''
  form.gender = userStore.gender || 0
  form.birthDate = userStore.birthDate || ''
  form.bio = userStore.bio || ''
  form.city = userStore.city || ''
  form.tags = userStore.tags || ''
  form.lookingFor = userStore.lookingFor || 0

  if (form.tags) {
    selectedTags.value = form.tags.split(',').filter(Boolean)
  }
})

function toggleTag(tag) {
  const idx = selectedTags.value.indexOf(tag)
  if (idx >= 0) {
    selectedTags.value.splice(idx, 1)
  } else {
    selectedTags.value.push(tag)
  }
  form.tags = selectedTags.value.join(',')
}

function onBirthDateChange(e) {
  form.birthDate = e.detail.value
}

function chooseAvatar() {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      form.avatarUrl = res.tempFilePaths[0]
      uni.showToast({ title: '头像已选择', icon: 'success' })
    }
  })
}

async function handleSubmit() {
  if (!form.nickname.trim()) {
    uni.showToast({ title: '请输入昵称', icon: 'none' })
    return
  }
  if (form.gender === 0) {
    uni.showToast({ title: '请选择性别', icon: 'none' })
    return
  }
  if (!form.birthDate) {
    uni.showToast({ title: '请选择出生日期', icon: 'none' })
    return
  }

  submitting.value = true
  try {
    await profileApi.update({
      nickname: form.nickname.trim(),
      avatarUrl: form.avatarUrl,
      gender: form.gender,
      birthDate: form.birthDate,
      bio: form.bio.trim(),
      city: form.city.trim(),
      tags: form.tags,
      lookingFor: form.lookingFor
    })
    await userStore.fetchProfile()
    uni.showToast({ title: '保存成功', icon: 'success' })
    setTimeout(() => {
      uni.navigateBack()
    }, 500)
  } catch (e) {
    uni.showToast({ title: e.message || '保存失败', icon: 'none' })
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped lang="scss">
.page-edit {
  min-height: 100vh;
  background: linear-gradient(180deg, #F8F9FF 0%, #EEF2FF 100%);
  padding: 20px 24px 40px;
}
.header {
  text-align: center;
  padding: 16px 0 24px;
}
.title {
  font-size: 20px;
  font-weight: 700;
  color: #1F2937;
  display: block;
}
.form {
  background: #fff;
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.form-item {
  margin-bottom: 20px;
}
.label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  display: block;
  margin-bottom: 8px;
}
.input {
  width: 100%;
  height: 44px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 15px;
  color: #1F2937;
  background: #F9FAFB;
  box-sizing: border-box;
}
.textarea {
  width: 100%;
  height: 88px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
  color: #1F2937;
  background: #F9FAFB;
  box-sizing: border-box;
  resize: none;
}
.char-counter {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 4px;
}

/* Avatar */
.avatar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #E5E7EB;
}
.avatar-hint {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 6px;
}

/* Radio group */
.radio-group {
  display: flex;
  gap: 12px;
}
.radio {
  flex: 1;
  height: 44px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #6B7280;
  background: #F9FAFB;
}
.radio.active {
  border-color: #4A148C;
  color: #4A148C;
  background: #F3EEFF;
}

/* Picker */
.picker {
  width: 100%;
}
.picker-text {
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 15px;
  color: #1F2937;
  background: #F9FAFB;
  box-sizing: border-box;
}
.picker-text.muted {
  color: #9CA3AF;
}

/* Tags */
.tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-item {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  color: #6B7280;
  background: #F3F4F6;
  border: 1px solid transparent;
}
.tag-item.active {
  color: #4A148C;
  background: #F3EEFF;
  border-color: #4A148C;
}

/* Submit */
.submit-btn {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #4A148C, #7B2DC8);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  margin-top: 8px;
}
.submit-btn[disabled] {
  opacity: 0.5;
}
</style>