release: freeze demo v1.1.0 2026-10-19

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

@@ -0,0 +1,172 @@
+<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>