<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap.min.css">
</head>
<body>
<form class="form-inline" style="margin:10px 0 10px 10px;">
<div class="form-group">
<label for="keywords">搜索关键字</label>
<input type="text" class="form-control" id="keywords" placeholder="输入关键字">
</div>
<button type="button" class="btn btn-info" id="search" onclick="searchInfo()">搜索</button>
</form>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品重量</th>
<th>商品状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">修改商品</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="goods_name" class="control-label">商品名称:</label>
<input type="text" class="form-control" id="goods_name">
</div>
<div class="form-group">
<label for="goods_price" class="control-label">商品价格:</label>
<input type="text" class="form-control" id="goods_price">
</div>
<div class="form-group">
<label for="goods_number" class="control-label">商品数量:</label>
<input type="text" class="form-control" id="goods_number">
</div>
<div class="form-group">
<label for="goods_weight" class="control-label">商品重量:</label>
<input type="text" class="form-control" id="goods_weight">
</div>
</form>
</div>
<div class="modal-footer">
<!-- 给button加上data-dismiss="modal"这个属性可以实现关闭弹框 -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="updategoods()">确定</button>
</div>
</div>
</div>
</div>
<!-- 应为boostrap.min.js里面的方法需要jquery支持，所以必须把jquery放前面 -->
<script src="./jquery-1.12.4.js"></script>
<script src="./bootstrap.min.js"></script>
<script>
init();
function init(val) {
let params = {
pagenum: 1,
pagesize: 10,
query: val
}
$.ajax({
url: "http://timemeetyou.com:8889/api/private/v1/goods",
headers: {
Authorization: localStorage.token
},
data: params,
success: function (res) {
let str = '';
let goods = res.data.goods;
for (var i in goods) {
str += `
<tr>
<th scope="row">${parseInt(i) + 1}</th>
<td>${goods[i].goods_name}</td>
<td>${goods[i].goods_price}</td>
<td>${goods[i].goods_number}</td>
<td>${goods[i].goods_weight}</td>
<td>${goods[i].goods_state}</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" onclick="getid(${goods[i].goods_id})">修改</button>
<button type="button" class="btn btn-danger" onclick="del(${goods[i].goods_id})">删除</button></td>
</tr>
`
}
$('tbody').html(str)
}
})
}
/* <td><button type="button" class="btn btn-info" onclick="update(${goods[i].goods_id},'${goods[i].goods_name}',${goods[i].goods_price},${goods[i].goods_number},${goods[i].goods_weight})">删除</button></td> */
function update(id, goods_name, goods_price, goods_number, goods_weight) {
console.log(id, goods_name, goods_price, goods_number, goods_weight)
}
function searchInfo() {
init($('#keywords').val());
}
function showDialog() {
/* 模态框打开的两种方式 第一种使用下面的js */
/* 第二种方式 button上面加data-target="#exampleModal"
#exampleModal需要和模态框上的id对应 */
$('#exampleModal').modal()
}
function del(id) {
$.ajax({
url: "http://timemeetyou.com:8889/api/private/v1/goods/" + id,
headers: {
Authorization: localStorage.token
},
method: 'delete',
success: function (res) {
alert(res.meta.msg)
/* 删除当前数据之后再刷新表格数据 */
init()
}
})
}
function getid(id){
shopid = id
}
function updategoods(){
$.ajax({
url:"http://timemeetyou.com:8889/api/private/v1/goods"+shopid,
method:'put',
headers:{
Authorization:localStorage.token
},
data:{
goods_name:$('#goods_name').val(),
goods_cat:'1,2,3',
goods_price:$('#goods_price').val(),
goods_number:$('#goods_number').val(),
goods_weight:$('#goods_weight').val(),
},
success:function(res){
$('#goods_name').val('')
$('#goods_price').val('')
$('#goods_number').val('')
$('#goods_weight').val('')
$('#myModal').modal('hide')
alert(res.meta.msg)
init();
}
})
}
</script>
</body>
</html>
