hulai-website/pages/admin/content/winter-camp.vue

<template>
  <div>
    <n-space justify="space-between" align="center" style="margin-bottom: 20px;">
      <div>
        <h1 style="margin: 0 0 4px; font-size: 22px; color: #1a1a2e;">小蒙马冬令营</h1>
        <p style="margin: 0; font-size: 13px; color: #888;">管理冬令营产品信息，对应官网「冬令营」页面</p>
      </div>
      <n-space>
        <n-button tag="a" href="/winter-camp" target="_blank">查看前台 ↗</n-button>
        <n-button type="primary" :loading="saving" @click="save">保存</n-button>
      </n-space>
    </n-space>

    <n-spin :show="!loaded">
      <template v-if="loaded">
        <!-- 基本信息 -->
        <n-card style="margin-bottom: 12px;">
          <template #header>
            <n-space justify="space-between" align="center" style="cursor: pointer;" @click="open.base = !open.base">
              <span>基本信息</span>
              <span style="color: #999; font-size: 12px;">{{ open.base ? '▼' : '▶' }}</span>
            </n-space>
          </template>
          <div v-show="open.base">
            <n-grid :cols="2" :x-gap="10" :y-gap="10">
              <n-gi>
                <n-form-item label="名称">
                  <n-input v-model:value="data.name" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="定位">
                  <n-input v-model:value="data.positioning" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="天数">
                  <n-input-number v-model:value="data.days" style="width: 100%;" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="晚数">
                  <n-input-number v-model:value="data.nights" style="width: 100%;" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="最大家庭数">
                  <n-input-number v-model:value="data.maxFamilies" style="width: 100%;" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="年龄段">
                  <n-input v-model:value="data.ageRange" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="定金">
                  <n-input v-model:value="data.deposit" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="路线">
                  <n-input v-model:value="data.route" />
                </n-form-item>
              </n-gi>
            </n-grid>
          </div>
        </n-card>

        <!-- 行程 -->
        <n-card style="margin-bottom: 12px;">
          <template #header>
            <n-space justify="space-between" align="center" style="cursor: pointer;" @click="open.itin = !open.itin">
              <span>每日行程 ({{ data.itinerary?.length || 0 }}天)</span>
              <span style="color: #999; font-size: 12px;">{{ open.itin ? '▼' : '▶' }}</span>
            </n-space>
          </template>
          <div v-show="open.itin">
            <div
              v-for="(day, i) in (data.itinerary || [])"
              :key="i"
              style="display: flex; gap: 12px; margin-bottom: 10px; padding: 10px; background: #fafbfc; border-radius: 6px;"
            >
              <div style="width: 36px; height: 36px; background: #3a7d44; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0;">
                D{{ day.day || i + 1 }}
              </div>
              <div style="flex: 1; display: flex; flex-direction: column; gap: 8px;">
                <n-form-item label="当日标题" :show-feedback="false">
                  <n-input v-model:value="day.title" placeholder="当日标题" />
                </n-form-item>
                <n-form-item label="行程概要" :show-feedback="false">
                  <n-input v-model:value="day.summary" placeholder="行程概要" type="textarea" :rows="2" />
                </n-form-item>
                <n-form-item v-if="day.highlights" label="亮点（每行一个）" :show-feedback="false">
                  <n-input
                    :value="(day.highlights || []).join('\n')"
                    @input="day.highlights = $event.split('\n').filter(Boolean)"
                    type="textarea"
                    :rows="2"
                  />
                </n-form-item>
                <n-form-item v-if="day.hotel !== undefined" label="住宿" :show-feedback="false">
                  <n-input v-model:value="day.hotel" />
                </n-form-item>
              </div>
            </div>
          </div>
        </n-card>

        <!-- 住宿安排 -->
        <n-card style="margin-bottom: 12px;">
          <template #header>
            <n-space justify="space-between" align="center" style="cursor: pointer;" @click="open.hotel = !open.hotel">
              <span>住宿安排 ({{ data.hotels?.length || 0 }})</span>
              <span style="color: #999; font-size: 12px;">{{ open.hotel ? '▼' : '▶' }}</span>
            </n-space>
          </template>
          <div v-show="open.hotel">
            <div
              v-for="(h, i) in (data.hotels || [])"
              :key="i"
              style="border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; margin-bottom: 10px;"
            >
              <n-grid :cols="2" :x-gap="10" :y-gap="10" style="margin-bottom: 10px;">
                <n-gi>
                  <n-form-item label="酒店名">
                    <n-input v-model:value="h.name" />
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="星级">
                    <n-input v-model:value="h.star" />
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="住几晚">
                    <n-input-number v-model:value="h.nights" style="width: 100%;" />
                  </n-form-item>
                </n-gi>
              </n-grid>
              <n-form-item label="描述">
                <n-input v-model:value="h.description" type="textarea" :rows="2" />
              </n-form-item>
            </div>
          </div>
        </n-card>

        <!-- FAQ -->
        <n-card v-if="data.faq?.length" style="margin-bottom: 12px;">
          <template #header>
            <n-space justify="space-between" align="center" style="cursor: pointer;" @click="open.faq = !open.faq">
              <span>常见问题 ({{ data.faq.length }})</span>
              <span style="color: #999; font-size: 12px;">{{ open.faq ? '▼' : '▶' }}</span>
            </n-space>
          </template>
          <div v-show="open.faq">
            <div
              v-for="(q, i) in data.faq"
              :key="i"
              style="padding: 10px; background: #fafbfc; border-radius: 6px; margin-bottom: 8px;"
            >
              <n-form-item label="Q">
                <n-input v-model:value="q.q" />
              </n-form-item>
              <n-form-item label="A">
                <n-input v-model:value="q.a" type="textarea" :rows="2" />
              </n-form-item>
            </div>
          </div>
        </n-card>
      </template>
    </n-spin>
  </div>
</template>

<script setup>
import { NButton, NCard, NSpace, NInput, NInputNumber, NFormItem, NSpin, NGrid, NGi } from 'naive-ui'
import { useMessage } from 'naive-ui'

definePageMeta({ layout: 'admin', middleware: 'admin' })
const { adminFetch } = useAdmin()
const message = useMessage()
const data = ref({})
const loaded = ref(false)
const saving = ref(false)
const open = reactive({ base: true })

async function load() {
  const res = await adminFetch('/api/admin/site-content?key=winter-camp')
  data.value = res.data
  loaded.value = true
}

async function save() {
  saving.value = true
  try {
    await adminFetch('/api/admin/site-content', { method: 'PUT', body: { key: 'winter-camp', data: data.value } })
    message.success('已保存')
  } catch {
    message.error('保存失败')
  } finally {
    saving.value = false
  }
}

onMounted(load)
</script>