hulai-website/pages/admin/content/contact.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="/contact" target="_blank" secondary>查看前台 ↗</n-button>
        <n-button type="primary" :loading="saving" @click="save">保存</n-button>
      </n-space>
    </n-space>

    <n-spin :show="!loaded">
      <n-space vertical :size="16">
        <!-- 联系渠道 -->
        <n-card title="联系渠道">
          <template #header-extra>
            <n-button size="small" type="primary" @click="addChannel">添加渠道</n-button>
          </template>
          <n-space vertical :size="12">
            <div
              v-for="(ch, idx) in data.channels"
              :key="idx"
              style="border: 1px solid #e5e7eb; border-radius: 6px; padding: 14px"
            >
              <n-space justify="space-between" align="flex-start">
                <n-form label-placement="top" style="flex: 1">
                  <n-grid :cols="2" :x-gap="12" :y-gap="4">
                    <n-gi>
                      <n-form-item label="类型">
                        <n-select
                          v-model:value="ch.type"
                          :options="typeOptions"
                        />
                      </n-form-item>
                    </n-gi>
                    <n-gi>
                      <n-form-item label="标签">
                        <n-input v-model:value="ch.label" />
                      </n-form-item>
                    </n-gi>
                    <n-gi>
                      <n-form-item label="值">
                        <n-input v-model:value="ch.value" />
                      </n-form-item>
                    </n-gi>
                    <n-gi>
                      <n-form-item label="描述">
                        <n-input v-model:value="ch.description" />
                      </n-form-item>
                    </n-gi>
                    <n-gi>
                      <n-form-item label=" ">
                        <n-space>
                          <n-checkbox v-model:checked="ch.primary">主要</n-checkbox>
                          <n-checkbox v-model:checked="ch.hidden">隐藏</n-checkbox>
                        </n-space>
                      </n-form-item>
                    </n-gi>
                    <n-gi v-if="ch.type === 'wechat' || ch.type === 'miniprogram'" :span="2">
                      <n-form-item label="二维码图片">
                        <AdminImageUpload v-model="ch.qrImage" />
                      </n-form-item>
                    </n-gi>
                  </n-grid>
                </n-form>
                <n-button size="tiny" type="error" quaternary @click="data.channels.splice(idx, 1)">删除</n-button>
              </n-space>
            </div>
          </n-space>
        </n-card>

        <!-- 安全提示 -->
        <n-card title="安全提示文案">
          <n-input v-model:value="data.securityNotice" type="textarea" :rows="3" />
        </n-card>
      </n-space>
    </n-spin>
  </div>
</template>

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

definePageMeta({ layout: 'admin', middleware: 'admin' })
const { adminFetch } = useAdmin()
const message = useMessage()
const data = ref({ channels: [], securityNotice: '' })
const loaded = ref(false)
const saving = ref(false)

const typeOptions = [
  { label: '微信', value: 'wechat' },
  { label: '小程序', value: 'miniprogram' },
  { label: '电话', value: 'phone' },
  { label: '地址', value: 'address' },
  { label: '邮箱', value: 'email' },
  { label: '投诉', value: 'complaint' },
  { label: '招聘', value: 'hr' },
]

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

function addChannel() {
  data.value.channels.push({ type: 'phone', label: '', value: '', description: '', primary: false, hidden: false })
}

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

onMounted(load)
</script>