goodssearch.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title></title>
  8. <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  9. <link rel="stylesheet" type="text/css" href="../../css/style.css?v=1.2" />
  10. <style>
  11. .hotel-top{
  12. width:100%;
  13. height: 4.03rem;
  14. background: url('https://qdd.h.c638m.cn/uploads/home/store/goods/1/1_2019012314140410834_1280.jpg') ;
  15. background-repeat:no-repeat;
  16. background-size:100% 100%;
  17. }
  18. .hotel-top-line{
  19. width:100%
  20. }
  21. .hotel-top-line li{
  22. float:left;
  23. }
  24. .hotel-title{
  25. font-size: 0.33rem;
  26. height: 1rem;
  27. line-height: 1rem;
  28. font-weight: 500;
  29. }
  30. .hotel-title span{
  31. float:right;
  32. font-size: 0.2rem;
  33. }
  34. .hotel-goods{
  35. width:100%;
  36. height: 1rem;
  37. border-bottom:1px solid #e8e8e8;
  38. position:relative;
  39. padding-top: 0.85rem;;
  40. }
  41. .hotel-goods li{
  42. width: 33.33%;
  43. float:left;
  44. height: 1rem;
  45. line-height: 1rem;
  46. text-align:center;
  47. }
  48. #store_description{
  49. width: 100%;
  50. overflow: hidden;
  51. display: -webkit-box;
  52. -webkit-line-clamp: 3;
  53. -webkit-box-orient: vertical;
  54. word-break: break-all;
  55. font-size: 0.26rem;
  56. color: #606266;
  57. }
  58. .hotel-goods-active{
  59. color: #d9251c;
  60. }
  61. .goods-tag span{
  62. margin-right: 0.17rem;
  63. /*padding: 0.08rem;*/
  64. }
  65. .goods-price, .goods-tag {
  66. margin-top: 0.1rem;
  67. }
  68. .category-item{
  69. width:100%;
  70. min-height: 0rem;
  71. height:auto;
  72. background:#ffffff;
  73. position:absolute;
  74. top: 2.01rem;
  75. z-index:999;
  76. border-bottom:1px solid #e8e8e8;
  77. padding: 0.1em;
  78. box-sizing:border-box;
  79. }
  80. .category-list{
  81. padding:3px;
  82. width:25%;
  83. float:left;
  84. box-sizing:border-box;
  85. }
  86. .sort-img,.sort-img2{
  87. width:18px;
  88. vertical-align:middle;
  89. }
  90. .category-list-span{
  91. border:1px solid #e8e8e8;
  92. width:90%;
  93. border-radius:3px;
  94. text-align:center;
  95. padding-top:6px;
  96. padding-bottom:6px;
  97. padding-left:3px;
  98. padding-right:3px;
  99. }
  100. .cate-active{
  101. color:#D9251C;
  102. border:1px solid #D9251C;
  103. }
  104. .share-item{
  105. position:fixed;
  106. left:0px;right:0px;
  107. bottom:0px;
  108. height: 3.9rem;
  109. background:#f2f2f2;
  110. border-top:1px solid #E8E8E8;
  111. z-index:9999;
  112. }
  113. .share-item-tips{
  114. height: 0.28rem;
  115. line-height: 0.28rem;
  116. width:100%;
  117. text-align:center;
  118. font-size: 0.28rem;
  119. padding: 0.38rem 0;
  120. }
  121. .share-item-cent{
  122. height: 1.8rem;
  123. width: 100%;
  124. }
  125. .share-item-cent li{
  126. width:33.3%;
  127. text-align:center;
  128. float:left;
  129. font-size: 0.28rem;
  130. }
  131. .share-item-cent img{
  132. width: 0.9rem;
  133. }
  134. .share-item-cancel{
  135. height: 0.98rem;
  136. line-height: 0.98rem;
  137. width:100%;
  138. text-align:center;
  139. background:#ffffff;
  140. font-size: 0.28rem;
  141. }
  142. .business-time{
  143. width:100%;
  144. padding: 0 0.32rem;
  145. box-sizing:border-box;
  146. }
  147. .tag-item{
  148. float: left;
  149. max-width: 0.83rem;
  150. height: 0.33rem;
  151. line-height: 0.33rem;
  152. overflow: hidden;
  153. border: 1px solid #993333;
  154. font-size: 0.18rem;
  155. padding-left: 5px;
  156. padding-right: 5px;
  157. background: #ffffff;
  158. color: #993333;
  159. border-radius: 2px;
  160. text-align: center;
  161. }
  162. .goods-title {
  163. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  164. }
  165. .search-item img {
  166. position: absolute;
  167. left: 0.12rem;
  168. top: 0.12rem;
  169. }
  170. #keyword {
  171. font-size: 0.3rem;
  172. padding-left: 0.2rem;
  173. width: 100%;
  174. }
  175. .border-none{
  176. text-align:center;font-size: 0.28rem;
  177. }
  178. .border-none p{
  179. color:#999999;
  180. }
  181. .border-none-img {
  182. margin-top: 2.5rem;
  183. width: 1.73rem;
  184. height: auto;
  185. }
  186. </style>
  187. <script>
  188. (function(w, d, m) {
  189. function r() {
  190. var t = 100,
  191. o = 750,
  192. e = d.documentElement.clientWidth || w.innerWidth,
  193. n = m.max(m.min(e, 480), 320),
  194. h = 50;
  195. 320 >= n && (h = m.floor(n / o * t * .99)),
  196. n > 320 && 362 >= n && (h = m.floor(n / o * t * 1)),
  197. n > 362 && 375 >= n && (h = m.floor(n / o * t * 1)),
  198. n > 375 && (h = m.floor(n / o * t * .97)),
  199. d.querySelector("html").style.fontSize = h + "px"
  200. };
  201. r();
  202. w.onresize = function() {
  203. r()
  204. }
  205. })(window, document, Math);
  206. </script>
  207. </head>
  208. <body>
  209. <div class="topbar"></div>
  210. <header class="back-header back-header-bottom">
  211. <ul class="flex-box flex-v-ce">
  212. <li class="back-header-title flex-1">
  213. <div class="search-item">
  214. <input id="keyword" type="text" oninput="getData()" placeholder="关键词搜索" />
  215. <img src="../../image/search.png" />
  216. </div>
  217. </li>
  218. <li class="back-btn" style="width:1rem;white-space: nowrap;margin-left: 0.32rem;">取消</li>
  219. </ul>
  220. </header>
  221. <div class="hotel-goods">
  222. <ul>
  223. <li class="gsort hotel-goods-active goods-all" tag="praise">综合</li>
  224. <li class="gsort goods-new" tag="goods_commonid">上新<img class="sort-img" src="../../image/sort.png" /></li>
  225. <li class="gsort goods-sprice" tag="goods_price">价格<img class="sort-img" src="../../image/sort.png" /></li>
  226. <li id="category-btn" class="mask-hidden">分类<img class="sort-img2" src="../../image/sort_down2.png" /></li>
  227. </ul>
  228. <div id="category-item" class="category-item mask-hidden">
  229. </div>
  230. </div>
  231. <section>
  232. <div class="h10"></div>
  233. <div class="goods-list" page="1">
  234. </div>
  235. <section class="border-none">
  236. <img src="../../image/notfound.png" class="border-none-img" />
  237. <p>抱歉,没有搜到相关内容</p>
  238. </section>
  239. </section>
  240. </body>
  241. <div class="h50"></div>
  242. <div class="share-item mask-hidden">
  243. <div class="share-item-tips">分享至</div>
  244. <div class="h10"></div>
  245. <div class="share-item-cent">
  246. <ul>
  247. <li class="share-item-friend"><img src="../../image/share_friend.png" />
  248. <p>微信好友</p>
  249. </li>
  250. <li class="share-item-cale"><img src="../../image/share_cale.png" />
  251. <p>微信朋友圈</p>
  252. </li>
  253. <li class="share-item-qq"><img src="../../image/share_qq.png" />
  254. <p>QQ</p>
  255. </li>
  256. </ul>
  257. </div>
  258. <div class="share-item-cancel">取消</div>
  259. </div>
  260. </body>
  261. <script type="text/javascript" src="../../script/api.js"></script>
  262. <script type="text/javascript" src="../../script/jquery.min.js"></script>
  263. <script type="text/javascript" src="../../script/jquery.tap.js"></script>
  264. <script type="text/javascript" src="../../script/imagesloaded.pkgd.min.js"></script>
  265. <script type="text/javascript">
  266. var _storeid = '';
  267. var _cateid = '';
  268. var _sort = "id";
  269. var _minsort = '';
  270. var _desc = "desc";
  271. var _shareimg = '';
  272. var _description = '';
  273. var _title = '';
  274. var _page = '1';
  275. var _shareurl = '';
  276. var _keyword = 'NULL';
  277. apiready = function() {
  278. _storeid = api.pageParam.storeid;
  279. setFixStatusBar();
  280. api.addEventListener({
  281. name: 'swipeup'
  282. }, function(ret, err) {
  283. getRouteGoodsData()
  284. });
  285. };
  286. function getData() {
  287. $(".goods-list").empty();
  288. _keyword = $("#keyword").val();
  289. _cateid = '';
  290. _sort = "id";
  291. _minsort = '';
  292. _desc = "desc";
  293. $(".goods-list").attr("page", '1');
  294. if (_keyword) {
  295. getRouteGoodsData();
  296. } else {
  297. $(".border-none").show();
  298. }
  299. }
  300. $(".more-btn").on("tap", function() {
  301. $(".goods-list").empty();
  302. if ($("#keyword").val() == '') {
  303. api.toast({
  304. msg: '关键词不能为空!'
  305. });
  306. return false;
  307. }
  308. _keyword = $("#keyword").val();
  309. _cateid = '';
  310. _sort = "id";
  311. _minsort = '';
  312. _desc = "desc";
  313. $(".goods-list").attr("page", '1');
  314. getRouteGoodsData();
  315. return false;
  316. })
  317. $(".hotel-top-search").on("tap", function() {
  318. api.openWin({
  319. name: 'goodssearch',
  320. url: './goodssearch.html',
  321. bounces: false,
  322. pageParam: {
  323. storeid: _storeid
  324. }
  325. });
  326. return false;
  327. })
  328. $(".hotel-item").on("tap", function() {
  329. api.openWin({
  330. name: 'showhotel',
  331. url: './showhotel.html',
  332. bounces: false,
  333. pageParam: {
  334. keyid: _storeid
  335. }
  336. });
  337. return false;
  338. })
  339. $(".goods-list").on("tap", ".goods-list-item", function() {
  340. var _goodsid = $(this).attr("keyid");
  341. api.openWin({
  342. name: 'showgoods',
  343. url: './showgoods.html',
  344. bounces: false,
  345. pageParam: {
  346. keyid: _goodsid,
  347. storeid: _storeid
  348. }
  349. });
  350. return false;
  351. })
  352. function getRouteGoodsData() {
  353. $(".border-none").hide();
  354. _page = $(".goods-list").attr("page");
  355. if (_page == 0) {
  356. return false;
  357. }
  358. var _xdata = {
  359. store_id: _storeid,
  360. page: _page,
  361. praise: _desc,
  362. keyword: _keyword
  363. };
  364. var _data_type = $(".hotel-goods-active").attr("tag");
  365. if (_data_type == 'praise') {
  366. _xdata = {
  367. store_id: _storeid,
  368. page: _page,
  369. praise: _desc,
  370. keyword: _keyword
  371. };
  372. } else if (_data_type == 'goods_commonid') {
  373. _xdata = {
  374. store_id: _storeid,
  375. page: _page,
  376. goods_commonid: _desc,
  377. keyword: _keyword
  378. };
  379. } else if (_data_type == 'goods_price') {
  380. _xdata = {
  381. store_id: _storeid,
  382. page: _page,
  383. goods_price: _desc,
  384. keyword: _keyword
  385. };
  386. } else {
  387. var catid = $("#category-item .cate-active").parent(".category-list").attr("catid");
  388. }
  389. $.ajax({
  390. url: siteurl + 'v2/entry/storeGoods',
  391. data: _xdata,
  392. headers: {
  393. "X-TOKEN": $api.getStorage("accesstoken")
  394. },
  395. dataType: 'json',
  396. type: 'post',
  397. success: function(datas) {
  398. if (datas.result) {
  399. var html = '';
  400. if (datas.data.goods_list.length > 0) {
  401. var j = 0;
  402. $.each(datas.data.goods_list, function(index, item) {
  403. var _advarr = item.goods_advword.split("\n");
  404. var _taghtml = '';
  405. var _tagcolor = ['#006699', '#d9251c', '#e8e8e8'];
  406. if (_advarr.length > 0) {
  407. for (var i = 0; i < _advarr.length; i++) {
  408. if (_advarr[i]) {
  409. _taghtml += '<span class="tag-item" style="">' + _advarr[i] + '</span>';
  410. }
  411. }
  412. }
  413. j++;
  414. html = '';
  415. if (j % 2 == 0) {
  416. html += '<div class="goods-list-item padl" ';
  417. } else {
  418. html += '<div class="goods-list-item" ';
  419. }
  420. html += 'keyid="' + item.goods_commonid + '" goods_li="' + j + '"><ul>';
  421. html += '<li><img src="' + siteurl + "uploads/home/store/goods/" + item.goods_image.substr(0, item.goods_image.indexOf("\_")) + "/" + item.goods_image + '" class="goods-image"/></li>';
  422. html += '<li class="goods-title font-rem11">' + item.goods_name + '</li>';
  423. html += '<li class="goods-price">¥' + item.goods_price + ' <span class="line-through">' + item.goods_marketprice +'</span></li>';
  424. html += '<li class="goods-tag">' + _taghtml + '</li>';
  425. html += '</ul></div>';
  426. if (j % 2 == 0) {
  427. html += '<div class="h10"></div>';
  428. }
  429. if (_page == 1 && index == 0) {
  430. $(".goods-list").html(html);
  431. } else {
  432. $(".goods-list").append(html);
  433. }
  434. function_name();
  435. });
  436. _page++;
  437. $(".goods-list").attr("page", _page);
  438. } else {
  439. html = '<div class="data-null">暂时没有更多商品</div>';
  440. $(".goods-list").attr("page", '0');
  441. if (_page == 1) {
  442. $(".border-none").show();
  443. } else {
  444. $(".goods-list").append(html);
  445. }
  446. }
  447. } else {
  448. errcode(datas, datas.code)
  449. }
  450. }
  451. })
  452. }
  453. function getCategoryData() {
  454. $.ajax({
  455. url: siteurl + 'v1/entry/storeCategory',
  456. data: {
  457. store_id: _storeid
  458. },
  459. headers: {
  460. "X-TOKEN": $api.getStorage("accesstoken")
  461. },
  462. dataType: 'json',
  463. type: 'post',
  464. success: function(datas) {
  465. if (datas.result) {
  466. var html = '';
  467. $("#category-item").empty();
  468. $("#category-item").append(
  469. '<div class="category-list" catid="all"><span class="category-list-span">全部</span></div>');
  470. $.each(datas.data.category_list, function(index, item) {
  471. html = '<div class="category-list" catid="' + item.gc_id + '"><span class="category-list-span">' + item.gc_name +
  472. '</span></div>';
  473. $("#category-item").append(html);
  474. });
  475. } else {
  476. errcode(datas, datas.code);
  477. }
  478. }
  479. });
  480. }
  481. $("#category-btn").on("tap", function() {
  482. $(".gsort").removeClass("hotel-goods-active");
  483. $(".gsort").find("img").attr("src", "../../image/sort.png");
  484. getCategoryData();
  485. if (!$(".category-item").hasclass("mask-hidden")) {
  486. $(".category-item").addClass("mask-hidden");
  487. $("#category-btn").removeClass("hotel-goods-active");
  488. $(this).find("img").attr("src", "../../image/sort.png");
  489. $("#category-btn img").attr("src", "../../image/sort_down2.png");
  490. } else {
  491. $(".category-item").removeClass("mask-hidden");
  492. $("#category-btn").addClass("hotel-goods-active");
  493. $(this).find("img").attr("src", "../../image/sort_up.png");
  494. $("#category-btn img").attr("src", "../../image/sort_down2_up.png");
  495. }
  496. return false;
  497. })
  498. function hiddenCate() {
  499. $(".category-item").addClass("mask-hidden");
  500. $("#category-btn").removeClass("hotel-goods-active");
  501. $("#category-btn").find("img").attr("src", "../../image/sort.png");
  502. }
  503. function shorNewGoods() {
  504. _minsort = '';
  505. $(".goods-list").empty();
  506. $(".goods-list").attr("page", '1');
  507. getRouteGoodsData();
  508. }
  509. $(".category-item").on("tap", ".category-list", function() {
  510. $(this).find("span").addClass("cate-active");
  511. hiddenCate();
  512. _cateid = $(this).attr("catid");
  513. _minsort = '';
  514. shorNewGoods();
  515. setTimeout(function() {
  516. $(".category-item").addClass("mask-hidden");
  517. }, 300);
  518. return false;
  519. })
  520. $(".goods-all").on("tap", function() {
  521. hiddenCate();
  522. _sort = $(this).attr("tag");
  523. $(".gsort").removeClass("hotel-goods-active");
  524. $(this).addClass("hotel-goods-active");
  525. $(".gsort").find("img").attr("src", "../../image/sort.png");
  526. $("#category-btn img").attr("src", "../../image/sort_down2.png");
  527. _desc = "desc";
  528. shorNewGoods();
  529. return false;
  530. })
  531. ////
  532. $(".goods-new").on("tap", function() {
  533. hiddenCate();
  534. _sort = $(this).attr("tag");
  535. $(".gsort").removeClass("hotel-goods-active");
  536. $(this).addClass("hotel-goods-active");
  537. $(".goods-sprice").find("img").attr("src", "../../image/sort.png");
  538. $(this).find("img").attr("src", $(this).find("img").attr("src") == "../../image/sort_up.png" ?
  539. "../../image/sort_down.png" : "../../image/sort_up.png");
  540. if ($(this).find("img").attr("src") == "../../image/sort_up.png") {
  541. _desc = "asc";
  542. } else {
  543. _desc = "desc";
  544. }
  545. $("#category-btn img").attr("src", "../../image/sort_down2.png");
  546. shorNewGoods();
  547. return false;
  548. })
  549. ////
  550. $(".goods-sprice").on("tap", function() {
  551. hiddenCate();
  552. _sort = $(this).attr("tag");
  553. $(".gsort").removeClass("hotel-goods-active");
  554. $(this).addClass("hotel-goods-active");
  555. $(".goods-new").find("img").attr("src", "../../image/sort.png");
  556. $(this).find("img").attr("src", $(this).find("img").attr("src") == "../../image/sort_up.png" ?
  557. "../../image/sort_down.png" : "../../image/sort_up.png");
  558. if ($(this).find("img").attr("src") == "../../image/sort_up.png") {
  559. _desc = "asc";
  560. } else {
  561. _desc = "desc";
  562. }
  563. $("#category-btn img").attr("src", "../../image/sort_down2.png");
  564. shorNewGoods();
  565. return false;
  566. })
  567. $(".share-item-cancel").on("tap", function() {
  568. $(".share-item").slideUp(500, function() {});
  569. _show = false;
  570. return false;
  571. })
  572. ///
  573. $(".share-item-friend").on("tap", function() {
  574. api.download({
  575. url: _shareimg,
  576. report: false,
  577. savePath: 'widget://share' + _storeid + '.png',
  578. cache: true,
  579. allowResume: true
  580. }, function(ret, err) {
  581. var wx = api.require('wx');
  582. wx.shareWebpage({
  583. scene: 'session',
  584. title: _title,
  585. description: _description,
  586. thumb: 'widget://share' + _storeid + '.png',
  587. contentUrl: _shareurl
  588. }, function(ret, err) {
  589. if (ret.status) {
  590. //alert("分享成功!");
  591. setPoint();
  592. } else {
  593. alert(err.code);
  594. }
  595. });
  596. });
  597. $(".share-item").slideUp(500, function() {});
  598. _show = false;
  599. return false;
  600. })
  601. $(".share-item-cale").on("tap", function() {
  602. api.download({
  603. url: _shareimg,
  604. report: false,
  605. savePath: 'widget://share' + _storeid + '.png',
  606. cache: true,
  607. allowResume: true
  608. }, function(ret, err) {
  609. var wx = api.require('wx');
  610. wx.shareWebpage({
  611. scene: 'timeline',
  612. title: _title,
  613. description: _description,
  614. thumb: 'widget://share' + _storeid + '.png',
  615. contentUrl: _shareurl
  616. }, function(ret, err) {
  617. if (ret.status) {
  618. //alert("分享成功!");
  619. setPoint();
  620. } else {
  621. alert(err.code);
  622. }
  623. });
  624. });
  625. $(".share-item").slideUp(500, function() {});
  626. _show = false;
  627. return false;
  628. })
  629. $(".share-item-qq").on("tap", function() {
  630. var qq = api.require('QQPlus');
  631. qq.shareNews({
  632. url: _shareurl,
  633. title: _title,
  634. description: _description,
  635. imgUrl: _shareimg
  636. }, function(ret, err) {
  637. if (ret.status) {
  638. //alert("分享成功!");
  639. setPoint();
  640. } else {
  641. api.alert({
  642. msg: JSON.stringify(err)
  643. });
  644. }
  645. });
  646. $(".share-item").slideUp(500, function() {});
  647. _show = false;
  648. return false;
  649. })
  650. var _show = false;
  651. $("#share-btn").on("tap", function() {
  652. if (_show == false) {
  653. $(".share-item").slideDown(500, function() {});
  654. _show = true;
  655. } else {
  656. $(".share-item").slideUp(500, function() {});
  657. _show = false;
  658. }
  659. return false;
  660. })
  661. </script>
  662. </html>