SchoolPhysicalExamination/public/kitchenscale_all/upload.html

428 lines
16 KiB
HTML
Raw Normal View History

2025-01-22 12:31:08 +08:00
<!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;
2025-03-07 18:13:24 +08:00
position: fixed;
2025-01-22 12:31:08 +08:00
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 = {
2025-03-12 18:03:31 +08:00
"cook_label": '2', //菜谱标签,属于什么菜系之类的
2025-01-22 12:31:08 +08:00
"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)
2025-03-12 18:03:31 +08:00
// return
2025-01-22 12:31:08 +08:00
$.ajax({
2025-03-07 18:13:24 +08:00
// url:"https://tc.pcxbc.com/kitchenscale/add_cookbook", //请求的url地址
url:"http://wm.tcxbc.com/kitchenscale/add_cookbook", //请求的url地址
2025-01-22 12:31:08 +08:00
dataType:"json", //返回格式为json
async:true,//请求是否异步默认为异步这也是ajax重要特性
data:post_data, //参数值
type:"POST", //请求方式
success:function(req){
//请求成功时处理
if(req.code == 200){
alert("操作成功");
}else{
alert("操作失败");
}
},
error:function(){
//请求出错处理
}
});
}
</script>