danyang-match/h5-demo/src/pages/matchmaker/MatchmakerApplyPage.vue

<template>
  <PageLayout title="申请红娘服务">
    <div class="apply">
      <div class="apply__hero">
        <div class="apply__title">选择服务类型</div>
        <div class="apply__sub">告诉我们你的需求，红娘会提供公益协助</div>
      </div>

      <div class="apply__body">
        <div class="apply__grid">
          <div
            v-for="t in serviceTypes"
            :key="t.code"
            class="apply__type"
            :class="{ 'apply__type--active': selectedType === t.code }"
            @click="selectedType = t.code"
          >
            <div class="apply__type-icon">{{ t.icon }}</div>
            <div class="apply__type-name">{{ t.name }}</div>
          </div>
        </div>

        <div class="apply__field">
          <div class="apply__label">补充说明（可选）</div>
          <van-field
            v-model="description"
            type="textarea"
            rows="4"
            maxlength="500"
            show-word-limit
            placeholder="请描述您的情况或需求，方便红娘更好地为您服务"
          />
        </div>

        <p v-if="errorText" class="apply__error">{{ errorText }}</p>

        <van-button type="primary" block round :loading="submitting" @click="onSubmit">
          提交申请
        </van-button>
        <p class="apply__tip">红娘仅提供推荐与协助，不会代替你表达喜欢</p>
      </div>
    </div>
  </PageLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { matchmakerService } from '@/api/services'
import { useAppStore } from '@/stores/app'
import PageLayout from '@/layouts/PageLayout.vue'

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

/** 服务类型（对齐 miniapp/pages/matchmaker-apply/matchmaker-apply.js） */
const serviceTypes = [
  { code: 'recommend_partner', name: '帮我推荐合适的人', icon: '👤' },
  { code: 'review_preference', name: '帮我看看择偶条件', icon: '📋' },
  { code: 'contact_intention', name: '帮我联系意向对象', icon: '💬' },
  { code: 'join_activity', name: '想参加线下活动', icon: '🎉' },
  { code: 'no_match_help', name: '匹配很久没有结果', icon: '😟' },
  { code: 'chat_help', name: '不知道怎么开始聊天', icon: '✉️' },
  { code: 'other', name: '其他', icon: '❓' },
]

const selectedType = ref('')
const description = ref('')
const submitting = ref(false)
const errorText = ref('')

async function onSubmit() {
  if (submitting.value) return
  if (!selectedType.value) {
    appStore.toast('请选择服务类型')
    return
  }
  submitting.value = true
  errorText.value = ''
  try {
    await matchmakerService.applyService({
      serviceType: selectedType.value,
      description: description.value,
    })
    appStore.toastSuccess('申请已提交')
    router.replace('/matchmaker/progress')
  } catch (err: any) {
    errorText.value = err?.message || '提交失败，请稍后重试'
    appStore.toastError(errorText.value)
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.apply {
  min-height: 100vh;
  background: var(--mini-bg);
  padding-bottom: 24px;
}
.apply__hero {
  background: var(--mini-brand-gradient);
  color: #fff;
  padding: 20px 16px 22px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.apply__title {
  font-size: 18px;
  font-weight: 600;
}
.apply__sub {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 6px;
}
.apply__body {
  padding: 16px;
}
.apply__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.apply__type {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mini-surface);
  border: 1px solid transparent;
  border-radius: var(--mini-radius);
  padding: 12px;
  box-shadow: var(--mini-shadow);
}
.apply__type--active {
  border-color: var(--mini-tabbar-active);
  background: rgba(244, 0, 90, 0.04);
}
.apply__type-icon {
  font-size: 20px;
  flex: none;
}
.apply__type-name {
  font-size: 13px;
  color: var(--mini-text-strong);
}
.apply__field {
  margin-top: 16px;
  background: var(--mini-surface);
  border-radius: var(--mini-radius);
  overflow: hidden;
  box-shadow: var(--mini-shadow);
}
.apply__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mini-text-strong);
  padding: 12px 16px 0;
}
.apply__error {
  color: var(--mini-danger);
  font-size: 13px;
  margin: 12px 4px;
}
.apply__tip {
  font-size: 11px;
  color: var(--mini-text-muted);
  text-align: center;
  margin-top: 14px;
}
</style>