<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
|
<title>商品选择</title>
|
<link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
|
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/layui/layer_mobile/layer.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/handlebars/handlebars-v4.5.3.js"></script>
|
<style>
|
html {
|
height: 100%;
|
}
|
body {
|
height: 100%;
|
background-color: #f1f1f1;
|
padding: 5px;
|
position: relative;
|
}
|
|
/*header {*/
|
/* position: absolute;*/
|
/*}*/
|
main {
|
padding-bottom: 5px;
|
}
|
|
/* 头部搜索栏 */
|
.search-box {
|
height: 36px;
|
padding: 3px 15px;
|
}
|
.search-box input {
|
border: none;
|
border-radius: 20px;
|
height: 30px;
|
box-shadow: 0 0 3px rgba(0,0,0,.3);
|
width: 73%;
|
padding-left: 15px;
|
vertical-align: middle;
|
}
|
.search-box button {
|
border: none;
|
background-color: white;
|
box-shadow: 0 0 3px rgba(0,0,0,.3);
|
height: 33px;
|
margin-left: 5px;
|
border-radius: 20px;
|
width: 15%;
|
vertical-align: middle;
|
}
|
.search-box button:hover {
|
background-color: #dedede;
|
}
|
|
/* 主体 */
|
|
/* 归类标签 */
|
.box-tag-item {
|
height: 100px;
|
border-bottom: 1px solid #dedede;
|
background-color: #fff;
|
border-radius: 5px;
|
box-shadow: 0 0 3px rgba(0,0,0,.3);
|
margin-top: 2px;
|
}
|
.box-tag-item:hover {
|
background-color: #eaeaea;
|
}
|
.box-tag-item-label {
|
padding: 5px 10px;
|
border-bottom: 1px solid #f6f6f6;
|
}
|
.box-tag-item-content {
|
font-size: x-large;
|
font-weight: bold;
|
padding: 15px 0 0 20px;
|
}
|
|
/* 商品标签 */
|
.box-mat-item {
|
height: 100px;
|
border-bottom: 1px solid #dedede;
|
background-color: #fff;
|
border-radius: 5px;
|
box-shadow: 0 0 3px rgba(0,0,0,.3);
|
margin-top: 2px;
|
}
|
.box-mat-item:hover {
|
background-color: #eaeaea;
|
}
|
.box-mat-item-content {
|
padding: 15px 0 0 20px;
|
}
|
.box-mat-item-content-matnr {
|
font-size: small;
|
font-weight: bold;
|
margin-bottom: 5px;
|
}
|
.box-mat-item-content-maktx {
|
font-size: large;
|
|
}
|
</style>
|
</head>
|
<body>
|
|
<header>
|
<div class="search-box">
|
<input id="search-msg" type="text" placeholder="请输入商品编码/名称">
|
<button onclick="search()">
|
<i class="layui-icon"></i>
|
</button>
|
</div>
|
</header>
|
|
<main id="main-contain">
|
</main>
|
|
</body>
|
<script>
|
$(function () {
|
showTag();
|
})
|
|
// 搜索
|
function search(){
|
var condition = $('#search-msg').val();
|
$.ajax({
|
url: baseUrl + "/mat/search/pda/auth",
|
headers: {'token': localStorage.getItem('token')},
|
data: {
|
condition: condition
|
},
|
method: 'POST',
|
success: function (res) {
|
if (res.code === 200) {
|
if (res.data != null && res.data.length > 0) {
|
var tplDom = $("#matTpl");
|
var tpl = tplDom.html();
|
var template = Handlebars.compile(tpl);
|
var html = template(res);
|
$('#main-contain').html(html);
|
} else {
|
$('#main-contain').html('<div style="text-align: center; margin-top: 15px"><span style="font-size: large">暂无商品</span></div>');
|
}
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + "/pda";
|
} else {
|
parent.layer.msg(res.msg, {icon: 2});
|
}
|
}
|
})
|
}
|
|
// 归类点击
|
$(document).on('click','.box-tag-item', function () {
|
var tagId = $(this).children('input').get(0).value;
|
showTag(tagId);
|
})
|
|
// 商品点击
|
$(document).on('click','.box-mat-item', function () {
|
parent.findBySelect($(this).children('input').get(0))
|
})
|
|
// 展示归类
|
function showTag(parentId){
|
$.ajax({
|
url: baseUrl + "/tag/list/pda/auth",
|
headers: {'token': localStorage.getItem('token')},
|
data: {
|
parentId: parentId
|
},
|
method: 'POST',
|
success: function (res) {
|
if (res.code === 200) {
|
if (res.data != null && res.data.length > 0) {
|
var tplDom = $("#tagTpl");
|
var tpl = tplDom.html();
|
var template = Handlebars.compile(tpl);
|
var html = template(res);
|
$('#main-contain').html(html);
|
toTop();
|
} else {
|
var tagId = parentId;
|
showMat(tagId);
|
}
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + "/pda";
|
} else {
|
parent.layer.msg(res.msg, {icon: 2});
|
}
|
}
|
})
|
}
|
|
// 展示商品
|
function showMat(tagId) {
|
if (isEmpty(tagId)) {
|
return;
|
}
|
$.ajax({
|
url: baseUrl + "/mat/list/pda/auth",
|
headers: {'token': localStorage.getItem('token')},
|
data: {
|
tagId: tagId
|
},
|
method: 'POST',
|
success: function (res) {
|
if (res.code === 200) {
|
if (res.data != null && res.data.length > 0) {
|
var tplDom = $("#matTpl");
|
var tpl = tplDom.html();
|
var template = Handlebars.compile(tpl);
|
var html = template(res);
|
$('#main-contain').html(html);
|
toTop();
|
} else {
|
$('#main-contain').html('<div style="text-align: center; margin-top: 15px"><span style="font-size: large">暂无商品</span></div>');
|
}
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + "/pda";
|
} else {
|
parent.layer.msg(res.msg, {icon: 2});
|
}
|
}
|
})
|
}
|
|
function toTop() {
|
window.scrollTo({
|
left: 0,
|
top: 0,
|
behavior: 'smooth'
|
})
|
}
|
|
|
</script>
|
<script type="text/template" id="tagTpl">
|
{{#each data}}
|
<div class="box-tag-item">
|
<input name="tagId" type="hidden" value="{{this.id}}">
|
<div class="box-tag-item-label">
|
<span class="layui-badge layui-badge-green pull-right">归类</span>
|
</div>
|
<div class="box-tag-item-content">{{this.name}}</div>
|
</div>
|
{{/each}}
|
</script>
|
<script type="text/template" id="matTpl">
|
{{#each data}}
|
<div class="box-mat-item">
|
<input name="matnr" type="hidden" value="{{this.matnr}}">
|
<div class="box-tag-item-label">
|
<span class="layui-badge layui-badge-blue pull-right">商品</span>
|
</div>
|
<div class="box-mat-item-content">
|
<div class="box-mat-item-content-matnr">{{this.matnr}}</div>
|
<div class="box-mat-item-content-maktx">{{this.maktx}}</div>
|
</div>
|
</div>
|
{{/each}}
|
</script>
|
</html>
|
