453 lines
15 KiB
HTML
453 lines
15 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>购物须知管理</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
color: #333;
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
background-color: rgb(9, 84, 43);
|
||
|
|
color: white;
|
||
|
|
padding: 20px 30px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header h1 {
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 30px auto;
|
||
|
|
padding: 0 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-card {
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 30px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-row {
|
||
|
|
display: flex;
|
||
|
|
gap: 30px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group.narrow {
|
||
|
|
flex: 0 0 200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-label {
|
||
|
|
display: block;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-label.required::after {
|
||
|
|
content: "*";
|
||
|
|
color: #ff4d4f;
|
||
|
|
margin-left: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input {
|
||
|
|
width: 100%;
|
||
|
|
padding: 10px 12px;
|
||
|
|
border: 1px solid #d9d9d9;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 14px;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
background-color: #fafafa;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input:focus {
|
||
|
|
border-color: #1890ff;
|
||
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||
|
|
outline: none;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input.placeholder {
|
||
|
|
color: #bfbfbf;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-editor-container {
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-editor {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 400px;
|
||
|
|
border: 1px solid #d9d9d9;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 15px;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 1.6;
|
||
|
|
resize: vertical;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
background-color: #fafafa;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-editor:focus {
|
||
|
|
border-color: #1890ff;
|
||
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||
|
|
outline: none;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar {
|
||
|
|
background: #fafafa;
|
||
|
|
border: 1px solid #d9d9d9;
|
||
|
|
border-bottom: none;
|
||
|
|
border-radius: 4px 4px 0 0;
|
||
|
|
padding: 10px;
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar-btn {
|
||
|
|
padding: 6px 10px;
|
||
|
|
border: 1px solid #d9d9d9;
|
||
|
|
border-radius: 3px;
|
||
|
|
background: #fff;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 12px;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar-btn:hover {
|
||
|
|
border-color: #1890ff;
|
||
|
|
color: #1890ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar-btn.active {
|
||
|
|
background: #1890ff;
|
||
|
|
color: #fff;
|
||
|
|
border-color: #1890ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
padding: 10px 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 5px;
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary {
|
||
|
|
background-color: #1890ff;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary:hover {
|
||
|
|
background-color: #40a9ff;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-success {
|
||
|
|
background-color: #52c41a;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-success:hover {
|
||
|
|
background-color: #73d13d;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-warning {
|
||
|
|
background-color: #faad14;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-warning:hover {
|
||
|
|
background-color: #ffc53d;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-buttons {
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
justify-content: flex-end;
|
||
|
|
margin-top: 30px;
|
||
|
|
padding-top: 20px;
|
||
|
|
border-top: 1px solid #e8e8e8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-section {
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 20px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
border-left: 4px solid #1890ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-title {
|
||
|
|
font-weight: 600;
|
||
|
|
color: #333;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rule-item {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
padding-left: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rule-item:before {
|
||
|
|
content: counter(rule-counter);
|
||
|
|
counter-increment: rule-counter;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #1890ff;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sales-rules {
|
||
|
|
counter-reset: rule-counter;
|
||
|
|
}
|
||
|
|
|
||
|
|
.presale-rules {
|
||
|
|
counter-reset: rule-counter;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.form-row {
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group.narrow {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
padding: 0 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-card {
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar {
|
||
|
|
padding: 8px;
|
||
|
|
gap: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-buttons {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="header">
|
||
|
|
<h1>购物须知管理</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="form-card">
|
||
|
|
<form id="shoppingNoticeForm">
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group narrow">
|
||
|
|
<label class="form-label required">菜市场:</label>
|
||
|
|
<input type="text" class="form-input" value="春申菜市场" readonly>
|
||
|
|
<div style="color: #ff4d4f; font-size: 12px; margin-top: 5px;">请选择菜市场</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group narrow">
|
||
|
|
<label class="form-label required">标题:</label>
|
||
|
|
<input type="text" class="form-input" value="购物须知">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="text-editor-container">
|
||
|
|
<label class="form-label required">内容:</label>
|
||
|
|
<div class="toolbar">
|
||
|
|
<button type="button" class="toolbar-btn" onclick="execCommand('undo')">↶</button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="execCommand('redo')">↷</button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="formatText('bold')"><strong>B</strong></button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="formatText('italic')"><em>I</em></button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="formatText('underline')"><u>U</u></button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="formatText('strikethrough')"><s>S</s></button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="formatText('subscript')">X₂</button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="formatText('superscript')">X²</button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="insertText('quote')">"</button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="formatText('justifyLeft')">⫷</button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="formatText('justifyCenter')">≡</button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="formatText('justifyRight')">⫸</button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="formatText('justifyFull')">☰</button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="formatText('insertOrderedList')">1.</button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="formatText('insertUnorderedList')">•</button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="formatText('outdent')">⫷</button>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="formatText('indent')">⫸</button>
|
||
|
|
<button type="button" class="toolbar-btn">—</button>
|
||
|
|
<button type="button" class="toolbar-btn">∷</button>
|
||
|
|
<button type="button" class="toolbar-btn">⁞</button>
|
||
|
|
<button type="button" class="toolbar-btn">🔗</button>
|
||
|
|
<button type="button" class="toolbar-btn">🖼</button>
|
||
|
|
<button type="button" class="toolbar-btn">📊</button>
|
||
|
|
<button type="button" class="toolbar-btn">😊</button>
|
||
|
|
<button type="button" class="toolbar-btn">👁</button>
|
||
|
|
<button type="button" class="toolbar-btn">🖨</button>
|
||
|
|
<button type="button" class="toolbar-btn">🗑</button>
|
||
|
|
</div>
|
||
|
|
<div class="text-editor" contenteditable="true" id="contentEditor">
|
||
|
|
<div class="content-section sales-rules">
|
||
|
|
<div class="section-title">售后规则:</div>
|
||
|
|
<div class="rule-item">如有卖家原因（商品或配送问题）造成的退货产生的配送费用实家承担，其他原因引起的退货产生的配送费用实家承担。</div>
|
||
|
|
<div class="rule-item">收到货物请核对包装和商品的完整，确认收货后如需售后请联系店铺客服。</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content-section presale-rules">
|
||
|
|
<div class="section-title">预售规则:</div>
|
||
|
|
<div class="rule-item">商品定金支付成功后，订单即生效，定金不可退。</div>
|
||
|
|
<div class="rule-item">补尾款时支付包装费、调度费和配送费，补尾款期内未补尾款视为自动放弃此订单。</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button type="button" class="btn btn-warning">预览</button>
|
||
|
|
<button type="button" class="btn btn-primary">保存</button>
|
||
|
|
<button type="button" class="btn btn-success">发布</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 文本编辑器功能
|
||
|
|
function execCommand(command) {
|
||
|
|
document.execCommand(command, false, null);
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatText(command) {
|
||
|
|
document.execCommand(command, false, null);
|
||
|
|
}
|
||
|
|
|
||
|
|
function insertText(type) {
|
||
|
|
const editor = document.getElementById('contentEditor');
|
||
|
|
const selection = window.getSelection();
|
||
|
|
|
||
|
|
if (type === 'quote') {
|
||
|
|
document.execCommand('insertHTML', false, '"');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 表单验证
|
||
|
|
function validateForm() {
|
||
|
|
const market = document.querySelector('input[value="春申菜市场"]');
|
||
|
|
const title = document.querySelector('input[value="购物须知"]');
|
||
|
|
const content = document.getElementById('contentEditor');
|
||
|
|
|
||
|
|
if (!market.value.trim()) {
|
||
|
|
alert('请选择菜市场');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!title.value.trim()) {
|
||
|
|
alert('请填写标题');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!content.textContent.trim()) {
|
||
|
|
alert('请填写内容');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 按钮事件处理
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const buttons = document.querySelectorAll('.action-buttons .btn');
|
||
|
|
|
||
|
|
buttons.forEach(button => {
|
||
|
|
button.addEventListener('click', function() {
|
||
|
|
const action = this.textContent.trim();
|
||
|
|
|
||
|
|
switch(action) {
|
||
|
|
case '预览':
|
||
|
|
if (validateForm()) {
|
||
|
|
alert('预览功能开发中...');
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case '保存':
|
||
|
|
if (validateForm()) {
|
||
|
|
alert('保存成功！');
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case '发布':
|
||
|
|
if (validateForm()) {
|
||
|
|
if (confirm('确认发布购物须知吗？发布后将对用户可见。')) {
|
||
|
|
alert('发布成功！');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 工具栏按钮状态切换
|
||
|
|
document.querySelectorAll('.toolbar-btn').forEach(btn => {
|
||
|
|
btn.addEventListener('click', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
// 可以添加激活状态的切换逻辑
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 编辑器焦点处理
|
||
|
|
const editor = document.getElementById('contentEditor');
|
||
|
|
editor.addEventListener('focus', function() {
|
||
|
|
this.style.borderColor = '#1890ff';
|
||
|
|
});
|
||
|
|
|
||
|
|
editor.addEventListener('blur', function() {
|
||
|
|
this.style.borderColor = '#d9d9d9';
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 菜市场选择功能（模拟）
|
||
|
|
document.querySelector('input[value="春申菜市场"]').addEventListener('click', function() {
|
||
|
|
const markets = ['春申菜市场', '虹桥菜市场', '浦东菜市场', '徐汇菜市场'];
|
||
|
|
const selected = prompt('请选择菜市场：\n' + markets.map((m, i) => `${i + 1}. ${m}`).join('\n'));
|
||
|
|
|
||
|
|
if (selected && !isNaN(selected) && selected >= 1 && selected <= markets.length) {
|
||
|
|
this.value = markets[selected - 1];
|
||
|
|
this.nextElementSibling.style.display = 'none';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|