frame1.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  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/swiper.min.css" />
  10. <link rel="stylesheet" type="text/css" href="../../css/style.css" />
  11. <style>
  12. body{background:#f2f2f2;}
  13. .swiper-slide{
  14. text-align: center;
  15. height: 0.76rem;
  16. line-height: 0.76rem;
  17. font-size: 0.28rem;
  18. }
  19. .active, .active span{
  20. color: #d9251c;
  21. }
  22. .active span {
  23. border-bottom: 3em solid;
  24. }
  25. .bottom-line{
  26. border-bottom:1px solid #e8e8e8;
  27. }
  28. .border-none{
  29. text-align:center;font-size: 0.28rem;
  30. }
  31. .border-none p{
  32. color:#999999;
  33. }
  34. .border-none-img{
  35. margin-top: 3rem;
  36. width: 1.73rem;
  37. height: auto;
  38. }
  39. .order-list-right p {
  40. font-size: 0.22rem;
  41. color: #999;
  42. height: 1.04rem;
  43. }
  44. p.font-size-18 {
  45. color: #666;
  46. height: auto;
  47. }
  48. .h5 {
  49. background: #f2f2f2;
  50. margin: 0 0 0 -0.32rem;
  51. width: 7.5rem;
  52. margin-top: 0.5em;
  53. }
  54. .h5:first-child {
  55. margin-top: 0
  56. }
  57. .back-header li.back-header-title {
  58. width: 100%;
  59. }
  60. </style>
  61. <script>
  62. (function(w, d, m) {
  63. function r() {
  64. var t = 100,
  65. o = 750,
  66. e = d.documentElement.clientWidth || w.innerWidth,
  67. n = m.max(m.min(e, 480), 320),
  68. h = 50;
  69. 320 >= n && (h = m.floor(n / o * t * .99)),
  70. n > 320 && 362 >= n && (h = m.floor(n / o * t * 1)),
  71. n > 362 && 375 >= n && (h = m.floor(n / o * t * 1)),
  72. n > 375 && (h = m.floor(n / o * t * .97)),
  73. d.querySelector("html").style.fontSize = (e/7.5) + "px"
  74. };
  75. r();
  76. w.onresize = function() {
  77. r()
  78. }
  79. })(window, document, Math);
  80. </script>
  81. </head>
  82. <body>
  83. <div class="topbar"></div>
  84. <header class="back-header bottom-line">
  85. <ul>
  86. <!-- <li class="padding-20"></li> -->
  87. <li class="back-header-title">订单列表</li>
  88. <!-- <li class="more-btn"></li> -->
  89. </ul>
  90. </header>
  91. <section class="white-back" style="position: fixed;z-index: 2;margin-top: 0.81rem;">
  92. <div class="swiper-container" style="padding-bottom: 0.1em;width: 6.86rem;">
  93. <div class="swiper-wrapper">
  94. <div class="swiper-slide active" state="100" state_as="all"><span>全部</span></div>
  95. <div class="swiper-slide" state="10" state_as="waiting"><span>待付款</span></div>
  96. <div class="swiper-slide" state="20,30" state_as="payed"><span>处理中</span></div>
  97. <div class="swiper-slide" state="40" state_as="complete"><span>已收货</span></div>
  98. <div class="swiper-slide" state="0" state_as="cancel"><span>已取消</span></div>
  99. <div class="swiper-slide" state="50" state_as="refund"><span>退换/售后</span></div>
  100. </div>
  101. </div>
  102. </section>
  103. <section class="order-list white-back" style="padding-top: 1.6rem;">
  104. </section>
  105. <section class="border-none">
  106. <img src="../../image/border_none.png" class="border-none-img" />
  107. <p>暂无订单</p>
  108. </section>
  109. <div class="back-h10"></div>
  110. </body>
  111. <script type="text/javascript" src="../../script/api.js"></script>
  112. <script type="text/javascript" src="../../script/swiper.min.js"></script>
  113. <script type="text/javascript" src="../../script/jquery.min.js"></script>
  114. <script type="text/javascript" src="../../script/imagesloaded.pkgd.min.js"></script>
  115. <script type="text/javascript" src="../../script/jquery.tap.js"></script>
  116. <script type="text/javascript">
  117. var _state = 'all';
  118. var _minid = '';
  119. var _page = '1';
  120. var lastpage = false;
  121. var _htmlstatus = false;
  122. apiready = function() {
  123. // _state = api.pageParam.tag;
  124. setFixStatusBar();
  125. getRouteData();
  126. api.addEventListener({
  127. name: 'scrolltobottom',
  128. extra: {
  129. threshold: 200
  130. }
  131. }, function(ret, err) {
  132. getRouteData();
  133. });
  134. api.addEventListener({
  135. name:'resume'
  136. }, function(ret, err){
  137. _minid = '';
  138. _page = '1';
  139. lastpage = false;
  140. // $(".order-list").empty();
  141. _htmlstatus = true;
  142. getRouteData();
  143. });
  144. api.addEventListener({
  145. name:'online'
  146. }, function(ret, err){
  147. _minid = '';
  148. _page = '1';
  149. lastpage = false;
  150. // $(".order-list").empty();
  151. _htmlstatus = true;
  152. getRouteData();
  153. });
  154. api.addEventListener({
  155. name:'viewappear'
  156. }, function(ret, err){
  157. _minid = '';
  158. _page = '1';
  159. lastpage = false;
  160. // $(".order-list").empty();
  161. _htmlstatus = true;
  162. getRouteData();
  163. });
  164. };
  165. function getRouteData() {
  166. if (lastpage) {
  167. return false;
  168. }
  169. $.ajax({
  170. url: siteurl + 'v2/order/orders',//'?do=gethotelorder',
  171. data: {
  172. storeid: $api.getStorage("storeid"),
  173. minid: _minid,
  174. state: _state,
  175. page: _page
  176. },
  177. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  178. dataType: 'json',
  179. type: 'post',
  180. success: function(datas) {
  181. if (datas.result) {
  182. var _html = '';
  183. if (datas.data.order_list.length > 0) {
  184. $.each(datas.data.order_list, function(index, item) {
  185. var _a_img = '';
  186. var _a_name = '';
  187. item.member_avatar ? _a_img = item.member_avatar : _a_img ='../../image/head.png';
  188. item.member_truename ? _a_name = item.member_truename : _a_name = item.member_name;
  189. _html += '<div class="h5"></div><div class="order-list-title" state="' + item.order_state + '" keyid="' + item.order_id + '"><img src="' +_a_img+ '"/> ' + _a_name + '<span class="order-list-status">' + item.status + '</span></div>';
  190. if (item.goods) {
  191. $.each(item.goods, function(index2, item2) {
  192. var arr = item2.goods_name.split(" ");
  193. var name_arr = arr[0];
  194. var size_arr = item2.goods_name.replace(name_arr, "");
  195. _html += '<div class="order-list-goods" state="' + item.order_state + '" keyid="' + item.order_id + '"><ul><li><img src="' + siteurl + "uploads/home/store/goods/" + item2.goods_image.substr(0, item2.goods_image.indexOf("\_")) + "/" + item2.goods_image + '"/></li>';
  196. _html += '<li class="order-list-right"><span class="font-rem11">' + name_arr + '</span><p>' + size_arr + ' x' + item2.goods_num + '</p>';
  197. _html += '<p class="font-size-18">¥' + item2.goods_price + '</p></li>';
  198. _html += '</ul></div><div class="h2"></div>';
  199. });
  200. }
  201. _html += '<div class="order-list-title" style="border-bottom:none;">合计:¥' + item.order_amount + '</div>';
  202. });
  203. // console.log(_htmlstatus,_state)
  204. if (_htmlstatus) {
  205. $(".order-list").html(_html);
  206. _htmlstatus = false;
  207. }else{
  208. $(".order-list").append(_html);
  209. }
  210. $(".border-none").addClass("mask-hidden");
  211. if (datas.data.order_list.length > 0) {
  212. // _minid = datas[datas.length - 1].order_id;
  213. _page++;
  214. }
  215. }else{
  216. lastpage = true;
  217. // api.toast({ msg: '没有更多数据...' });
  218. // console.log(_htmlstatus,_state)
  219. if (_htmlstatus) {
  220. $(".order-list").empty();
  221. $(".border-none").removeClass("mask-hidden");
  222. }
  223. }
  224. } else {
  225. errcode(datas, datas.code);
  226. }
  227. function_name();
  228. }
  229. });
  230. }
  231. var swiper = new Swiper('.swiper-container', {
  232. slidesPerView: 5,
  233. spaceBetween: 10,
  234. pagination: {
  235. el: '.swiper-pagination',
  236. clickable: true,
  237. },
  238. });
  239. ////
  240. $(".order-list").on("tap", ".order-list-title", function() {
  241. var _keyid = $(this).attr("keyid");
  242. var _state = $(this).attr("state");
  243. api.openWin({
  244. name: 'orderdtl',
  245. url: './orderdtl.html',
  246. bounces: false,
  247. pageParam: {
  248. keyid: _keyid,
  249. state: _state
  250. }
  251. });
  252. return false;
  253. })
  254. $(".order-list").on("tap", ".order-list-goods", function() {
  255. var _keyid = $(this).attr("keyid");
  256. var _state = $(this).attr("state");
  257. api.openWin({
  258. name: 'orderdtl',
  259. url: './orderdtl.html',
  260. bounces: false,
  261. pageParam: {
  262. keyid: _keyid,
  263. state: _state
  264. }
  265. });
  266. return false;
  267. })
  268. $(".border-none").on("tap", function() {
  269. api.openWin({
  270. name: 'goodssearch',
  271. url: '../../home/goodssearch.html',
  272. bounces: false,
  273. pageParam: {
  274. orderid: _keyid
  275. }
  276. });
  277. return false;
  278. })
  279. $(".swiper-slide").on("tap", function() {
  280. lastpage = false;
  281. $(".swiper-slide").removeClass("active");
  282. $(this).addClass("active");
  283. _state = $(this).attr("state_as");
  284. _minid = '';
  285. _page = '1';
  286. // $(".order-list").empty();
  287. _htmlstatus = true;
  288. $(".border-none").addClass("mask-hidden");
  289. getRouteData();
  290. return false;
  291. })
  292. function refreshData() {
  293. getRouteData();
  294. }
  295. </script>
  296. </html>