detail.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <script src="../../../admin/index.js" door type="text/javascript" charset="utf-8"></script>
  7. <script type="text/html" id="flowerOrderStatusTpl">
  8. {{# if(d.status === 0){ }}
  9. <span style="color: #FF5722;">待付款</span>
  10. {{# } else if(d.status === 1) { }}
  11. <span style="color: #FF5722;">待处理</span>
  12. {{# } else if(d.status === 2) { }}
  13. <span>已完成</span>
  14. {{# } else if(d.status === 3) { }}
  15. <span style="color: #999;">已取消</span>
  16. {{# } }}
  17. </script>
  18. <script type="text/html" id="orderInfoTpl">
  19. <li><span>订单编号:{{d.purchaseOrderNumber || ''}}</span><span>订单状态:{{d.status==0?"待付款":(d.status==1?"待发货":(d.status==2?"待收货":(d.status==3?"已完成":(d.status==4?"已取消":""))))}}</span></li>
  20. <li><span>下单用户:{{d.name || ''}}</span><span>下单时间:{{d.createTime || ''}}</span></li>
  21. </script>
  22. <script type="text/html" id="orderInfoTpl1">
  23. <li><span>配送费:{{d.freight || ''}}</span></li>
  24. <li><span>理货费:{{d.tidyCost || ''}}</span></li>
  25. <li><span>合计:{{d.orderAmount || ''}}</span></li>
  26. </script>
  27. <script type="text/html" id="logInfoTpl">
  28. <li><span>收件人:{{d.recipient || ''}}</span><span>联系电话:{{d.recipientPhone || ''}}</span></li>
  29. <li><span>收件地址:{{d.recipientAddress || ''}}</span><!-- <span>期望到达时间:{{d.sendTime || ''}}</span> --></li>
  30. <li><span>骑手:{{d.riderName || ''}}</span></li>
  31. <li><span>骑手电话:{{d.riderPhone || ''}}</span></li>
  32. <!-- <hr> -->
  33. <!-- <li><span>物流公司:{{d.logisticsCompany || ''}}</span><span>物流单号:{{d.logisticsNumber || ''}}</span><span>发货时间:{{d.sendTime || ''}}</span></li>
  34. <li><span>物流详情:</span></li> -->
  35. </script>
  36. </head>
  37. <body>
  38. <div id="detailBox">
  39. <div class="layui-card">
  40. <div class="layui-card-header">订单信息</div>
  41. <div class="layui-card-body">
  42. <ul id="orderInfo"></ul>
  43. <table id="flowOrderTableData" lay-filter="flowOrderTableData" class="layui-table"></table>
  44. <ul id="orderInfo1"></ul>
  45. </div>
  46. </div>
  47. <!-- <div class="layui-card">
  48. <div class="layui-card-header">理货信息</div>
  49. <div class="layui-card-body">
  50. <ul>
  51. <li><span>完成理货:</span><span>订单流转状态:</span></li>
  52. </ul>
  53. </div>
  54. </div> -->
  55. <div class="layui-card">
  56. <div class="layui-card-header">配送信息</div>
  57. <div class="layui-card-body">
  58. <ul id="logInfo">
  59. <li><span>收件人:</span><span>联系电话:</span></li>
  60. <li><span>收件地址:</span><span>期望到达时间:</span></li>
  61. <hr>
  62. <li><span>物流公司:</span><span>物流单号:</span><span>发货时间:</span></li>
  63. <li><span>物流详情:</span></li>
  64. </ul>
  65. </div>
  66. </div>
  67. </div>
  68. <script type="text/javascript">
  69. layui.config({
  70. base: "../../../admin/js/layuiPlugins/"
  71. }).use(["form", 'layer', 'cascade', 'laytpl', 'upload', 'table'], function() {
  72. var form = layui.form,
  73. $ = layui.$,
  74. layer = layui.layer,
  75. laytpl = layui.laytpl,
  76. cascade = layui.cascade,
  77. table = layui.table,
  78. upload = layui.upload;
  79. var object = {
  80. id: (JSON.stringify(location.searchObj()) != "{}") ? location.searchObj().id || null : null, //带参传入ID
  81. currentData: {},
  82. urls: {
  83. byIdUrl: "orderByIdUrl"
  84. },
  85. formLayFilter: "addForm", //表单容器
  86. closeModal: function() { //关闭当前窗口
  87. parent.layer.close(parent.layer.getFrameIndex(window.name));
  88. }
  89. };
  90. //初始化
  91. object.main = function() {
  92. var _this = this;
  93. _this.getCurrent(_this.id);
  94. return this;
  95. };
  96. //获取当前信息
  97. object.getCurrent = function(id) {
  98. var _this = this;
  99. $.ajax({
  100. url: _this.urls.byIdUrl,
  101. data: {
  102. id: id || _this.id //当前ID
  103. },
  104. success: function(res) {
  105. console.log('1212', res)
  106. laytpl(orderInfoTpl.innerHTML).render(res.data[0].orderInfo, function(html) {
  107. $("#orderInfo").html(html);
  108. form.render();
  109. });
  110. laytpl(orderInfoTpl1.innerHTML).render(res.data[0].orderInfo, function(html) {
  111. $("#orderInfo1").html(html);
  112. form.render();
  113. });
  114. laytpl(logInfoTpl.innerHTML).render(res.data[0].logisticsMessage, function(html) {
  115. $("#logInfo").html(html);
  116. form.render();
  117. });
  118. _this.formVal();
  119. }
  120. });
  121. table.render({
  122. dataId: 'flowOrderTableData',
  123. elem: '#flowOrderTableData',
  124. url: 'flowOrderTableUrl?orderId=' + _this.id,
  125. page: false,
  126. cols: [
  127. [{
  128. type: 'numbers',
  129. title: '取货编号',
  130. width: 80
  131. }, {
  132. field: 'productName',
  133. title: '商品名称',
  134. align: 'center',
  135. width: 200
  136. }, {
  137. field: 'specification',
  138. title: '规格',
  139. templet:"<i>{{d.specification}}/斤装</i>",
  140. align: 'center'
  141. }, {
  142. field: 'amount',
  143. title: '数量',
  144. align: 'center'
  145. }, {
  146. field: 'price',
  147. title: '单价(元)',
  148. align: 'center'
  149. }, {
  150. field: 'sellerName',
  151. title: '供应商',
  152. align: 'center'
  153. }, {
  154. field: 'customerNote',
  155. title: '客户备注',
  156. align: 'center'
  157. }, {
  158. field: 'status',
  159. title: '备货状态',
  160. align: 'center',
  161. templet: '#flowerOrderStatusTpl'
  162. }]
  163. ]
  164. });
  165. return this;
  166. };
  167. //表单赋值
  168. object.formVal = function() {
  169. var _this = this;
  170. form.val(this.formLayFilter, this.currentData);
  171. return this;
  172. };
  173. //合并表单内容
  174. object.fusionData = function(obj) {
  175. this.currentData = $.extend(this.currentData, obj);
  176. return this;
  177. };
  178. object.main();
  179. });
  180. </script>
  181. </body>
  182. </html>