427 lines
16 KiB
HTML
427 lines
16 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>
|
||
.yc{
|
||
display: none;
|
||
}
|
||
.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;
|
||
}
|
||
#fileInput{
|
||
display: none;
|
||
}
|
||
#img_chose{
|
||
width: 95vw;
|
||
height: 100vw;
|
||
background-color: #ccc;
|
||
position: absolute;
|
||
top: 20%;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
display: none;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: space-around;
|
||
align-content: flex-start;
|
||
}
|
||
#img_chose img{
|
||
width:20vw;
|
||
height: 20vw;
|
||
}
|
||
.cover_show img{
|
||
width: 30%;
|
||
}
|
||
.step_show_all img{
|
||
width: 20%;
|
||
}
|
||
</style>
|
||
<script src="../x_admin/js/jq.js"></script>
|
||
</head>
|
||
<body>
|
||
<p style="font-weight: bold;">菜谱信息~</p>
|
||
<div class='box1'>
|
||
<label for="cover">上传封面:</label>
|
||
<button onclick="open_img_chose('cover',0)">选择图片</button>
|
||
<br>
|
||
<div class="cover_show"></div>
|
||
<br>
|
||
<br>
|
||
<label for="title">菜谱标题:</label>
|
||
<input type="text" id="title" name="title">
|
||
<br>
|
||
<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>
|
||
|
||
|
||
<!-- 图片选择组件 -->
|
||
<div id="img_chose" class="yc">
|
||
<div onclick="upload_action()"><img src="http://tc.pcxbc.com/tsf/upload_pic.jpg" alt=""></div>
|
||
<button onclick="close_action()">关闭</button>
|
||
</div>
|
||
<input type="file" id="fileInput" accept="image/*" name="img_list" multiple>
|
||
</body>
|
||
</html>
|
||
<script>
|
||
// 设置最终提交变量（important）
|
||
var post_data = {
|
||
"cook_label": '早餐', //菜谱标签，属于什么菜系之类的
|
||
"token": 'caadd1be045a65f30b92aa805f1de54a', //菜谱标签，属于什么菜系之类的
|
||
"cover": '', //封面图片
|
||
"title": '', //菜谱标题
|
||
"description": '', //菜谱简介
|
||
"food_list": [], //食材列表
|
||
"step_list": [], //步骤列表
|
||
};
|
||
var what_button = '';//用来判断是封面还是步骤
|
||
function open_img_chose(str,num){
|
||
|
||
what_button = str+','+num;
|
||
// $('#img_chose').html('');
|
||
var user_img_list = [];
|
||
$.ajax({
|
||
url:"https://tc.pcxbc.com/kitchenscale/pic_chose_list", //请求的url地址
|
||
// url:"http://wm.tcxbc.com/kitchenscale/pic_chose_list", //请求的url地址
|
||
dataType:"json", //返回格式为json
|
||
async:true,//请求是否异步，默认为异步，这也是ajax重要特性
|
||
data:{"token":"caadd1be045a65f30b92aa805f1de54a"}, //参数值
|
||
type:"POST", //请求方式
|
||
success:function(req){
|
||
if(req.code==0){
|
||
|
||
for (let index = 0; index < req.data.result.length; index++) {
|
||
var newDiv = $('<div></div>')
|
||
.addClass('pic_box')
|
||
.attr('onclick', 'sendParamToParent(\''+req.data.result[index]['id']+'\',\''+req.data.result[index]['pic_url']+'\',\''+what_button+'\')')
|
||
.append($('<img></img>')
|
||
.attr('src', req.data.result[index]['pic_url'])
|
||
.attr('alt', '')
|
||
);
|
||
$('#img_chose > div:first').after(newDiv);
|
||
}
|
||
|
||
$('#img_chose').css('display', 'flex');
|
||
}
|
||
},
|
||
error:function(){
|
||
//请求出错处理
|
||
}
|
||
});
|
||
}
|
||
function upload_action(){
|
||
document.getElementById('fileInput').click();
|
||
}
|
||
$('#fileInput').on('change', function() {
|
||
// 获取被选择的文件
|
||
var files = event.target.files;
|
||
if (files.length > 5) {
|
||
alert('最多只能选择5张图片,您选择了' + files.length + ' 张图片');
|
||
// 清空文件输入，取消选择的文件
|
||
$(this).val('');
|
||
return
|
||
}
|
||
console.log('当前选择了' + files.length + ' 张图片');
|
||
// 检查是否有文件被选择
|
||
if (files.length > 0) {
|
||
var formdata = new FormData();
|
||
for (var i = 0; i < files.length; i++) {
|
||
formdata.append('images[]', files[i]);
|
||
}
|
||
formdata.append('token', 'caadd1be045a65f30b92aa805f1de54a');
|
||
$.ajax({
|
||
url:"https://tc.pcxbc.com/kitchenscale/pic_upload_action", //请求的url地址
|
||
// url:"http://wm.tcxbc.com/kitchenscale/pic_upload_action", //请求的url地址
|
||
contentType:false,
|
||
processData:false,
|
||
async:true,//请求是否异步，默认为异步，这也是ajax重要特性
|
||
data:formdata, //参数值
|
||
type:"POST", //请求方式
|
||
success:function(req){
|
||
alert('本次添加失败'+req.data.error_data+'张');
|
||
|
||
for (let index = 0; index < req.data.insert_data.length; index++) {
|
||
var newDiv = $('<div></div>')
|
||
.addClass('pic_box')
|
||
.attr('onclick', 'sendParamToParent(\''+req.data.insert_data[index]['id']+'\',\''+req.data.insert_data[index]['pic_url']+'\',\''+what_button+'\')')
|
||
.append($('<img></img>')
|
||
.attr('src', req.data.insert_data[index]['pic_url'])
|
||
.attr('alt', '')
|
||
);
|
||
$('#img_chose > div:first').after(newDiv);
|
||
}
|
||
|
||
},
|
||
error:function(){
|
||
//请求出错处理
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
function sendParamToParent(id,url,parameter){
|
||
var parameter_arr = parameter.split(",");
|
||
if(parameter_arr[0] == 'cover'){
|
||
// 添加数据进最终提交变量（important）
|
||
post_data.cover = id;
|
||
$('.cover_show').html('');
|
||
$('.cover_show')
|
||
.append($('<img></img>')
|
||
.attr('src', url)
|
||
.attr('alt', '')
|
||
);
|
||
}else{
|
||
// 添加数据进最终提交变量（important）
|
||
post_data.step_list[parameter_arr[1]]['pic_list'].push(id);
|
||
$('.step_show_'+parameter_arr[1])
|
||
.append($('<img></img>')
|
||
.attr('src', url)
|
||
.attr('alt', '')
|
||
);
|
||
}
|
||
console.log(post_data)
|
||
}
|
||
|
||
function close_action(){
|
||
$('#img_chose').hide();
|
||
$('#img_chose .pic_box').remove();
|
||
}
|
||
</script>
|
||
<script>
|
||
var submit_data;
|
||
let ingredientsList = [];
|
||
|
||
// 添加随机的食材，从'鸡肉', '牛肉', '猪肉'随机选，重量从100-300克随机选
|
||
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);
|
||
|
||
post_data.food_list.push({ name: randomIngredient, weight: randomWeight });
|
||
console.log(post_data)
|
||
}
|
||
// 删除单个食材
|
||
function removeIngredient(divElement, ingredientName, ingredientWeight) {
|
||
divElement.remove();
|
||
post_data.food_list = post_data.food_list.filter(item => !(item.name === ingredientName && item.weight === ingredientWeight));
|
||
}
|
||
// 清除所有食材
|
||
function clearIngredients() {
|
||
const box2Content = document.getElementById('box2_content');
|
||
while (box2Content.firstChild) {
|
||
box2Content.removeChild(box2Content.firstChild);
|
||
}
|
||
post_data.food_list = [];
|
||
}
|
||
// 添加步骤
|
||
function addStep() {
|
||
const stepDiv = document.createElement('div');
|
||
stepDiv.className = 'step';
|
||
|
||
// 在步骤里面添加一个空数据
|
||
var num = post_data.step_list.push({ pic_list: [], foot_list: [] ,description:""});
|
||
// console.log(post_data.step_list.push({ pic_list: [], foot_list: [] ,description:""}))
|
||
|
||
// <div class="cover_show"></div>
|
||
const show_img = document.createElement('div');
|
||
show_img.className = 'step_show_all step_show_'+(num-1);
|
||
stepDiv.appendChild(show_img);
|
||
|
||
// 多图上传
|
||
const fileInput = document.createElement('button');
|
||
fileInput.textContent = '选择图片';
|
||
fileInput.onclick = function() {
|
||
open_img_chose('step_list',num-1);
|
||
};
|
||
stepDiv.appendChild(fileInput);
|
||
|
||
// 选择食材按钮
|
||
const selectIngredientButton = document.createElement('button');
|
||
selectIngredientButton.textContent = '选择食材';
|
||
selectIngredientButton.onclick = function() {
|
||
selectIngredient(stepDiv,num-1);
|
||
};
|
||
stepDiv.appendChild(selectIngredientButton);
|
||
|
||
// 步骤输入说明
|
||
const stepDescription = document.createElement('textarea');
|
||
stepDescription.placeholder = '步骤说明';
|
||
stepDescription.rows = 4;
|
||
stepDescription.cols = 50;
|
||
stepDescription.onblur = function() {
|
||
writeDescriptionChild(this,num-1);
|
||
};
|
||
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,num) {
|
||
if (post_data.food_list.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 = post_data.food_list.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);
|
||
|
||
// 添加数据进最终提交变量（important）
|
||
post_data.step_list[num]['foot_list'].push({name:selectedIngredient.name,weight:selectedIngredient.weight});
|
||
console.log(post_data)
|
||
}
|
||
|
||
function removeFootIngredient(divElement, ingredientName, ingredientWeight, footList) {
|
||
divElement.remove();
|
||
// 重新过滤 ingredientsList 以确保删除后不会重复添加
|
||
const addedIngredients = Array.from(footList.getElementsByClassName('ingredient')).map(div => div.textContent);
|
||
post_data.food_list = post_data.food_list.filter(item => {
|
||
const ingredientText = `${item.name} ${item.weight}克`;
|
||
return !addedIngredients.includes(ingredientText);
|
||
});
|
||
}
|
||
|
||
|
||
// 每个步骤的描述写入
|
||
function writeDescriptionChild(e,num){
|
||
// 添加数据进最终提交变量（important）
|
||
post_data.step_list[num]['description'] = $(e).val();
|
||
console.log(post_data)
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
function saveData() {
|
||
post_data.title = $("#title").val();
|
||
post_data.description = $("#description").val();
|
||
// 最终数据格式示意start
|
||
// post_data = {
|
||
// "cook_label": "早餐",
|
||
// "token": "asdasdasda123141321dfsd34123",
|
||
// "cover": "1",
|
||
// "title": "测试菜谱1",
|
||
// "description": "测试菜谱描述",
|
||
// "food_list": [
|
||
// {"name": " 牛肉","weight": "100"},
|
||
// {"name": " 鸡肉","weight": "200"},
|
||
// ...
|
||
// ],
|
||
// "step_list": [
|
||
// {
|
||
// "pic_list": [1,2],
|
||
// "foot_list": [
|
||
// {"name": " 牛肉","weight": "100"},
|
||
// ...
|
||
// ],
|
||
// "description": "步骤1说明"
|
||
// },
|
||
// ...
|
||
// ],
|
||
// };
|
||
// 最终数据格式示意end
|
||
console.log(post_data)
|
||
$.ajax({
|
||
url:"https://tc.pcxbc.com/kitchenscale/add_cookbook", //请求的url地址
|
||
// url:"http://wm.tcxbc.com/kitchenscale/add_cookbook", //请求的url地址
|
||
dataType:"json", //返回格式为json
|
||
async:true,//请求是否异步，默认为异步，这也是ajax重要特性
|
||
data:post_data, //参数值
|
||
type:"POST", //请求方式
|
||
success:function(req){
|
||
//请求成功时处理
|
||
|
||
if(req.code == 200){
|
||
alert("操作成功");
|
||
}else{
|
||
alert("操作失败");
|
||
}
|
||
},
|
||
error:function(){
|
||
//请求出错处理
|
||
}
|
||
});
|
||
|
||
|
||
}
|
||
</script> |