agent_center.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>代理商中心</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link rel="stylesheet" type="text/css" href="//css.iamberry.com/tooth/css/mui.min.css?v=2017101701" />
  10. <link rel="stylesheet" type="text/css" href="//css.iamberry.com/tooth/css/iconfont.css?v=2017101701" />
  11. <link rel="stylesheet" type="text/css" href="//css.iamberry.com/tooth/css/style.css?v=2017101701" />
  12. <style>
  13. .vip-tt {position: relative;height: 130px;background-color: #4bb1d1;}
  14. .tx{background-color: #86d6f1;}
  15. .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {font-size: 15px;line-height: 15px;display: inline-block;width: auto;height: 34px;margin-top:2px;text-overflow: ellipsis;color: #333;text-align: left;}
  16. .my-chart-bar {background: #fff;border: 0;height: 50px;margin-bottom: 1px;border-top:1px solid rgba(0,0,0,.1);border-bottom: 1px solid rgba(0,0,0,.1);}
  17. .my-chart-bar .mui-control-item {color: #444;font-weight: 500;border-left: 0;line-height: 50px;font-size: 15px;position: relative;}
  18. .my-chart-bar .mui-control-item.mui-active {color: #55c0dc;background-color: #fff;}
  19. .my-chart-bar .mui-control-item.mui-active:after{content: '';position: absolute;bottom: 0;left: 50%;width: 3.5em;height: 2px;background-color: #55c0dc;-webkit-transform: translateX(-50%);}
  20. .mui-control-content {background: #fff;padding: 10px 0;}
  21. .my-tab-view3:after {height: 0;}
  22. .my-tab-view3 li {padding: 10px 10px 0 10px;}
  23. .mui-table-view.mui-grid-view .fenxiao_wm2,.mui-table-view.mui-grid-view .fenxiao_share,#iwant_dinghuo,#dinghuo_log{display:none;}
  24. .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{position: relative;}
  25. .my-cell {float: left;margin-top: 10px;}
  26. .my-btn{background-color: transparent;border: 1px solid #fff;color: #fff;box-shadow: 0 0 0 #fff;padding: 6px 18px;}
  27. .my-btn:active{background-color: transparent !important;}
  28. s{margin-left: 15px;}
  29. .mui-table-view .mui-media-object { line-height: 52px; max-width: 52px; height: 52px; }
  30. .mui-media-body{line-height: 28px;}
  31. .mui-table-view:after,.mui-table-view:before,.mui-table-view .mui-table-view-cell:after{display: none;}
  32. .mui-table-view .my-tab-view-cell{position: relative;}
  33. .mui-table-view .my-tab-view-cell:before{content: '';position: absolute;left: 15px;top: 0;right: 15px;width: auto;height: 1px;background-color: rgba(0,0,0,.1);}
  34. .mui-table-view .my-tab-view-cell:after{content: '';position: absolute;left: 15px;bottom: 0;right: 15px;width: auto;height: 1px;background-color: rgba(0,0,0,.2);display: block;}
  35. .icon-dingwei{color:#ff4d4d !important;}
  36. .btn-pay{background-color: #54c0dc !important;border-radius: 0 !important;color: #fff !important;border: 0;padding: 6px 20px;}
  37. .my-tab-view-pull>li{margin-bottom: 10px;}
  38. </style>
  39. <script>
  40. // 屏蔽分享
  41. window.hiddenAllWechatMenu = true;
  42. </script>
  43. </head>
  44. <body>
  45. <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
  46. <div class="mui-scroll">
  47. <div class="vip-tt">
  48. <div class="tx bg-orange fenxiao_info" id="headDiv">
  49. <!--<img class="wechat_tx" src="images/image-12.jpg">-->
  50. </div>
  51. <div class="nikname">
  52. <div class="wechat_name" style="position: relative;"></div>
  53. <div id="userNickname">姓名</div>
  54. <div id="agentTel">13800138000</span>
  55. </div>
  56. </div>
  57. <span style="position: absolute;top: 50%;right:10px;-webkit-transform: translateY(-50%);"><button type="button" class="my-btn go-purchasing">去采购</button></span>
  58. </div>
  59. <div style="padding:15px 10px;background-color: #fff;">
  60. 采购记录
  61. </div>
  62. <div id="tabbar-chart-bar" class="mui-segmented-control my-chart-bar">
  63. <a class="mui-control-item item1 mui-active">
  64. 待支付
  65. </a>
  66. <a class="mui-control-item item2">
  67. 待发货
  68. </a>
  69. <a class="mui-control-item item5">
  70. 已发货
  71. </a>
  72. </div>
  73. <ul class="my-tab-view-pull">
  74. <!--<li>
  75. <ul class="mui-table-view">
  76. <li class="mui-table-view-cell mui-media">
  77. <a href="javascript:;">
  78. <img class="mui-media-object mui-pull-left" src="images/cp-1.jpg">
  79. <div class="mui-media-body">
  80. 水时代上朵电动牙刷<span class="mui-pull-right">黑色 X10</span>
  81. <p>¥100<s>原价:¥198</s><span class="mui-pull-right cl-red">小计:¥1000</span></p>
  82. </div>
  83. </a>
  84. </li>
  85. <li class="mui-table-view-cell mui-media">
  86. <a href="javascript:;">
  87. <img class="mui-media-object mui-pull-left" src="images/cp-1.jpg">
  88. <div class="mui-media-body">
  89. 水时代上朵电动牙刷<span class="mui-pull-right">黑色 X10</span>
  90. <p>¥100<s>原价:¥198</s><span class="mui-pull-right cl-red">小计:¥1000</span></p>
  91. </div>
  92. </a>
  93. </li>
  94. <li class="mui-table-view-cell my-tab-view-cell">
  95. <a class="mui-navigate-right"><span class="iconfont icon-dingwei" style="color:#ff4d4d;font-size: 20px;margin-right: 5px;"></span>收货信息:罗文文 159****9999</a>
  96. </li>
  97. <li class="mui-table-view-cell">
  98. <input type="text" class="mui-text-center" value="请尽快发货,着急使用" style="font-size: 14px;margin-bottom: 0;"/>
  99. </li>
  100. <li class="mui-table-view-cell">
  101. 共计12件产品<span class="mui-pull-right cl-red">总计:¥1200</span>
  102. </li>
  103. <li class="mui-table-view-cell mui-text-center">
  104. <button type="button" class="btn-pay">立即支付</button>
  105. </li>
  106. </ul>
  107. </li>
  108. <li>
  109. <ul class="mui-table-view">
  110. <li class="mui-table-view-cell mui-media">
  111. <a href="javascript:;">
  112. <img class="mui-media-object mui-pull-left" src="images/cp-1.jpg">
  113. <div class="mui-media-body">
  114. 水时代上朵电动牙刷<span class="mui-pull-right">黑色 X10</span>
  115. <p>¥100<s>原价:¥198</s><span class="mui-pull-right cl-red">小计:¥1000</span></p>
  116. </div>
  117. </a>
  118. </li>
  119. <li class="mui-table-view-cell mui-media">
  120. <a href="javascript:;">
  121. <img class="mui-media-object mui-pull-left" src="images/cp-1.jpg">
  122. <div class="mui-media-body">
  123. 水时代上朵电动牙刷<span class="mui-pull-right">黑色 X10</span>
  124. <p>¥100<s>原价:¥198</s><span class="mui-pull-right cl-red">小计:¥1000</span></p>
  125. </div>
  126. </a>
  127. </li>
  128. <li class="mui-table-view-cell my-tab-view-cell">
  129. <a class="mui-navigate-right"><span class="iconfont icon-dingwei" style="color:#ff4d4d;font-size: 20px;margin-right: 5px;"></span>收货信息:罗文文 159****9999</a>
  130. </li>
  131. <li class="mui-table-view-cell">
  132. <input type="text" class="mui-text-center" value="请尽快发货,着急使用" style="font-size: 14px;margin-bottom: 0;"/>
  133. </li>
  134. <li class="mui-table-view-cell">
  135. 共计12件产品<span class="mui-pull-right cl-red">总计:¥1200</span>
  136. </li>
  137. <li class="mui-table-view-cell mui-text-center">
  138. <button type="button" class="btn-pay">查看物流</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn-pay">再次购买</button>
  139. </li>
  140. </ul>
  141. </li>-->
  142. </ul>
  143. </div>
  144. </div>
  145. <script src="//s.iamberry.com/tooth/js/mui.min.js?v=2017101701"></script>
  146. <script src="//s.iamberry.com/tooth/js/jquery-2.1.1.min.js"></script>
  147. <script src="//s.iamberry.com/tooth/js/shop/main.js?v=2017101701"></script>
  148. <script src="//s.iamberry.com/tooth/js/shop/wechat-utils-1.0.js"></script>
  149. <script>
  150. var pageNumber = 0,pagesize = 10,tabindex='1',onece=0;
  151. mui.init({
  152. pullRefresh: {
  153. container: '#pullrefresh',
  154. down: {
  155. // callback: pulldownRefresh
  156. },
  157. up: {
  158. contentrefresh: '正在加载...',
  159. callback: pullupRefresh
  160. }
  161. }
  162. });
  163. /**
  164. * 上拉加载具体业务实现
  165. */
  166. function pullupRefresh() {
  167. ++pageNumber;
  168. $.ajax(base_path + '/agentOrder/select_agent_order_list?dates=' + new Date().getTime(), {
  169. data: {
  170. "pageNO": pageNumber,
  171. "pageSize": pagesize,
  172. "status":tabindex
  173. },
  174. dataType: 'json',
  175. xhrFields: {
  176. withCredentials: true
  177. },
  178. crossDomain: true,
  179. type: 'post',
  180. timeout: 15000,
  181. success: function(dt) {
  182. console.log(dt);
  183. if(dt.isRedirect) {
  184. location.href = dt.redirectURL;
  185. }else{
  186. if(dt.resultCode=="200"){
  187. if(onece==0){
  188. $("#headDiv").html('<img class="wechat_tx" src="'+dt.data.agent.agentHead+'">');
  189. $("#userNickname").text(decodeURI(dt.data.agent.agentName));
  190. $("#agentTel").text(dt.data.agent.agentTel);
  191. onece=1;
  192. }
  193. var table = document.body.querySelector('.my-tab-view-pull');
  194. //参数为true代表没有更多数据了。
  195. var data=dt.data.agentOrderList;
  196. mui('#pullrefresh').pullRefresh().endPullupToRefresh(data.length < pagesize);
  197. mui(data).each(function(index){
  198. var th=this;
  199. var li = document.createElement('li');
  200. var str='',liuyan='',allcount=0;
  201. mui(th.itemList).each(function(e){
  202. str+='<li class="mui-table-view-cell mui-media"><a><img class="mui-media-object mui-pull-left" src="'+this.itemProductPic+'"><div class="mui-media-body">'+this.itemProductName+'<span class="mui-pull-right">'+this.itemColorName+' X '+this.itemNum+'</span><p>¥'+accDiv(this.itemProductDiscount,100)+'<s>原价:¥'+accDiv(this.itemProductPrice,100)+'</s><span class="mui-pull-right cl-red">小计:¥'+accDiv(this.itemTotal,100)+'</span></p></div></a></li>';
  203. allcount+=this.itemNum;
  204. });
  205. var zhidu='';
  206. //if(th.agentStatus!=1){
  207. zhidu='readonly="readonly"';
  208. //}
  209. liuyan='<li class="mui-table-view-cell"><input type="text" class="mui-text-center mui-input-clear" placeholder="填写订单备注" value="'+th.agentAdminRemark+'" style="font-size: 14px;margin-bottom: 0;" '+zhidu+'></li>';
  210. li.innerHTML='<ul class="mui-table-view">'+str+'<li class="mui-table-view-cell my-tab-view-cell"><a class="mui-navigate-right"><span class="iconfont icon-dingwei" style="color:#ff4d4d;font-size: 20px;margin-right: 5px;"></span>收货信息:'+th.agentAddressName+th.agentAddressTel+'</a></li>'+liuyan+'<li class="mui-table-view-cell">共计'+allcount+'件产品<span class="mui-pull-right cl-red">总计:¥'+accDiv(th.agentYetAmount,100)+'</span></li></ul>';
  211. table.appendChild(li);
  212. });
  213. }else{
  214. mui.alert("获取数据失败!");
  215. }
  216. }
  217. },
  218. error: function(xhr, type, errorThrown) {
  219. console.log(xhr);
  220. mui.alert("获取数据失败,请检查网络或稍后重试!");
  221. }
  222. });
  223. }
  224. mui.ready(function() {
  225. tabindex = getParam("tabindex");
  226. tabindex == null ? tabindex = 1 : tabindex;
  227. $("#tabbar-chart-bar .mui-control-item").removeClass('mui-active');
  228. $("#tabbar-chart-bar .item"+tabindex).addClass("mui-active");
  229. mui('#pullrefresh').pullRefresh().pullupLoading();
  230. });
  231. mui.each(document.querySelectorAll('#tabbar-chart-bar .mui-control-item'), function(index, el) {
  232. el.addEventListener('tap', function() {
  233. pageNumber = 0;
  234. switch(index) {
  235. case 0:
  236. tabindex = 1;
  237. break;
  238. case 1:
  239. tabindex = 2;
  240. break;
  241. case 2:
  242. tabindex = 5;
  243. break;
  244. default:
  245. tabindex = 1;
  246. break;
  247. }
  248. $('.my-tab-view-pull').empty();
  249. mui('#pullrefresh').pullRefresh().refresh(true);
  250. mui('#pullrefresh').pullRefresh().pullupLoading();
  251. mui('#pullrefresh').scroll().scrollTo(0,0,10);//10毫秒滚动到顶
  252. }, false);
  253. });
  254. mui('body').on('tap','.go-purchasing',function() {
  255. mui.openWindow({
  256. url: '/tooth/view/agent_tooth/purchasing_products.html'
  257. })
  258. });
  259. </script>
  260. </body>
  261. </html>