hulai-website/pages/admin/content/qualifications.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="/qualifications" 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 title="安全保障" style="margin-bottom: 16px;">
          <template #header-extra>
            <n-button size="small" type="primary" @click="addTo('safetyGuarantees', { title: '', detail: '' })">添加</n-button>
          </template>
          <div v-for="(s, i) in data.safetyGuarantees" :key="i" style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px;">
            <n-input v-model:value="s.title" placeholder="标题" style="width: 160px;" />
            <n-input v-model:value="s.detail" placeholder="详情" style="flex: 1;" />
            <n-button size="small" type="error" @click="data.safetyGuarantees.splice(i, 1)">删</n-button>
          </div>
          <n-button dashed block @click="addTo('safetyGuarantees', { title: '', detail: '' })">+ 添加安全保障</n-button>
        </n-card>

        <!-- 资质证照 -->
        <n-card title="资质证照" style="margin-bottom: 16px;">
          <template #header-extra>
            <n-button size="small" type="primary" @click="addTo('licenses', { holder: '', issuer: '', licenseNo: '', validPeriod: '', note: '' })">添加</n-button>
          </template>
          <div v-for="(l, i) in data.licenses" :key="i" style="border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; margin-bottom: 8px; display: flex; gap: 8px; align-items: flex-start;">
            <div style="flex: 1; display: flex; flex-wrap: wrap; gap: 8px;">
              <n-input v-model:value="l.holder" placeholder="持有人" style="flex: 1; min-width: 100px;" />
              <n-input v-model:value="l.issuer" placeholder="颁发机构" style="flex: 1; min-width: 100px;" />
              <n-input v-model:value="l.licenseNo" placeholder="证号" style="flex: 1; min-width: 100px;" />
              <n-input v-model:value="l.validPeriod" placeholder="有效期" style="flex: 1; min-width: 100px;" />
              <n-input v-model:value="l.note" placeholder="备注" style="flex: 1; min-width: 100px;" />
            </div>
            <n-button size="small" type="error" @click="data.licenses.splice(i, 1)">删</n-button>
          </div>
          <n-button dashed block @click="addTo('licenses', { holder: '', issuer: '', licenseNo: '', validPeriod: '', note: '' })">+ 添加资质证照</n-button>
        </n-card>

        <!-- 荣誉奖项 -->
        <n-card title="荣誉奖项" style="margin-bottom: 16px;">
          <template #header-extra>
            <n-button size="small" type="primary" @click="addTo('awards', { year: '', title: '', detail: '', issuer: '' })">添加</n-button>
          </template>
          <div v-for="(a, i) in data.awards" :key="i" style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px;">
            <n-input v-model:value="a.year" placeholder="年份" style="width: 70px;" />
            <n-input v-model:value="a.title" placeholder="奖项名称" style="width: 200px;" />
            <n-input v-model:value="a.issuer" placeholder="颁发方" style="width: 130px;" />
            <n-input v-model:value="a.detail" placeholder="详情" style="flex: 1;" />
            <n-button size="small" type="error" @click="data.awards.splice(i, 1)">删</n-button>
          </div>
          <n-button dashed block @click="addTo('awards', { year: '', title: '', detail: '', issuer: '' })">+ 添加荣誉奖项</n-button>
        </n-card>

        <!-- 保险信息 -->
        <n-card v-if="data.insurance" title="保险信息" style="margin-bottom: 16px;">
          <n-grid :cols="2" :x-gap="12" :y-gap="12">
            <n-gi>
              <n-form-item label="标题">
                <n-input v-model:value="data.insurance.title" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="保险公司">
                <n-input v-model:value="data.insurance.insurer" />
              </n-form-item>
            </n-gi>
            <n-gi :span="2">
              <n-form-item label="描述">
                <n-input v-model:value="data.insurance.description" type="textarea" :rows="2" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="保障范围">
                <n-input v-model:value="data.insurance.policyScope" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="理赔联系">
                <n-input v-model:value="data.insurance.claimContact" />
              </n-form-item>
            </n-gi>
          </n-grid>
        </n-card>
      </template>
    </n-spin>
  </div>
</template>

<script setup>
import { NButton, NCard, NSpace, NInput, 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)

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

function addTo(key, template) {
  if (!data.value[key]) data.value[key] = []
  data.value[key].push({ ...template })
}

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

onMounted(load)
</script>