<!DOCTYPE html>
<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">
<style>
.dian {
width: 230px;
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.alert {
display: none;
}
.pagination {
margin: 0 20px 10px;
float: right;
}
</style>
</head>
<body>
<div style="display: flex;">
<div style="width: 300px;margin:10px;">
<select class="form-control" onchange="handlePrice(this)">
<option value="0">价格升序</option>
<option value="1">价格降序</option>
</select>
</div>
<div style="width: 300px;margin:10px;">
<select class="form-control" onchange="filterPrice(this)">
<option value="0">全部</option>
<option value="1">价格大于500</option>
<option value="2">价格小于500</option>
</select>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th style="width: 230px;">商品名称</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>
<div class="form-group">
<label for="goods_state" class="control-label">商品状态:</label>
<input type="text" class="form-control" id="goods_state">
</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="updata()">确定</button>
</div>
</div>
</div>
</div>
<script src="./jquery-1.12.4.js"></script>
<script src="./bootstrap.min.js"></script>
<script>
function filterPrice(that) {
filterData($(that).val())
}
function handlePrice(that) {
console.log($(that).val());
init($(that).val())
}
init(0);
let goodsList = []
function init(flag) {
let params = { pagenum: 1, pagesize: 10 }
$.ajax({
url: "http://timemeetyou.com:8889/api/private/v1/goods",
headers: {
/* 最新的token token过一段时间会失效 失效需要重新获取 */
Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE2NDQ4MDQyNjIsImV4cCI6MTY0NDg5MDY2Mn0.JyAB5ngwtiJSx-Rb4_VrQ3WnfkmAKGXrTduLqsOGAlU'
},
data: params,
success: function (res) {
// let str = '';
let { data: { goods } } = res;
showTable(flag, goods);
goodsList = goods;
}
})
}
function showTable(flag, goods) {
if (flag == 0) {
goods.sort(function (item1, item2) {
return item1.goods_price - item2.goods_price
})
}
if (flag == 1) {
goods.sort(function (item1, item2) {
return item2.goods_price - item1.goods_price
})
}
showCase(goods)
}
function filterData(flag2) {
if (flag2 == 0) {
showCase(goodsList)
}
if (flag2 == 1) {
let goods1 = goodsList.filter(function (item) {
return item.goods_price > 500
})
showCase(goods1)
}
if (flag2 == 2) {
let goods2 = goodsList.filter(function (item) {
return item.goods_price < 500
})
showCase(goods2)
}
}
function showCase(arr) {
let str = '';
arr.forEach(function (r, i) {
str += `
<tr>
<th scope="row">${i + 1}</th>
<td class='dian'>${r.goods_name}</td>
<td>${r.goods_price}</td>
<td>${r.goods_number}</td>
<td>${r.goods_weight}</td>
<td>${r.goods_state}</td>
<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" onclick="sendId(${r.goods_id})" id='changecolor'>查看</button></td>
</tr>
`
})
$('tbody').html(str)
}
/* function sendId(goods_name,goods_price,goods_number,goods_weight,goods_state,goods_id) {
console.log(goods_name,goods_price,goods_number,goods_weight,goods_state,goods_id);
$('#goods_name').val( goods_name )
$('#goods_price').val( goods_price )
$('#goods_number').val( goods_number )
$('#goods_weight').val( goods_weight )
$('#goods_state').val( goods_state )
} */
function sendId(id) {
// console.log(id);
let str = goodsList.find(function (r) {
console.log(r.goods_id,r.goods_name);
return r.goods_id==id
})
// console.log(str);
$('#goods_name').val( str.goods_name )
$('#goods_price').val( str.goods_price )
$('#goods_number').val( str.goods_number )
$('#goods_weight').val( str.goods_weight )
$('#goods_state').val( str.goods_state )
}
</script>
</body>
</html>
