danyang-match/h5-demo/src/pages/onboarding/ProfilePhotosPage.vue

<template>
  <PageLayout title="头像与照片">
    <div class="pp">
      <UiLoading v-if="loading" text="加载照片…" />
      <UiErrorState v-else-if="error" @retry="loadPhotos" />

      <template v-else>
        <div class="card">
          <UiSectionHeader title="主头像" />
          <p class="pp__hint">必须上传 1 张清晰正面照</p>
          <div class="pp__grid">
            <div v-for="p in avatarPhotos" :key="p.photoId" class="pp__item" @click="preview(p)">
              <img :src="p.url" class="pp__img" alt="" />
              <div v-if="p.isMain || p.main" class="pp__main-flag">主头像</div>
              <div class="pp__remove" @click.stop="onRemove(p)">×</div>
            </div>
            <div v-if="avatarPhotos.length === 0" class="pp__add" @click="choose('avatar')">
              <span class="pp__add-icon">+</span>
              <span class="pp__add-text">上传头像</span>
            </div>
          </div>
        </div>

        <div class="card">
          <UiSectionHeader title="生活照片" />
          <p class="pp__hint">最多 {{ MAX_LIFESTYLE }} 张（可选）</p>
          <div class="pp__grid">
            <div v-for="p in lifestylePhotos" :key="p.photoId" class="pp__item" @click="preview(p)">
              <img :src="p.url" class="pp__img" alt="" />
              <div class="pp__remove" @click.stop="onRemove(p)">×</div>
            </div>
            <div v-if="lifestylePhotos.length < MAX_LIFESTYLE" class="pp__add" @click="choose('lifestyle')">
              <span class="pp__add-icon">+</span>
              <span class="pp__add-text">上传照片</span>
            </div>
          </div>
        </div>

        <div class="card">
          <UiSectionHeader title="上传须知" />
          <div class="pp__guidelines">
            <div v-for="(g, i) in guidelines" :key="i" class="pp__guideline">
              <span class="pp__dot"></span>
              <span class="pp__guideline-text">{{ g }}</span>
            </div>
          </div>
        </div>
      </template>

      <div class="pp__actions">
        <van-button type="primary" block round :disabled="loading || error" @click="onNext">下一步</van-button>
      </div>

      <input ref="fileInput" type="file" accept="image/*" class="pp__hidden-input" @change="onFileChange" />
    </div>
  </PageLayout>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { showConfirmDialog, showImagePreview } from 'vant'
import { profileService } from '@/api/services'
import { useAppStore } from '@/stores/app'
import PageLayout from '@/layouts/PageLayout.vue'
import UiLoading from '@/components/UiLoading.vue'
import UiErrorState from '@/components/UiErrorState.vue'
import UiSectionHeader from '@/components/UiSectionHeader.vue'

const router = useRouter()
const appStore = useAppStore()

const MAX_LIFESTYLE = 5 // 总上限 6（含 1 张头像）减 1

const fileInput = ref<HTMLInputElement | null>(null)
const loading = ref(true)
const error = ref(false)
const uploadTarget = ref<'avatar' | 'lifestyle'>('avatar')
const avatarPhotos = ref<any[]>([])
const lifestylePhotos = ref<any[]>([])
const guidelines = [
  '请使用本人近期真实照片',
  '禁止网图、二维码、广告、联系方式图片',
  '建议真人生活照，避免过度美颜',
]

async function loadPhotos() {
  loading.value = true
  error.value = false
  try {
    const result: any = await profileService.getPhotos()
    const photos = result?.photos || result?.items || result?.records || []
    avatarPhotos.value = photos.filter((p: any) => p.photoType === 'avatar')
    lifestylePhotos.value = photos.filter((p: any) => p.photoType === 'lifestyle')
  } catch {
    error.value = true
  } finally {
    loading.value = false
  }
}

function choose(target: 'avatar' | 'lifestyle') {
  if (target === 'lifestyle' && lifestylePhotos.value.length >= MAX_LIFESTYLE) {
    appStore.toast(`最多上传 ${MAX_LIFESTYLE} 张生活照`)
    return
  }
  uploadTarget.value = target
  fileInput.value?.click()
}

async function onFileChange(evt: Event) {
  const input = evt.target as HTMLInputElement
  const file = input.files?.[0]
  input.value = ''
  if (!file) return
  const photoType = uploadTarget.value
  try {
    const token: any = await profileService.requestUploadToken({
      fileName: `photo_${Date.now()}.jpg`,
      contentType: file.type || 'image/jpeg',
    })
    await fetch(token.uploadUrl, {
      method: 'PUT',
      body: file,
      headers: { 'Content-Type': file.type || 'image/jpeg' },
    })
    const confirmRes: any = await profileService.confirmPhoto({ fileKey: token.fileKey, photoType })
    if ((photoType === 'avatar' || avatarPhotos.value.length === 0) && confirmRes?.photoId) {
      await profileService.setMainPhoto(confirmRes.photoId)
    }
    appStore.toastSuccess('上传成功')
    await loadPhotos()
  } catch {
    appStore.toastError('上传失败，请稍后重试')
  }
}

async function onRemove(photo: any) {
  try {
    await showConfirmDialog({ title: '删除照片', message: '确定删除这张照片？删除后不可恢复。' })
  } catch {
    return
  }
  try {
    await profileService.deletePhoto(photo.photoId)
    appStore.toastSuccess('已删除')
    await loadPhotos()
  } catch (err: any) {
    appStore.toastError(err?.message || '删除失败')
  }
}

function preview(photo: any) {
  const urls = [...avatarPhotos.value, ...lifestylePhotos.value].map((p) => p.url).filter(Boolean)
  if (!urls.length) return
  showImagePreview({ images: urls, startPosition: urls.indexOf(photo.url) })
}

function onNext() {
  if (avatarPhotos.value.length === 0) {
    appStore.toast('请至少上传 1 张主头像')
    return
  }
  router.push('/profile/interests')
}

onMounted(loadPhotos)
</script>

<style scoped>
.pp__hint {
  font-size: 12px;
  color: var(--mini-text-secondary);
  margin: 0 0 8px;
  line-height: 1.4;
}
.pp {
  padding: 16px;
}
.card {
  background: var(--mini-surface);
  border-radius: var(--mini-radius);
  box-shadow: var(--mini-shadow);
  padding: 4px 16px 14px;
  margin-bottom: 12px;
}
.pp__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.pp__item {
  position: relative;
  padding-top: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--mini-bg);
}
.pp__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp__main-flag {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 10px;
  color: #fff;
  background: var(--mini-tabbar-active);
  padding: 1px 6px;
  border-top-right-radius: 8px;
}
.pp__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.pp__add {
  position: relative;
  padding-top: 100%;
  border: 1px dashed var(--mini-border, #dcdfe6);
  border-radius: 10px;
  color: var(--mini-text-secondary);
}
.pp__add-icon {
  position: absolute;
  top: 28%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 24px;
}
.pp__add-text {
  position: absolute;
  top: 58%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
}
.pp__guidelines {
  margin-top: 4px;
}
.pp__guideline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.pp__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mini-tabbar-active);
  flex: none;
}
.pp__guideline-text {
  font-size: 13px;
  color: var(--mini-text-secondary);
}
.pp__actions {
  margin-top: 8px;
}
.pp__hidden-input {
  display: none;
}
</style>