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