420 lines
22 KiB
HTML
420 lines
22 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html class="x-admin-sm">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>菜谱管理</title>
|
|||
|
|
<meta name="renderer" content="webkit">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|||
|
|
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
|
|||
|
|
<link rel="stylesheet" href="/x_admin/css/font.css">
|
|||
|
|
<link rel="stylesheet" href="/x_admin/css/xadmin.css">
|
|||
|
|
<script type="text/javascript" src="/x_admin/lib/layui/layui.js" charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript" src="/x_admin/js/xadmin.js"></script>
|
|||
|
|
<script type="text/javascript" src="/x_admin/js/jq.js"></script>
|
|||
|
|
<style>
|
|||
|
|
.step-container {
|
|||
|
|
display: flex;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
border: 1px solid #eee;
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
.step-content {
|
|||
|
|
flex: 1;
|
|||
|
|
padding-right: 15px;
|
|||
|
|
}
|
|||
|
|
.step-image {
|
|||
|
|
width: 200px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.step-preview {
|
|||
|
|
max-width: 100%;
|
|||
|
|
max-height: 150px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.step-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="layui-fluid">
|
|||
|
|
<div class="layui-row">
|
|||
|
|
<form class="layui-form layui-form-pane">
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label" style="width: 120px; text-align: right;">
|
|||
|
|
<span class="x-red">☆</span>菜谱标题
|
|||
|
|
</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 80%;">
|
|||
|
|
<input type="text" id="recipe_title" name="recipe_title" required lay-verify="required" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 图片选择器html部分 -->
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label" style="width: 120px; text-align: right;">
|
|||
|
|
<span class="x-red">★</span>选择封面
|
|||
|
|
</label>
|
|||
|
|
<div class="layui-input-inline">
|
|||
|
|
<div class="layui-btn" onclick="openImageManager('preview_img', 'cove_img')">点击选择</div>
|
|||
|
|
<input type="hidden" id="cove_img" name="cove_img">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label" style="width: 120px; text-align: right;">
|
|||
|
|
<span class="x-red"></span>预览
|
|||
|
|
</label>
|
|||
|
|
<div class="layui-input-inline">
|
|||
|
|
<img id="preview_img" style="max-width: 200px; display: none; border: 1px solid #eee; margin-top: 10px;" src="" alt="">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 图片选择器html部分 -->
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label" style="width: 120px; text-align: right;">
|
|||
|
|
<span class="x-red">☆</span>菜谱类型
|
|||
|
|
</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 80%;">
|
|||
|
|
<select name="recipe_type" lay-verify="required" id="recipe_type">
|
|||
|
|
<option value="0">请选择菜谱类型</option>
|
|||
|
|
{volist name="result" id="vo"}
|
|||
|
|
<option value="{$vo.id}">{$vo.name}</option>
|
|||
|
|
{/volist}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label" style="width: 120px; text-align: right;">
|
|||
|
|
<span class="x-red">☆</span>菜谱描述
|
|||
|
|
</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 80%;">
|
|||
|
|
<textarea name="recipe_desc" id="recipe_desc" required lay-verify="required" placeholder="请输入菜谱描述" class="layui-textarea"></textarea>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label" style="width: 120px; text-align: right;">
|
|||
|
|
<span class="x-red">☆</span>食材
|
|||
|
|
</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 80%;">
|
|||
|
|
<div id="ingredients_container">
|
|||
|
|
<div class="layui-form-item ingredient-item" style="margin-bottom: 10px;">
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<input type="text" name="ingredient_name[]" placeholder="食材名称" autocomplete="off" class="layui-input ingredient-name" style="width: 150px; display: inline-block;">
|
|||
|
|
<div class="ingredient-suggest" style="position: absolute; z-index: 999; display: none; width: 150px; max-height: 200px; overflow-y: auto; border: 1px solid #d2d2d2; background: #fff;"></div>
|
|||
|
|
<input type="text" name="ingredient_amount[]" placeholder="用量(g)" autocomplete="off" class="layui-input" style="width: 100px; display: inline-block; margin-left: 10px;">
|
|||
|
|
<button type="button" class="layui-btn layui-btn-danger layui-btn-xs remove-ingredient" style="margin-left: 10px;">删除</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button type="button" id="add_ingredient" class="layui-btn layui-btn-xs">添加食材</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label" style="width: 120px; text-align: right;">
|
|||
|
|
<span class="x-red">☆</span>步骤
|
|||
|
|
</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 80%;">
|
|||
|
|
<div id="steps_container">
|
|||
|
|
<div class="step-container">
|
|||
|
|
<div class="step-content">
|
|||
|
|
<label class="layui-form-label" style="width: auto; padding: 9px 5px; text-align: left;">步骤1</label>
|
|||
|
|
<textarea name="step_desc[]" placeholder="请输入步骤描述" class="layui-textarea"></textarea>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-image">
|
|||
|
|
<img class="step-preview" src="" alt="步骤图片预览">
|
|||
|
|
<input type="hidden" class="step-image-id" name="step_image[]" value="">
|
|||
|
|
<div class="step-buttons">
|
|||
|
|
<button type="button" class="layui-btn layui-btn-xs select-step-image">选择图片</button>
|
|||
|
|
<button type="button" class="layui-btn layui-btn-danger layui-btn-xs remove-step">删除步骤</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button type="button" id="add_step" class="layui-btn layui-btn-xs">添加步骤</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-form-item" style="display: flex;flex-direction: row;justify-content: center;">
|
|||
|
|
<button class="layui-btn" lay-filter="add" lay-submit="" style="width: 150px;">增加</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script>
|
|||
|
|
// 图片选择器js部分~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|||
|
|
// 全局变量存储当前操作的预览和隐藏字段ID
|
|||
|
|
var currentImageSelection = {
|
|||
|
|
previewId: '',
|
|||
|
|
hiddenFieldId: ''
|
|||
|
|
};
|
|||
|
|
// 打开图片管理器函数
|
|||
|
|
function openImageManager(previewId, hiddenFieldId) {
|
|||
|
|
// 存储当前操作的ID
|
|||
|
|
currentImageSelection.previewId = previewId;
|
|||
|
|
currentImageSelection.hiddenFieldId = hiddenFieldId;
|
|||
|
|
|
|||
|
|
// 打开图片管理窗口
|
|||
|
|
xadmin.open('图片管理', '/k/admin/pic', '80%', '80%');
|
|||
|
|
}
|
|||
|
|
// 接收从图片管理窗口返回的参数
|
|||
|
|
function receiveParamFromIframe(param) {
|
|||
|
|
if(param.length > 0 && currentImageSelection.previewId && currentImageSelection.hiddenFieldId){
|
|||
|
|
// 更新预览图片
|
|||
|
|
var img = document.getElementById(currentImageSelection.previewId);
|
|||
|
|
img.src = param[1];
|
|||
|
|
img.style.display = 'block';
|
|||
|
|
|
|||
|
|
// 更新隐藏字段值
|
|||
|
|
document.getElementById(currentImageSelection.hiddenFieldId).value = param[0];
|
|||
|
|
|
|||
|
|
// 重置当前操作的ID
|
|||
|
|
currentImageSelection.previewId = '';
|
|||
|
|
currentImageSelection.hiddenFieldId = '';
|
|||
|
|
} else {
|
|||
|
|
layer.msg('图片选择失败');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 图片选择器js部分~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|||
|
|
$(document).ready(function(){
|
|||
|
|
var stepCounter = 1;
|
|||
|
|
var ingredientCounter = 1;
|
|||
|
|
|
|||
|
|
// 添加食材
|
|||
|
|
$('#add_ingredient').on('click', function() {
|
|||
|
|
ingredientCounter++;
|
|||
|
|
var html = `
|
|||
|
|
<div class="layui-form-item ingredient-item" style="margin-bottom: 10px;">
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<input type="text" name="ingredient_name[]" placeholder="食材名称" autocomplete="off" class="layui-input ingredient-name" style="width: 150px; display: inline-block;">
|
|||
|
|
<div class="ingredient-suggest" style="position: absolute; z-index: 999; display: none; width: 150px; max-height: 200px; overflow-y: auto; border: 1px solid #d2d2d2; background: #fff;"></div>
|
|||
|
|
<input type="text" name="ingredient_amount[]" placeholder="用量(g)" autocomplete="off" class="layui-input" style="width: 100px; display: inline-block; margin-left: 10px;">
|
|||
|
|
<button type="button" class="layui-btn layui-btn-danger layui-btn-xs remove-ingredient" style="margin-left: 10px;">删除</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
$('#ingredients_container').append(html);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 食材名称输入自动完成
|
|||
|
|
$(document).on('input', '.ingredient-name', function() {
|
|||
|
|
var input = $(this);
|
|||
|
|
var keyword = input.val().trim();
|
|||
|
|
var suggestBox = input.next('.ingredient-suggest');
|
|||
|
|
|
|||
|
|
if (keyword.length < 1) {
|
|||
|
|
suggestBox.hide();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
console.log(keyword)
|
|||
|
|
// 发送AJAX请求
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/k/a/cookbook/find_food_list',
|
|||
|
|
dataType:"json", //返回格式为json
|
|||
|
|
async:true,//请求是否异步，默认为异步，这也是ajax重要特性
|
|||
|
|
data:{"id":"value"}, //参数值
|
|||
|
|
data: {'search_data': keyword},
|
|||
|
|
type: 'POST',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.code === 0 && res.data && res.data.length > 0) {
|
|||
|
|
var html = '';
|
|||
|
|
res.data.forEach(function(item) {
|
|||
|
|
html += '<div class="suggest-item" style="padding: 5px 10px; cursor: pointer;" data-id="' + item.id + '" data-name="' + item.food_name + '" data-kcal="' + item.Calorie_val + '">' + item.food_name + '</div>';
|
|||
|
|
});
|
|||
|
|
suggestBox.html(html).show();
|
|||
|
|
} else {
|
|||
|
|
suggestBox.hide();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function() {
|
|||
|
|
suggestBox.hide();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 点击建议项填充到输入框
|
|||
|
|
$(document).on('click', '.suggest-item', function() {
|
|||
|
|
var id = $(this).data('id');
|
|||
|
|
var name = $(this).data('name');
|
|||
|
|
var kcal = $(this).data('kcal');
|
|||
|
|
|
|||
|
|
var parentDiv = $(this).closest('.layui-inline');
|
|||
|
|
parentDiv.find('.ingredient-name').val(name).data('id', id).data('kcal', kcal);
|
|||
|
|
parentDiv.find('.ingredient-suggest').hide();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 点击其他地方隐藏建议框并清空输入框
|
|||
|
|
$(document).on('click', function(e) {
|
|||
|
|
if (!$(e.target).closest('.ingredient-suggest').length && !$(e.target).hasClass('ingredient-name')) {
|
|||
|
|
$('.ingredient-suggest').hide();
|
|||
|
|
// 清空未选择食材的输入框
|
|||
|
|
$('.ingredient-name').each(function() {
|
|||
|
|
if (!$(this).data('id')) { // 如果没有选择过食材(没有data-id)
|
|||
|
|
$(this).val(''); // 清空输入框
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 删除食材
|
|||
|
|
$(document).on('click', '.remove-ingredient', function() {
|
|||
|
|
if($('.ingredient-item').length > 1) {
|
|||
|
|
$(this).closest('.ingredient-item').remove();
|
|||
|
|
} else {
|
|||
|
|
layer.msg('至少保留一个食材');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 添加步骤
|
|||
|
|
$('#add_step').on('click', function() {
|
|||
|
|
stepCounter++;
|
|||
|
|
var html = `
|
|||
|
|
<div class="step-container">
|
|||
|
|
<div class="step-content">
|
|||
|
|
<label class="layui-form-label" style="width: auto; padding: 9px 5px; text-align: left;">步骤${stepCounter}</label>
|
|||
|
|
<textarea name="step_desc[]" placeholder="请输入步骤描述" class="layui-textarea"></textarea>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-image">
|
|||
|
|
<img class="step-preview" src="" alt="步骤图片预览">
|
|||
|
|
<input type="hidden" class="step-image-id" name="step_image[]" value="">
|
|||
|
|
<div class="step-buttons">
|
|||
|
|
<button type="button" class="layui-btn layui-btn-xs select-step-image">选择图片</button>
|
|||
|
|
<button type="button" class="layui-btn layui-btn-danger layui-btn-xs remove-step">删除步骤</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
$('#steps_container').append(html);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 为步骤选择图片
|
|||
|
|
$(document).on('click', '.select-step-image', function() {
|
|||
|
|
var container = $(this).closest('.step-container');
|
|||
|
|
var previewImg = container.find('.step-preview');
|
|||
|
|
var hiddenInput = container.find('.step-image-id');
|
|||
|
|
|
|||
|
|
// 为元素设置唯一ID
|
|||
|
|
var previewId = 'step-preview-' + Math.random().toString(36).substr(2, 9);
|
|||
|
|
var hiddenId = 'step-image-' + Math.random().toString(36).substr(2, 9);
|
|||
|
|
|
|||
|
|
previewImg.attr('id', previewId);
|
|||
|
|
hiddenInput.attr('id', hiddenId);
|
|||
|
|
|
|||
|
|
// 打开图片管理器
|
|||
|
|
openImageManager(previewId, hiddenId);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 删除步骤
|
|||
|
|
$(document).on('click', '.remove-step', function() {
|
|||
|
|
if($('.step-container').length > 1) {
|
|||
|
|
$(this).closest('.step-container').remove();
|
|||
|
|
// 重新编号步骤
|
|||
|
|
$('.step-container').each(function(index) {
|
|||
|
|
$(this).find('.layui-form-label').text('步骤' + (index + 1));
|
|||
|
|
});
|
|||
|
|
stepCounter--;
|
|||
|
|
} else {
|
|||
|
|
layer.msg('至少保留一个步骤');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 表单提交时收集数据
|
|||
|
|
layui.use(['form', 'layer'], function() {
|
|||
|
|
var form = layui.form,
|
|||
|
|
layer = layui.layer;
|
|||
|
|
|
|||
|
|
// 监听提交
|
|||
|
|
form.on('submit(add)', function(data) {
|
|||
|
|
// 显示加载中
|
|||
|
|
var loadIndex = layer.load(1);
|
|||
|
|
|
|||
|
|
// 收集表单数据
|
|||
|
|
var formData = {
|
|||
|
|
cook_label: $('#recipe_type').val(),
|
|||
|
|
title: $('#recipe_title').val(),
|
|||
|
|
description: $('#recipe_desc').val(),
|
|||
|
|
cover: $('#cove_img').val(), // 封面图片ID
|
|||
|
|
foodList: [],
|
|||
|
|
stepList: []
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 收集食材数据
|
|||
|
|
$('.ingredient-item').each(function() {
|
|||
|
|
var nameInput = $(this).find('.ingredient-name');
|
|||
|
|
var amountInput = $(this).find('input[placeholder="用量(g)"]');
|
|||
|
|
|
|||
|
|
var id = nameInput.data('id');
|
|||
|
|
var name = nameInput.val();
|
|||
|
|
var weight = amountInput.val();
|
|||
|
|
|
|||
|
|
if (id && name && weight && weight > 0) {
|
|||
|
|
formData.foodList.push({
|
|||
|
|
id: id,
|
|||
|
|
name: name,
|
|||
|
|
weight: weight
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 收集步骤数据
|
|||
|
|
$('.step-container').each(function() {
|
|||
|
|
var desc = $(this).find('textarea').val();
|
|||
|
|
var imageId = $(this).find('.step-image-id').val();
|
|||
|
|
|
|||
|
|
if (desc && desc.trim() !== '') {
|
|||
|
|
formData.stepList.push({
|
|||
|
|
pic_list: [imageId] || [],
|
|||
|
|
description: desc.trim()
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 调试输出
|
|||
|
|
console.log('提交数据:', formData);
|
|||
|
|
|
|||
|
|
// 发送AJAX请求
|
|||
|
|
$.ajax({
|
|||
|
|
url: "/k/a/cookbook/add_cookbook_action",
|
|||
|
|
type: "POST",
|
|||
|
|
data: JSON.stringify(formData),
|
|||
|
|
contentType: "application/json",
|
|||
|
|
success: function(res) {
|
|||
|
|
layer.close(loadIndex);
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
layer.alert("添加成功", {icon: 1}, function() {
|
|||
|
|
xadmin.close();
|
|||
|
|
xadmin.father_reload();
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
layer.alert("添加失败：" + res.msg, {icon: 2});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function() {
|
|||
|
|
layer.close(loadIndex);
|
|||
|
|
layer.alert("请求失败，请稍后再试", {icon: 2});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
//加载提示开启
|
|||
|
|
function load() {
|
|||
|
|
var index = layer.load(1, {
|
|||
|
|
shade: [0.1, '#fff'] //0.1透明度的白色背景
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// 关闭加载提示
|
|||
|
|
function c_load() {
|
|||
|
|
layer.close(layer.index)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|