frame2.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596
  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/weui.min.css" />
  10. <link rel="stylesheet" type="text/css" href="../css/style.css" />
  11. <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
  12. <style>
  13. body{background:#f2f2f2;}
  14. .swiper-container {
  15. width: 100%;
  16. height: 100%;
  17. }
  18. .swiper-slide{
  19. text-align: center;
  20. /*height: 0.76rem;*/
  21. line-height: 0.5rem;
  22. font-size: 0.28rem;
  23. position: relative;
  24. padding-top: 0.2rem;
  25. }
  26. .swiper-slide span {
  27. white-space: nowrap;
  28. overflow: hidden;
  29. text-overflow: ellipsis;
  30. }
  31. .active, .active span{
  32. color: #d9251c;
  33. }
  34. .active span {
  35. border-bottom: 0.1em solid;
  36. }
  37. .bottom-line{
  38. border-bottom:1px solid #e8e8e8;
  39. }
  40. .border-none{
  41. text-align:center;font-size: 0.28rem;
  42. }
  43. .border-none p{
  44. color:#999999;
  45. }
  46. .border-none-img{
  47. margin-top: 3rem;
  48. width: 1.73rem;
  49. height: auto;
  50. }
  51. .order-list-right {
  52. width: 4.7rem;
  53. }
  54. .order-list-right p {
  55. font-size: 0.22rem;
  56. color: #999;
  57. /*height: 1.04rem;*/
  58. }
  59. span.font-rem11 {
  60. overflow: hidden;
  61. text-overflow: ellipsis;
  62. display: -webkit-box;
  63. -webkit-line-clamp: 3;
  64. -webkit-box-orient: vertical;
  65. }
  66. p.font-size-18 {
  67. color: #666;
  68. height: auto;
  69. font-size: 0.28rem;
  70. }
  71. .h5 {
  72. background: #f2f2f2;
  73. margin: 0 0 0 -0.32rem;
  74. width: 7.5rem;
  75. /*margin-top: 0.5em;*/
  76. height: 0.2rem;
  77. }
  78. .h5:first-child {
  79. padding-top: 1.8rem;
  80. }
  81. .fixedtop {
  82. position: fixed;
  83. top: 0;
  84. z-index: 1;
  85. }
  86. section.nav {
  87. position: fixed;
  88. width: 100%;
  89. z-index: 1;
  90. }
  91. .weui-btn_primary, .weui-btn_primary:not(.weui-btn_disabled):active {
  92. background-color: #d9251c;
  93. }
  94. .top0 {
  95. padding-top: 0;
  96. margin-top: 0;
  97. }
  98. .border-none-imgx{
  99. margin-top: 3rem;
  100. width: 3rem !important;
  101. height: 3rem !important;
  102. }
  103. .weui-gallery.nologin {
  104. text-align: center;
  105. font-size: 0.28rem;
  106. background-color: #fff;
  107. }
  108. .dian{
  109. position: absolute;
  110. font-size: 10px;
  111. color: #fff;
  112. background-color: #D9332E;
  113. border-radius: 25px;
  114. top: 0.15rem;
  115. right: -9px;
  116. box-sizing: border-box;
  117. white-space: nowrap;
  118. text-align: center;
  119. min-width:0.3rem;
  120. z-index: 999;
  121. height: 0.3rem;
  122. line-height: 0.3rem;
  123. padding: 0 2px;
  124. display: none;
  125. }
  126. </style>
  127. <script>
  128. (function(w, d, m) {
  129. function r() {
  130. var t = 100,
  131. o = 750,
  132. e = d.documentElement.clientWidth || w.innerWidth,
  133. n = m.max(m.min(e, 480), 320),
  134. h = 50;
  135. 320 >= n && (h = m.floor(n / o * t * .99)),
  136. n > 320 && 362 >= n && (h = m.floor(n / o * t * 1)),
  137. n > 362 && 375 >= n && (h = m.floor(n / o * t * 1)),
  138. n > 375 && (h = m.floor(n / o * t * .97)),
  139. d.querySelector("html").style.fontSize = (e/7.5) + "px"
  140. };
  141. r();
  142. w.onresize = function() {
  143. r()
  144. }
  145. })(window, document, Math);
  146. </script>
  147. </head>
  148. <body>
  149. <div class="weui-gallery nologin" style="display: none;">
  150. <img src="../image/notfound.png" class="border-none-imgx">
  151. <p style="padding-bottom: 0.3rem;">登录后可查看订单</p>
  152. <a href="javascript:redirectLogin();" class="weui-btn weui-btn_mini weui-btn_primary">登录</a>
  153. </div>
  154. <div class="topbar"></div>
  155. <header class="back-header bottom-line">
  156. <ul>
  157. <li class="padding-20"></li>
  158. <li class="back-header-title">我的订单</li>
  159. <li class="more-btn"></li>
  160. </ul>
  161. </header>
  162. <section class="nav padding-top white-back" style="margin-top: 0.2rem;padding-top: 0.8rem;">
  163. <div class="swiper-container">
  164. <div class="swiper-wrapper">
  165. <div class="swiper-slide active" state="100" state_as="all"><span>全部</span></div>
  166. <div class="swiper-slide waiting_count" state="10" state_as="waiting">
  167. <span>待付款</span>
  168. <em class="dian">9</em>
  169. </div>
  170. <div class="swiper-slide payed_count" state="20,30" state_as="payed">
  171. <span>处理中</span>
  172. <em class="dian">9</em>
  173. </div>
  174. <div class="swiper-slide" state="40" state_as="complete"><span>已收货</span></div>
  175. <div class="swiper-slide" state="0" state_as="cancel"><span>已取消</span></div>
  176. <!-- <div class="swiper-slide" state="50" state_as="refund"><span>退换/售后</span></div> -->
  177. </div>
  178. </div>
  179. </section>
  180. <section class="order-list white-back" id="order-list">
  181. </section>
  182. <section class="border-none kong">
  183. <img src="../image/border_none.png" class="border-none-img" />
  184. <p>去买点什么</p>
  185. </section>
  186. <section class="border-none nologin mask-hidden">
  187. <img src="../image/notfound.png" class="border-none-img">
  188. <p style="padding-bottom: 0.3rem;">登录后可查看订单</p>
  189. <a href="javascript:redirectLogin();" class="weui-btn weui-btn_mini weui-btn_primary">登录</a>
  190. </section>
  191. <div class="back-h10" style="height: 2rem;"></div>
  192. <div class="back-top mask-hidden" id="fix1"></div>
  193. </body>
  194. <script type="text/javascript" src="../script/api.js"></script>
  195. <script type="text/javascript" src="../script/swiper.min.js"></script>
  196. <script type="text/javascript" src="../script/jquery.min.js"></script>
  197. <script type="text/javascript" src="../script/imagesloaded.pkgd.min.js"></script>
  198. <script type="text/javascript" src="../script/jquery.tap.js"></script>
  199. <script type="text/javascript">
  200. var _state = 'all';
  201. var _minid = '';
  202. var lastpage = false;
  203. var _htmlstatus = false;
  204. var _page = '1';
  205. apiready = function() {
  206. setFixStatusBar();
  207. getRouteData();
  208. getNum();
  209. api.addEventListener({
  210. name: 'scrolltobottom',
  211. extra: {
  212. threshold: 200
  213. }
  214. }, function(ret, err) {
  215. getRouteData();
  216. });
  217. api.addEventListener({
  218. name:'resume'
  219. }, function(ret, err){
  220. _minid = '';
  221. // $(".order-list").empty();
  222. _htmlstatus = true;
  223. lastpage = false;
  224. _page = '1';
  225. $(".border-none.kong").addClass("mask-hidden");
  226. getNum();
  227. getRouteData();
  228. });
  229. api.addEventListener({
  230. name:'viewappear'
  231. }, function(ret, err){
  232. _minid = '';
  233. _htmlstatus = true;
  234. lastpage = false;
  235. _page = '1';
  236. getNum();
  237. $(".border-none.kong").addClass("mask-hidden");
  238. getRouteData();
  239. });
  240. };
  241. //获取订单角标
  242. function getNum(){
  243. $.ajax({
  244. url: siteurl + 'v1/order/statistics',//'?do=orderdel',
  245. headers: { "X-TOKEN": $api.getStorage("accesstoken")},
  246. type: 'get',
  247. success: function(res) {
  248. $(".dian").hide();
  249. var data=res.data;
  250. if(data.waiting_count >0){
  251. $(".waiting_count .dian").show();
  252. if(data.waiting_count>99){
  253. $(".waiting_count .dian").text('99+');
  254. }else{
  255. $(".waiting_count .dian").text(data.waiting_count);
  256. }
  257. }
  258. if(data.payed_count >0){
  259. $(".payed_count .dian").show();
  260. if(data.waiting_count>99){
  261. $(".payed_count .dian").text('99+');
  262. }else{
  263. $(".payed_count .dian").text(data.payed_count);
  264. }
  265. $(".payed_count .dian").text(data.payed_count);
  266. }
  267. }
  268. });
  269. };
  270. function getRouteData() {
  271. if (lastpage) {
  272. return false;
  273. }
  274. $.ajax({
  275. url: siteurl + 'v2/order/orders',//'?do=getorder',
  276. data: {
  277. memberid: $api.getStorage("memberid"),
  278. minid: _minid,
  279. state: _state,
  280. page: _page
  281. },
  282. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  283. dataType: 'json',
  284. type: 'post',
  285. success: function(datas) {
  286. if (datas.result) {
  287. var _html = '';
  288. if (datas.data.order_list.length > 0) {
  289. $.each(datas.data.order_list, function(index, item) {
  290. _html += '<div class="h5"></div><div class="order-dtl-btn" storeid="' + item.store_id + '" state="' + item.order_state + '" keyid="' + item.order_id + '"><div class="order-list-title font-rem11" storeid="' + item.store_id + '" state="' + item.order_state + '" keyid="' + item.order_id + '"><img src="' + siteurl + 'uploads/home/store/' + item.storeid + '/' + item.store_avatar + '"/> ' + item.store_name + '<span class="order-list-status font-rem11">' + item.status + '</span></div>';
  291. if (typeof(item.goods) !== 'undefined') {
  292. $.each(item.goods, function(index2, item2) {
  293. var arr = item2.goods_name.split(" ");
  294. var name_arr = arr[0];
  295. var size_arr = item2.goods_name.replace(name_arr, "");
  296. _html += '<div class="order-list-goods" state="' + item.order_state +'" order_id="' + item.order_id + '" goods_commonid="'+item2.goods_commonid+'" storeid="' + item.store_id + '" keyid="' + item2.goods_id + '"><ul><li><img src="' + siteurl + "uploads/home/store/goods/" + item2.goods_image.substr(0, item2.goods_image.indexOf("\_")) + "/" + item2.goods_image + '"/></li>';
  297. _html += '<li class="order-list-right"><span class="font-rem11">' + name_arr + '</span><p>' + size_arr + ' x' + item2.goods_num + '</p>';
  298. _html += '<p class="font-size-18">¥' + item2.goods_price + '</p></li>';
  299. _html += '</ul></div><div class="h2"></div>';
  300. });
  301. }
  302. if (item.evaluation_state == 1) {
  303. _html += '<div class="order-list-title" style="border-bottom:none;">合计:¥' + item.order_amount + '</div></div>';
  304. } else {
  305. if(item.order_state == 60){
  306. _html += '<div class="order-list-title" style="border-bottom:none;">合计:¥' + item.order_amount + '</div></div>';
  307. }else{
  308. _html += '<div class="order-list-title" style="border-bottom:none;">合计:¥' + item.order_amount + '<span class="order-list-action" state="' + item.order_state + '" keyid="' + item.order_id + '" shippingtype="' + item.shipping_type + '">' + item.operate + '</span></div></div>';
  309. }
  310. }
  311. });
  312. // console.log(_htmlstatus,_state)
  313. // console.log(datas)
  314. if ( _htmlstatus ) {
  315. $(".order-list").html(_html);
  316. _htmlstatus = false;
  317. }else{
  318. $(".order-list").append(_html);
  319. }
  320. if (datas.data.order_list.length > 0) {
  321. // _minid = datas[datas.length - 1].order_id;
  322. _page++;
  323. }
  324. $(".border-none.kong").addClass("mask-hidden");
  325. } else {
  326. // console.log(_htmlstatus,_state)
  327. // console.log(datas)
  328. lastpage = true;
  329. // api.toast({ msg: '没有更多数据...' });
  330. if ( _htmlstatus ) {
  331. $(".order-list").empty();
  332. $(".border-none.kong").removeClass("mask-hidden");
  333. }
  334. }
  335. $(".weui-gallery.nologin").hide();
  336. } else {
  337. if (datas.code == 2000) {
  338. $(".weui-gallery.nologin").show();
  339. } else {
  340. errcode(datas, datas.code);
  341. }
  342. }
  343. function_name();
  344. }
  345. });
  346. }
  347. var swiper = new Swiper('.swiper-container', {
  348. slidesPerView: 5,
  349. spaceBetween: 10,
  350. pagination: {
  351. el: '.swiper-pagination',
  352. clickable: true,
  353. },
  354. });
  355. function redirectLogin() {
  356. api.openWin({
  357. name: 'login',
  358. url: '../login.html',
  359. bounces: false,
  360. pageParam: {
  361. keyid: true
  362. }
  363. });
  364. }
  365. ////
  366. $(".order-list").on("tap", ".order-list-title.font-rem11", function() {
  367. var _keyid = $(this).attr("storeid");
  368. console.log(_keyid)
  369. api.openWin({
  370. name: 'hoteldtl',
  371. url: './home/hoteldtl.html',
  372. bounces: false,
  373. pageParam: {
  374. keyid: _keyid
  375. }
  376. });
  377. return false;
  378. })
  379. ////
  380. $(".order-list").on("tap", ".order-dtl-btnx", function() {
  381. var _keyid = $(this).attr("keyid");
  382. var _state = $(this).attr("state");
  383. console.log(_keyid)
  384. api.openWin({
  385. name: 'orderdtl',
  386. url: './order/orderdtl.html',
  387. bounces: false,
  388. pageParam: {
  389. keyid: _keyid,
  390. state: $(this).attr("state")
  391. }
  392. });
  393. return false;
  394. })
  395. ////
  396. $(".order-list").on("tap", ".order-list-goods", function() {
  397. var _keyid = $(this).attr("order_id");
  398. var _state = $(this).attr("state");
  399. console.log(_keyid)
  400. api.openWin({
  401. name: 'orderdtl',
  402. url: './order/orderdtl.html',
  403. bounces: false,
  404. pageParam: {
  405. keyid: _keyid,
  406. state: $(this).attr("state")
  407. }
  408. });
  409. return false;
  410. })
  411. $(".order-list").on("tap", ".order-list-goodsxx", function() {
  412. var _keyid = $(this).attr("keyid");
  413. var _storeid = $(this).attr("storeid");
  414. var _goods_commonid = $(this).attr("goods_commonid");
  415. api.openWin({
  416. name: 'showgoods',
  417. url: './home/showgoods.html',
  418. bounces: false,
  419. pageParam: {
  420. keyid: _goods_commonid,
  421. storeid: _storeid,
  422. }
  423. });
  424. return false;
  425. })
  426. ///
  427. $(".order-list").on("tap", ".order-list-action", function() {
  428. var _state = $(this).attr("state");
  429. var _keyid = $(this).attr("keyid");
  430. var _shippingtype = $(this).attr("shippingtype");
  431. if (_state == 10) {
  432. api.openWin({
  433. name: 'paymode',
  434. url: './home/paymode.html',
  435. bounces: false,
  436. pageParam: {
  437. keyid: _keyid
  438. }
  439. });
  440. }
  441. if (_state == 20) {
  442. if (_shippingtype == 0) {
  443. api.openWin({
  444. name: 'urge',
  445. url: './order/urge.html',
  446. bounces: false,
  447. pageParam: {
  448. keyid: _keyid
  449. }
  450. });
  451. } else {
  452. api.openWin({
  453. name: 'contacthotel',
  454. url: './order/contacthotel.html',
  455. bounces: false,
  456. pageParam: {
  457. keyid: _keyid
  458. }
  459. });
  460. }
  461. }
  462. if (_state == 30) {
  463. api.confirm({
  464. title: '是否确认收货',
  465. buttons: ['取消', '确定']
  466. }, function(ret, err) {
  467. var index = ret.buttonIndex;
  468. if (index == 2) {
  469. $.ajax({
  470. url: siteurl + 'v2/order/confirm',//'?do=orderconfirm',
  471. data: {
  472. memberid: $api.getStorage("memberid"),
  473. order_id: _keyid
  474. },
  475. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  476. dataType: 'json',
  477. type: 'post',
  478. success: function(datas) {
  479. if (datas.result) {
  480. refreshData();
  481. api.toast({ msg: '操作成功!' });
  482. } else {
  483. errcode(datas, datas.code);
  484. }
  485. }
  486. });
  487. }
  488. })
  489. }
  490. if (_state == 40) {
  491. api.openWin({
  492. name: 'evaluate',
  493. url: './order/evaluate.html',
  494. bounces: false,
  495. pageParam: {
  496. keyid: _keyid
  497. }
  498. });
  499. }
  500. if (_state == 0) {
  501. api.confirm({
  502. title: '是否要删除订单',
  503. buttons: ['取消', '确定']
  504. }, function(ret, err) {
  505. var index = ret.buttonIndex;
  506. if (index == 2) {
  507. $.ajax({
  508. url: siteurl + 'v2/order/drop',//'?do=orderdel',
  509. data: {
  510. memberid: $api.getStorage("memberid"),
  511. order_id: _keyid
  512. },
  513. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  514. dataType: 'json',
  515. type: 'post',
  516. success: function(datas) {
  517. refreshData();
  518. if (datas.result) {
  519. api.toast({ msg: '操作成功!' });
  520. } else {
  521. errcode(datas, datas.code);
  522. }
  523. }
  524. });
  525. }
  526. })
  527. }
  528. return false;
  529. })
  530. $(".swiper-slide").on("tap", function() {
  531. $(".swiper-slide").removeClass("active");
  532. $(this).addClass("active");
  533. _state = $(this).attr("state_as");
  534. _minid = '';
  535. _page = '1';
  536. // $(".order-list").empty();
  537. lastpage = false;
  538. _htmlstatus = true;
  539. $(".border-none.kong").addClass("mask-hidden");
  540. getRouteData();
  541. return false;
  542. })
  543. function refreshData() {
  544. _state = $(".swiper-slide.active").attr("state_as");
  545. _minid = '';
  546. _page = '1';
  547. // $(".order-list").empty();
  548. _htmlstatus = true;
  549. lastpage = false;
  550. $(".border-none.kong").addClass("mask-hidden");
  551. getRouteData();
  552. return false;
  553. }
  554. $(".back-top").on("tap", function() {
  555. $('html , body').animate({ scrollTop: 0 }, 'slow');
  556. return false;
  557. });
  558. $.fn.fixedDiv = function(actCls) {
  559. var that = $(this),
  560. offsetTop = that.offset().top,
  561. scrollTop;
  562. function fix() {
  563. scrollTop = $(document).scrollTop();
  564. if (scrollTop > offsetTop) {
  565. that.removeClass(actCls);
  566. } else {
  567. that.addClass(actCls);
  568. }
  569. }
  570. fix();
  571. $(window).scroll(fix);
  572. }
  573. $('#fix1').fixedDiv('mask-hidden')
  574. </script>
  575. </html>