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 title="企业矩阵" style="margin-bottom: 16px;">
          <n-grid :cols="2" :x-gap="12" :y-gap="12">
            <n-gi>
              <n-form-item label="企业总数">
                <n-input-number v-model:value="data.enterpriseMatrix.totalCount" style="width:100%" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="描述">
                <n-input v-model:value="data.enterpriseMatrix.description" />
              </n-form-item>
            </n-gi>
          </n-grid>
          <div style="margin-top:12px; font-weight:500; margin-bottom:8px;">企业列表</div>
          <div v-for="(c, i) in data.enterpriseMatrix.companies || []" :key="i" style="border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px; margin-bottom: 8px;">
            <n-grid :cols="4" :x-gap="8">
              <n-gi>
                <n-form-item label="名称" :show-feedback="false">
                  <n-input v-model:value="c.name" size="small" placeholder="企业名称" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="标签" :show-feedback="false">
                  <n-input v-model:value="c.tag" size="small" placeholder="如：核心旅行社" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="成立时间" :show-feedback="false">
                  <n-input v-model:value="c.established" size="small" placeholder="如：2023" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="角色" :show-feedback="false">
                  <n-input v-model:value="c.role" size="small" placeholder="职能描述" />
                </n-form-item>
              </n-gi>
            </n-grid>
            <n-button size="tiny" type="error" quaternary style="margin-top:4px;" @click="data.enterpriseMatrix.companies.splice(i, 1)">删除</n-button>
          </div>
          <n-button dashed block @click="data.enterpriseMatrix.companies.push({ name: '', tag: '', established: '', role: '' })">添加企业</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, 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)

async function load() {
  const res = await adminFetch('/api/admin/site-content?key=qualifications')
  data.value = res.data
  if (!data.value.enterpriseMatrix) {
    data.value.enterpriseMatrix = { totalCount: 0, description: '', companies: [] }
  }
  if (!data.value.enterpriseMatrix.companies) {
    data.value.enterpriseMatrix.companies = []
  }
  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>