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>
|