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

<template>
  <PageLayout title="兴趣与生活方式">
    <div class="pi">
      <UiLoading v-if="loading" text="加载中…" />

      <div class="card">
        <UiSectionHeader title="兴趣" />
        <p class="pi__hint">最多选择 {{ MAX_TAGS }} 项（{{ selectedCount }}/{{ MAX_TAGS }}）</p>
        <div class="pi__tags">
          <span
            v-for="t in interests"
            :key="t.code"
            class="pi__tag"
            :class="{ 'pi__tag--selected': t.selected }"
            @click="toggleInterest(t)"
          >
            {{ t.name }}
          </span>
        </div>
      </div>

      <div class="card">
        <UiSectionHeader title="生活方式" />
        <p class="pi__hint">可选，多选</p>
        <div class="pi__tags">
          <span
            v-for="t in lifestyles"
            :key="t.code"
            class="pi__tag"
            :class="{ 'pi__tag--selected': t.selected }"
            @click="t.selected = !t.selected"
          >
            {{ t.name }}
          </span>
        </div>
      </div>

      <div class="pi__actions">
        <van-button type="primary" block round :loading="saving" @click="onNext">下一步</van-button>
      </div>
    </div>
  </PageLayout>
</template>

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

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

const MAX_TAGS = 8

const loading = ref(true)
const saving = ref(false)

const interests = ref([
  { code: 'travel', name: '旅行', selected: false },
  { code: 'reading', name: '阅读', selected: false },
  { code: 'sports', name: '运动', selected: false },
  { code: 'fitness', name: '健身', selected: false },
  { code: 'photography', name: '摄影', selected: false },
  { code: 'movie', name: '电影', selected: false },
  { code: 'music', name: '音乐', selected: false },
  { code: 'food', name: '美食', selected: false },
  { code: 'cooking', name: '烹饪', selected: false },
  { code: 'outdoor', name: '户外', selected: false },
  { code: 'pets', name: '宠物', selected: false },
  { code: 'games', name: '游戏', selected: false },
  { code: 'culture', name: '传统文化', selected: false },
  { code: 'charity', name: '公益活动', selected: false },
  { code: 'other', name: '其他', selected: false },
])
const lifestyles = ref([
  { code: 'quiet', name: '喜欢安静', selected: false },
  { code: 'social', name: '喜欢社交', selected: false },
  { code: 'outdoor', name: '喜欢户外', selected: false },
  { code: 'homebody', name: '居家型', selected: false },
  { code: 'regular_work', name: '工作规律', selected: false },
  { code: 'frequent_travel', name: '经常出差', selected: false },
  { code: 'family_oriented', name: '注重家庭', selected: false },
  { code: 'other', name: '其他', selected: false },
])

const selectedCount = computed(() => interests.value.filter((o) => o.selected).length)

function toggleInterest(t: { code: string; name: string; selected: boolean }) {
  if (!t.selected && selectedCount.value >= MAX_TAGS) {
    appStore.toast(`最多选择 ${MAX_TAGS} 个兴趣`)
    return
  }
  t.selected = !t.selected
}

async function load() {
  loading.value = true
  try {
    const p: any = await profileService.getProfile()
    const savedInterests: string[] = p?.interests || []
    const savedLifestyles: string[] = p?.lifestyles || []
    interests.value = interests.value.map((o) => ({ ...o, selected: savedInterests.includes(o.code) }))
    lifestyles.value = lifestyles.value.map((o) => ({ ...o, selected: savedLifestyles.includes(o.code) }))
  } catch {
    /* 首次填写 */
  } finally {
    loading.value = false
  }
}

async function onNext() {
  if (saving.value) return
  saving.value = true
  try {
    await profileService.updateProfile({
      interests: interests.value.filter((o) => o.selected).map((o) => o.code),
      lifestyles: lifestyles.value.filter((o) => o.selected).map((o) => o.code),
    })
    router.push('/profile/intent')
  } catch (err: any) {
    appStore.toastError(err?.message || '保存失败')
  } finally {
    saving.value = false
  }
}

onMounted(load)
</script>

<style scoped>
.pi__hint {
  font-size: 12px;
  color: var(--mini-text-secondary);
  margin: 0 0 8px;
  line-height: 1.4;
}
.pi {
  padding: 16px;
}
.card {
  background: var(--mini-surface);
  border-radius: var(--mini-radius);
  box-shadow: var(--mini-shadow);
  padding: 4px 16px 14px;
  margin-bottom: 12px;
}
.pi__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.pi__tag {
  font-size: 13px;
  color: var(--mini-text);
  background: var(--mini-bg);
  border-radius: 16px;
  padding: 7px 14px;
  border: 1px solid transparent;
}
.pi__tag--selected {
  color: var(--mini-tabbar-active);
  background: rgba(244, 0, 90, 0.08);
  border-color: var(--mini-tabbar-active);
}
.pi__actions {
  margin-top: 8px;
}
</style>