goodssearch.html 20 KB

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