This commit is contained in:
yiqiuyang
2025-10-16 17:36:31 +08:00
2 changed files with 58 additions and 32 deletions

View File

@ -26,3 +26,21 @@ export function getNewsDetail(params) {
params, params,
}) })
} }
// 保存新闻
export function updateNews(data) {
return request({
url: '/news/B8fpNxunbxj37x3VRcVz',
method: 'post',
data,
})
}
// 获取新闻列表
export function saveDetail(data) {
return request({
url: '/news/VbxWW8EdJQGyWzJyvSrN',
method: 'post',
data,
})
}

View File

@ -3,8 +3,9 @@ import axios from 'axios';
import { ref, reactive, onMounted } from 'vue'; import { ref, reactive, onMounted } from 'vue';
import { QuillEditor } from '@vueup/vue-quill' import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css' import '@vueup/vue-quill/dist/vue-quill.snow.css'
import {getNews,getNewsDetail,updateNews,saveDetail} from '@/api/index'
const API_BASE = window.config?.baseUrl const baseURL = window.config?.baseUrl
// 新闻列表 // 新闻列表
const newsList = ref([]); const newsList = ref([]);
@ -45,14 +46,20 @@ const editorOption= {
modules:{ modules:{
toolbar: { toolbar: {
container: [ container: [
['bold', 'italic', 'underline', 'strike'], ['bold', 'italic', 'underline', 'strike'], //加粗,斜体,下划线,删除线
[{ header: 1 }, { header: 2 }], ['blockquote', 'code-block'], //引用,代码块
[{ list: 'ordered' }, { list: 'bullet' }], [{'header': 1}, {'header': 2}], // 标题键值对的形式1、2表示字体大小
[{ indent: '-1' }, { indent: '+1' }], [{'list': 'ordered'}, {'list': 'bullet'}], //列表
[{ color: [] }, { background: [] }], [{'script': 'sub'}, {'script': 'super'}], // 上下标
[{ align: [] }], [{'indent': '-1'}, {'indent': '+1'}], // 缩进
['link', 'image'], [{'direction': 'rtl'}], // 文本方向
['clean'], [{'size': ['small', false, 'large', 'huge']}], // 字体大小
[{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
[{'color': []}, {'background': []}], // 字体颜色,字体背景颜色
[{'font': []}], //字体
[{'align': []}], //对齐方式
['clean'], //清除字体样式
['image', 'video'] //上传图片、上传视频
], ],
handlers: { handlers: {
image: imageHandler, image: imageHandler,
@ -127,16 +134,15 @@ function imageHandler() {
// ----------------- 获取新闻 ----------------- // ----------------- 获取新闻 -----------------
const fetchNews = async () => { const fetchNews = async () => {
try { try {
const res = await axios.get(`${API_BASE}/news/`, { let query = {
params: { status: statusFilter.value || undefined,
page: page.value, page: page.value,
page_size: pageSize.value, page_size: pageSize.value,
status: statusFilter.value || undefined, }
}, let {code, data, pagination} = await getNews(query)
}); if (code === 0) {
if (res.data.code === 0) { newsList.value = data;
newsList.value = res.data.data; totalPages.value = pagination.total_pages;
totalPages.value = res.data.pagination.total_pages;
} }
} catch (err) { } catch (err) {
console.error("获取新闻失败", err); console.error("获取新闻失败", err);
@ -146,10 +152,11 @@ const fetchNews = async () => {
// ----------------- 添加/编辑 ----------------- // ----------------- 添加/编辑 -----------------
const saveNews = async () => { const saveNews = async () => {
try { try {
editingNews.content = quillInstance.value.root.innerHTML
if (isEditing.value) { if (isEditing.value) {
await axios.post(`${API_BASE}/news/B8fpNxunbxj37x3VRcVz`, editingNews); await updateNews(editingNews);
} else { } else {
await axios.post(`${API_BASE}/news/VbxWW8EdJQGyWzJyvSrN`, editingNews); await saveDetail(editingNews);
} }
showForm.value = false; showForm.value = false;
fetchNews(); fetchNews();
@ -161,16 +168,15 @@ const saveNews = async () => {
const editNews = async (news) => { const editNews = async (news) => {
loading.value = true; loading.value = true;
try { try {
const res = await axios.get(`${API_BASE}/news/details`, { let query = {
params: { slug: news.slug } slug: news.slug,
}); }
let {code, data} = await getNewsDetail(query)
console.log(res.data) if (code === 0) {
if (res.data.code === 0) { Object.assign(editingNews, data);
console.log(res.data.data)
Object.assign(editingNews, res.data.data);
isEditing.value = true; isEditing.value = true;
showForm.value = true; showForm.value = true;
quillInstance.value.clipboard.dangerouslyPasteHTML(editingNews.content)
} }
} finally { } finally {
loading.value = false; loading.value = false;
@ -185,6 +191,7 @@ const addNews = () => {
content: "", content: "",
status: "draft", status: "draft",
slug: "", slug: "",
datetime: null,
}); });
isEditing.value = false; isEditing.value = false;
showForm.value = true; showForm.value = true;
@ -222,7 +229,7 @@ function uploadImage(file) {
const formData = new FormData(); const formData = new FormData();
formData.append('file', file); formData.append('file', file);
fetch(`${API_BASE}/update/img`, { fetch(`${baseURL}update/img`, {
method: 'POST', method: 'POST',
body: formData, body: formData,
}) })
@ -230,7 +237,7 @@ function uploadImage(file) {
.then((data) => { .then((data) => {
if (data.code === 0) { if (data.code === 0) {
console.log(data) console.log(data)
resolve(`${API_BASE}/download/img/${data.data}`); resolve(`${baseURL}download/img/${data.data}`);
} else { } else {
reject(data.msg); reject(data.msg);
} }
@ -243,6 +250,7 @@ function uploadImage(file) {
onMounted(() => { onMounted(() => {
fetchNews(); fetchNews();
addNews();
}); });
</script> </script>
@ -303,7 +311,7 @@ onMounted(() => {
</div> </div>
<label>内容简介: <textarea class="snapshot" v-model="editingNews.snapshot"></textarea></label><br /> <label>内容简介: <textarea class="snapshot" v-model="editingNews.snapshot"></textarea></label><br />
<label>内容:</label> <label>内容:</label>
<quill-editor v-model:content="editingNews.content" content-type="delta" <quill-editor content-type="html"
theme="snow" style="height: 300px" :options="editorOption" @ready="onEditorReady"/> theme="snow" style="height: 300px" :options="editorOption" @ready="onEditorReady"/>
<label>状态: <label>状态:
<select v-model="editingNews.status"> <select v-model="editingNews.status">