record.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. (function() {
  2. Vue.component('record', {
  3. template: `<div class="container ptb20">
  4. <div class="row w3-row">
  5. <left-menu :code="code"></left-menu>
  6. <div class="pl251">
  7. <div class="bgc-fff c-border" style="min-height: 706px;">
  8. <ul class="nav nav-tabs c-inline-block width-100" role="tablist" id="recordlist">
  9. <li role="presentation" class="active">
  10. <a href="#home" aria-controls="home" role="tab" data-toggle="tab" id="_home">待就诊</a>
  11. </li>
  12. <li role="presentation">
  13. <a href="#history" aria-controls="history" role="tab" data-toggle="tab" id="_history">历史记录</a>
  14. </li>
  15. </ul>
  16. <div class="tab-content plr25 ptb8">
  17. <div role="tabpanel" class="tab-pane active" id="home">
  18. <div class="list-body" v-for="record in records">
  19. <div class="list-header"><span>预约时间</span><span class="pl20">{{record.time}}</span></div>
  20. <div class="div-table">
  21. <div class="table-row">
  22. <div class="table-cell">
  23. <div class="w3-row">
  24. <div class="w3-col pl15" style="width:95px">
  25. <img :src="record.photo" class="img-circle" width="80" height="80" />
  26. </div>
  27. <div class="w3-rest c-t-left pl20 c-f14 ">
  28. <div class="mt15">
  29. <span class="c-f16">{{record.doctor}}</span>
  30. <span class="plr10">{{record.zhiwu}}</span>
  31. <span class="c-909090">{{record.keshi}}</span>
  32. </div>
  33. <div class="mt10 c-909090">{{record.yiyuan}}</div>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="table-cell c-f16">
  38. <div class="mt15">
  39. {{record.othertime}}
  40. </div>
  41. <div class="mt10">
  42. {{record.othertime1}}
  43. </div>
  44. </div>
  45. <div class="table-cell c-f16 mt25">{{record.bingren}}
  46. </div>
  47. <div class="table-cell">
  48. <div class="cancelbtn" @click="cancelbtn(record.id)">取消预约</div>
  49. <div class="mt10" style="color:#0AD8C8" data-toggle="modal" data-target="#appointmentinfo">查看详情</span>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <div role="tabpanel" class="tab-pane" id="history">
  57. <div class="list-body" v-for="record in records">
  58. <div class="list-header"><span>预约时间</span><span class="pl20">{{record.time}}</span></div>
  59. <div class="div-table">
  60. <div class="table-row">
  61. <div class="table-cell">
  62. <div class="w3-row">
  63. <div class="w3-col pl15" style="width:95px">
  64. <img :src="record.photo" class="img-circle" width="80" height="80" />
  65. </div>
  66. <div class="w3-rest c-t-left pl20 c-f14 ">
  67. <div class="mt15">
  68. <span class="c-f16">{{record.doctor}}</span>
  69. <span class="plr10">{{record.zhiwu}}</span>
  70. <span class="c-909090">{{record.keshi}}</span>
  71. </div>
  72. <div class="mt10 c-909090">{{record.yiyuan}}</div>
  73. </div>
  74. </div>
  75. </div>
  76. <div class="table-cell c-f16">
  77. <div class="mt15">
  78. {{record.othertime}}
  79. </div>
  80. <div class="mt10">
  81. {{record.othertime1}}
  82. </div>
  83. </div>
  84. <div class="table-cell c-f16 mt25">{{record.bingren}}
  85. </div>
  86. <div class="table-cell">
  87. <div class="mt10" style="color:#0AD8C8" data-toggle="modal" data-target="#appointmentinfo">查看详情</span>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. <div id="page" class="page_div"></div>
  96. </div>
  97. </div>
  98. </div>
  99. <div class="modal fade" id="appointmentinfo" tabindex="-1" role="dialog" aria-labelledby="appointmentinfoLabel">
  100. <div class="modal-dialog" role="document">
  101. <div class="modal-content">
  102. <div class="modal-header bgc-f9f9f9">
  103. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  104. <h4 class="modal-title" id="appointmentinfoLabel">挂号明细</h4>
  105. </div>
  106. <div class="modal-body">
  107. <div class="bgc-fff">
  108. <div class="w3-row modal-list">
  109. <div class="w3-col" style="width:120px;">订单号</div>
  110. <div class="w3-rest">18721839005577</div>
  111. </div>
  112. <div class="w3-row modal-list" style="border:none;">
  113. <div class="w3-col" style="width:120px;">订单状态</div>
  114. <div class="w3-rest">待就诊</div>
  115. </div>
  116. <div class="w3-row modal-list bgc-f9f9f9" style="color:#323232;border:none;">预约信息</div>
  117. <div class="w3-row c-border-b modal-list">
  118. <div class="w3-col" style="width:120px;">预约医院</div>
  119. <div class="w3-rest">福建省立医院</div>
  120. </div>
  121. <div class="w3-row modal-list">
  122. <div class="w3-col" style="width:120px;">预约科室</div>
  123. <div class="w3-rest">睡眠眼科</div>
  124. </div>
  125. <div class="w3-row modal-list">
  126. <div class="w3-col" style="width:120px;">就诊日期</div>
  127. <div class="w3-rest">2018-04-04 上午</div>
  128. </div>
  129. <div class="w3-row modal-list">
  130. <div class="w3-col" style="width:120px;">就诊时间</div>
  131. <div class="w3-rest">07:50</div>
  132. </div>
  133. <div class="w3-row modal-list">
  134. <div class="w3-col" style="width:120px;">就诊序号</div>
  135. <div class="w3-rest">2</div>
  136. </div>
  137. <div class="w3-row modal-list" style="border:none;">
  138. <div class="w3-col" style="width:120px;">退号截止时间</div>
  139. <div class="w3-rest">2018-04-04 23:59:00</div>
  140. </div>
  141. <div class="w3-row modal-list bgc-f9f9f9" style="color:#323232;border:none;">就诊人信息</div>
  142. <div class="w3-row modal-list">
  143. <div class="w3-col" style="width:120px;">姓名</div>
  144. <div class="w3-rest">郑绩</div>
  145. </div>
  146. <div class="w3-row modal-list">
  147. <div class="w3-col" style="width:120px;">证件号</div>
  148. <div class="w3-rest">35040319850707201X</div>
  149. </div>
  150. <div class="w3-row modal-list">
  151. <div class="w3-col" style="width:120px;">手机号</div>
  152. <div class="w3-rest">137******96</div>
  153. </div>
  154. <div class="c-t-center">
  155. <button type="button" class="btn btn-default c-f16 mt30 mb20" style="width:144px;" @click="hideModel()">关 闭</button>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. </div>`,
  163. props: [],
  164. data: function() {
  165. return {
  166. code: "record",
  167. records: [{
  168. time: "2017年11月11日 13:13:13",
  169. photo: "../image/touxiang.jpg",
  170. doctor: "张三",
  171. zhiwu: "主任医生",
  172. keshi: "骨科",
  173. yiyuan: "上饶医院",
  174. othertime: "2018-04-04上午",
  175. othertime1: "第2号,07:50",
  176. bingren: "李花花",
  177. id: "1",
  178. }, {
  179. time: "2017年11月11日 13:13:13",
  180. photo: "../image/touxiang.jpg",
  181. doctor: "张三",
  182. zhiwu: "主任医生",
  183. keshi: "骨科",
  184. yiyuan: "上饶医院",
  185. othertime: "2018-04-04上午",
  186. othertime1: "第2号,07:50",
  187. bingren: "李花花",
  188. id: "1",
  189. }, ]
  190. }
  191. },
  192. mounted: function() {
  193. },
  194. methods: {
  195. cancelbtn: function(id) {
  196. personalDialogForm.cancelAppointment(id).then(function(layerid) {
  197. top.layer.close(layerid)
  198. })
  199. },
  200. hideModel:function(){
  201. $('#appointmentinfo').modal('hide')
  202. }
  203. },
  204. })
  205. })()