123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- (function() {
- Vue.component('record', {
- template: `<div class="container ptb20">
- <div class="row w3-row">
- <left-menu :code="code"></left-menu>
- <div class="pl251">
- <div class="bgc-fff c-border" style="min-height: 706px;">
- <ul class="nav nav-tabs c-inline-block width-100" role="tablist" id="recordlist">
- <li role="presentation" class="active">
- <a href="#home" aria-controls="home" role="tab" data-toggle="tab" id="_home">待就诊</a>
- </li>
- <li role="presentation">
- <a href="#history" aria-controls="history" role="tab" data-toggle="tab" id="_history">历史记录</a>
- </li>
- </ul>
- <div class="tab-content plr25 ptb8">
- <div role="tabpanel" class="tab-pane active" id="home">
- <div class="list-body" v-for="record in records">
- <div class="list-header"><span>预约时间</span><span class="pl20">{{record.time}}</span></div>
- <div class="div-table">
- <div class="table-row">
- <div class="table-cell">
- <div class="w3-row">
- <div class="w3-col pl15" style="width:95px">
- <img :src="record.photo" class="img-circle" width="80" height="80" />
- </div>
- <div class="w3-rest c-t-left pl20 c-f14 ">
- <div class="mt15">
- <span class="c-f16">{{record.doctor}}</span>
- <span class="plr10">{{record.zhiwu}}</span>
- <span class="c-909090">{{record.keshi}}</span>
- </div>
- <div class="mt10 c-909090">{{record.yiyuan}}</div>
- </div>
- </div>
- </div>
- <div class="table-cell c-f16">
- <div class="mt15">
- {{record.othertime}}
- </div>
- <div class="mt10">
- {{record.othertime1}}
- </div>
- </div>
- <div class="table-cell c-f16 mt25">{{record.bingren}}
- </div>
- <div class="table-cell">
- <div class="cancelbtn" @click="cancelbtn(record.id)">取消预约</div>
- <div class="mt10" style="color:#0AD8C8" data-toggle="modal" data-target="#appointmentinfo">查看详情</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div role="tabpanel" class="tab-pane" id="history">
- <div class="list-body" v-for="record in records">
- <div class="list-header"><span>预约时间</span><span class="pl20">{{record.time}}</span></div>
- <div class="div-table">
- <div class="table-row">
- <div class="table-cell">
- <div class="w3-row">
- <div class="w3-col pl15" style="width:95px">
- <img :src="record.photo" class="img-circle" width="80" height="80" />
- </div>
- <div class="w3-rest c-t-left pl20 c-f14 ">
- <div class="mt15">
- <span class="c-f16">{{record.doctor}}</span>
- <span class="plr10">{{record.zhiwu}}</span>
- <span class="c-909090">{{record.keshi}}</span>
- </div>
- <div class="mt10 c-909090">{{record.yiyuan}}</div>
- </div>
- </div>
- </div>
- <div class="table-cell c-f16">
- <div class="mt15">
- {{record.othertime}}
- </div>
- <div class="mt10">
- {{record.othertime1}}
- </div>
- </div>
- <div class="table-cell c-f16 mt25">{{record.bingren}}
- </div>
- <div class="table-cell">
- <div class="mt10" style="color:#0AD8C8" data-toggle="modal" data-target="#appointmentinfo">查看详情</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div id="page" class="page_div"></div>
- </div>
- </div>
- </div>
- <div class="modal fade" id="appointmentinfo" tabindex="-1" role="dialog" aria-labelledby="appointmentinfoLabel">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header bgc-f9f9f9">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
- <h4 class="modal-title" id="appointmentinfoLabel">挂号明细</h4>
- </div>
- <div class="modal-body">
- <div class="bgc-fff">
- <div class="w3-row modal-list">
- <div class="w3-col" style="width:120px;">订单号</div>
- <div class="w3-rest">18721839005577</div>
- </div>
- <div class="w3-row modal-list" style="border:none;">
- <div class="w3-col" style="width:120px;">订单状态</div>
- <div class="w3-rest">待就诊</div>
- </div>
- <div class="w3-row modal-list bgc-f9f9f9" style="color:#323232;border:none;">预约信息</div>
- <div class="w3-row c-border-b modal-list">
- <div class="w3-col" style="width:120px;">预约医院</div>
- <div class="w3-rest">福建省立医院</div>
- </div>
- <div class="w3-row modal-list">
- <div class="w3-col" style="width:120px;">预约科室</div>
- <div class="w3-rest">睡眠眼科</div>
- </div>
- <div class="w3-row modal-list">
- <div class="w3-col" style="width:120px;">就诊日期</div>
- <div class="w3-rest">2018-04-04 上午</div>
- </div>
- <div class="w3-row modal-list">
- <div class="w3-col" style="width:120px;">就诊时间</div>
- <div class="w3-rest">07:50</div>
- </div>
- <div class="w3-row modal-list">
- <div class="w3-col" style="width:120px;">就诊序号</div>
- <div class="w3-rest">2</div>
- </div>
- <div class="w3-row modal-list" style="border:none;">
- <div class="w3-col" style="width:120px;">退号截止时间</div>
- <div class="w3-rest">2018-04-04 23:59:00</div>
- </div>
- <div class="w3-row modal-list bgc-f9f9f9" style="color:#323232;border:none;">就诊人信息</div>
- <div class="w3-row modal-list">
- <div class="w3-col" style="width:120px;">姓名</div>
- <div class="w3-rest">郑绩</div>
- </div>
- <div class="w3-row modal-list">
- <div class="w3-col" style="width:120px;">证件号</div>
- <div class="w3-rest">35040319850707201X</div>
- </div>
- <div class="w3-row modal-list">
- <div class="w3-col" style="width:120px;">手机号</div>
- <div class="w3-rest">137******96</div>
- </div>
- <div class="c-t-center">
- <button type="button" class="btn btn-default c-f16 mt30 mb20" style="width:144px;" @click="hideModel()">关 闭</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>`,
- props: [],
- data: function() {
- return {
- code: "record",
- records: [{
- time: "2017年11月11日 13:13:13",
- photo: "../image/touxiang.jpg",
- doctor: "张三",
- zhiwu: "主任医生",
- keshi: "骨科",
- yiyuan: "上饶医院",
- othertime: "2018-04-04上午",
- othertime1: "第2号,07:50",
- bingren: "李花花",
- id: "1",
- }, {
- time: "2017年11月11日 13:13:13",
- photo: "../image/touxiang.jpg",
- doctor: "张三",
- zhiwu: "主任医生",
- keshi: "骨科",
- yiyuan: "上饶医院",
- othertime: "2018-04-04上午",
- othertime1: "第2号,07:50",
- bingren: "李花花",
- id: "1",
- }, ]
- }
- },
- mounted: function() {
- },
- methods: {
- cancelbtn: function(id) {
- personalDialogForm.cancelAppointment(id).then(function(layerid) {
- top.layer.close(layerid)
- })
- },
- hideModel:function(){
- $('#appointmentinfo').modal('hide')
- }
- },
- })
- })()
|