custome_detail.ftl 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="renderer" content="webkit|ie-comp|ie-stand">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  8. <meta http-equiv="Cache-Control" content="no-siteapp" />
  9. <#include "/base/add_base.ftl">
  10. <link href="${path}/common/lib/jquery.ui/jquery-ui.css" rel="stylesheet" type="text/css"/>
  11. <link href="${path}/common/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css"/>
  12. <link href="${path}/common/lib/icheck/icheck.css" rel="stylesheet" type="text/css"/>
  13. <style>
  14. .tit{position: relative;text-align: left;font-size: 16px;padding-left: 10px;}
  15. .tit:after{content: '';position: absolute;left: 0;top: 20%;height: 60%;width: 3px;background-color: #32a3d8;}
  16. .tit-2{position: relative;text-align: left;font-size: 16px;padding-left: 10px;}
  17. .tit-2:after{content: '';position: absolute;left: 0;top: 20%;height: 60%;width: 3px;background-color: #32a3d8;}
  18. #province select{margin-right:10px; width:100px;height: 31px;-webkit-appearance:none !important;appearance:none;background: url(${path}/common/images/cm/select-1.png) right center no-repeat;background-size: auto 100%;padding-left:3px;padding-right: 25px;}
  19. #suggest, #suggest2 {width:200px}
  20. .gray {color:gray}
  21. .ac_results {background:#fff;border:1px solid #7f9db9;position: absolute;z-index: 10000;display: none}
  22. .ac_results li a {white-space: nowrap;text-decoration:none;display:block;color:#05a;padding:1px 3px}
  23. .ac_results li {border:1px solid #fff}
  24. .ac_over, .ac_results li a:hover {background:#c8e3fc}
  25. .ac_results li a span {float:right}
  26. .ac_result_tip {border-bottom:1px dashed #666;padding:3px}
  27. .select-box{background: url(${path}/common/images/cm/select-1.png) right center no-repeat;background-size: auto 100%;}
  28. .select-box select{-webkit-appearance:none !important;background-color: transparent; appearance:none;padding-right: 25px;}
  29. .dalog-ask{position: absolute;left:60%;top:0;-webkit-transform: translateY(-30%);transform: translateY(-30%);display: none;background-color: #fff;z-index: 10;}
  30. .tag{ width:300px; min-height:300px; border:1px solid #32a3d8; position:relative;background-color: #fff;line-height: 1.5;padding: 10px 12px;}
  31. .tag em{display:block; border-width:15px; position:absolute; top:30%; left:-30px;border-style:solid dashed dashed; border-color:transparent #32a3d8 transparent transparent;font-size:0; line-height:0;}
  32. .dalog-ask .ask{color: #000;margin: 10px 0 5px 0;}
  33. .dalog-ask .answer{color: #666;margin-bottom: 10px;}
  34. .dalog-ask .answer:hover{color: #32a3d8;cursor: pointer;}
  35. .time-line-list{list-style: none;width: 100%;margin-left: -20px;}
  36. .time-line-list>li{position: relative;float: left; text-align: center;width: 100px;overflow: hidden;white-space: nowrap;word-break: break-all;padding: 2px 0;}
  37. .time-line-list .number{display: inline-block; padding: 2px; background: #32a3d8;border: 2px solid #fff;box-shadow:0 0 0 1px #32a3d8;width: 20px;height: 20px;color: #fff;line-height: 20px;border-radius: 50%;}
  38. .time-line-list .red{display: inline-block; padding: 2px; background: red;border: 2px solid #fff;box-shadow:0 0 0 1px #32a3d8;width: 20px;height: 20px;color: #fff;line-height: 20px;border-radius: 50%;}
  39. .time-line-list>li:before{content:'';position: absolute;height: 1px;width: 30%;right:0;top: 15px; background-color: #32a3d8;}
  40. .time-line-list>li:after{content: '';position: absolute;height: 1px;width: 30%;left: 0;top: 15px;background:#32a3d8;}
  41. .time-line-list>li:first-child:after,.time-line-list>li:last-child:before{display: none;}
  42. .time-line-list .arrow{border-width:7px; position:absolute; left:25%; top:9px;border-style:solid dashed dashed; border-color:transparent transparent transparent #32a3d8;font-size:0; line-height:0;}
  43. .time-line-list>li:first-child .arrow{display: none;}
  44. .table-bg th{background-color: #e2f6ff;}
  45. .update-parts>span{margin-right: 10px;padding: 3px 4px;background-color: #effaff;border: 1px solid #32a3d8;}
  46. .my-search-input{padding-left: 30px;background: url(${path}/common/images/cm/search.png) 6px center no-repeat;background-size: auto 60%; }
  47. .txt-red{color:red}
  48. </style>
  49. <title>客诉基本信息</title>
  50. </head>
  51. <body>
  52. <article class="cl pd-20">
  53. <form action="" method="post" class="form form-horizontal" id="form-article-add">
  54. <div class="row cl">
  55. <label class="form-label col-3">
  56. <div class="tit-2">客诉基本信息</div>
  57. </label>
  58. <div class="formControls col-9">
  59. </div>
  60. </div>
  61. <div class="row cl">
  62. <label class="form-label col-1 col-sm-1">跟进客服:</label>
  63. <div class="formControls col-4 col-sm-4">
  64. <label id="adminName"></label>
  65. </div>
  66. <label class="form-label col-1 col-sm-1">来源入口:</label>
  67. <div class="formControls col-4 col-sm-4">
  68. <label id="customerSourceType"></label>
  69. </div>
  70. </div>
  71. <div class="row cl">
  72. <label class="form-label col-1 col-sm-1">咨询类型:</label>
  73. <div class="formControls col-4 col-sm-4">
  74. <label id="customerCounselType"></label>
  75. </div>
  76. <label class="form-label col-1 col-sm-1">产品类别:</label>
  77. <div class="formControls col-4 col-sm-4">
  78. <label id="typeName"></label>
  79. </div>
  80. </div>
  81. <div class="row cl" style="position: relative;">
  82. <label class="form-label col-1 col-sm-1">客诉问题:</label>
  83. <div class="formControls col-4 col-sm-4">
  84. <label id="describeTitle"></label>
  85. </div>
  86. </div>
  87. <div class="row cl">
  88. <label class="form-label col-1 col-sm-1">回复内容:</label>
  89. <div class="formControls col-5 col-sm-5">
  90. <label id="questionProfile"></label>
  91. </div>
  92. </div>
  93. <div class="row cl">
  94. <label class="form-label col-1 col-sm-1">用户信息:</label>
  95. <div class="formControls col-5 col-sm-5">
  96. <label id="customerName"></label>
  97. <label id="customerTel"></label>
  98. </div>
  99. </div>
  100. <div class="row cl">
  101. <label class="form-label col-3">
  102. <div class="tit-2">处理结果(<label id="customerIsSolve" style="color: red"></label>)</div>
  103. </label>
  104. <div class="formControls col-10 col-sm-10">
  105. </div>
  106. </div>
  107. <div id="div_costomer" style="display: none;">
  108. <div class="row cl">
  109. <label class="form-label col-1 col-sm-1"></label>
  110. <div class="formControls col-10 col-sm-10">
  111. <ul class="time-line-list">
  112. <!--<li id="li-1"><span class="arrow"></span><div id="number-1" class="number">1</div><div id="txt-1">录入客诉</div></li>
  113. <li id="li-2"><span class="arrow"></span><div id="number-2" class="number">2</div><div id="txt-2">督促用户寄回</div></li>
  114. <li id="li-3"><span class="arrow"></span><div id="number-3" class="number">3</div><div id="txt-3">录入快递单号</div></li>
  115. <li id="li-4"><span class="arrow"></span><div id="number-4" class="number">4</div><div id="txt-4">仓库收货</div></li>
  116. <li id="li-5"><span class="arrow"></span><div id="number-5" class="number">5</div><div id="txt-5">换新发货</div></li>
  117. <li id="li-6"><span class="arrow"></span><div id="number-6" class="number">6</div><div id="txt-6">发货通知用户</div></li>
  118. <li id="li-7"><span class="arrow"></span><div id="number-7" class="number">7</div><div id="txt-7">收货后回访</div></li>-->
  119. </ul>
  120. </div>
  121. </div>
  122. <div class="row cl">
  123. <label class="form-label col-1 col-sm-1">订单信息</label>
  124. <div class="formControls col-7 col-sm-7 text-c">
  125. <table class="table table-border table-bg table-bordered">
  126. <tr>
  127. <th>销售</th>
  128. <th>订单号</th>
  129. <th>姓名</th>
  130. <th>电话</th>
  131. <th>订单金额</th>
  132. <th>购买产品</th>
  133. <th>购买日期</th>
  134. </tr>
  135. <tr>
  136. <td id="companyName"></td>
  137. <td id="salesOrderId"></td>
  138. <td id="salesAddressName"></td>
  139. <td id="salesAddressTel"></td>
  140. <td id="salesPayMoney"></td>
  141. <td id="salesItem"></td>
  142. <td id="salesPayTime"></td>
  143. </tr>
  144. </table>
  145. </div>
  146. </div>
  147. <div class="row cl" id="divCloseProdcue">
  148. <label class="form-label col-1 col-sm-1">寄回产品:</label>
  149. <div class="formControls col-7 col-sm-7">
  150. <div class="update-parts" id="closeprodcue"></div><br/>
  151. <!--TDS收集-->
  152. <label id="customerTDS"></label>
  153. <div style="border-bottom:#ddd 1px solid; overflow:hidden"></div>
  154. </div>
  155. </div>
  156. <div class="row cl">
  157. <label class="form-label col-1 col-sm-1">收货地址:</label>
  158. <div class="formControls col-5 col-sm-5">
  159. <label id="relationSendMergeAddress"></label>
  160. </div>
  161. </div>
  162. <div class="row cl" id="divSendProdcue">
  163. <label class="form-label col-1 col-sm-1">寄送产品:</label>
  164. <div class="formControls col-7 col-sm-7">
  165. <div class="update-parts" id="sendprodcue"></div>
  166. </div>
  167. </div>
  168. </div>
  169. <div class="row cl">
  170. <label class="form-label col-1 col-sm-1">处理描述:</label>
  171. <div class="formControls col-7 col-sm-7" id="describeHandleDesc" style="border: 1px solid #ddd;">
  172. </div>
  173. </div>
  174. <div class="row cl">
  175. <label class="form-label col-1 col-sm-1">回访信息:</label>
  176. <div class="formControls col-7 col-sm-7">
  177. <label id="txtVisit"></label>
  178. </div>
  179. </div>
  180. </form>
  181. </div>
  182. </article>
  183. <script type="text/javascript" src="${path}/common/lib/My97DatePicker/4.8/WdatePicker.js"></script>
  184. <script type="text/javascript" src="${path}/common/lib/webuploader/0.1.5/webuploader.min.js"></script>
  185. <script type="text/javascript" src="${path}/common/lib/icheck/jquery.icheck.min.js"></script>
  186. <script type="text/javascript" src="${path}/common/lib/cm.lib/jquery.provincesCity.js"></script>
  187. <script type="text/javascript" src="${path}/common/lib/cm.lib/provincesData.js"></script>
  188. <script type="text/javascript" src="${path}/common/lib/cm.lib/airCity.js"></script>
  189. <script type="text/javascript" src="${path}/common/lib/cm.lib/suggest.js"></script>
  190. <script type="text/javascript" charset="utf-8" src="${path}/common/lib/ueditor/1.4.3/ueditor.config.js"></script>
  191. <script type="text/javascript" charset="utf-8" src="${path}/common/lib/ueditor/1.4.3/ueditor.all.js"></script>
  192. <script type="text/javascript" charset="utf-8" src="${path}/common/lib/ueditor/1.4.3/ueditor.parse.js"></script>
  193. <script type="text/javascript" charset="utf-8" src="${path}/common/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
  194. <script type="text/javascript">
  195. $(function(){
  196. $('.skin-minimal input').iCheck({
  197. checkboxClass: 'icheckbox-blue',
  198. radioClass: 'iradio-blue',
  199. increaseArea: '20%'
  200. });
  201. $("#province").ProvinceCity();
  202. $('.skin-minimal input').iCheck({
  203. checkboxClass: 'icheckbox-blue',
  204. radioClass: 'iradio-blue',
  205. increaseArea: '20%'
  206. });
  207. $("#arrcity").suggest(citys,{hot_list:commoncitys,dataContainer:'#arrcity_3word',onSelect:function(result){
  208. console.log($(this)[0].value);
  209. // $("#city2").click()
  210. },
  211. attachObject:'#suggest'
  212. });
  213. //$("#city2").suggest(citys,{hot_list:commoncitys,attachObject:"#suggest2"})
  214. getCustomerInfo();
  215. });
  216. var sendprodcue = '';
  217. var sendprodcueshow = false; //寄送产品
  218. var closeprodcue = '';
  219. var closeprodcueshow = false; //寄回产品
  220. /**
  221. * 查询客诉基本信息
  222. */
  223. function getCustomerInfo() {
  224. $.ajax({
  225. cache: true,
  226. type: "POST",
  227. data: {"customerId":${customerId!''}},
  228. url: "${path}/admin/customer/get_customer_info",
  229. async: false,
  230. success: function(data){
  231. if (data.returnCode == 200) {
  232. console.log(data.returnMsg);
  233. var customer = data.returnMsg.customer;
  234. var customerCommon = data.returnMsg.customerCommon;
  235. var salesOrder = data.returnMsg.salesOrder;
  236. if (customer.customerIsSolve != 1 && customer.customerIsSolve != 2) {
  237. resultshow(customer.customerIsSolve, customerCommon.relationBackStatus,customerCommon.relationSendStatus,
  238. customerCommon.maintenanceIsRepair,customerCommon.detectState);
  239. }
  240. $('#adminName').html(customer.adminName);
  241. var customerSource = '';
  242. switch (customer.customerSourceType) {
  243. case 1:customerSource = '400电话';break;
  244. case 2:customerSource = '微信公众号';break;
  245. case 3:customerSource = customer.customerSource;break;
  246. }
  247. $('#customerSourceType').html(customerSource);
  248. var customerCounsel = '';
  249. switch (customer.customerCounselType) {
  250. case 1:customerCounsel = '售前咨询';break;
  251. case 2:customerCounsel = '售后咨询';break;
  252. case 3:customerCounsel = '其他';break;
  253. }
  254. $('#customerCounselType').html(customerCounsel);
  255. $('#typeName').html(customer.typeName);
  256. $('#describeTitle').html(customer.describeTitle);
  257. $('#questionProfile').html(customer.questionProfile);
  258. $('#customerName').html(customer.customerName);
  259. $('#customerTel').html(customer.customerTel);
  260. var txtcustomerIsSolve = '';
  261. switch (customer.customerIsSolve) {
  262. case 1:txtcustomerIsSolve = '已解决';break;
  263. case 2:txtcustomerIsSolve = '未解决';break;
  264. case 3:txtcustomerIsSolve = '换新';break;
  265. case 4:txtcustomerIsSolve = '维修';break;
  266. case 5:txtcustomerIsSolve = '补发';break;
  267. case 6:txtcustomerIsSolve = '退货';break;
  268. case 7:txtcustomerIsSolve = '无理由退货';break;
  269. }
  270. $('#customerIsSolve').html(txtcustomerIsSolve);
  271. $('#companyName').html(convertUndefinedToEmpty(customer.companyName)+"-"+convertUndefinedToEmpty(customer.storeName));
  272. $('#salesOrderId').html(salesOrder.salesOrderId);
  273. $('#salesAddressName').html(salesOrder.salesAddressName);
  274. $('#salesAddressTel').html(salesOrder.salesAddressTel);
  275. $('#salesPayMoney').html('¥'+salesOrder.salesPayMoney/100);
  276. var salesItem = '';
  277. $.each(salesOrder.salesOrderItemList,function(index,item){
  278. salesItem = this.itemProductName + '*' + this.itemNum
  279. })
  280. $('#salesItem').html(salesItem);
  281. $('#salesPayTime').html(salesOrder.salesPayTime);
  282. $('#relationSendMergeAddress').html(customerCommon.relationSendMergeAddress+"-"+customerCommon.relationSendAddress);
  283. $('#describeHandleDesc').html(customer.describeHandleDesc);
  284. if (customerCommon.sendProdcues != null && customerCommon.sendProdcues.length > 0) {
  285. $.each(customerCommon.sendProdcues,function(index,item){
  286. sendprodcue += '<span style="margin-bottom: 10px;display: inline-block;float: left;">' + this.sendProduceName + '*' + this.sendProdcueNumber + '</span>';
  287. })
  288. }
  289. if (customerCommon.sendFittings != null && customerCommon.sendFittings.length > 0) {
  290. $.each(customerCommon.sendFittings,function(index,item){
  291. sendprodcue += '<span style="margin-bottom: 10px;display: inline-block;float: left;">' + this.sendProductName + '*' + this.sendFittingNumber + '</span>';
  292. })
  293. }
  294. if (customerCommon.closedProdcues != null && customerCommon.closedProdcues.length > 0) {
  295. $.each(customerCommon.closedProdcues,function(index,item){
  296. closeprodcue += '<span style="margin-bottom: 10px;display: inline-block;float: left;">' + this.closedProductName + '*' + this.closedProdcueNumber + '</span>';
  297. })
  298. }
  299. if (customerCommon.closedFittings != null && customerCommon.closedFittings.length > 0) {
  300. $.each(customerCommon.closedFittings,function(index,item){
  301. closeprodcue += '<span style="margin-bottom: 10px;display: inline-block;float: left;">' + this.fittingName + '*' + this.closedFittingNumber + '</span>';
  302. })
  303. }
  304. $('#sendprodcue').html(sendprodcue+"<br/>");
  305. $('#closeprodcue').html(closeprodcue+"<br/>");
  306. if (sendprodcueshow) {
  307. $('#divSendProdcue').show();
  308. } else {
  309. $('#divSendProdcue').hide();
  310. }
  311. if (closeprodcueshow) {
  312. $('#divCloseProdcue').show();
  313. } else {
  314. $('#divCloseProdcue').hide();
  315. }
  316. $('#customerTDS').html("<strong>TDS收集:</strong>"+customerCommon.relationSendMergeAddress+",进水"+
  317. (customer.customerInTDS==undefined?0:customer.customerInTDS)+"ppm"+",出水"+(customer.customerOutTDS==undefined?0:customer.customerOutTDS)+"ppm");
  318. if (customer.customerIsVisit == '2') {
  319. var visitTime = '';
  320. switch (customer.visitTimeSelect) {
  321. case 1:visitTime = '9:00-12:00';break;
  322. case 2:visitTime = '12:00-14:00';break;
  323. case 3:visitTime = '14:00-18:00';break;
  324. }
  325. var visitText = '(<span class="txt-red">'+convertUndefinedToEmpty(customer.visitName)+'</span>)&nbsp;&nbsp;'+
  326. '在&nbsp;&nbsp;<span class="txt-red">'+convertUndefinedToEmpty(customer.visitDate)+
  327. '&nbsp;&nbsp;'+convertUndefinedToEmpty(visitTime)+'</span>对&nbsp;&nbsp;<span class="txt-red">'+
  328. convertUndefinedToEmpty(customer.visitCompleteName)+'&nbsp;&nbsp;'+
  329. convertUndefinedToEmpty(customer.visitCompleteTel)+'</span>&nbsp;&nbsp;完成回访';
  330. $('#txtVisit').html(visitText);
  331. }
  332. }
  333. },
  334. error: function(XmlHttpRequest, textStatus, errorThrown){
  335. }
  336. });
  337. }
  338. /*处理结果的执行状态*/
  339. var isSolve = {
  340. solved : [],
  341. noSolved : [],
  342. renewed : ["录入客诉","督促用户寄回","录入快递单号","仓库收货","换新发货","发货通知用户","收货后回访"],
  343. maintain : ["录入客诉","督促用户寄回","录入快递单号","仓库收货","品质检测","产线维修","换新发货","发货通知用户","收货后回访"],
  344. reissue : ["录入客诉","生成E订单","督促仓库发货","仓库发货","发货通知用户","收货后回访"],
  345. backGoods : ["录入客诉","督促用户寄回","录入快递单号","仓库收货","品质检测","退款","退货完成"],
  346. noReasonBack : ["录入客诉","督促用户寄回","录入快递单号","仓库收货","品质检测","退款","退货完成"]
  347. }
  348. /*
  349. * 按条件展示步骤的对应颜色
  350. * backStatus:寄回状态
  351. * sendStatus:寄送状态
  352. */
  353. function resultshow(customerIsSolve, backStatus, sendStatus, maintenanceIsRepair, detectState) {
  354. var statusHtml = '<li id="div_li"><span class="arrow"></span><div id="div_number" class="number">status_index</div><div id="div_txt">status_html</div></li>';
  355. var result = [];
  356. var resultHtml = '';
  357. switch (customerIsSolve) {
  358. case 1:result = isSolve.solved;break;
  359. case 2:result = isSolve.noSolved;break;
  360. case 3:
  361. result = isSolve.renewed;
  362. $('#div_costomer').show();
  363. sendprodcueshow = true;
  364. closeprodcueshow = true;
  365. break;
  366. case 4:
  367. result = isSolve.maintain;
  368. $('#div_costomer').show();
  369. sendprodcueshow = true;
  370. closeprodcueshow = true;
  371. break;
  372. case 5:
  373. result = isSolve.reissue;
  374. $('#div_costomer').show();
  375. sendprodcueshow = true;
  376. break;
  377. case 6:
  378. result = isSolve.backGoods;
  379. $('#div_costomer').show();
  380. closeprodcueshow = true;
  381. break;
  382. case 7:
  383. result = isSolve.noReasonBack;
  384. $('#div_costomer').show();
  385. closeprodcueshow = true;
  386. break;
  387. }
  388. for(var i = 0;i < result.length;i++){
  389. var html = statusHtml.replace("status_index",i+1);
  390. html = html.replace("div_li","li-"+(i+1));
  391. html = html.replace("div_number","number-"+(i+1));
  392. html = html.replace("div_txt","txt-"+(i+1));
  393. html = html.replace("status_html",result[i]);
  394. resultHtml += html;
  395. }
  396. $(".time-line-list").html(resultHtml);
  397. $('#number-1').attr('class','red');
  398. $('#txt-1').attr('class','txt-red');
  399. if (customerIsSolve == 3) {
  400. switch (backStatus) {
  401. case 1:
  402. $('#number-2').attr('class','red');
  403. $('#txt-2').attr('class','txt-red');
  404. break;
  405. case 2:
  406. $('#number-2').attr('class','red');
  407. $('#number-3').attr('class','red');
  408. $('#txt-2').attr('class','txt-red');
  409. $('#txt-3').attr('class','txt-red');
  410. break;
  411. case 3:
  412. $('#number-2').attr('class','red');
  413. $('#number-3').attr('class','red');
  414. $('#number-4').attr('class','red');
  415. $('#txt-2').attr('class','txt-red');
  416. $('#txt-3').attr('class','txt-red');
  417. $('#txt-4').attr('class','txt-red');
  418. break;
  419. }
  420. switch (sendStatus) {
  421. case 1:
  422. $('#number-5').attr('class','red');
  423. $('#txt-5').attr('class','txt-red');
  424. break;
  425. case 2:
  426. $('#number-5').attr('class','red');
  427. $('#number-6').attr('class','red');
  428. $('#txt-5').attr('class','txt-red');
  429. $('#txt-6').attr('class','txt-red');
  430. break;
  431. case 3:
  432. $('#number-5').attr('class','red');
  433. $('#number-6').attr('class','red');
  434. $('#number-7').attr('class','red');
  435. $('#txt-5').attr('class','txt-red');
  436. $('#txt-6').attr('class','txt-red');
  437. $('#txt-7').attr('class','txt-red');
  438. break;
  439. }
  440. } else if (customerIsSolve == 4) {
  441. switch (backStatus) {
  442. case 1:
  443. $('#number-2').attr('class','red');
  444. $('#txt-2').attr('class','txt-red');
  445. break;
  446. case 2:
  447. $('#number-2').attr('class','red');
  448. $('#number-3').attr('class','red');
  449. $('#txt-2').attr('class','txt-red');
  450. $('#txt-3').attr('class','txt-red');
  451. break;
  452. case 3:
  453. $('#number-2').attr('class','red');
  454. $('#number-3').attr('class','red');
  455. $('#number-4').attr('class','red');
  456. $('#txt-2').attr('class','txt-red');
  457. $('#txt-3').attr('class','txt-red');
  458. $('#txt-4').attr('class','txt-red');
  459. break;
  460. }
  461. switch (sendStatus) {
  462. case 1:
  463. $('#number-7').attr('class','red');
  464. $('#txt-7').attr('class','txt-red');
  465. break;
  466. case 2:
  467. $('#number-7').attr('class','red');
  468. $('#number-8').attr('class','red');
  469. $('#txt-7').attr('class','txt-red');
  470. $('#txt-8').attr('class','txt-red');
  471. break;
  472. case 3:
  473. $('#number-7').attr('class','red');
  474. $('#number-8').attr('class','red');
  475. $('#number-9').attr('class','red');
  476. $('#txt-7').attr('class','txt-red');
  477. $('#txt-8').attr('class','txt-red');
  478. $('#txt-9').attr('class','txt-red');
  479. break;
  480. }
  481. if (detectState == 2 || detectState == 3 || detectState == 4) {
  482. $('#number-5').attr('class','red');
  483. $('#txt-5').attr('class','txt-red');
  484. }
  485. if (maintenanceIsRepair != null && maintenanceIsRepair != '') {
  486. $('#number-6').attr('class','red');
  487. $('#txt-6').attr('class','txt-red');
  488. }
  489. } else if (customerIsSolve == 5) {
  490. $('#number-2').attr('class','red');
  491. $('#txt-2').attr('class','txt-red');
  492. switch (sendStatus) {
  493. case 1:
  494. $('#number-3').attr('class','red');
  495. $('#txt-3').attr('class','txt-red');
  496. break;
  497. case 2:
  498. $('#number-3').attr('class','red');
  499. $('#number-4').attr('class','red');
  500. $('#number-5').attr('class','red');
  501. $('#txt-3').attr('class','txt-red');
  502. $('#txt-4').attr('class','txt-red');
  503. $('#txt-5').attr('class','txt-red');
  504. break;
  505. case 3:
  506. $('#number-3').attr('class','red');
  507. $('#number-4').attr('class','red');
  508. $('#number-5').attr('class','red');
  509. $('#number-6').attr('class','red');
  510. $('#txt-3').attr('class','txt-red');
  511. $('#txt-4').attr('class','txt-red');
  512. $('#txt-5').attr('class','txt-red');
  513. $('#txt-6').attr('class','txt-red');
  514. break;
  515. }
  516. } else if (customerIsSolve == 6 || customerIsSolve == 7) {
  517. switch (backStatus) {
  518. case 1:
  519. $('#number-2').attr('class', 'red');
  520. $('#txt-2').attr('class', 'txt-red');
  521. break;
  522. case 2:
  523. $('#number-2').attr('class', 'red');
  524. $('#number-3').attr('class', 'red');
  525. $('#txt-2').attr('class', 'txt-red');
  526. $('#txt-3').attr('class', 'txt-red');
  527. break;
  528. case 3:
  529. $('#number-2').attr('class', 'red');
  530. $('#number-3').attr('class', 'red');
  531. $('#number-4').attr('class', 'red');
  532. $('#txt-2').attr('class', 'txt-red');
  533. $('#txt-3').attr('class', 'txt-red');
  534. $('#txt-4').attr('class', 'txt-red');
  535. break;
  536. }
  537. if (detectState == 2 || detectState == 3 || detectState == 4) {
  538. $('#number-5').attr('class', 'red');
  539. $('#txt-5').attr('class', 'txt-red');
  540. }
  541. }
  542. }
  543. </script>
  544. </body>
  545. </html>