apicloud开发的商品列表 带搜索下拉上拉刷新
apicloud开发的商品列表 带搜索下拉上拉刷新，带扫码自动输入
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
<link rel="stylesheet" href="../css/new_file.css" />
</head>
<body>
<!--<input type="search" placeholder="请输入搜索内容" id="search-input">-->
<section>
<div onclick="cat();" class="aui-btn aui-btn-block">
<img src="../image/nav_left.png" />
<p>类目</p>
</div>
<div class="aui-select">
<select name="keyword_type" id="keyword_type" autocomplete="off">
<option value="1">品名</option>
<option value="2">条码</option>
<option value="3">编号</option>
</select>
<input type="text" placeholder="请输入关键词" id="search_word">
<div onclick="search();" class="aui-btn aui-btn-block aui-search">搜索</div>
<div onclick="scanner();" style="display: none" class="sec2"><img src="../image/nav_left.png" /></div>
</div>
</section>
<ul class="aui-list aui-media-list" id="list">
<!--<div class="aui-media-list-item-inner">
<div onclick="proDetail(' + data[i].id + ');" class="aui-list-item-media">
<img src="../image/l2.png">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div onclick="proDetail(' + data[i].id + ');" class="aui-list-item-title">商品标题</div>
</div>
<div onclick="proDetail(' + data[i].id + ');" class="aui-list-item-text aui-code">条码：123</div>
<div onclick="proDetail(' + data[i].id + ');" class="aui-list-item-text">编号：123</div>
<div class="aui-list-item-right">¥价格</div>
</div>
</div>
<div class="aui-media-list-item-inner">
<div onclick="proDetail(' + data[i].id + ');" class="aui-list-item-media">
<img src="../image/cs.png">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div onclick="proDetail(' + data[i].id + ');" class="aui-list-item-title">商品标题</div>
</div>
<div onclick="proDetail(' + data[i].id + ');" class="aui-list-item-text aui-code">条码：123</div>
<div onclick="proDetail(' + data[i].id + ');" class="aui-list-item-text">编号：123</div>
<div class="aui-list-item-right">¥价格</div>
<div onclick="" class="aui-cart">
<img src="../image/cart.png">
</div>
</div>
</div>-->
</ul>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/jquery-1.7.1.min.js" ></script>
<script>
var FNScanner;
var pageSize = 10;
// 页容量
var totalData = 0;
//定义一个变量存储第一次加载返回来的总记录数
var totalPages = 0;
// 定义一个变量存储第一次加载返回来的总页数
var _page = 1;
$api.setStorage("currentPage", 1);
// 默认设置为第一页
// 加载数据
// @currentPage:当前页码
// @isReload：是否为刷新操作
function loadData(currentPage) {
// currentPage = isReload ? 1 : currentPage;
var table = document.body.querySelector('.aui-list');
//var cells = document.body.querySelectorAll('.aui-list-item');
api.ajax({
url : 'http://huodong.demo.com/index.php/api/Member/getproList',
method : 'post',
data : {
values : {
mobile : $api.getStorage('mobile'),
token : $api.getStorage('token'),
page : _page,
cat_num : $api.getStorage('cat_num'),
barcode : $api.getStorage('barcode'),
serial : $api.getStorage('serial'),
keyword : $api.getStorage('keyword')
}
}
}, function(ret, err) {
if (ret) {
var data = ret.data;
for ( i = 0; i <= data.length - 1; i++) {
var li = document.createElement('li');
li.className = 'aui-list-item aui-list-item-arrow';
// li.innerHTML = '<a data-id="' + i + '" href="javascript:;" class="mui-navigate-right1"><img class="mui-media-object mui-pull-left" src="http://huodong.demo.com/pic/' + data.data[i].serial_number + '.jpg"><div class="mui-media-body">' + data.data[i].pro_name + '<p class="mui-ellipsis">￥' + data.data[i].yiwu_price + '</p></div></a><button class="mui-btn mui-btn-danger mui-btn-outlined" onclick="cart(' + data.data[i].id + ');">购物车</button>';
// li.innerHTML = '商品名稱:' + data[i].pro_name + '<br>';
// var str = '<div onclick="proDetail(' + data[i].id + ');">' + data[i].pro_name + '</div>';
// var str = ' <div class="aui-media-list-item-inner"><div class="aui-list-item-media"><img src="http://huodong.demo.com/pic/' + data.data[i].serial_number + '.jpg"></div><div class="aui-list-item-inner"><div class="aui-list-item-text"><div class="aui-list-item-title">带有媒体的列表二</div><div class="aui-list-item-right">08:00</div></div><div class="aui-list-item-text">在下方我们加入了aui-info信息条</div></div></div>';
//
// var str = str + '商品名稱:' + data[i].pro_name + '<br>';
// var str = str + '商品id:' + data[i].id + '<br>';
// var str = str + '<div onclick="cart(' + data[i].id + ');">购物车</div>';
var str = ' <div class="aui-media-list-item-inner">';
var str = str + '<div onclick="proDetail(' + data[i].id + ');" class="aui-list-item-media">';
var str = str + '<img src="http://huodong.demo.com/pic/' + data[i].serial_number + '.jpg">';
var str = str + '</div>';
var str = str + '<div class="aui-list-item-inner">';
var str = str + '<div class="aui-list-item-text">';
var str = str + '<div onclick="proDetail(' + data[i].id + ');" class="aui-list-item-title">' + data[i].pro_name + '</div>';
var str = str + '</div>';
var str = str + '<div onclick="proDetail(' + data[i].id + ');" class="aui-list-item-text aui-code">';
var str = str + '条码：123';
var str = str + '</div>';
var str = str + '<div onclick="proDetail(' + data[i].id + ');" class="aui-list-item-text">';
var str = str + '编号：123';
var str = str + '</div>';
var str = str + '<div class="aui-list-item-right">' + data[i].sk_tax_price + '</div>';
var str = str + '<div onclick="cart('+data[i].id+');" class="aui-cart">';
var str = str + '<img src="../image/cart.png">';
var str = str + '</div>';
var str = str + '</div>';
var str = str + '</div>';
li.innerHTML = str;
table.appendChild(li);
}
} else {
alert('网络错误');
api.alert({
msg : ('错误码：' + err.code + '；错误信息：' + err.msg + '；网络状态码：' + err.statusCode)
});
}
});
}
// 结合下拉刷新
apiready = function() {
$api.byId('search_word').value = $api.getStorage('keyword');
FNScanner = api.require('FNScanner');
loadData(1);
// 第一次加载
api.setRefreshHeaderInfo({
visible : true,
loadingImg : 'widget://image/refresh.png',
bgColor : '#ccc',
textColor : '#fff',
textDown : '下拉刷新...',
textUp : '松开刷新...',
showTime : true
}, function(ret, err) {
window.location.reload();
api.refreshHeaderLoadDone();
});
// 默认第一次打开页面就下拉加载数据
//api.refreshHeaderLoading();
// 结合上拉刷新：
api.addEventListener({
name : 'scrolltobottom',
extra : {
threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
}
}, function(ret, err) {
_page = parseInt($api.getStorage("currentPage")) + 1;
$api.setStorage("currentPage", _page);
loadData(_page);
// alert(_page);
// if (_page + 1 <= totalPages) {
// loadData(_page + 1, false);
// $api.setStorage("currentPage", _page + 1);
// // 页码+1
// } else {
// alert("没有更多数据了！");
// }
});
}
function proDetail(proid) {
// alert(proid);
$api.setStorage('proid', proid);
// api.openWin({
// name : 'productdetail',
// url : './productdetail.html',
// // pageParam : {
// // proid : proid
// // }
// });
api.openWin({
name : 'product_detail',
url : './a_headback.html',
pageParam : {
title : '详情页面',
url : 'product_detail'
}
});
}
function cart(proid) {
api.ajax({
url : 'http://huodong.demo.com/index.php/api/Member/addCart',
method : 'post',
data : {
values : {
token : $api.getStorage("token"),
mobile : $api.getStorage("mobile"),
proid : proid,
num : 1,
uuid : api.deviceId,
signature : 'skzxcvbnm123'
}
}
}, function(data, err) {
// alert(data.code);
if (data.code == 200600 || data.code == 200700) {
api.toast({
msg : '添加购物车成功'
});
} else {
api.alert({
msg : ('错误码：' + err.code + '；错误信息：' + err.msg + '；网络状态码：' + err.statusCode)
});
}
});
}
function search() {
$api.setStorage('cat_num', '');
$api.setStorage('keyword_type', $api.byId('keyword_type').value);
$api.setStorage('search_word', $api.byId('search_word').value);
// alert($api.getStorage('search_word'));
// alert($api.getStorage('keyword_type'));
if ($api.getStorage('keyword_type') == 1) {
$api.setStorage('barcode', '');
$api.setStorage('serial', '');
$api.setStorage('keyword', $api.byId('search_word').value);
window.location.reload();
} else if ($api.getStorage('keyword_type') == 2) {
$api.setStorage('barcode', $api.byId('search_word').value);
$api.setStorage('serial', '');
$api.setStorage('keyword', '');
window.location.reload();
} else if ($api.getStorage('keyword_type') == 3) {
$api.setStorage('barcode', '');
$api.setStorage('serial', $api.byId('search_word').value);
$api.setStorage('keyword', '');
window.location.reload();
}
}
function cat() {
api.openFrame({
name : 'product_list_cat_num',
url : './product_list_cat_num.html',
rect : {
x : 0,
y : 0
},
bounces : false,
bgColor : 'rgba(0,0,0,0.3)'
});
}
function winreload() {
window.location.reload();
}
function scanner() {
FNScanner.openScanner({
autorotation : false
}, function(ret, err) {
if (ret.eventType == 'success') {
$api.setStorage('barcode', ret.content);
$api.setStorage('serial', '');
$api.setStorage('keyword', '');
// alert($api.getStorage('barcode'));
// $api.byId('search_word').value = ret.content;
api.toast({
msg : '正在搜索 '+ret.content
});
window.location.reload();
} else {
//alert('111');
}
});
}
$(document).ready(function() {
$("#keyword_type").change(function() {
var val = $(this).find("option:selected").val();
if (val == 1 || val == 3) {
$(".sec2").hide();
} else if (val == 2) {
$(".sec2").show();
}
});
});
</script>
</html>
php接口代码
//获取商品接口
public function getproList()
{
$data['phone'] = Request::instance()->post('mobile');
$data['token'] = Request::instance()->post('token');
$data['down_time'] = Request::instance()->post('down_time');
//筛选条件
$barcode = Request::instance()->post('barcode');
$cat_num = Request::instance()->post('cat_num');
$serial = Request::instance()->post('serial');
$keyword = Request::instance()->post('keyword');
// $barcode = Request::instance()->post('barcode');
// $condition = 'RB';
if ($barcode) {
$map['barcode'] = ['=', $barcode];
} elseif ($serial) {
$map['serial_number'] = ['=', $serial];
} elseif ($keyword) {
$map['pro_name'] = ['like', '%' . $keyword . '%'];
} else {
$map['cat_num'] = ['like', $cat_num . '%'];
}
$page = Request::instance()->post('page') - 1;
$uid1 = Db::table('member')->where('phone', $data['phone'])->value('id');
$uid2 = Db::table('appsecret')->where('appsecret', $data['token'])->value('uid');
if ($uid1 == $uid2) {
$res['code'] = 200600;
$res['message'] = '验证成功';
// $res['page'] = $data['page'];
$res['data'] = Db::table('product')->where($map)->where('status', 2)->limit($page * 10, 10)->order('id desc')->select();
// if(!empty($data['down_time'])){
// $where['member_id']=$uid1;
// $where['time']=['>',date("Y-m-d H:i:s",$data['down_time'])];
// $res['data'] = Db::table('ordder')->where($where)->limit($page*10,10)->order('time desc')->select();
// }else{
// $res['data'] = Db::table('ordder')->where('member_id', $uid1)->limit($page*10,10)->order('time desc')->select();
// }
if (empty($res['data'])) {
$res['page'] = true;
}
}
echo json_encode($res);
}
浙公网安备 33010602011771号