hulai-website/pages/admin/content/pricing.vue

<template>
  <div style="max-width: 1100px">
    <n-space justify="space-between" align="center" style="margin-bottom: 20px">
      <div>
        <h1 style="margin: 0 0 4px; font-size: 20px; font-weight: 600; color: #111827">价格配置</h1>
        <p style="margin: 0; font-size: 13px; color: #9ca3af">管理产品价格、费用说明、价格理念等内容</p>
      </div>
      <n-space>
        <n-button tag="a" href="/pricing" target="_blank" secondary>查看前台 ↗</n-button>
        <n-button type="primary" :loading="saving" @click="save">保存</n-button>
      </n-space>
    </n-space>

    <n-spin :show="!loaded">
      <n-collapse :default-expanded-names="['intro']">
        <!-- intro -->
        <n-collapse-item title="价格说明" name="intro">
          <n-card>
            <n-form label-placement="top">
              <n-form-item label="简介">
                <n-input v-model:value="data.intro" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" />
              </n-form-item>
            </n-form>
          </n-card>
        </n-collapse-item>

        <!-- products -->
        <n-collapse-item title="产品列表" name="products">
          <n-card>
            <div style="width: 100%">
              <n-card v-for="(p, i) in data.products" :key="i" size="small" style="margin-bottom: 12px">
                <template #header>
                  <n-space align="center">
                    <span style="font-size: 13px; font-weight: 500; color: #374151">{{ p.name || '新产品' }}</span>
                    <span style="font-size: 12px; color: #3a7d44">{{ p.priceLabel }}</span>
                    <n-button size="tiny" type="error" quaternary @click="data.products.splice(i, 1)">删除</n-button>
                  </n-space>
                </template>
                <n-form label-placement="top">
                  <n-grid :cols="2" :x-gap="12">
                    <n-gi><n-form-item label="产品ID"><n-input v-model:value="p.id" /></n-form-item></n-gi>
                    <n-gi><n-form-item label="产品名称"><n-input v-model:value="p.name" /></n-form-item></n-gi>
                    <n-gi><n-form-item label="价格标签"><n-input v-model:value="p.priceLabel" /></n-form-item></n-gi>
                    <n-gi><n-form-item label="链接"><n-input v-model:value="p.url" /></n-form-item></n-gi>
                  </n-grid>
                  <n-form-item label="价格说明">
                    <n-input v-model:value="p.priceNote" type="textarea" :autosize="{ minRows: 1, maxRows: 3 }" />
                  </n-form-item>
                  <n-grid :cols="3" :x-gap="12">
                    <n-gi><n-form-item label="标签"><n-input v-model:value="p.tag" /></n-form-item></n-gi>
                    <n-gi><n-form-item label="目标人群"><n-input v-model:value="p.audience" /></n-form-item></n-gi>
                    <n-gi>
                      <n-form-item label="天/晚">
                        <n-space>
                          <n-input-number v-model:value="p.days" placeholder="天" :min="0" style="width: 80px" />
                          <n-input-number v-model:value="p.nights" placeholder="晚" :min="0" style="width: 80px" />
                        </n-space>
                      </n-form-item>
                    </n-gi>
                  </n-grid>
                  <n-form-item label="亮点">
                    <n-dynamic-input v-model:value="p.highlights" :min="0" />
                  </n-form-item>
                </n-form>
              </n-card>
              <n-button size="small" type="primary" dashed @click="data.products.push({ id: '', name: '', priceLabel: '', priceNote: '', highlights: [], url: '', tag: '', audience: '', days: null, nights: null })">添加产品</n-button>
            </div>
          </n-card>
        </n-collapse-item>

        <!-- included / excluded -->
        <n-collapse-item title="费用包含/不包含" name="fees">
          <n-card>
            <n-form label-placement="top">
              <n-form-item label="费用包含">
                <n-dynamic-input v-model:value="data.included" :min="1" />
              </n-form-item>
              <n-form-item label="费用不包含">
                <n-dynamic-input v-model:value="data.excluded" :min="1" />
              </n-form-item>
            </n-form>
          </n-card>
        </n-collapse-item>

        <!-- philosophy -->
        <n-collapse-item title="价格理念" name="philosophy">
          <n-card>
            <n-form label-placement="top">
              <n-form-item label="标题">
                <n-input v-model:value="data.philosophy.title" />
              </n-form-item>
              <n-form-item label="内容">
                <n-input v-model:value="data.philosophy.content" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" />
              </n-form-item>
              <n-form-item label="承诺">
                <n-input v-model:value="data.philosophy.promise" />
              </n-form-item>
            </n-form>
          </n-card>
        </n-collapse-item>

        <!-- cta -->
        <n-collapse-item title="行动号召" name="cta">
          <n-card>
            <n-form label-placement="top">
              <n-grid :cols="2" :x-gap="12">
                <n-gi><n-form-item label="标题"><n-input v-model:value="data.cta.title" /></n-form-item></n-gi>
                <n-gi><n-form-item label="按钮文字"><n-input v-model:value="data.cta.button" /></n-form-item></n-gi>
              </n-grid>
              <n-form-item label="描述">
                <n-input v-model:value="data.cta.description" />
              </n-form-item>
              <n-form-item label="跳转链接">
                <n-input v-model:value="data.cta.to" />
              </n-form-item>
            </n-form>
          </n-card>
        </n-collapse-item>
      </n-collapse>
    </n-spin>
  </div>
</template>

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

definePageMeta({ layout: 'admin', middleware: 'admin' })
const { adminFetch } = useAdmin()
const message = useMessage()

const data = ref({
  intro: '',
  products: [],
  included: [],
  excluded: [],
  philosophy: { title: '', content: '', promise: '' },
  cta: { title: '', description: '', to: '', button: '' }
})
const loaded = ref(false)
const saving = ref(false)

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

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

onMounted(load)
</script>