256 lines
9.2 KiB
HTML
256 lines
9.2 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>测试菜谱提交</title>
|
|||
|
|
<style>
|
|||
|
|
.ingredient, .step {
|
|||
|
|
margin: 5px 0;
|
|||
|
|
padding: 5px;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
}
|
|||
|
|
.ingredient button, .step button {
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
.foot_list {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
.foot_list .ingredient {
|
|||
|
|
margin: 5px 0;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script src="../x_admin/js/jq.js"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<p style="font-weight: bold;">菜谱信息</p>
|
|||
|
|
<div class='box1'>
|
|||
|
|
<label for="cover">上传封面:</label>
|
|||
|
|
<input type="file" id="cover" name="cover" accept="image/*" multiple>
|
|||
|
|
<br>
|
|||
|
|
<label for="title">菜谱标题:</label>
|
|||
|
|
<input type="text" id="title" name="title">
|
|||
|
|
<br>
|
|||
|
|
<label for="description">菜谱简介:</label>
|
|||
|
|
<textarea id="description" name="description" rows="4" cols="50"></textarea>
|
|||
|
|
<br>
|
|||
|
|
</div>
|
|||
|
|
<p style="font-weight: bold;">添加食材</p>
|
|||
|
|
<div class='box2'>
|
|||
|
|
<div id="box2_content">
|
|||
|
|
</div>
|
|||
|
|
<div id="box2_action" style="margin:10px 0;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-around;">
|
|||
|
|
<div onclick="clearIngredients()">清空</div>
|
|||
|
|
<div onclick="addIngredient()">添加食材</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p style="font-weight: bold;">编辑步骤</p>
|
|||
|
|
<div class='box3'>
|
|||
|
|
<div id="box3_content"></div>
|
|||
|
|
<div id="box3_action">
|
|||
|
|
<button onclick="addStep()">添加步骤</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div onclick="saveData()" style="margin:50px 0;">保存</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
<script>
|
|||
|
|
var submit_data;
|
|||
|
|
let ingredientsList = [];
|
|||
|
|
|
|||
|
|
function addIngredient() {
|
|||
|
|
const ingredients = ['鸡肉', '牛肉', '猪肉'];
|
|||
|
|
const randomIngredient = ingredients[Math.floor(Math.random() * ingredients.length)];
|
|||
|
|
const randomWeight = Math.floor(Math.random() * (300 - 100 + 1)) + 100;
|
|||
|
|
|
|||
|
|
const ingredientDiv = document.createElement('div');
|
|||
|
|
ingredientDiv.className = 'ingredient';
|
|||
|
|
ingredientDiv.textContent = `${randomIngredient} ${randomWeight}克`;
|
|||
|
|
|
|||
|
|
const deleteButton = document.createElement('button');
|
|||
|
|
deleteButton.textContent = '删除';
|
|||
|
|
deleteButton.onclick = function() {
|
|||
|
|
removeIngredient(ingredientDiv, randomIngredient, randomWeight);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
ingredientDiv.appendChild(deleteButton);
|
|||
|
|
document.getElementById('box2_content').appendChild(ingredientDiv);
|
|||
|
|
|
|||
|
|
ingredientsList.push({ name: randomIngredient, weight: randomWeight });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removeIngredient(divElement, ingredientName, ingredientWeight) {
|
|||
|
|
divElement.remove();
|
|||
|
|
ingredientsList = ingredientsList.filter(item => !(item.name === ingredientName && item.weight === ingredientWeight));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function clearIngredients() {
|
|||
|
|
const box2Content = document.getElementById('box2_content');
|
|||
|
|
while (box2Content.firstChild) {
|
|||
|
|
box2Content.removeChild(box2Content.firstChild);
|
|||
|
|
}
|
|||
|
|
ingredientsList = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addStep() {
|
|||
|
|
const stepDiv = document.createElement('div');
|
|||
|
|
stepDiv.className = 'step';
|
|||
|
|
|
|||
|
|
// 多图上传
|
|||
|
|
const fileInput = document.createElement('input');
|
|||
|
|
fileInput.type = 'file';
|
|||
|
|
fileInput.accept = 'image/*';
|
|||
|
|
fileInput.name = 'images[]';
|
|||
|
|
fileInput.multiple = true;
|
|||
|
|
stepDiv.appendChild(fileInput);
|
|||
|
|
|
|||
|
|
// 选择食材按钮
|
|||
|
|
const selectIngredientButton = document.createElement('button');
|
|||
|
|
selectIngredientButton.textContent = '选择食材';
|
|||
|
|
selectIngredientButton.onclick = function() {
|
|||
|
|
selectIngredient(stepDiv);
|
|||
|
|
};
|
|||
|
|
stepDiv.appendChild(selectIngredientButton);
|
|||
|
|
|
|||
|
|
// 步骤输入说明
|
|||
|
|
const stepDescription = document.createElement('textarea');
|
|||
|
|
stepDescription.placeholder = '步骤说明';
|
|||
|
|
stepDescription.rows = 4;
|
|||
|
|
stepDescription.cols = 50;
|
|||
|
|
stepDiv.appendChild(stepDescription);
|
|||
|
|
|
|||
|
|
// 每个步骤的 foot_list
|
|||
|
|
const footList = document.createElement('div');
|
|||
|
|
footList.className = 'foot_list';
|
|||
|
|
stepDiv.appendChild(footList);
|
|||
|
|
|
|||
|
|
document.getElementById('box3_content').appendChild(stepDiv);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function selectIngredient(stepDiv) {
|
|||
|
|
if (ingredientsList.length === 0) {
|
|||
|
|
alert('没有可用的食材');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取当前步骤的 foot_list
|
|||
|
|
const footList = stepDiv.querySelector('.foot_list');
|
|||
|
|
|
|||
|
|
// 获取已经添加过的食材
|
|||
|
|
const addedIngredients = Array.from(footList.getElementsByClassName('ingredient')).map(div => div.textContent);
|
|||
|
|
|
|||
|
|
// 过滤已经添加过的食材
|
|||
|
|
const availableIngredients = ingredientsList.filter(item => {
|
|||
|
|
const ingredientText = `${item.name} ${item.weight}克`;
|
|||
|
|
return !addedIngredients.includes(ingredientText);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (availableIngredients.length === 0) {
|
|||
|
|
alert('所有食材已添加');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const randomIndex = Math.floor(Math.random() * availableIngredients.length);
|
|||
|
|
const selectedIngredient = availableIngredients[randomIndex];
|
|||
|
|
|
|||
|
|
const ingredientDiv = document.createElement('div');
|
|||
|
|
ingredientDiv.className = 'ingredient';
|
|||
|
|
ingredientDiv.textContent = `${selectedIngredient.name} ${selectedIngredient.weight}克`;
|
|||
|
|
|
|||
|
|
const deleteButton = document.createElement('button');
|
|||
|
|
deleteButton.textContent = '删除';
|
|||
|
|
deleteButton.onclick = function() {
|
|||
|
|
removeFootIngredient(ingredientDiv, selectedIngredient.name, selectedIngredient.weight, footList);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
ingredientDiv.appendChild(deleteButton);
|
|||
|
|
footList.appendChild(ingredientDiv);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removeFootIngredient(divElement, ingredientName, ingredientWeight, footList) {
|
|||
|
|
divElement.remove();
|
|||
|
|
// 重新过滤 ingredientsList 以确保删除后不会重复添加
|
|||
|
|
const addedIngredients = Array.from(footList.getElementsByClassName('ingredient')).map(div => div.textContent);
|
|||
|
|
ingredientsList = ingredientsList.filter(item => {
|
|||
|
|
const ingredientText = `${item.name} ${item.weight}克`;
|
|||
|
|
return !addedIngredients.includes(ingredientText);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function saveData() {
|
|||
|
|
const formData = new FormData();
|
|||
|
|
|
|||
|
|
// 封面文件
|
|||
|
|
const coverInput = document.getElementById('cover');
|
|||
|
|
if (coverInput.files.length > 0) {
|
|||
|
|
formData.append('cover', coverInput.files[0]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 菜谱标题
|
|||
|
|
const titleInput = document.getElementById('title');
|
|||
|
|
formData.append('title', titleInput.value);
|
|||
|
|
|
|||
|
|
// 菜谱描述
|
|||
|
|
const descriptionInput = document.getElementById('description');
|
|||
|
|
formData.append('description', descriptionInput.value);
|
|||
|
|
|
|||
|
|
// 食材列表
|
|||
|
|
formData.append('ingredientsList', JSON.stringify(ingredientsList));
|
|||
|
|
|
|||
|
|
// 步骤内容
|
|||
|
|
const steps = document.querySelectorAll('.step');
|
|||
|
|
steps.forEach((step, index) => {
|
|||
|
|
// 步骤说明
|
|||
|
|
const stepDescription = step.querySelector('textarea');
|
|||
|
|
formData.append(`steps[${index}][description]`, stepDescription.value);
|
|||
|
|
|
|||
|
|
// 选择的食材
|
|||
|
|
const footList = step.querySelector('.foot_list');
|
|||
|
|
const ingredients = Array.from(footList.getElementsByClassName('ingredient')).map(div => {
|
|||
|
|
const [name, weightText] = div.textContent.split(' ');
|
|||
|
|
const weight = parseInt(weightText, 10);
|
|||
|
|
return { name, weight };
|
|||
|
|
});
|
|||
|
|
formData.append(`steps[${index}][ingredients]`, JSON.stringify(ingredients));
|
|||
|
|
|
|||
|
|
// 上传的图片
|
|||
|
|
const fileInput = step.querySelector('input[type="file"]');
|
|||
|
|
Array.from(fileInput.files).forEach((file, fileIndex) => {
|
|||
|
|
formData.append(`steps[${index}][images][${fileIndex}]`, file);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
submit_data = formData;
|
|||
|
|
|
|||
|
|
// 打印 formData 内容
|
|||
|
|
console.log('submit_data:', formData);
|
|||
|
|
|
|||
|
|
// 遍历 formData 以查看其内容
|
|||
|
|
for (var pair of formData.entries()) {
|
|||
|
|
console.log(pair[0] + ': ' + pair[1]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$.ajax({
|
|||
|
|
url: "http://wm.tcxbc.com/kitchenscale/add_cookbook", // 请求的url地址
|
|||
|
|
contentType: false,
|
|||
|
|
processData: false,
|
|||
|
|
async: true, // 请求是否异步，默认为异步，这也是ajax重要特性
|
|||
|
|
data: submit_data, // 参数值
|
|||
|
|
type: "POST", // 请求方式
|
|||
|
|
beforeSend: function() {
|
|||
|
|
// 请求前的处理
|
|||
|
|
},
|
|||
|
|
success: function(req) {
|
|||
|
|
// 请求成功时处理
|
|||
|
|
console.log('成功:', req);
|
|||
|
|
},
|
|||
|
|
complete: function() {
|
|||
|
|
// 请求完成的处理
|
|||
|
|
},
|
|||
|
|
error: function(err) {
|
|||
|
|
// 请求出错处理
|
|||
|
|
console.error('错误:', err);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script>
|