orders_details.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <script type="text/javascript" src="/static/jquery-2.2.4.min.js"></script>
  9. <script type="text/javascript" src="/static/layer/layer.js"></script>
  10. <script type="text/javascript" src="/admin/js/common.js"></script>
  11. <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.css">
  12. <link rel="stylesheet" href="/static/h5/css/common.css">
  13. <title>完成订单详情</title>
  14. <style>
  15. body{
  16. background-color: #F1F1F1;
  17. }
  18. .container{
  19. max-width: 100vw;
  20. height: auto;
  21. margin: 0;
  22. padding: 0;
  23. margin-bottom: 60px;
  24. }
  25. .public-info{
  26. width: 100%;
  27. height: 32vw;
  28. background: #FFFFFF;
  29. }
  30. .public-info .left-box{
  31. width: 22vw;
  32. height: 27vw;
  33. padding: 0vw 3vw;
  34. margin-top: 5vw;
  35. display: inline-block;
  36. float: left;
  37. }
  38. .public-info .left-box .title{
  39. width:16vw;
  40. height:16vw;
  41. line-height: 16vw;
  42. background: #E7F0F9;
  43. border-radius: 10px;
  44. font-size: 32px;
  45. font-family: PingFang SC;
  46. font-weight: bold;
  47. color: var(--themeColor);
  48. text-align: center;
  49. }
  50. .public-info .right-box{
  51. width: 78vw;
  52. height: 32vw;
  53. display: inline-block;
  54. float: left;
  55. }
  56. .public-info .right-box .name-box{
  57. width: 100%;
  58. height: 16vw;
  59. overflow: hidden;
  60. }
  61. .public-info .right-box .name-box .left-name-box{
  62. width: 44%;
  63. height: 16vw;
  64. line-height: 16vw;
  65. display: inline-block;
  66. float: left;
  67. font-size: 25px;
  68. font-weight: bold;
  69. color: #333333;
  70. overflow: hidden;
  71. }
  72. .public-info .right-box .name-box .right-status-box{
  73. width: 13vw;
  74. height: 5vw;
  75. line-height: 5vw;
  76. border-radius: 20px;
  77. color: #ffffff;
  78. display: inline-block;
  79. float: right;
  80. text-align: center;
  81. font-size: 13px;
  82. margin-top: 5.5vw;
  83. margin-right: 4vw;
  84. }
  85. .public-info .right-box .name-box .color1{
  86. background-color: #148d8f;
  87. }
  88. .public-info .right-box .name-box .color2{
  89. background-color: #05D8DA;
  90. }
  91. .public-info .right-box .name-box .color3{
  92. background-color: #437EFF;
  93. }
  94. .public-info .right-box .name-box .color4{
  95. background-color: #F79F2D;
  96. }
  97. .public-info .right-box .name-box .color4{
  98. background-color: #089857;
  99. }
  100. .public-info .right-box .info-user-box{
  101. width: 100%;
  102. height: 8vw;
  103. line-height: 8vw;
  104. }
  105. .public-info .right-box .info-user-box .one{
  106. width: 50%;
  107. height: 100%;
  108. display: inline-block;
  109. float: left;
  110. overflow: hidden;
  111. }
  112. .public-info .right-box .info-user-box .one .img{
  113. width: 3.3vw;
  114. height: 3.3vw;
  115. display: inline-block;
  116. }
  117. .public-info .right-box .info-user-box .one .img img{
  118. width: 100%;
  119. height: 100%;
  120. }
  121. .public-info .right-box .info-user-box text{
  122. font-size: 14px;
  123. font-weight: 400;
  124. color: #666666;
  125. }
  126. .public-info-content{
  127. width: 100%;
  128. height: auto;
  129. margin-top: 1vw;
  130. background-color: #fff;
  131. }
  132. .header{
  133. width: 100%;
  134. height: 12vw;
  135. }
  136. .header .header-left {
  137. width: 60vw;
  138. height: 12vw;
  139. line-height: 12vw;
  140. display: inline-block;
  141. float: left;
  142. }
  143. .header .header-right{
  144. width: 40vw;
  145. height: 12vw;
  146. line-height: 12vw;
  147. display: inline-block;
  148. float: right;
  149. padding-right: 4vw;
  150. font-size: 14px;
  151. font-weight: 400;
  152. color: #666666;
  153. text-align: right;
  154. }
  155. .header .header-left .line-box{
  156. width: 0.8vw;
  157. height: 3.4vw;
  158. background: var(--themeColor);
  159. border-radius: 3px;
  160. display: inline-block;
  161. float: left;
  162. margin-left: 2vw;
  163. margin-top: 4.3vw;
  164. margin-right: 2vw;
  165. }
  166. .header .header-left .title{
  167. width: 55vw;
  168. height: 12vw;
  169. font-size: 19px;
  170. font-weight: bold;
  171. color: #333333;
  172. display: inline-block;
  173. float: left;
  174. }
  175. .public-info-content .content-box{
  176. width: 100%;
  177. height: auto;
  178. padding: 1vw;
  179. }
  180. .public-info-content .content-box div{
  181. width: 100%;
  182. background: #F7F7F7;
  183. border-radius: 10px;
  184. padding: 1vw;
  185. min-height: 20vw;
  186. word-wrap:break-word;
  187. }
  188. .public-info-content .voices-box{
  189. width: 100%;
  190. height: 16vw;
  191. line-height: 16vw;
  192. text-align: right;
  193. padding: 1vw;
  194. }
  195. .public-info-taskImg{
  196. width: 100%;
  197. height: auto;
  198. background-color: #fff;
  199. margin-top: 1vw;
  200. }
  201. .public-info-taskImg .img-box{
  202. width: 100%;
  203. height: auto;
  204. overflow: hidden;
  205. }
  206. .public-info-taskImg .img-box .img-all-box{
  207. width: 100%;
  208. height: auto;
  209. padding: 0vw 4vw;
  210. overflow: hidden;
  211. }
  212. .public-info-taskImg .img-box .img-all-box .img{
  213. width: 22vw;
  214. height: 22vw;
  215. display: inline-block;
  216. float: left;
  217. margin-right: 1vw;
  218. margin-bottom: 1vw;
  219. }
  220. .public-info-taskImg .img-box .img-all-box .img img{
  221. width: 100%;
  222. height: 100%;
  223. }
  224. .public-info-taskImg .img-box .img-all-box .img video{
  225. width: 100%;
  226. height: 100%;
  227. }
  228. .public-info-taskImg .img-box .bottom-title-box{
  229. width: 100%;
  230. height: 10vw;
  231. line-height: 10vw;
  232. text-align: center;
  233. font-size: 12px;
  234. color: #666666;
  235. }
  236. .repairs-box{
  237. width: 100%;
  238. height: auto;
  239. margin-top: 1vw;
  240. background-color: #fff;
  241. }
  242. .repairs-matter{
  243. width: 100%;
  244. height: 10vw;
  245. line-height: 10vw;
  246. border-bottom: 1px solid #f1f1f1;
  247. padding: 0vw 4vw;
  248. overflow: hidden;
  249. }
  250. .repairs-matter .title{
  251. font-size: 17px;
  252. font-family: PingFang SC;
  253. font-weight: 500;
  254. color: #666666;
  255. float: left;
  256. }
  257. .repairs-matter .content{
  258. font-weight: 500;
  259. color: #666666;
  260. float: right;
  261. }
  262. .repairs-type{
  263. width: 100%;
  264. height: 10vw;
  265. line-height: 10vw;
  266. border-bottom: 1px solid #f1f1f1;
  267. padding: 0vw 4vw;
  268. overflow: hidden;
  269. padding-bottom: 1vw;
  270. }
  271. .repairs-type .title{
  272. font-size: 17px;
  273. font-family: PingFang SC;
  274. font-weight: 500;
  275. color: #666666;
  276. float: left;
  277. }
  278. .repairs-type .content{
  279. font-weight: 500;
  280. color: #666666;
  281. float: right;
  282. }
  283. .execute-user{
  284. width: 100%;
  285. height: auto;
  286. background-color: #fff;
  287. margin-top: 1vw;
  288. }
  289. .execute-user .execute-user-name{
  290. width: 100%;
  291. height: auto;
  292. overflow: hidden;
  293. }
  294. .execute-user .execute-user-name .user-info{
  295. width: 100%;
  296. height: 10vw;
  297. line-height: 10vw;
  298. padding: 0vw 4vw;
  299. }
  300. .execute-user .execute-user-name .user-info .name{
  301. font-size: 17px;
  302. font-weight: 500;
  303. color: #666666;
  304. float: left;
  305. }
  306. .execute-user .execute-user-name .user-info .status{
  307. font-weight: 500;
  308. float: right;
  309. }
  310. .execute-user .execute-user-name .user-info .status text{
  311. margin-left: 1vw;
  312. font-weight: 500;
  313. color: #666666;
  314. }
  315. .cancel-cause{
  316. width: 100%;
  317. height: auto;
  318. margin-top: 1vw;
  319. padding: 0vw 2vw;
  320. background-color: #fff;
  321. }
  322. .cancel-cause .title{
  323. width: 100%;
  324. height: 12vw;
  325. line-height: 12vw;
  326. font-size: 19px;
  327. font-weight: bold;
  328. color: var(--themeColor);
  329. border-bottom: 1px solid var(--themeColor);
  330. }
  331. .cancel-cause .content{
  332. width: 100%;
  333. height: auto;
  334. padding: 2vw 4vw 5vw 0vw;
  335. word-wrap:break-word;
  336. }
  337. .footer-back{
  338. position: fixed;
  339. z-index: 1000;
  340. width: 100%;
  341. height: 45px;
  342. line-height: 45px;
  343. background-color: #ffffff;
  344. bottom: 0;
  345. left: 0;
  346. box-shadow: 0px 0px 10px 0px rgba(26, 25, 26, 0.05);
  347. display: table-cell;
  348. vertical-align: middle;
  349. text-align: center;
  350. }
  351. .footer-back a img{
  352. width: 43px;
  353. height: 43px;
  354. }
  355. .convey-box{
  356. width: 100%;
  357. height: 12vw;
  358. background-color: #fff;
  359. margin-top: 1vw;
  360. }
  361. .convey-route-box{
  362. width: 100%;
  363. height: 32vw;
  364. background-color: #fff;
  365. margin-top: 1vw;
  366. }
  367. .patient-info-box{
  368. width: 100%;
  369. height: 62vw;
  370. background-color: #fff;
  371. margin-top: 1vw;
  372. }
  373. .pay-status{
  374. width: 13vw;
  375. height: 100%;
  376. display: inline-block;
  377. float: left;
  378. }
  379. .pay-status .pay{
  380. width: 13vw;
  381. height: 5vw;
  382. line-height: 5vw;
  383. border-radius: 20px;
  384. color: #ffffff;
  385. display: inline-block;
  386. text-align: center;
  387. font-size: 13px;
  388. margin-top: 5.5vw;
  389. background-color: var(--themeColor);
  390. }
  391. </style>
  392. </head>
  393. <body>
  394. <div class="container">
  395. <div class="public-info">
  396. <div class="left-box">
  397. <div class="title">订</div>
  398. </div>
  399. <div class="right-box">
  400. <div class="name-box">
  401. <div class="left-name-box">{$info['work_type_mode_text']}订单</div>
  402. {if $info['oc']['conveyTypeCate'] == 1}
  403. {if $info['pay']['is_pay'] == 0}
  404. <div class="pay-status">
  405. <div class="pay">未支付</div>
  406. </div>
  407. {else /}
  408. <div class="pay-status">
  409. <div class="pay">已支付</div>
  410. </div>
  411. {/if}
  412. {/if}
  413. <div class="right-status-box color1">{$info['order_mode_out_text']}</div>
  414. </div>
  415. <div class="info-user-box">
  416. <div class="one">
  417. <div class="img">
  418. <img src="/img/h5/icon-ren.png" alt="">
  419. </div>
  420. <text>{$info['real_name']}</text>
  421. </div>
  422. <div class="one">
  423. <div class="img">
  424. <img src="/img/h5/icon-date.png" alt="">
  425. </div>
  426. <text>{$info['create_time']}</text>
  427. </div>
  428. </div>
  429. <div class="info-user-box">
  430. <div class="one">
  431. <div class="img">
  432. <img src="/img/h5/icon-bumen.png" alt="">
  433. </div>
  434. <span>{$info['dep']}</span>
  435. </div>
  436. <div class="one">
  437. <div class="img">
  438. <img src="/img/h5/icon-dianhua.png" alt="">
  439. </div>
  440. <span>{$info['mobile']}</span>
  441. </div>
  442. </div>
  443. </div>
  444. </div>
  445. <!-- 任务内容-->
  446. <div class="public-info-content">
  447. <div class="header">
  448. <div class="header-left">
  449. <div class="line-box"></div>
  450. <div class="title">任务内容</div>
  451. </div>
  452. </div>
  453. <div class="content-box">
  454. <div>{$info['content']}</div>
  455. </div>
  456. {if($info['voices'])}
  457. <div class="voices-box">
  458. <audio src="{$info['voices']}" controls="controls">
  459. </audio>
  460. </div>
  461. {/if}
  462. </div>
  463. <!-- 任务图片-->
  464. {if !empty($info['images']) || !empty($info['videos'])}
  465. <div class="public-info-taskImg">
  466. <div class="header">
  467. <div class="header-left">
  468. <div class="line-box"></div>
  469. <div class="title">任务图片</div>
  470. </div>
  471. </div>
  472. <div class="img-box">
  473. <div class="img-all-box">
  474. {if($info['images'])}
  475. {foreach $info['images'] as $k=>$v}
  476. <div class="img">
  477. <img src="{$v}" onclick="open_img(this)" alt="">
  478. </div>
  479. {/foreach}
  480. {/if}
  481. {if($info['videos'])}
  482. {foreach $info['videos'] as $k=>$v}
  483. <div class="img">
  484. <video src="{$v}" style="object-fit: fill;" onclick="playVideo(this)"></video>
  485. </div>
  486. {/foreach}
  487. {/if}
  488. </div>
  489. <div class="bottom-title-box">(点击可查看图片、视频详情信息)</div>
  490. </div>
  491. </div>
  492. {/if}
  493. <!-- 取消原因-->
  494. {if $info['order_mode'] == 2 || $info['order_mode'] == 3}
  495. <div class="cancel-cause">
  496. <div class="title">取消原因</div>
  497. <div class="content">
  498. {$info['cancel_reason']}
  499. </div>
  500. </div>
  501. {/if}
  502. {if $info['work_type_mode'] == 1}
  503. <!-- 报修 -->
  504. <div class="repairs-box">
  505. <div class="header">
  506. <div class="header-left">
  507. <div class="line-box"></div>
  508. <div class="title">报修地点</div>
  509. </div>
  510. <span class="header-right">{$info['repair']['address_title']}</span>
  511. </div>
  512. <div class="header">
  513. <div class="header-left">
  514. <div class="line-box"></div>
  515. <div class="title">报修事项</div>
  516. </div>
  517. </div>
  518. <div class="repairs-matter">
  519. <text class="title">报修事项:</text>
  520. <text class="content">{$info['repair']['order_type_matter']}</text>
  521. </div>
  522. <div class="repairs-type">
  523. <text class="title">报修类型:</text>
  524. <text class="content">{$info['repair']['order_type']}</text>
  525. </div>
  526. </div>
  527. {/if}
  528. <!-- 运送 -->
  529. {if $info['work_type_mode'] == 3}
  530. <div class="convey-box">
  531. <div class="header">
  532. <div class="header-left">
  533. <div class="line-box"></div>
  534. <div class="title">运送类型</div>
  535. </div>
  536. <span class="header-right">{$info['oc']['type_name']}</span>
  537. </div>
  538. </div>
  539. <div class="convey-box">
  540. <div class="header">
  541. <div class="header-left">
  542. <div class="line-box"></div>
  543. <div class="title">运送积分</div>
  544. </div>
  545. <span class="header-right">{$info['oc']['typeScore']}</span>
  546. </div>
  547. </div>
  548. <div class="convey-route-box">
  549. <div class="header">
  550. <div class="header-left">
  551. <div class="line-box"></div>
  552. <div class="title">运送路线</div>
  553. </div>
  554. </div>
  555. <div class="repairs-matter" style="border-bottom: 0 !important;">
  556. <span class="title">开始地点:</span>
  557. <span class="content">{$info['oc']['start_name']}</span>
  558. </div>
  559. <div class="repairs-type">
  560. <span class="title">结束地点:</span>
  561. <span class="content">{$info['oc']['end_name']}</span>
  562. </div>
  563. </div>
  564. <div class="convey-route-box">
  565. <div class="header">
  566. <div class="header-left">
  567. <div class="line-box"></div>
  568. <div class="title">运送时间</div>
  569. </div>
  570. </div>
  571. <div class="repairs-matter">
  572. <span class="title">需求时间:</span>
  573. <span class="content">{$info['oc']['xq_time']}</span>
  574. </div>
  575. <div class="repairs-type">
  576. <span class="title">完成时间:</span>
  577. <span class="content">{$info['oc']['ywc_time']}</span>
  578. </div>
  579. </div>
  580. <div class="convey-box">
  581. <div class="header">
  582. <div class="header-left">
  583. <div class="line-box"></div>
  584. <div class="title">优先级</div>
  585. </div>
  586. <span class="header-right">{$info['oc']['priority']}</span>
  587. </div>
  588. </div>
  589. <div class="convey-box">
  590. <div class="header">
  591. <div class="header-left">
  592. <div class="line-box"></div>
  593. <div class="title">运送工具</div>
  594. </div>
  595. <span class="header-right">{$info['oc']['device_name']}</span>
  596. </div>
  597. </div>
  598. <div class="convey-route-box">
  599. <div class="header">
  600. <div class="header-left">
  601. <div class="line-box"></div>
  602. <div class="title">联系人信息</div>
  603. </div>
  604. </div>
  605. <div class="repairs-matter">
  606. <text class="title">联系人姓名:</text>
  607. <text class="content">{$info['oc']['name']}</text>
  608. </div>
  609. <div class="repairs-type">
  610. <text class="title">联系人电话:</text>
  611. <text class="content">{$info['oc']['phone']}</text>
  612. </div>
  613. </div>
  614. {if $info['oc']['conveyTypeCate']==1 && !empty($info['oc']['ocp'])}
  615. <div class="patient-info-box">
  616. <div class="header">
  617. <div class="header-left">
  618. <div class="line-box"></div>
  619. <div class="title">病人信息</div>
  620. </div>
  621. </div>
  622. <div class="repairs-matter">
  623. <text class="title">床号</text>
  624. <text class="content">{$info['oc']['ocp']['bed_number']}</text>
  625. </div>
  626. <div class="repairs-matter">
  627. <text class="title">病人姓名</text>
  628. <text class="content">{$info['oc']['ocp']['name']}</text>
  629. </div>
  630. <div class="repairs-matter">
  631. <text class="title">病案号</text>
  632. <text class="content">{$info['oc']['ocp']['ba_number']}</text>
  633. </div>
  634. <div class="repairs-matter">
  635. <text class="title">性别</text>
  636. {if $info['oc']['ocp']['gender'] == 0}
  637. <text class="content">未知</text>
  638. {elseif($info['oc']['ocp']['gender'] == 1)}
  639. <text class="content">男</text>
  640. {elseif($info['oc']['ocp']['gender'] == 2)}
  641. <text class="content">女</text>
  642. {/if}
  643. </div>
  644. <div class="repairs-matter">
  645. <text class="title">是否往返</text>
  646. {if $info['oc']['ocp']['back'] == 0}
  647. <text class="content">否</text>
  648. {elseif($info['oc']['ocp']['back'] == 1)}
  649. <text class="content">往返</text>
  650. {/if}
  651. </div>
  652. </div>
  653. <!-- 途径地点-->
  654. <div class="execute-user">
  655. <div class="header">
  656. <div class="header-left">
  657. <div class="line-box"></div>
  658. <div class="title">途径地点</div>
  659. </div>
  660. </div>
  661. <div class="execute-user-name">
  662. {if($info['ends'])}
  663. {foreach $info['ends'] as $k=>$v}
  664. <div class="user-info">
  665. <span class="name">{$v['title']}</span>
  666. {if $v['scan'] == 0}
  667. <span class="status"> <input type="checkbox" disabled> </span>
  668. {else /}
  669. <span class="status"> <input type="checkbox" checked disabled> </span>
  670. {/if}
  671. </div>
  672. {/foreach}
  673. {/if}
  674. </div>
  675. </div>
  676. {/if}
  677. {/if}
  678. <div class="execute-user">
  679. <div class="header">
  680. <div class="header-left">
  681. <div class="line-box"></div>
  682. <div class="title">执行人员</div>
  683. </div>
  684. </div>
  685. <div class="execute-user-name">
  686. {if($info['todo_list'])}
  687. {foreach $info['todo_list'] as $k=>$v}
  688. {if $v['todo_mode'] != 1}
  689. <div class="user-info" onclick="ordersSubDetails(this)" data-id="{$v['id']}" data-orgId="{$v['org_id']}">
  690. <span class="name">{$v['to_real_name']}</span>
  691. <span class="status">{$v['todo_mode_text']}<text>></text></span>
  692. </div>
  693. {else /}
  694. <div class="user-info">
  695. <span class="name">{$v['to_real_name']}</span>
  696. <span class="status">{$v['todo_mode_text']}<text>></text></span>
  697. </div>
  698. {/if}
  699. {/foreach}
  700. {/if}
  701. </div>
  702. </div>
  703. <div class="footer-back">
  704. <a href="javascript:;" onclick="javascript:history.back(-1);"><img src="/img/back.png"></a>
  705. </div>
  706. </div>
  707. </body>
  708. </html>
  709. <script>
  710. var orgId = "{$info['org_id']}";
  711. function ordersSubDetails(obj) {
  712. var id = $(obj).attr('data-id');
  713. var org = $(obj).attr('data-orgId');
  714. var url = "{:url('Statistics/ordersSubDetails')}?id="+id+'&orgId='+org;
  715. window.location.href=url;
  716. }
  717. function playVideo(obj) {
  718. var obj =$(obj);
  719. var url = obj.attr('src');
  720. var url = "{:url('Statistics/videoPlay')}?url="+url+'&orgId='+orgId;
  721. window.location.href=url;
  722. }
  723. </script>