msglist.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  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. body { background: #f2f2f2; }
  12. .msg-list {
  13. background: #f2f2f2;
  14. padding-top: 1.2rem;
  15. box-sizing: border-box;
  16. }
  17. .msg-cent-list{
  18. width:100%;
  19. display: flex;
  20. background:#ffffff;
  21. border-radius: 0.2em;
  22. padding: 0.17rem;
  23. box-sizing:border-box;
  24. position:relative;
  25. }
  26. .msg-cent-list li{
  27. float:left;
  28. }
  29. .back-h10 {
  30. height: 0.5em;
  31. }
  32. .msg-cent-list img{
  33. width: 1.5rem;
  34. height: 1.5rem;
  35. }
  36. .msg-cent-right{
  37. padding-left: 0.3rem;
  38. width: 4.6rem;
  39. }
  40. .msg-cent-right-title{
  41. font-size: 0.28rem;
  42. line-height: 0.28rem;
  43. }
  44. .msg-cent-right-dtl{
  45. width:100%;
  46. font-size: 0.22rem;
  47. overflow:hidden;
  48. display: -webkit-box;
  49. -webkit-box-orient: vertical;
  50. word-break: break-all;
  51. }
  52. .msg-time{
  53. float: right;
  54. color:#cccccc;
  55. }
  56. .border-none-img{
  57. margin-top: 3rem;
  58. width: 1.73rem;
  59. height: auto;
  60. }
  61. .is_read div {
  62. /*background: #ddd;*/
  63. color: #ccc;
  64. }
  65. .buy-btn{
  66. width:100%;
  67. height: 1rem;
  68. background:#ffffff;
  69. border-top:1px solid #e8e8e8;
  70. position:fixed;
  71. bottom:0px;
  72. }
  73. .buy-btn li{
  74. float:left;
  75. /*width:50%;*/
  76. height: 1rem;
  77. line-height: 1rem;
  78. text-align:center;
  79. font-size: 0.28rem;
  80. border-right:1px solid #e8e8e8;
  81. box-sizing:border-box;
  82. }
  83. li.buy-btn-left{
  84. width: 5.3rem;
  85. text-align: left;
  86. padding-left: 0.2rem;
  87. }
  88. .to-del{
  89. color:#ffffff;
  90. background: #D9251C;
  91. }
  92. .to-del span{
  93. color:#ffffff;
  94. }
  95. .check-all{
  96. width: 0.4rem;
  97. height: 0.4rem;
  98. vertical-align: middle;
  99. }
  100. .buycar-null{
  101. width:100%;text-align:center;background:#f2f2f2;
  102. }
  103. .buycar-null img{
  104. width:60px;
  105. }
  106. .weui-swiped-btn .iconfont {
  107. font-size: 0.48rem;
  108. color: #d9251c;
  109. }
  110. .weui-swiped-btn_warn {
  111. background-color: rgb(255, 255, 255);
  112. }
  113. li.check_li {
  114. position: absolute;
  115. right: 0.32rem;
  116. }
  117. li.check_li img {
  118. width: 0.44rem;
  119. height: auto;
  120. vertical-align: middle;
  121. }
  122. </style>
  123. <script>
  124. (function(w, d, m) {
  125. function r() {
  126. var t = 100,
  127. o = 750,
  128. e = d.documentElement.clientWidth || w.innerWidth,
  129. n = m.max(m.min(e, 480), 320),
  130. h = 50;
  131. 320 >= n && (h = m.floor(n / o * t * .99)),
  132. n > 320 && 362 >= n && (h = m.floor(n / o * t * 1)),
  133. n > 362 && 375 >= n && (h = m.floor(n / o * t * 1)),
  134. n > 375 && (h = m.floor(n / o * t * .97)),
  135. d.querySelector("html").style.fontSize = h + "px"
  136. };
  137. r();
  138. w.onresize = function() {
  139. r()
  140. }
  141. })(window, document, Math);
  142. </script>
  143. </head>
  144. <body>
  145. <div class="topbar"></div>
  146. <section style="background:#ffffff;">
  147. <header class="back-header">
  148. <ul>
  149. <li class="padding-20 back-btn"><img class="back-header-ico" src="../../image/nav_button_back_default.png" /></li>
  150. <li class="back-header-title">消息通知</li>
  151. <li class="more-btn">管理</li>
  152. </ul>
  153. </header>
  154. </section>
  155. <section class="msg-list padding-top"></section>
  156. <section class="border-none data-null" style="padding-bottom: 1rem;">
  157. <img src="../../image/msg_null.png" class="border-none-img" />
  158. <p>还没有任何消息</p>
  159. </section>
  160. <div class="h50"></div>
  161. <!-- xx -->
  162. <div class="buy-btn mask-hidden" id="buy-cancel">
  163. <ul>
  164. <li class="buy-btn-left" style="width:70%;"><img src="../../image/checkun.png" class="check-all"> 全选</li>
  165. <li class="to-del" onclick="btn_warn()" style="width:30%;border-right:none;"><span class="to-pay-text">删除</span><span class="pay-total"></span></li>
  166. </ul>
  167. </div>
  168. </body>
  169. <script type="text/javascript" src="../../script/api.js"></script>
  170. <script type="text/javascript" src="../../script/jquery.min.js"></script>
  171. <script type="text/javascript" src="../../script/imagesloaded.pkgd.min.js"></script>
  172. <script type="text/javascript" src="../../script/jquery.tap.js"></script>
  173. <script type="text/javascript">
  174. var _page = '1';
  175. var lastpage = false;
  176. apiready = function() {
  177. setFixStatusBar();
  178. getRouteData();
  179. api.addEventListener({
  180. name: 'scrolltobottom',
  181. extra: {
  182. threshold: 200
  183. }
  184. }, function(ret, err) {
  185. getRouteData();
  186. });
  187. };
  188. var _minid = '';
  189. function getRouteData() {
  190. if ( lastpage ) {
  191. return false;
  192. }
  193. $.ajax({
  194. url: siteurl + 'v2/shop/msg_list',//'?do=getordermsg',
  195. data: {
  196. member_id: $api.getStorage("memberid"),
  197. minid: _minid,
  198. page: _page,
  199. page_size: '10'
  200. },
  201. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  202. dataType: 'json',
  203. type: 'post',
  204. success: function(datas) {
  205. if (datas.result) {
  206. if (datas.data.msg_list.length > 0) {
  207. $.each(datas.data.msg_list, function(index, item) {
  208. var _html = '';
  209. _html += '<div class="msg-cent-list is_read" msgid="'+ item.id +'" keyid="' + item.order_id + '"><ul><li><img src="' + siteurl + "uploads/home/store/goods/" + item.goods_image.substr(0, item.goods_image.indexOf("\_")) + "/" + item.goods_image + '"/></li>';
  210. _html += '<li class="msg-cent-right"><div class="msg-cent-right-title">' + item.status + '</div>';
  211. _html += '<div class="h2"></div>';
  212. _html += '<div class="msg-cent-right-dtl">' + item.content + '</div><div class="h2"></div>';
  213. _html += '<div style="font-size: 0.24rem">订单号:' + item.order_sn + ' <span class="msg-time">' + item.add_time + '</span></div></li><li class="check_li"><img class="check-btn mask-hidden" src="../../image/checkun.png"/></li>';
  214. _html += '</ul></div><div class="back-h10"></div>';
  215. $(".msg-list").append(_html);
  216. });
  217. // _minid = datas[datas.length - 1].id;
  218. _page++;
  219. $(".data-null").addClass("mask-hidden");
  220. } else {
  221. lastpage = true;
  222. if ( _page == 1 ) {
  223. $(".data-null").removeClass("mask-hidden");
  224. }
  225. }
  226. } else {
  227. errcode(datas, datas.code);
  228. }
  229. function_name();
  230. // push_msg_status();
  231. }
  232. });
  233. }
  234. function push_msg_status (){
  235. api.execScript({
  236. name: 'frame0',
  237. script: 'getmsgtotal();'
  238. })
  239. }
  240. $(".msg-list").on("tap", ".msg-cent-list", function() {
  241. if (isEdit) {
  242. if ($(this).find(".check-btn").attr("src") == "../../image/checkun.png") {
  243. $(this).find(".check-btn").attr("src", "../../image/checked.png");
  244. // $(".check-btn").attr("src", "../../image/checked.png");
  245. } else {
  246. $(this).find(".check-btn").attr("src", "../../image/checkun.png");
  247. // $(".check-btn").attr("src", "../../image/checkun.png");
  248. }
  249. getcheckall();
  250. return false;
  251. }
  252. var _keyid = $(this).attr("keyid");
  253. api.openWin({
  254. name: 'orderdtl',
  255. url: '../order/orderdtl.html',
  256. bounces: false,
  257. pageParam: {
  258. keyid: _keyid
  259. }
  260. });
  261. return false;
  262. })
  263. var isEdit = false;
  264. $(".more-btn").on("tap", function() {
  265. if (!isEdit) {
  266. $(".more-btn").html("取消");
  267. $(".m-bottom").addClass("mask-hidden");
  268. $(".buy-btn").removeClass("mask-hidden");
  269. $(".check-btn").removeClass("mask-hidden");
  270. $(".weui-swiped-btn_warn").addClass("mask-hidden");
  271. isEdit = true;
  272. } else {
  273. $(".more-btn").html("管理");;
  274. $(".m-bottom").removeClass("mask-hidden");
  275. $(".buy-btn").addClass("mask-hidden");
  276. $(".check-btn").addClass("mask-hidden");
  277. $(".weui-swiped-btn_warn").removeClass("mask-hidden");
  278. isEdit = false;
  279. }
  280. getcheckall();
  281. return false;
  282. })
  283. $(".check-all").on("tap", function() {
  284. if ($(this).attr("src") == "../../image/checkun.png") {
  285. $(this).attr("src", "../../image/checked.png");
  286. $(".check-btn").attr("src", "../../image/checked.png");
  287. } else {
  288. $(this).attr("src", "../../image/checkun.png");
  289. $(".check-btn").attr("src", "../../image/checkun.png");
  290. }
  291. getcheckall();
  292. return false;
  293. })
  294. $(".buy-btn-left").on("tap", function() {
  295. if ($(this).find(".check-all").attr("src") == "../../image/checkun.png") {
  296. $(this).find(".check-all").attr("src", "../../image/checked.png");
  297. $(".check-btn").attr("src", "../../image/checked.png");
  298. } else {
  299. $(this).find(".check-all").attr("src", "../../image/checkun.png");
  300. $(".check-btn").attr("src", "../../image/checkun.png");
  301. }
  302. getcheckall();
  303. return false;
  304. })
  305. function getcheckall() {
  306. var no = $(".msg-list .msg-cent-list").length;
  307. var nox = $(".msg-list [src$='checkun.png']").length;
  308. var noc = $(".msg-list [src$='checked.png']").length;
  309. console.log(no,nox,noc)
  310. if (no == noc) {
  311. $(".check-all").attr("src", "../../image/checked.png");
  312. } else {
  313. $(".check-all").attr("src", "../../image/checkun.png");
  314. }
  315. }
  316. function btn_warn() {
  317. var _keyid = [];
  318. $(".msg-list [src$='checked.png']").each(function() {
  319. _keyid.push($(this).parent().parent().parent().attr("msgid"));
  320. });
  321. $.ajax({
  322. url: siteurl + 'v1/order/drop_msg',
  323. data: {
  324. ids: _keyid.toString()
  325. },
  326. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  327. dataType: 'json',
  328. type: 'post',
  329. success: function(datas) {
  330. if (datas.result) {
  331. if (datas.code == 1000) {
  332. $(".msg-list [src$='checked.png']").parent().parent().parent().remove();
  333. }
  334. } else {
  335. errcode(datas, datas.code);
  336. }
  337. }
  338. });
  339. }
  340. function btn_primary() {
  341. // body...
  342. var _keyid = $("#iosActionsheet").attr("order_id");
  343. api.openWin({
  344. name: 'orderdtl',
  345. url: '../order/orderdtl.html',
  346. bounces: false,
  347. pageParam: {
  348. keyid: _keyid
  349. }
  350. });
  351. return false;
  352. }
  353. </script>
  354. </html>