304 行
8.9 KiB
Vue
304 行
8.9 KiB
Vue
<template>
|
||
<div class="edit-page">
|
||
<!-- 面包屑 -->
|
||
<NBreadcrumb class="page-breadcrumb">
|
||
<NBreadcrumbItem>
|
||
<NuxtLink to="/admin/reviews">客户评价</NuxtLink>
|
||
</NBreadcrumbItem>
|
||
<NBreadcrumbItem>{{ isNew ? '新增' : '编辑' }}</NBreadcrumbItem>
|
||
</NBreadcrumb>
|
||
|
||
<!-- 页头 -->
|
||
<div class="page-header">
|
||
<h1>{{ isNew ? '新增评价' : '编辑评价' }}</h1>
|
||
<div class="header-actions">
|
||
<NButton @click="navigateTo('/admin/reviews')">取消</NButton>
|
||
<NButton type="primary" :loading="saving" :disabled="saving" @click="handleSave">
|
||
保存
|
||
</NButton>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 加载 / 错误状态 -->
|
||
<div v-if="loadError" style="color: #ef4444; padding: 16px;">{{ loadError }}</div>
|
||
<div v-else-if="pageLoading" style="text-align: center; padding: 60px;">
|
||
<NSpin size="large" />
|
||
</div>
|
||
|
||
<template v-else>
|
||
<!-- 双栏布局 -->
|
||
<NGrid :cols="4" :x-gap="20" :y-gap="20" class="form-grid">
|
||
<!-- 主区（3列） -->
|
||
<NGi :span="3">
|
||
<NCard title="基本信息">
|
||
<NForm label-placement="top" :show-feedback="false">
|
||
<NFormItem label="客户" required>
|
||
<NInput v-model:value="form.author" placeholder="输入客户名称" />
|
||
</NFormItem>
|
||
<NFormItem label="评分">
|
||
<NRate v-model:value="form.rating" :count="5" />
|
||
</NFormItem>
|
||
<NFormItem label="产品版本">
|
||
<NInput v-model:value="form.title" placeholder="输入产品版本" />
|
||
</NFormItem>
|
||
<NFormItem label="出行日期">
|
||
<NInput v-model:value="form.date" placeholder="如：2026年3月" />
|
||
</NFormItem>
|
||
<NFormItem label="评价截图">
|
||
<div class="screenshot-wrapper">
|
||
<AdminImageUpload v-model="form.screenshot" />
|
||
<div v-if="form.screenshot" class="screenshot-actions">
|
||
<NButton size="tiny" @click="previewOpen = true">🔍 查看大图</NButton>
|
||
<NButton
|
||
size="tiny"
|
||
:loading="ocrLoading"
|
||
:disabled="ocrLoading"
|
||
@click="handleOcr"
|
||
>✨ 从截图识别文字</NButton>
|
||
</div>
|
||
</div>
|
||
</NFormItem>
|
||
<NFormItem label="内容" required>
|
||
<NInput
|
||
v-model:value="form.content"
|
||
type="textarea"
|
||
:rows="8"
|
||
placeholder="输入评价内容"
|
||
/>
|
||
</NFormItem>
|
||
</NForm>
|
||
</NCard>
|
||
|
||
<NCard title="分类标签" style="margin-top: 16px;">
|
||
<NForm label-placement="top" :show-feedback="false">
|
||
<NFormItem label="出行场景（多选）">
|
||
<NSelect
|
||
v-model:value="form.scenes"
|
||
multiple
|
||
filterable
|
||
tag
|
||
:options="SCENE_OPTIONS"
|
||
placeholder="选择或输入场景"
|
||
/>
|
||
</NFormItem>
|
||
<NFormItem label="关心维度（多选）">
|
||
<NSelect
|
||
v-model:value="form.concerns"
|
||
multiple
|
||
filterable
|
||
tag
|
||
:options="CONCERN_OPTIONS"
|
||
placeholder="选择或输入关心点"
|
||
/>
|
||
</NFormItem>
|
||
</NForm>
|
||
</NCard>
|
||
</NGi>
|
||
|
||
<!-- 侧栏（1列） -->
|
||
<NGi :span="1">
|
||
<NCard title="发布设置">
|
||
<NForm label-placement="top" :show-feedback="false">
|
||
<NFormItem label="状态">
|
||
<NSelect v-model:value="form.published" :options="publishedOptions" />
|
||
</NFormItem>
|
||
<NFormItem label="已验证">
|
||
<NSwitch v-model:value="form.verified" />
|
||
</NFormItem>
|
||
<NFormItem label="排序">
|
||
<NInputNumber v-model:value="form.sortOrder" :min="0" style="width:100%" />
|
||
<div style="font-size: 11px; color: #9ca3af; margin-top: 4px;">
|
||
数字越小越靠前（0 为默认）
|
||
</div>
|
||
</NFormItem>
|
||
</NForm>
|
||
</NCard>
|
||
</NGi>
|
||
</NGrid>
|
||
|
||
<!-- 底部 sticky 保存栏 -->
|
||
<div class="save-bar">
|
||
<NButton @click="navigateTo('/admin/reviews')">取消</NButton>
|
||
<NButton type="primary" :loading="saving" :disabled="saving" @click="handleSave">
|
||
保存
|
||
</NButton>
|
||
</div>
|
||
|
||
<!-- 截图 Lightbox -->
|
||
<NModal v-model:show="previewOpen" preset="card" style="max-width: 640px;" :bordered="false" title="评价截图">
|
||
<img v-if="form.screenshot" :src="form.screenshot" style="width:100%;display:block;" />
|
||
</NModal>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
NButton, NCard, NForm, NFormItem, NInput, NSelect, NSwitch, NRate,
|
||
NBreadcrumb, NBreadcrumbItem, NGrid, NGi, NSpin, NInputNumber, NModal,
|
||
useMessage,
|
||
} from 'naive-ui'
|
||
|
||
definePageMeta({ layout: 'admin', middleware: 'admin' })
|
||
|
||
const route = useRoute()
|
||
const { adminFetch } = useAdmin()
|
||
const message = useMessage()
|
||
|
||
const isNew = computed(() => route.params.id === 'new')
|
||
const pageLoading = ref(!isNew.value)
|
||
const loadError = ref('')
|
||
const saving = ref(false)
|
||
const previewOpen = ref(false)
|
||
const ocrLoading = ref(false)
|
||
|
||
const form = ref({
|
||
author: '',
|
||
title: '',
|
||
date: '',
|
||
content: '',
|
||
screenshot: '',
|
||
scenes: [],
|
||
concerns: [],
|
||
rating: 5,
|
||
sortOrder: 0,
|
||
published: true,
|
||
verified: false,
|
||
})
|
||
|
||
const publishedOptions = [
|
||
{ label: '已发布', value: true },
|
||
{ label: '草稿', value: false },
|
||
]
|
||
|
||
const SCENE_OPTIONS = [
|
||
'家庭出游', '亲子', '带老人', '摄影', '蜜月', '毕业游', '多家庭',
|
||
].map(v => ({ label: v, value: v }))
|
||
|
||
const CONCERN_OPTIONS = [
|
||
'领队服务', '行程安排', '住宿体验', '摄影旅拍', '错峰不排队',
|
||
'性价比', '安全放心', '特色体验', '饮食',
|
||
].map(v => ({ label: v, value: v }))
|
||
|
||
async function loadItem() {
|
||
if (isNew.value) return
|
||
pageLoading.value = true
|
||
try {
|
||
const data = await adminFetch(`/api/admin/reviews/${route.params.id}`)
|
||
form.value = {
|
||
author: data.author || '',
|
||
title: data.title || '',
|
||
date: data.date || '',
|
||
content: data.content || '',
|
||
screenshot: data.screenshot || '',
|
||
scenes: Array.isArray(data.scenes) ? data.scenes : [],
|
||
concerns: Array.isArray(data.concerns) ? data.concerns : [],
|
||
rating: data.rating ?? 5,
|
||
sortOrder: data.sortOrder || 0,
|
||
published: !!data.published,
|
||
verified: !!data.verified,
|
||
}
|
||
} catch (e) {
|
||
loadError.value = e.data?.message || '加载失败'
|
||
} finally {
|
||
pageLoading.value = false
|
||
}
|
||
}
|
||
|
||
async function handleSave() {
|
||
if (!form.value.author?.trim()) { message.error('客户名称不能为空'); return }
|
||
if (!form.value.content?.trim()) { message.error('内容不能为空'); return }
|
||
|
||
saving.value = true
|
||
try {
|
||
if (isNew.value) {
|
||
await adminFetch('/api/admin/reviews', { method: 'POST', body: form.value })
|
||
message.success('创建成功')
|
||
setTimeout(() => navigateTo('/admin/reviews'), 800)
|
||
} else {
|
||
await adminFetch(`/api/admin/reviews/${route.params.id}`, { method: 'PUT', body: form.value })
|
||
message.success('保存成功')
|
||
}
|
||
} catch (e) {
|
||
message.error(e.data?.message || '保存失败')
|
||
} finally {
|
||
saving.value = false
|
||
}
|
||
}
|
||
|
||
async function handleOcr() {
|
||
if (!form.value.screenshot) { message.warning('请先上传截图'); return }
|
||
ocrLoading.value = true
|
||
try {
|
||
const res = await adminFetch('/api/admin/ocr', { method: 'POST', body: { image: form.value.screenshot } })
|
||
if (res?.text) {
|
||
form.value.content = res.text.trim()
|
||
message.success('已识别，可在内容区继续调整')
|
||
} else {
|
||
message.warning('未识别到文字')
|
||
}
|
||
} catch (e) {
|
||
message.error(e.data?.message || 'OCR 失败')
|
||
} finally {
|
||
ocrLoading.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(loadItem)
|
||
</script>
|
||
|
||
<style scoped>
|
||
.edit-page {
|
||
max-width: 1100px;
|
||
}
|
||
|
||
.page-breadcrumb {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.page-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.page-header h1 {
|
||
margin: 0;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.form-grid {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.screenshot-wrapper {
|
||
width: 100%;
|
||
}
|
||
|
||
.screenshot-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.save-bar {
|
||
position: sticky;
|
||
bottom: 0;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
padding: 16px 0;
|
||
margin-top: 24px;
|
||
background: #f0f2f5;
|
||
border-top: 1px solid #e5e7eb;
|
||
}
|
||
</style>
|