263 lines
8.1 KiB
HTML
263 lines
8.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|||
|
|
<title>网站信息管理</title>
|
|||
|
|
<link rel="stylesheet" href="https://file.guimiaokeji.com/layui/layui.css">
|
|||
|
|
<script src="https://file.guimiaokeji.com/axios.js"></script>
|
|||
|
|
<script src="https://file.guimiaokeji.com/qs.js"></script>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-container {
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 20px;
|
|||
|
|
margin: 20px auto;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|||
|
|
width: 100% !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-col-md6 {
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-form-label {
|
|||
|
|
width: auto;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-input-block {
|
|||
|
|
margin-left: 150px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-img {
|
|||
|
|
max-width: 200px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-form-item {
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-input-block {
|
|||
|
|
background-color: #f3f3f3;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
padding: 10px;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-col-md6:nth-child(odd) .layui-input-block {
|
|||
|
|
background-color: #e9f7f7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-col-md6:nth-child(even) .layui-input-block {
|
|||
|
|
background-color: #e9f7f7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 150px;
|
|||
|
|
border: 1px solid #dcdcdc;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-btn-container {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
/* 居中上传图片按钮和预览图片 */
|
|||
|
|
.layui-input-block {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#preview_image {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
display: block;
|
|||
|
|
max-width: 200px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
#center{
|
|||
|
|
position: relative;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div class="layui-container">
|
|||
|
|
<form class="layui-form" action="" method="post">
|
|||
|
|
{% csrf_token %}
|
|||
|
|
|
|||
|
|
<!-- 第一行 封面图片 -->
|
|||
|
|
<div class="layui-row">
|
|||
|
|
<div class="layui-col-md6" id="center">
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="image_url" class="layui-input" value="{{ article.image_url|default_if_none:'' }}" placeholder="请输入图片 URL 或点击上传图片">
|
|||
|
|
{% if article.image_url %}
|
|||
|
|
<img id="preview_image" src="{{ article.image_url }}" alt="封面图片" class="preview-img">
|
|||
|
|
{% else %}
|
|||
|
|
<img id="preview_image" style="display: none;" class="preview-img">
|
|||
|
|
{% endif %}
|
|||
|
|
<button type="button" class="layui-btn layui-btn-sm" id="upload_image">
|
|||
|
|
<i class="layui-icon"></i> 上传图片
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第二行 标题 -->
|
|||
|
|
<div class="layui-row">
|
|||
|
|
<div class="layui-col-md6">
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">english_title</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="english_title" required lay-verify="required" placeholder="请输入英文标题" class="layui-input" value="{{ article.english_title }}">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md6">
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">中文标题</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="chinese_title" required lay-verify="required" placeholder="请输入中文标题" class="layui-input" value="{{ article.chinese_title }}">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第三行 关键词 -->
|
|||
|
|
<div class="layui-row">
|
|||
|
|
<div class="layui-col-md6">
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">english_keywords</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="english_keywords" placeholder="请输入英文关键词" class="layui-input" value="{{ article.english_keywords }}">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md6">
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">中文关键词</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="chinese_keywords" placeholder="请输入中文关键词" class="layui-input" value="{{ article.chinese_keywords }}">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第四行 描述 -->
|
|||
|
|
<div class="layui-row">
|
|||
|
|
<div class="layui-col-md6">
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">english_content</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<textarea id="english_description" name="english_content" style="display: none;">{{ article.english_content }}</textarea>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md6">
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">中文描述</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<textarea id="chinese_description" name="chinese_content" style="display: none;">{{ article.chinese_content }}</textarea>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 提交按钮 -->
|
|||
|
|
<div class="layui-form-item layui-btn-container" style="text-align: center;">
|
|||
|
|
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveArticle">保存修改</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="https://file.guimiaokeji.com/layui/jquery-3.6.0.min.js"></script>
|
|||
|
|
<script src="https://file.guimiaokeji.com/layui/layui.js"></script>
|
|||
|
|
<script>
|
|||
|
|
layui.use(['form', 'layedit', 'upload'], function () {
|
|||
|
|
var form = layui.form;
|
|||
|
|
var layedit = layui.layedit;
|
|||
|
|
var upload = layui.upload;
|
|||
|
|
var $ = layui.jquery;
|
|||
|
|
layedit.set({
|
|||
|
|
uploadImage: {
|
|||
|
|
url: '/api/upload_article_image/' //接口url
|
|||
|
|
,type: 'post' //默认post
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 初始化 layedit 编辑器
|
|||
|
|
var englishEditor = layedit.build('english_description', {
|
|||
|
|
height: 250,
|
|||
|
|
tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image']
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var chineseEditor = layedit.build('chinese_description', {
|
|||
|
|
height: 250,
|
|||
|
|
tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image']
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 表单提交前同步内容
|
|||
|
|
form.on('submit(saveArticle)', function(data) {
|
|||
|
|
// 获取编辑器内容
|
|||
|
|
data.field.english_content = layedit.getContent(englishEditor);
|
|||
|
|
data.field.chinese_content = layedit.getContent(chineseEditor);
|
|||
|
|
|
|||
|
|
// 使用 Axios 提交表单
|
|||
|
|
axios.post('', data.field)
|
|||
|
|
.then(function(response) {
|
|||
|
|
if (response.data.code === 200) {
|
|||
|
|
layer.msg(response.data.message, {
|
|||
|
|
time: 1000 // 设置显示时间为 1000 毫秒（1 秒）
|
|||
|
|
}, function() {
|
|||
|
|
// 在消息框关闭后执行的操作
|
|||
|
|
var index = parent.layer.getFrameIndex(window.name);
|
|||
|
|
parent.layer.close(index);
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
layer.msg('保存失败: ' + response.data.message);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(function(error) {
|
|||
|
|
layer.msg('请求失败: ' + error.message);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return false; // 阻止表单默认提交
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 图片上传功能
|
|||
|
|
upload.render({
|
|||
|
|
elem: '#upload_image',
|
|||
|
|
url: '/api/upload_article_image/', // 图片上传接口
|
|||
|
|
field: 'file',
|
|||
|
|
done: function (res) {
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
$('#preview_image').attr('src', res.data.src).show();
|
|||
|
|
$('input[name="image_url"]').val(res.data.src);
|
|||
|
|
layer.msg('图片上传成功');
|
|||
|
|
} else {
|
|||
|
|
layer.msg('图片上传失败: ' + res.message);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function () {
|
|||
|
|
layer.msg('图片上传失败');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|