File: /www/wwwroot/dd.cwoyt.com/套餐餐.php
<script src="/layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
<div class="layui-upload-drag" id="test10" style="width:80px;height:80px" onclick="">
<!--<i class="layui-icon"></i>-->
<p>点击上传</p>
<div class="layui-hide" id="uploadDemoView">
<hr>
<img src="" alt="上传成功后渲染" style="max-width: 50px">
<input type="hidden" name="thumb" value="" id="tupian">
</div>
</div>
<div class="layui-upload-drag" id="test11" style="width:80px;height:80px">
<!--<i class="layui-icon"></i>-->
<p>点击上传</p>
<div class="layui-hide" id="uploadDemoView">
<hr>
<img src="" alt="上传成功后渲染" style="max-width: 50px">
<input type="hidden" name="thumb" value="" class="tupian">
</div>
</div>
<script type="text/javascript" th:inline="javascript">
layui.use(['upload', 'element', 'layer'], function () {
var $ = layui.jquery
, upload = layui.upload
, element = layui.element
, layer = layui.layer;
//拖拽上传
upload.render({
elem: '#test10'
, url: 'https://dd.cwoyt.com/upload2.php' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
, done: function (res) {
if (res.code == 0) {
layer.msg('上传成功');
layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);
console.log(res)
$('#tupian').attr('value', res.data.src);
} else {
layer.msg('上传失败');
return false;
}
}
});
});
</script>
<script type="text/javascript" th:inline="javascript">
layui.use(['upload', 'element', 'layer'], function () {
var $ = layui.jquery
, upload = layui.upload
, element = layui.element
, layer = layui.layer;
//拖拽上传
upload.render({
elem: '#test11'
, url: 'https://dd.cwoyt.com/upload2.php' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
, done: function (res) {
if (res.code == 0) {
layer.msg('上传成功');
layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);
console.log(res)
$('#test11 .tupian').attr('value', res.data.src);
} else {
layer.msg('上传失败');
return false;
}
}
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Html5 Ajax 上传文件</title>
<meta charset="utf-8">
<script type="text/javascript">
var xhr;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
}
function UpladFile()
{
var fileObj = document.getElementById("file").files[0];
var FileController = 'https://dd.cwoyt.com/upload1.php';
var form = new FormData();
form.append("myfile", fileObj);
createXMLHttpRequest();
xhr.onreadystatechange = handleStateChange;
xhr.open("post", FileController, true);
xhr.send(form);
}
function handleStateChange()
{
if(xhr.readyState == 4)
{
if (xhr.status == 200 || xhr.status == 0)
{
var result = xhr.responseText;
var json = eval("(" + result + ")");
// alert('/images/'+json.file);
$('#tupian').attr('value', json.file);
$('#tupian').attr('src', json.file);
}
}
}
</script>
<style>
.txt{ height:28px; border:1px solid #cdcdcd; width:0px;opacity:0}
.mybtn{ background-color:#FFF; line-height:14px;vertical-align:middle;border:1px solid #CDCDCD;height:30px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div class="form-group">
<input type="image" name="" id="tupian" value="" src="" style="width:50px;height:50px"/>
<input type='text' name='textfield' id='textfield' class='txt' />
<span onclick="file.click()" class="mybtn">浏览...</span>
<input type="file" name="file" class="file" id="file" size="28" onchange="document.getElementById('textfield').value=this.value" />
<span onclick="UpladFile()" class="mybtn" style="cursor: pointer;">上传</span>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery图片上传拖拽排序代码 </title>
<link href="/taocan/layui/css/layui.css" rel="stylesheet">
<link href="/taocan/css/bootstrap.min.css" rel="stylesheet">
<style>
.upload-btn {
width: 40px;
height: 100%;
cursor: pointer !important;
position: relative;
background: url("/taocan/images/upload.png") no-repeat #007bff;
-webkit-background-size: cover;
background-size: cover;
border: 1px solid #ced4da;
border-left: none;
border-radius: 0 0.25rem 0.25rem 0;
}
.upload-btn .upload-img {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer !important;
}
</style>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-12">
<!--<form class="" action="upload.php" method="POST">-->
<div class="card">
<div class="card-body">
<table class="table">
<thead>
<tr>
<th width="30%">名称</th>
<th width="50%">图片</th>
<th width="20%">操作</th>
</tr>
</thead>
<tbody id="tbody-items">
<tr v-for="(v,i) in items" class="tr-item">
<td>
<div class="input-group">
<input type="text" class="form-control" name="name" value="" placeholder="套餐名称">
</div>
</td>
<td>
<input class="upload-img" type="file" name="file" @change="upload($event, i)">
<input type="image" class="preview-img" :id="'preview-img-' + (i + 1)" src="v.pic" height="36" width="36" value="v.pic" @change="upload($event, i)">
<!--<input type="hidden" class="preview-img" :id="'preview-img-' + (i + 1)"-->
<!-- value="v.pic" > -->
</td>
<td>
<div class="input-group">
<button type="button" class="btn btn-secondary p-0 m-0 move-action mr-2"
style="cursor: move;">
<img src="/taocan/images/move.png" height="36">
</button>
<button type="button" class="btn btn-danger" @click="del(i)">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="ml-3 mb-3">
<button type="button" class="btn btn-primary" @click="add();">添加套餐</button>
</div>
</div>
<!--</form>-->
</div>
</div>
</div>
<script src="/taocan/js/jquery.min.js"></script>
<script src="/taocan/layer/layer.js"></script>
<script src="/taocan/js/vue.js"></script>
<script src="/taocan/js/axios.js"></script>
<script src="/taocan/node_modules/sortable/taocan/js/Sortable.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
items: [],
},
updated() {
var _this = this;
var $tbody = _this.$el.querySelector('#tbody-items');
new Sortable($tbody, {
handle: '#tbody-items .move-action',
onUpdate: function (event) {
//修改items数据顺序
var newIndex = event.newIndex,
oldIndex = event.oldIndex,
$tr = $tbody.children[newIndex],
$oldTr = $tbody.children[oldIndex];
// 先删除移动的节点
$tbody.removeChild($tr);
// 再插入移动的节点到原有节点，还原了移动的操作
if (newIndex > oldIndex) {
$tbody.insertBefore($tr, $oldTr)
} else {
$tbody.insertBefore($tr, $oldTr.nextSibling)
}
// 更新items数组
var item = _this.items.splice(oldIndex, 1);
_this.items.splice(newIndex, 0, item[0]);
},
animation: 150,
})
},
mounted() {
},
methods: {
add() {
this.items.push({
name: '',
pic: '',
});
},
del(pos) {
this.items.splice(pos, 1);
},
upload(event, pos) {
let _this = this;
let file = event.target.files[0];
let fileSize = file.size;
let fileName = file.name;
let fileExt = fileName.substring(fileName.lastIndexOf(".") + 1);
try {
this.checkExt(fileExt);//检测文件后缀
this.checkSize(fileSize);//检测文件大小
let param = new FormData();
param.append("file", file);
let config = {
headers: {"Content-Type": "multipart/form-data"}
};
axios.post('upload.php', param, config).then(function (res) {
if (res.data.code == 1) {
_this.items[pos].pic = res.data.file_url;
$('#preview-img-' + (parseInt(pos) + 1)).attr('layer-src', res.data.file_url);
$('#preview-img-' + (parseInt(pos) + 1)).attr('src', res.data.file_url);
$('#preview-img-' + (parseInt(pos) + 1)).attr('value', res.data.file_url);
} else {
layer.msg(res.data.msg);
}
}).catch(function (err) {
console.log(err);
});
} catch (err) {
layer.msg(err);
}
},
delImg(pos) {
this.items[pos].pic = '';
},
checkExt(ext) {
//上传图片格式
if (!['jpg', 'png', 'jpeg', 'gif', 'bmp'].includes(ext)) {
throw '上传图片格式不正确';
}
},
checkSize(size) {
//限制2M
if (size > 2000 * 1024) {
throw '上传图片大小不能超过2M';
}
},
previewImg(pos) {
let img = $('#preview-img-' + (parseInt(pos) + 1)).attr('layer-src');
if (!img) {
layer.msg('没有可以预览的图片');
return false;
}
layer.photos({
photos: {
"title": "", //相册标题
"id": 'image_preview', //相册id
"start": 0, //初始显示的图片序号，默认0
"data": [ //相册包含的图片，数组格式
{
"alt": "",
"pid": 666, //图片id
"src": img, //原图地址
"thumb": img //缩略图地址
}
]
}, //格式见API文档手册页
anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机
shadeClose: true,
// skin: 'layui-layer-nobg',
shade: [0.5, '#000000'],
shadeClose: true,
});
}
}
});
</script>
<div class="container" id="app2">
<div class="row">
<div class="col-md-12">
<!--<form class="" action="upload.php" method="POST">-->
<div class="card">
<div class="card-body">
<table class="table">
<thead>
<tr>
<th width="30%">名称</th>
<th width="50%">图片</th>
<th width="20%">操作</th>
</tr>
</thead>
<tbody id="tbody-items2">
<tr v-for="(v,i) in items" class="tr-item">
<td>
<div class="input-group">
<input type="text" class="form-control" name="name" value="">
</div>
</td>
<td>
<div class="row">
<div class="col-sm-10">
<div class="input-group" style="position: relative;">
<input type="text" class="form-control" name="pic" value="v.pic" v-model="v.pic"
readonly>
<img src="/taocan/images/delete.png" height="20"
style="position: absolute;cursor: pointer;top:-10px;right:38px;z-index:999;"
@click="delImg(i)">
<div class="input-group-append">
<div class="upload-btn">
<input class="upload-img2" type="file" name="file"
@change="upload($event, i)">
</div>
</div>
</div>
</div>
<div class="col-sm-2 p-0">
<button type="button" class="btn btn-primary p-0 m-0">
<input type="image" class="preview-img2" :id="'preview-img2-' + (i + 1)"
src="v.pic" height="36" width="36" :layer-src="v.pic"
@click="previewImg(i)" title="点击预览" value="v.pic">
<!--<input type="hidden" class="preview-img2" :id="'preview-img2-' + (i + 1)"-->
<!-- value="v.pic" > -->
</button>
</div>
</div>
</td>
<td>
<div class="input-group">
<button type="button" class="btn btn-secondary p-0 m-0 move-action2 mr-2"
style="cursor: move;">
<img src="/taocan/images/move.png" height="36">
</button>
<button type="button" class="btn btn-danger" @click="del(i)">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="ml-3 mb-3">
<button type="button" class="btn btn-primary" @click="add();">添加属性</button>
</div>
</div>
<!--</form>-->
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app2',
data: {
items: [],
},
updated() {
var _this = this;
var $tbody = _this.$el.querySelector('#tbody-items2');
new Sortable($tbody, {
handle: '#tbody-items2 .move-action2',
onUpdate: function (event) {
//修改items数据顺序
var newIndex = event.newIndex,
oldIndex = event.oldIndex,
$tr = $tbody.children[newIndex],
$oldTr = $tbody.children[oldIndex];
// 先删除移动的节点
$tbody.removeChild($tr);
// 再插入移动的节点到原有节点，还原了移动的操作
if (newIndex > oldIndex) {
$tbody.insertBefore($tr, $oldTr)
} else {
$tbody.insertBefore($tr, $oldTr.nextSibling)
}
// 更新items数组
var item = _this.items.splice(oldIndex, 1);
_this.items.splice(newIndex, 0, item[0]);
},
animation: 150,
})
},
mounted() {
},
methods: {
add() {
this.items.push({
name: '',
pic: '',
});
},
del(pos) {
this.items.splice(pos, 1);
},
upload(event, pos) {
let _this = this;
let file = event.target.files[0];
let fileSize = file.size;
let fileName = file.name;
let fileExt = fileName.substring(fileName.lastIndexOf(".") + 1);
try {
this.checkExt(fileExt);//检测文件后缀
this.checkSize(fileSize);//检测文件大小
let param = new FormData();
param.append("file", file);
let config = {
headers: {"Content-Type": "multipart/form-data"}
};
axios.post('upload.php', param, config).then(function (res) {
if (res.data.code == 1) {
_this.items[pos].pic = res.data.file_url;
$('#preview-img2-' + (parseInt(pos) + 1)).attr('layer-src', res.data.file_url);
$('#preview-img2-' + (parseInt(pos) + 1)).attr('src', res.data.file_url);
$('#preview-img2-' + (parseInt(pos) + 1)).attr('value', res.data.file_url);
} else {
layer.msg(res.data.msg);
}
}).catch(function (err) {
console.log(err);
});
} catch (err) {
layer.msg(err);
}
},
delImg(pos) {
this.items[pos].pic = '';
},
checkExt(ext) {
//上传图片格式
if (!['jpg', 'png', 'jpeg', 'gif', 'bmp'].includes(ext)) {
throw '上传图片格式不正确';
}
},
checkSize(size) {
//限制2M
if (size > 2000 * 1024) {
throw '上传图片大小不能超过2M';
}
},
previewImg(pos) {
let img = $('#preview-img2-' + (parseInt(pos) + 1)).attr('layer-src');
if (!img) {
layer.msg('没有可以预览的图片');
return false;
}
layer.photos({
photos: {
"title": "", //相册标题
"id": 'image_preview', //相册id
"start": 0, //初始显示的图片序号，默认0
"data": [ //相册包含的图片，数组格式
{
"alt": "",
"pid": 666, //图片id
"src": img, //原图地址
"thumb": img //缩略图地址
}
]
}, //格式见API文档手册页
anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机
shadeClose: true,
// skin: 'layui-layer-nobg',
shade: [0.5, '#000000'],
shadeClose: true,
});
}
}
});
</script>
<div class="container" id="app3">
<div class="row">
<div class="col-md-12">
<!--<form class="" action="upload.php" method="POST">-->
<div class="card">
<div class="card-body">
<table class="table">
<thead>
<tr>
<th width="30%">名称</th>
<th width="50%">图片</th>
<th width="20%">操作</th>
</tr>
</thead>
<tbody id="tbody-items3">
<tr v-for="(v,i) in items" class="tr-item">
<td>
<div class="input-group">
<input type="text" class="form-control" name="name" value="">
</div>
</td>
<td>
<div class="row">
<div class="col-sm-10">
<div class="input-group" style="position: relative;">
<input type="text" class="form-control" name="pic" value="v.pic" v-model="v.pic"
readonly>
<img src="/taocan/images/delete.png" height="20"
style="position: absolute;cursor: pointer;top:-10px;right:38px;z-index:999;"
@click="delImg(i)">
<div class="input-group-append">
<div class="upload-btn">
<input class="upload-img3" type="file" name="file"
@change="upload($event, i)">
</div>
</div>
</div>
</div>
<div class="col-sm-2 p-0">
<button type="button" class="btn btn-primary p-0 m-0">
<input type="image" class="preview-img3" :id="'preview-img3-' + (i + 1)"
src="v.pic" height="36" width="36" :layer-src="v.pic"
@click="previewImg(i)" title="点击预览" value="v.pic">
<!--<input type="hidden" class="preview-img3" :id="'preview-img3-' + (i + 1)"-->
<!-- value="v.pic" > -->
</button>
</div>
</div>
</td>
<td>
<div class="input-group">
<button type="button" class="btn btn-secondary p-0 m-0 move-action3 mr-2"
style="cursor: move;">
<img src="/taocan/images/move.png" height="36">
</button>
<button type="button" class="btn btn-danger" @click="del(i)">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="ml-3 mb-3">
<button type="button" class="btn btn-primary" @click="add();">添加属性</button>
</div>
</div>
<!--</form>-->
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app3',
data: {
items: [],
},
updated() {
var _this = this;
var $tbody = _this.$el.querySelector('#tbody-items3');
new Sortable($tbody, {
handle: '#tbody-items3 .move-action3',
onUpdate: function (event) {
//修改items数据顺序
var newIndex = event.newIndex,
oldIndex = event.oldIndex,
$tr = $tbody.children[newIndex],
$oldTr = $tbody.children[oldIndex];
// 先删除移动的节点
$tbody.removeChild($tr);
// 再插入移动的节点到原有节点，还原了移动的操作
if (newIndex > oldIndex) {
$tbody.insertBefore($tr, $oldTr)
} else {
$tbody.insertBefore($tr, $oldTr.nextSibling)
}
// 更新items数组
var item = _this.items.splice(oldIndex, 1);
_this.items.splice(newIndex, 0, item[0]);
},
animation: 150,
})
},
mounted() {
},
methods: {
add() {
this.items.push({
name: '',
pic: '',
});
},
del(pos) {
this.items.splice(pos, 1);
},
upload(event, pos) {
let _this = this;
let file = event.target.files[0];
let fileSize = file.size;
let fileName = file.name;
let fileExt = fileName.substring(fileName.lastIndexOf(".") + 1);
try {
this.checkExt(fileExt);//检测文件后缀
this.checkSize(fileSize);//检测文件大小
let param = new FormData();
param.append("file", file);
let config = {
headers: {"Content-Type": "multipart/form-data"}
};
axios.post('upload.php', param, config).then(function (res) {
if (res.data.code == 1) {
_this.items[pos].pic = res.data.file_url;
$('#preview-img3-' + (parseInt(pos) + 1)).attr('layer-src', res.data.file_url);
$('#preview-img3-' + (parseInt(pos) + 1)).attr('src', res.data.file_url);
$('#preview-img3-' + (parseInt(pos) + 1)).attr('value', res.data.file_url);
} else {
layer.msg(res.data.msg);
}
}).catch(function (err) {
console.log(err);
});
} catch (err) {
layer.msg(err);
}
},
delImg(pos) {
this.items[pos].pic = '';
},
checkExt(ext) {
//上传图片格式
if (!['jpg', 'png', 'jpeg', 'gif', 'bmp'].includes(ext)) {
throw '上传图片格式不正确';
}
},
checkSize(size) {
//限制2M
if (size > 2000 * 1024) {
throw '上传图片大小不能超过2M';
}
},
previewImg(pos) {
let img = $('#preview-img3-' + (parseInt(pos) + 1)).attr('layer-src');
if (!img) {
layer.msg('没有可以预览的图片');
return false;
}
layer.photos({
photos: {
"title": "", //相册标题
"id": 'image_preview', //相册id
"start": 0, //初始显示的图片序号，默认0
"data": [ //相册包含的图片，数组格式
{
"alt": "",
"pid": 666, //图片id
"src": img, //原图地址
"thumb": img //缩略图地址
}
]
}, //格式见API文档手册页
anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机
shadeClose: true,
// skin: 'layui-layer-nobg',
shade: [0.5, '#000000'],
shadeClose: true,
});
}
}
});
</script>
<!--<script src="/layui/layui.js" charset="utf-8"></script>-->
<!--<link rel="stylesheet" href="/layui/css/layui.css" media="all"> -->
<form action="/套餐.php" method="post" class="form-horizontal">
<div class="taocanmain">
<input type="hidden" name="proid" value="1">
<input type="hidden" name="tc_type" value="1">
<div class="layui-form-item">
<label class="layui-form-label" style="width:120px !important">产品套餐</label>
<div class="fl"><input type="text" name="norms_temp[one][title]" autocomplete="off" placeholder="产品套餐" class="layui-input div-w-200"></div>
<div class="fl" style="margin-left:10px;" onclick="addNormsOne();"><a class="layui-btn layui-btn-normal"> 添加产品套餐</a></div>
</div>
<div class="layui-form-item">
<div class="taocan" id="norms_one">
</div>
</div>
<div class="layui-form-item">
<input type="hidden" name="sx1_type" value="2">
<label class="layui-form-label" style="width:120px !important">产品属性</label>
<div class="fl"><input type="text" name="norms_temp[two][title]" autocomplete="off" placeholder="属性名称" class="layui-input div-w-200"></div>
<div class="fl" style="margin-left:10px;" onclick="addNormsTwo();"><a class="layui-btn layui-btn-normal"> 添加产品属性</a></div>
</div>
<div class="layui-form-item">
<div class="taocan" id="norms_two">
</div>
</div>
<div class="layui-form-item">
<input type="hidden" name="sx2_type" value="3">
<label class="layui-form-label" style="width:120px !important">产品属性</label>
<div class="fl"><input type="text" name="norms_temp[three][title]" autocomplete="off" placeholder="属性名称" class="layui-input div-w-200"></div>
<div class="fl" style="margin-left:10px;" onclick="addNormsThree();"><a class="layui-btn layui-btn-normal"> 添加产品属性</a></div>
</div>
<div class="layui-form-item">
<div class="taocan" id="norms_three">
</div>
</div>
</div>
<input type="submit" name="" id="" value="表单提交" />
</form>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!---新加--->
<?php
$servername = "127.0.0.1";
$username = "ddcwoyt";
$password = "WnT2JNfHiEy3N7p8";
$dbname = "ddcwoyt";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
if(IS_POST){
$proid=$_POST['proid'];
$title=json_encode($_POST['tc_title']);;
$tc_thumb=json_encode($_POST['tc_thumb']);;
$type=1;
$number=json_encode($_POST['tc_number']);
$price=json_encode($_POST['tc_price']);
$total_number=json_encode($_POST['total_number']);
echo $title;
echo $number;
echo $price;
echo $total_number;
echo $tc_thumb;
echo "<br>";
$chandu=count($_POST['tc_title']);//总长度
for ($i = 0; $i < $chandu; $i++) {
echo $_POST['tc_title'][$i].$_POST['tc_thumb'][$i].$_POST['tc_price'][$i].$_POST['total_number'][$i]."<br>";
}
}
?>
<script type="text/javascript">
layui.use(['form','laydate','colorpicker'], function(){
var form = layui.form
,layer = layui.layer
,laydate = layui.laydate
,colorpicker = layui.colorpicker;
});
/*
表单提交
*/
//上传产品小图标
function uploadNormsImg(obj){
var formData = new FormData();
var files = $(obj)[0].files[0];
if(files != undefined){
$(obj).siblings('img').attr('src',URL.createObjectURL(files));
formData.append('file',files); //添加图片信息的参数
$.ajax({
url: "/index/flie/tc_thumb",
type: 'POST',
cache: false, //上传文件不需要缓存
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (data) {
if(data.status == 1){
$(obj).siblings("input[type='hidden']").val(data.filename);
}
}
})
}
}
function addNormsOne(){
var dl = '<dl><dd><input type="file" accept="image/*" onchange="uploadNormsImg(this)" multiple=""><input type="hidden" name="tc_thumb[]" value=""><img src="/Public/img/tu.png"/></dd><dt><input type="text" name="tc_title[]" autocomplete="off" placeholder="套餐名称" class="layui-input div-w-300"></dt><dt><input type="text" name="tc_price[]" autocomplete="off" placeholder="套餐价格" class="layui-input div-w-100"><dt><dt><input type="text" name="total_number[]" autocomplete="off" placeholder="产品总数" class="layui-input div-w-100"><dt><dt><input type="text" name="tc_number[]" autocomplete="off" placeholder="套餐库存" class="layui-input div-w-100" value="9999"><dt><li onclick="delNorms(this)"><a class="layui-btn layui-btn-danger"><i class="fa fa-trash-o"></i> 删 除</a></li><li onclick="arrowUp(this)"><a class="layui-btn"><i class="fa fa-arrow-up"></i> 上 移</a></li><li onclick="arrowDown(this)"><a class="layui-btn"><i class="fa fa-arrow-down"></i> 下 移</a></li></dl> ';
$('#norms_one').append(dl);
}
function addNormsTwo(){
var dl = '<dl><dd><input type="file" accept="image/*" onchange="uploadNormsImg(this)" multiple=""><input type="hidden" name="sx1_tc_thumb" value=""><img src="/Public/img/tu.png"/></dd><dt><input type="text" name="sx1_title" autocomplete="off" placeholder="属性" class="layui-input div-w-300"></dt><li onclick="delNorms(this)"><a class="layui-btn layui-btn-danger"><i class="fa fa-trash-o"></i> 删 除</a></li><li onclick="arrowUp(this)"><a class="layui-btn"><i class="fa fa-arrow-up"></i> 上 移</a></li><li onclick="arrowDown(this)"><a class="layui-btn"><i class="fa fa-arrow-down"></i> 下 移</a></li></dl> ';
$('#norms_two').append(dl);
}
function addNormsThree(){
var dl = '<dl><dd><input type="file" accept="image/*" onchange="uploadNormsImg(this)" multiple=""><input type="hidden" name="sx2_tc_thumb" value=""><img src="/Public/img/tu.png"/></dd><dt><input type="text" name="sx2_title" autocomplete="off" placeholder="属性" class="layui-input div-w-300"></dt><li onclick="delNorms(this)"><a class="layui-btn layui-btn-danger"><i class="fa fa-trash-o"></i> 删 除</a></li><li onclick="arrowUp(this)"><a class="layui-btn"><i class="fa fa-arrow-up"></i> 上 移</a></li><li onclick="arrowDown(this)"><a class="layui-btn"><i class="fa fa-arrow-down"></i> 下 移</a></li></dl> ';
$('#norms_three').append(dl);
}
//上移
function arrowUp(obj){
var dl = $(obj).parents('dl');
dl.prev().before(dl);
}
//下移
function arrowDown(obj){
var dl = $(obj).parents('dl');
dl.next().after(dl);
}
//删除
function delNorms(obj){
$(obj).parents('dl').remove();
}
</script>
<style>
.layui-form-switch{ }
.layui-form-onswitch{border-color: #0595f2 !important; background-color: #0595f2 !important;}
.layui-form-checked span, .layui-form-checked:hover span{ background-color: #0595f2;}
fieldset.layui-elem-field{ margin:0px 20px 10px 20px; /*border-color: #0595f2;*/}
fieldset.layui-elem-field legend{ font-size:14px; color:#0595f2; font-weight: bold;}
a.look-var{ background:#333 !important; height: 25px !important; line-height: 25px !important; padding: 0px 8px !important;}
.layui-form-radio>i:hover, .layui-form-radioed>i { color: #0595f2;}
.layui-form-select dl dd.layui-this,.list-body .layui-form-select dl dd.layui-this{ background-color: #0595f2 !important;}
.taocan .layui-input{ height:30px; line-height:30px;}
.taocan .layui-btn{height:30px; line-height:30px; padding: 0px 8px !important;}
.layui-input-block p{ line-height:38px;}
.layui-input-block p b{ color:red; font-size:14px;}
.layui-input-block p i.fa-pencil{ color:#0595f2; font-size:16px; margin-left:10px; text-decoration: underline; cursor:pointer;}
.taocan{ margin-left:110px;}
.taocan dl{ clear:both; margin:10px 0; overflow: hidden;}
.taocan dl dt{float:left; margin:0px 5px;}
.taocan dl dd{ width:28px; height:28px; overflow:hidden; border: 1px solid #e2e2e2; float:left; margin:0px 5px 0 0; position: relative;}
.taocan dl dd input[type="file"]{ width:28px; height:28px; opacity:0; position: absolute;top:0px; left:0px; z-index:2;}
.taocan dl dd img{ width:28px; height:28px; position: absolute; top:0px; left:0px;}
.taocan dl li{float:left; margin:0px 5px;}
li{list-style:none;}
.c{clear:both;}
.fr{ float:right;}
.fl{ float:left;}
.div-w-100 {
width: 100px !important;
}
.taocanmain{margin-left:50px;border: 2px solid #009688;
padding: 30px;}
.updata-ul{background: #f2f2f2;padding: 10px;z-index: 999;bottom: 0px;width:100%}
</style>
<!---新加--->