394 lines
12 KiB
HTML
394 lines
12 KiB
HTML
{extend name="common/base"/}
|
||
{block name="style"}
|
||
<link rel="stylesheet" href="/static/assets/libs/layui/css/layui.css" />
|
||
<style type="text/css">
|
||
.editormd-code-toolbar select {
|
||
display: inline-block
|
||
}
|
||
|
||
.editormd li {
|
||
list-style: inherit;
|
||
}
|
||
|
||
</style>
|
||
{/block}
|
||
<!-- 主体 -->
|
||
{block name="body"}
|
||
<form class="layui-form p-4">
|
||
<div class="layui-card">
|
||
<table class="layui-table layui-table-form">
|
||
|
||
<div class="layui-card-header"><h3>商品名称</h3></div>
|
||
<div class="layui-card-body layui-row layui-col-space12">
|
||
<div class="layui-col-md12">
|
||
<input type="text" name="store_name" lay-verify="required" lay-reqText="请输入商品名称"
|
||
autocomplete="off" placeholder="请输入商品名称" class="layui-input" value="{$detail.store_name}" readonly style="background-color:#f7f7f7">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-card-header"><h3>商品封面图</h3></div>
|
||
<div class="layui-card-body layui-row layui-col-space12">
|
||
<div class="layui-col-md12">
|
||
<div class="layui-upload">
|
||
<!-- <button type="button" class="layui-btn layui-btn-sm" id="upload_btn_thumb">-->
|
||
<!-- 上传缩略图(尺寸:428x270)-->
|
||
<!-- </button>-->
|
||
<div class="layui-upload-list" id="upload_box_thumb"
|
||
style="overflow: hidden;">
|
||
<img src="{$detail.image}"
|
||
onerror="javascript:this.src='{__GOUGU__}/gougu/images/nonepic600x360.jpg';this.onerror=null;"
|
||
width="100" style="max-width: 100%; height:66px;"/>
|
||
<input type="hidden" name="image" value="{$detail.image}">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-card-header"><h3>购买数量</h3></div>
|
||
<div class="layui-card-body layui-row layui-col-space12">
|
||
<div class="layui-col-md12">
|
||
<input type="text" name="number" lay-verify="required|integer" lay-reqText="请输入购买数量"
|
||
autocomplete="off" placeholder="请输入购买数量" class="layui-input" value="" id="sorts">
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- <tr>-->
|
||
<!-- <td class="layui-td-gray">商品名称</td>-->
|
||
<!-- <td colspan="7"><input type="text" name="store_name" lay-verify="required" lay-reqText="请输入商品名称"-->
|
||
<!-- autocomplete="off" placeholder="请输入商品名称" class="layui-input" value="{$detail.store_name}" readonly></td>-->
|
||
<!-- </tr>-->
|
||
|
||
<!-- <tr>-->
|
||
<!-- <td class="layui-td-gray" style="vertical-align:top;">商品封面图</td>-->
|
||
<!-- <td>-->
|
||
<!-- <div class="layui-upload">-->
|
||
<!-- <!– <button type="button" class="layui-btn layui-btn-sm" id="upload_btn_thumb">–>-->
|
||
<!-- <!– 上传缩略图(尺寸:428x270)–>-->
|
||
<!-- <!– </button>–>-->
|
||
<!-- <div class="layui-upload-list" id="upload_box_thumb"-->
|
||
<!-- style="overflow: hidden;">-->
|
||
<!-- <img src="{$detail.image}"-->
|
||
<!-- onerror="javascript:this.src='{__GOUGU__}/gougu/images/nonepic600x360.jpg';this.onerror=null;"-->
|
||
<!-- width="100" style="max-width: 100%; height:66px;"/>-->
|
||
<!-- <input type="hidden" name="image" value="{$detail.image}">-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </td>-->
|
||
<!-- </tr>-->
|
||
|
||
<!-- <tr>-->
|
||
<!-- <td class="layui-td-gray">购买数量<font>*</font></td>-->
|
||
<!-- <td colspan="7"><input type="text" name="number" lay-verify="required|integer" lay-reqText="请输入购买数量"-->
|
||
<!-- autocomplete="off" placeholder="请输入购买数量" class="layui-input" value=""></td>-->
|
||
<!-- </tr>-->
|
||
|
||
</table>
|
||
|
||
|
||
<div class="pt-3" style="right: 0;position: absolute;padding-right: 30px;z-index: 999">
|
||
<input type="hidden" name="product_id" value="{$detail.product_id}"/>
|
||
<button type="reset" class="layui-btn layui-btn-primary preservation" >重置</button>
|
||
<button class="layui-btn layui-btn-normal preservation" lay-submit="" lay-filter="webform" >立即提交</button>
|
||
</div>
|
||
|
||
<div class="layui-card-header" style="margin-top:25px;"></div>
|
||
<div class="layui-card-body layui-row layui-col-space12 " style="margin-top:10px;">
|
||
<div class="layui-col-md12">
|
||
<img id="codes" src="" alt="" style="width: 200px;margin:0 auto;position: relative;
|
||
left: 39%;">
|
||
</div>
|
||
<div id="wenzi" style="width: 200px;margin:0 auto;color: #05c2fb;font-size: 20px;"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</form>
|
||
|
||
{/block}
|
||
<!-- /主体 -->
|
||
|
||
<!-- 脚本 -->
|
||
{block name="script"}
|
||
<script src="/static/assets/js/xm-select.js"></script>
|
||
<script src="/static/assets/libs/layui/layui.js"></script>
|
||
<script>
|
||
var moduleInit = ['tool', 'tagpicker', 'tinymce'];
|
||
var group_access = "{:session('gougu_admin')['group_access']}";
|
||
var multiple_images = "{$detail['slider_image']}".split(',');
|
||
//单击图片删除图片 【注册全局函数】
|
||
function delMultipleImgs(this_img){
|
||
//获取下标
|
||
var subscript=$("#upload_box_thumb2 img").index(this_img);
|
||
//删除图片
|
||
this_img.remove();
|
||
//删除数组
|
||
multiple_images.splice(subscript, 1);
|
||
//重新排序
|
||
multiple_images.sort();
|
||
$('#upload_box_thumb2 input').attr('value', multiple_images);
|
||
//返回
|
||
return ;
|
||
}
|
||
function gouguInit() {
|
||
|
||
layui.config({
|
||
base: "/static/assets/libs/layui_exts/",
|
||
})
|
||
.extend({
|
||
numberInput: "numberInput/js/index",
|
||
});
|
||
layui.use(["numberInput", "layer"], function () {
|
||
var numberInput = layui.numberInput;
|
||
var layer = layui.layer;
|
||
|
||
numberInput.render("#sorts", {
|
||
// 2.0.3.20220623 新增，默认 input
|
||
handleEvent: "blur",
|
||
// 最小值
|
||
min: 1,
|
||
// 最大值
|
||
max: 10000,
|
||
// 步数
|
||
step: 1,
|
||
// 所有的事件都需要写到 event 下面
|
||
// event: {
|
||
// beforeCreated() {
|
||
// console.log("生命周期: beforeCreated", "插件开始工作啦!");
|
||
// },
|
||
// created($tree) {
|
||
// console.log("生命周期: created", "插件已经创建好DOM了! 但是还没塞到页面上, 可以理解成现在是虚拟的DOM", $tree);
|
||
// },
|
||
// mounted($tree) {
|
||
// console.log("生命周期: mounted", "创建的DOM已经替换掉原始的DOM了, 撸起袖子就是干", $tree);
|
||
// },
|
||
// change(event, $input, value, $tree) {
|
||
// console.log("事件: change", "数据改变", {
|
||
// event,
|
||
// $input,
|
||
// value,
|
||
// $tree,
|
||
// });
|
||
// },
|
||
// input(event, $input, value, $tree) {
|
||
// console.log("事件: input", "数据输入", {
|
||
// event,
|
||
// $input,
|
||
// value,
|
||
// $tree,
|
||
// });
|
||
// },
|
||
// blur(event, $input, value, $tree) {
|
||
// console.log("事件: blur", "失去焦点", {
|
||
// event,
|
||
// $input,
|
||
// value,
|
||
// $tree,
|
||
// });
|
||
// },
|
||
// toMin(event, $subtract, value, $tree) {
|
||
// console.log("事件: toMin", "到达最小值", {
|
||
// event,
|
||
// $subtract,
|
||
// value,
|
||
// $tree,
|
||
// });
|
||
// },
|
||
// toMax(event, $add, value, $tree) {
|
||
// console.log("事件: toMax", "到达最大值", {
|
||
// event,
|
||
// $add,
|
||
// value,
|
||
// $tree,
|
||
// });
|
||
// },
|
||
// focus(event, $input, value, $tree) {
|
||
// console.log("事件: focus", "获得焦点", {
|
||
// event,
|
||
// $input,
|
||
// value,
|
||
// $tree,
|
||
// });
|
||
// },
|
||
// select(event, $input, value, $tree) {
|
||
// console.log("事件: select", "当全选的时候", {
|
||
// event,
|
||
// $input,
|
||
// value,
|
||
// $tree,
|
||
// });
|
||
// },
|
||
// keypress(event, $input, value, $tree) {
|
||
// console.log("事件: keypress", "当按下某个键的时候", {
|
||
// event,
|
||
// $input,
|
||
// value,
|
||
// $tree,
|
||
// });
|
||
// },
|
||
// mousewheel(event, $input, value, $tree) {
|
||
// console.log("事件: mousewheel", "当鼠标滚轮滚动的时候", {
|
||
// event,
|
||
// $input,
|
||
// value,
|
||
// $tree,
|
||
// });
|
||
// },
|
||
// },
|
||
});
|
||
|
||
});
|
||
var form = layui.form, tool = layui.tool, tagpicker = layui.tagpicker,numberInput =layui.numberInput;
|
||
form.verify({
|
||
integer: [
|
||
/^[1-9]\d*$/
|
||
, '只能输入正整数'
|
||
]
|
||
});
|
||
|
||
|
||
|
||
//上传缩略图
|
||
var upload_thumb = layui.upload.render({
|
||
elem: '#upload_btn_thumb',
|
||
url: '/admin/api/upload',
|
||
done: function (res) {
|
||
//如果上传失败
|
||
if (res.code == 1) {
|
||
layer.msg('上传失败');
|
||
return false;
|
||
}
|
||
//上传成功
|
||
$('#upload_box_thumb input').attr('value', res.data.filepath);
|
||
$('#upload_box_thumb img').attr('src', res.data.filepath);
|
||
}
|
||
});
|
||
//上传商品轮播图
|
||
var upload_thumb = layui.upload.render({
|
||
elem: '#upload_btn_thumb2',
|
||
url: '/admin/api/upload',
|
||
multiple: true,
|
||
before: function(obj){
|
||
//预读本地文件示例，不支持ie8
|
||
obj.preview(function(index, file, result){
|
||
$('#upload_box_thumb2').append(`
|
||
<img src="${result}"
|
||
onerror="javascript:this.src='{__GOUGU__}/gougu/images/nonepic600x360.jpg';this.onerror=null;"
|
||
width="100" style="max-width: 100%; height:66px;" alt="${file.name}" onclick="delMultipleImgs(this)" title="点击删除"/>
|
||
`)
|
||
});
|
||
},
|
||
done: function (res) {
|
||
//如果上传失败
|
||
if (res.code == 1) {
|
||
return layer.msg('上传失败');
|
||
}
|
||
//上传成功
|
||
//追加图片成功追加文件名至图片容器
|
||
multiple_images.push(res.data.filepath);
|
||
$('#upload_box_thumb2 input').attr('value', multiple_images);
|
||
// $('#upload_box_thumb2 img').attr('src', res.data.filepath);
|
||
}
|
||
});
|
||
|
||
var editor = layui.tinymce;
|
||
var edit = editor.render({
|
||
selector: "#container_content",
|
||
height: 500
|
||
});
|
||
//监听提交
|
||
form.on('submit(webform)', function (data) {
|
||
if (data.field.number == '0') {
|
||
layer.msg('请先选择购买数量');
|
||
return false;
|
||
}
|
||
// 单击之后提交按钮不可选,防止重复提交
|
||
var DISABLED = 'layui-btn-disabled';
|
||
// 增加样式
|
||
$('.preservation').addClass(DISABLED);
|
||
// 增加属性
|
||
$('.preservation').attr('disabled', 'disabled');
|
||
let callback = function (e) {
|
||
if (e.code == 200) {
|
||
// 成功的时候
|
||
/** 把生成的二维码放到页面上 */
|
||
var url = e.data.html;
|
||
/** 弹出二维码 **/
|
||
// layer.open({
|
||
// //type:1 表示页面层
|
||
// type: 1,
|
||
// title: '扫码支付',
|
||
// //是否点击遮罩关闭
|
||
// shadeClose: false,
|
||
// //样式类名，可以自定义弹窗样式
|
||
// skin:'demo_share',
|
||
// // 去掉关闭按钮
|
||
// closeBtn :'',
|
||
// //弹层外区域
|
||
// shade: 0.3,
|
||
// maxmin: false, //开启最大化最小化按钮
|
||
// //宽高
|
||
// area: ['200px','220px'],
|
||
// //内容
|
||
// content: "<img src='"+url+"' alt='' style='margin-left: 20px;'>",
|
||
// });
|
||
|
||
$('#codes').attr('src',url);
|
||
$('#wenzi').html('请扫描上面二维码付款');
|
||
|
||
/** 设置定时器, 即一弹出二维码就开始不断请求查看支付状态, 直到收到支付成功的返回, 再终止定时器 **/
|
||
var timer = setInterval(function () {
|
||
/** 在这里请求微信支付状态的接口 **/
|
||
//ajax。必填参数，'options':请求参数，对象，'callback':成功回调函数
|
||
|
||
let options = {
|
||
url: '/admin/store_product/paid',
|
||
type: 'get',
|
||
data: {
|
||
out_trade_no: e.data.order_sn,
|
||
}
|
||
};
|
||
|
||
let callback = function(res) {
|
||
if (res.code == 200) {
|
||
|
||
// layer.open({
|
||
// type: 1,
|
||
// title: '付款成功提示',
|
||
// shadeClose: true,
|
||
// shade: false,
|
||
// maxmin: false, //开启最大化最小化按钮
|
||
// area: ['1000px', '200px'],
|
||
// content: '<div style="width: 300px;margin:0 auto;font-size: 16px;margin-top:50px;">付款成功，请前往购买列表查看</div>'
|
||
// });
|
||
// parent.layer.closeAll();//关闭弹出层
|
||
layer.msg('支付成功',{time:2000,icon:6});
|
||
parent.layer.closeAll();
|
||
/** 如果支付成功, 就取消定时器, 并重新加载页面 */
|
||
window.clearInterval(timer);
|
||
|
||
// 关闭所有层
|
||
// tool.sideClose(2000);
|
||
}
|
||
}
|
||
tool.ajax(options, callback);
|
||
|
||
}, 3000);
|
||
}else{
|
||
layer.msg(e.msg,{icon:5});
|
||
// 失败的时候
|
||
// 单击之后提交按钮不可选,防止重复提交
|
||
var DISABLED = 'layui-btn-disabled';
|
||
$('.preservation').removeClass(DISABLED);
|
||
$('.preservation').removeAttr('disabled');
|
||
|
||
}
|
||
}
|
||
tool.post("/admin/store_product/place_order", data.field, callback);
|
||
return false;
|
||
});
|
||
|
||
}
|
||
</script>
|
||
{/block}
|
||
<!-- /脚本 --> |