Files
duolamaojiazhen/application/admin/view/control/sale_add.html
2025-12-22 13:59:40 +08:00

243 lines
7.9 KiB
HTML

{layout name="layout2" /}
<style>
.layui-form-label {
color: #6a6f6c;
width: 100px;
}
.layui-input-block {
margin-left: 130px;
}
.tips{
color: red;
}
.goods-li {
float: left;
opacity: 1;
position: relative;
}
.goods-img {
width: 80px;
height: 80px;
padding: 4px;
}
.goods-img-del-x {
position: absolute;
z-index: 100;
top: -4px;
right: -2px;
width: 20px;
height: 20px;
font-size: 16px;
line-height: 16px;
color: #fff;
text-align: center;
cursor: pointer;
background: hsla(0, 0%, 60%, .6);
border-radius: 10px;
}
.layui-form-label {
width: 100px;
}
.layui-input-block {
margin-left: 130px;
}
.upload-file-div {
width: 80px;
height: 80px;
border: 1px dashed #d2d2d2;
text-align: center;
line-height: 80px;
cursor: pointer;
}
.upload-file-title {
color: #666;
}
</style>
<div class="layui-form" lay-filter="layuiadmin-form-user_level" id="layuiadmin-form-user_level" style="padding: 20px 30px 0 0;">
<input type="hidden" value="{$id}" name="id">
<div class="layui-form-item">
<label class="layui-form-label">问题反馈:</label>
<div class="layui-input-block">
<textarea name="problem" placeholder="请输入客户投诉反馈的内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">处理想法:</label>
<div class="layui-input-block">
<textarea name="adjust" placeholder="请输入客户的处理想法" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item" style="margin-bottom: 0px">
<label class="layui-form-label"><span class="form-label-asterisk">*</span>商品图片:</label>
<div style="height:80px;line-height:80px">
<div class="master-image"></div>
<div class="goods-img-add goods-image" lay-verify="image" lay-verType="tips" switch-tab="0" verify-msg="请选择图片"></div>
</div>
<br>
</div>
<div class="layui-form-item" style="margin-bottom: 0px">
<label class="layui-form-label">投诉视频:</label>
<div class="upload-file-div video-style" id="video">
<a href="#" class="upload-file-title">+添加视频</a>
</div>
<input type="hidden" name="video" value="">
</div>
</div>
<div class="layui-form-item layui-hide">
<input type="button" lay-submit lay-filter="add-user_level-submit" id="add-user_level-submit" value="确认">
</div>
<script type="text/html" id="template-goods-image">
<li class="goods-li">
<input name="goods_image[]" type="hidden" value="{image-src}">
<img class="goods-img goods_image" src="{image-src}">
<a class="goods-img-del-x" style="display: none;">x</a>
</li>
</script>
<link rel="stylesheet" href="/static/plug/formSelects/formSelects-v4.css" />
<script src="/static/plug/formSelects/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
<script>
layui.config({
version:"{$front_version}",
base: '/static/plug/layui-admin/dist/layuiadmin/'
}).extend({
index: 'lib/index'
}).use(['index','table','like','laydate','form'], function(){
var $ = layui.$
,form = layui.form
,table = layui.table
,like = layui.like
, laydate = layui.laydate;
form.render();
$(document).off('submit.formEvent');
$('#add-user_level-submit').on('click', function(){
var formData = {
problem: $('[name="problem"]').val(),
adjust: $('[name="adjust"]').val(),
id: $('[name="id"]').val(),
goods_images: $('[name="goods_image[]"]').map(function(){
return $(this).val();
}).get().join(','),
video:$('[name="video"]').val(),
};
if(formData.problem==''){
layer.msg('问题反馈的内容不能为空');
return;
}
if(formData.adjust==''){
layer.msg('处理想法不能为空');
return;
}
like.ajax({
url:'{:url("Control/sale_adds")}',
data:formData,
type:"post",
success:function(res)
{
if(res.code == 1)
{
layui.layer.msg(res.msg, {
offset: '15px'
, icon: 1
, time: 1000
});
layer.close(index); //关闭弹层
table.reload('order-lists'); //数据刷新
}
}
});
});
// 图片上传功能
$(document).on('mouseenter', '.goods-li', function () {
$(this).children().last().show();
});
$(document).on('mouseleave', '.goods-li', function () {
$(this).children().last().hide();
});
$(document).on('click', '.goods-li', function () {
var src = $(this).children('img').attr('src');
like.showImg(src,600);
});
// 主图显示删除按钮
$(document).on('mouseenter','.master-image',function () {
$(this).children('.goods-image-del').show();
});
$(document).on('mouseleave', '.master-image', function () {
$(this).children('.goods-image-del').hide();
});
$(document).on('click', '.master-image', function () {
var src = $(this).children('img').attr('src');
like.showImg(src,600);
});
$(document).on('click', '.goods-img-del-x', function () {
if($(this).hasClass('goods-image-del')){
$(this).parent().next().show();
$(this).parent().children().remove();
}
$(this).parent().remove();
return false;
});
like.imageUpload('.goods-img-add', function (uris, element) {
var count = element.prev().children().length;
count = !count ? 0:count;
if (count+uris.length > 8) {
layer.msg('最多只能选中8张图片');
return;
}
uris = uris.reverse();
for(var i in uris){
var uri = uris[i];
var template_goods_image = $('#template-goods-image').html();
element.prev().append(template_goods_image.replace('{image-src}', like.getUrlFileName(uri, '{$storageUrl}')).replace('{image-src}', uri));
}
}, true);
// 视频上传功能
$('#video').click(function(){
layer.open({
type: 2,
title: '上传视频',
content: '{:url("file_new/lists")}?type=video',
area: ['90%', '90%']
});
});
window.videoCallback = function(uris) {
if(uris.length > 0) {
$('input[name="video"]').val(like.getUrlFileName(uris[0], '{$storageUrl}'));
$('#video').html('<video width="80" height="80" controls><source src="'+uris[0]+'"></video>' +
'<a class="goods-img-del-x" style="top:0;right:0;">x</a>');
}
};
// 表单验证
form.verify({
image: function(value, item) {
// 改为检查实际存在的图片字段
var images = $('input[name="goods_image[]"]').length;
if(images === 0) {
return $(item).attr('verify-msg');
}
}
});
});
</script>