作者 杨育虎

转诊待答语音调试

1 -<!DOCTYPE html>  
2 -<html lang="en">  
3 -<head>  
4 - <meta charset="UTF-8">  
5 - <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
6 - <title>转诊模块</title>  
7 - <script src="__TMPL__/public/assets/js/fontsize.js"></script>  
8 - <link rel="stylesheet" href="__TMPL__/public/assets/css/init.css">  
9 - <link rel="stylesheet" href="__TMPL__/public/assets/css/swiper-3.4.2.min.css">  
10 - <link rel="stylesheet" href="http://at.alicdn.com/t/font_793738_tlxymah92x.css">  
11 - <link rel="stylesheet" href="__TMPL__/public/assets/css/weui.css">  
12 - <link rel="stylesheet" href="__TMPL__/public/assets/css/myweui.css">  
13 - <link rel="stylesheet" href="__TMPL__/public/assets/css/referralModule.css">  
14 -</head>  
15 -<body STYLE="background: #F5F6FA">  
16 -<div class="container">  
17 - <div class="tab_content_box top">  
18 - <div class="tab_info">转诊基本信息</div>  
19 - <div class="tab_content">  
20 - <div class="content_item">  
21 - <div class="tab_title">临床表现</div>  
22 - <div class="tab_textarea">  
23 - <textarea readonly>临床表现内容临床表现内容临床表现内容</textarea>  
24 - </div>  
25 - </div>  
26 - <div class="content_item">  
27 - <div class="tab_title">已做检查</div>  
28 - <div class="tab_textarea">  
29 - <textarea>已做检查内容已做检查内容已做检查内容</textarea>  
30 - </div>  
31 - </div>  
32 - <div class="content_item">  
33 - <div class="tab_title">已用药物</div>  
34 - <div class="tab_textarea">  
35 - <textarea readonly>xx药物、xx药物、xx药物</textarea>  
36 - </div>  
37 - </div>  
38 - <div class="content_item">  
39 - <div class="tab_title">当前困惑</div>  
40 - <div class="tab_textarea">  
41 - <textarea readonly>当前困惑内容当前困惑内容当前困惑内容</textarea>  
42 - </div>  
43 - </div>  
44 - <div class="content_item">  
45 - <div class="tab_title">咨询时间</div>  
46 - <div>2018.08.30 18:00:00</div>  
47 - </div>  
48 -  
49 - </div>  
50 - </div>  
51 - <div class="tab_content_box">  
52 - <div class="tab_info">转诊基本信息</div>  
53 - <div class="user_info_box">  
54 - <div class="head_box"><img src="../images/chead@2x.png" alt=""></div>  
55 - <div>  
56 - <div>姓名:赵梓明</div>  
57 - <div>电话:13626495215</div>  
58 - <div>医院:中心医院.</div>  
59 - <div>科室:急诊室</div>  
60 - </div>  
61 - </div>  
62 - </div>  
63 - <div class="tab_content_box">  
64 - <div class="tab_info">  
65 - <text class="tab_title">若您对转诊信息不明确,请点击发起提问</text>  
66 - <text class="iconfont icon-icon02 add_problem"></text>  
67 - </div>  
68 - </div>  
69 -  
70 - <!--提问内容部分-->  
71 - <div class="tab_content_box info_item">  
72 - <div class="tab_info inquiry_content title">  
73 - <text>提问</text>  
74 - <text class="iconfont icon-huatong voice_btn"></text>  
75 - <text class="iconfont icon-tianxie"></text>  
76 - </div>  
77 - <div class="textarea_content">  
78 - <textarea class="area" type="text" placeholder="请输入" maxlength="1000"></textarea>  
79 - <p class="text_num num_box"><span class="text-count">0</span>/1000</p>  
80 - </div>  
81 - <div class="voice_module agree_box" video-id="1">  
82 - <div class="voice_list" voiceitemid="1">  
83 - <div class="voice_box voice_third">  
84 - <div class="voice_item">  
85 - <text class="iconfont icon-luyin voice_icon"></text>  
86 - <text class="voice_font luyin">点击图标可播放 时长:10秒</text>  
87 - </div>  
88 - <div class="voice_btn_box">  
89 - <text class="iconfont icon-quxiao cancle_voice"></text>  
90 - <text class="iconfont icon-tianjia add_voice"></text>  
91 - </div>  
92 - </div>  
93 - <div class="voice_box voice_first" voiceid="1">  
94 - <div class="voice_item">  
95 - <text class="iconfont icon-huatong mike voice_icon"></text>  
96 - <text class="voice_font huatong">点击图标开始语音语音最长60秒</text>  
97 - </div>  
98 - <div class="voice_btn_box">  
99 - <text class="iconfont icon-quxiao icon_cancle"></text>  
100 - </div>  
101 - </div>  
102 - </div>  
103 - </div>  
104 - </div>  
105 -  
106 - <!--转诊意见内容部分-->  
107 - <div class="tab_content_box info_item">  
108 - <div class="tab_info inquiry_content title">  
109 - <text>转诊意见</text>  
110 - <text class="iconfont icon-huatong voice_btn"></text>  
111 - <text class="iconfont icon-tianxie"></text>  
112 - </div>  
113 - <div class="textarea_content">  
114 - <textarea class="area" type="text" placeholder="请输入" maxlength="1000"></textarea>  
115 - <p class="text_num num_box"><span class="text-count">0</span>/1000</p>  
116 - </div>  
117 - <div class="voice_module agree_box" video-id="1">  
118 - <div class="voice_list" voiceitemid="1">  
119 - <div class="voice_box voice_third">  
120 - <div class="voice_item">  
121 - <text class="iconfont icon-luyin voice_icon"></text>  
122 - <text class="voice_font luyin">点击图标可播放 时长:10秒</text>  
123 - </div>  
124 - <div class="voice_btn_box">  
125 - <text class="iconfont icon-quxiao cancle_voice"></text>  
126 - <text class="iconfont icon-tianjia add_voice"></text>  
127 - </div>  
128 - </div>  
129 - <div class="voice_box voice_first" voiceid="1">  
130 - <div class="voice_item">  
131 - <text class="iconfont icon-huatong mike voice_icon"></text>  
132 - <text class="voice_font huatong">点击图标开始语音语音最长60秒</text>  
133 - </div>  
134 - <div class="voice_btn_box">  
135 - <text class="iconfont icon-quxiao icon_cancle"></text>  
136 - </div>  
137 - </div>  
138 - </div>  
139 - </div>  
140 - </div>  
141 -  
142 - <!--专家提问显示内容-->  
143 - <div class="tab_content_box">  
144 - <div class="tab_info">  
145 - <text>专家提问</text>  
146 - </div>  
147 - <div class="user_info_box">  
148 - 专家提问内容专家提问内容专家提问内容专家提问内容  
149 - 专家提问内容专家提问内容专家提问内容专家提问内容  
150 - 专家提问内容专家提问内容  
151 - </div>  
152 - </div>  
153 - <!--回复专家的内容-->  
154 - <div class="tab_content_box">  
155 - <div class="tab_info">  
156 - <text>回答</text>  
157 - </div>  
158 - <div class="user_info_box">  
159 - 用户回复专家提问的内容回复专家提问的内容回复专家  
160 - 提问回复专家提问的内容回复专家提问的内容回复专家  
161 - 提问回复专家提问的内容的内容的内容  
162 - </div>  
163 - </div>  
164 -  
165 - <!--同意转诊须填表单-->  
166 - <div class="tab_content_box">  
167 - <div class="tab_content">  
168 - <div class="content_item">  
169 - <div class="tab_title">接诊信息(同意转诊时需要填写此表单)</div>  
170 - <div class="info_box">  
171 - <div class="info_item">  
172 - <div class="title">接诊医院</div>  
173 - <div class="info_input"><input type="text" placeholder="请填写接诊医院"></div>  
174 - </div>  
175 - <div class="info_item">  
176 - <div class="title">转诊专家</div>  
177 - <div class="info_input"><input type="text" placeholder="请填写接诊医院"></div>  
178 - </div>  
179 - <div class="info_item">  
180 - <div class="title">接诊地点</div>  
181 - <div class="info_input"><input type="text" placeholder="请填写接诊医院"></div>  
182 - </div>  
183 - <div class="info_item" id="showDatePicker">  
184 - <div class="title">就诊时间</div>  
185 - <div class="info_input"><input class="time_value" type="text" placeholder="请填写接诊医院">  
186 - <text class="iconfont icon-xiala"></text>  
187 - </div>  
188 - </div>  
189 - </div>  
190 - </div>  
191 - </div>  
192 - </div>  
193 -  
194 -  
195 - <!--确认回复按钮-->  
196 - <div class="agree_btn submit">确认回复</div>  
197 - <!---->  
198 - <div class="bottom_box">  
199 - <div class="agree_btn">同意</div>  
200 - <div class="bottom_btn">驳回</div>  
201 - </div>  
202 -</div>  
203 -<div class="mask_box" hidden>  
204 - <div class="referral_popup_box">  
205 - <div>确认驳回</div>  
206 - <div class="referral_info">确定驳回转诊吗?</div>  
207 - <div class="referral_btn_box">  
208 - <div class="btn cancel_btn">取消</div>  
209 - <div class="btn confirm_btn">确认</div>  
210 - </div>  
211 - </div>  
212 -</div>  
213 -  
214 -<!--录音弹窗-->  
215 -<div class="mask_box first" hidden>  
216 - <div class="popup_box">  
217 - <div class="popup_title">录制语音</div>  
218 - <div class="popup_time">  
219 - <div class="time-item">  
220 - <!--<span id="day_show">0天</span>-->  
221 - <strong id="hour_show">  
222 - <text id="h"></text>  
223 - 00:</strong>  
224 - <strong id="minute_show">  
225 - <text></text>  
226 - 01:</strong>  
227 - <strong id="second_show">  
228 - <text></text>  
229 - 00</strong>  
230 - </div>  
231 - <div class="popup_info">还可以录制 <span id="second_test">5</span></div>  
232 - </div>  
233 - <div class="popup_btn_box">  
234 - <div class="popup_item start">  
235 - <img class="popup_icon" src="__TMPL__/public/assets/images/eicon09@2x.png" alt="">  
236 - <div>开始</div>  
237 - </div>  
238 - <div class="popup_item pause" hidden>  
239 - <img class="popup_icon" src="__TMPL__/public/assets/images/eicon13@2x.png" alt="">  
240 - <div>暂停</div>  
241 - </div>  
242 - <div class="popup_item stop" hidden>  
243 - <img class="popup_icon" src="__TMPL__/public/assets/images/eicon14@2x.png" alt="">  
244 - <div>已停止</div>  
245 - </div>  
246 - <div class="popup_center play start">  
247 - <img class="" src="__TMPL__/public/assets/images/eicon11@2x.png" alt="">  
248 - </div>  
249 - <div class="popup_center stopping" hidden>  
250 - <img class="" src="__TMPL__/public/assets/images/eicon12@2x.png" alt="">  
251 - </div>  
252 - <div class="popup_item next_step">  
253 - <img class="popup_icon" src="__TMPL__/public/assets/images/eicon10@2x.png" alt="">  
254 - <div>下一步</div>  
255 - </div>  
256 - </div>  
257 - </div>  
258 -</div>  
259 -  
260 -<!---->  
261 -<div class="mask_box second" hidden>  
262 - <div class="popup_box">  
263 - <div class="popup_title">录制语音</div>  
264 - <div class="popup_time">  
265 - <div class="popup_btn audition">点击试听</div>  
266 - <!--<div class="popup_info">时长:4分58秒</div>-->  
267 - </div>  
268 - <div class="popup_btn_box">  
269 - <div class="large_icon rerecord">  
270 - <img class="popup_icon " src="__TMPL__/public/assets/images/eicon15@2x.png" alt="">  
271 - <div>重新录制</div>  
272 - </div>  
273 - <div class="large_icon submit_voice">  
274 - <img class="popup_icon upload" src="__TMPL__/public/assets/images/eicon16@2x.png" alt="">  
275 - <div>我要发送</div>  
276 - </div>  
277 - </div>  
278 - </div>  
279 -</div>  
280 -  
281 -<script src="__TMPL__/public/assets/js/jquery-2.1.0.js"></script>  
282 -<script src="__TMPL__/public/assets/js/weui.js"></script>  
283 -<script src="__TMPL__/public/assets/js/myweui.js"></script>  
284 -<!--<script src="__TMPL__/public/assets/js/referral.js"></script>-->  
285 -<script>  
286 - //文本框显示字数  
287 - $(".area").on("input propertychange", function () {  
288 -  
289 - var $this = $(this),  
290 - _val = $this.val(),  
291 - count = "";  
292 - if (_val.length > 1000) {  
293 - $this.val(_val.substring(0, 1000));  
294 - }  
295 - count = 1000 - $this.val().length;  
296 - $(this).siblings(".text_num").children('.text-count').text(count);  
297 - });  
298 -  
299 - // 疾病分类下拉  
300 - $('.inquiry_type').click(function () {  
301 - weui.picker([  
302 - {label: '一类', value: 0},  
303 - {label: '二类', value: 1}  
304 - ], {  
305 - onChange: function (res) {  
306 - console.log(res)  
307 - },  
308 - onConfirm: function (res) {  
309 - $('.inquiry_value').val(res[0].label)  
310 - }  
311 - }  
312 - )  
313 - })  
314 - // 疾病分类下拉  
315 - $('.expert').click(function () {  
316 - weui.picker([  
317 - {label: '王医生', value: 0},  
318 - {label: '刘易斯', value: 1}  
319 - ], {  
320 - onChange: function (res) {  
321 - console.log(res)  
322 - },  
323 - onConfirm: function (res) {  
324 - $('.expert_value').val(res[0].label)  
325 - }  
326 - }  
327 - )  
328 - })  
329 - // 性别分类  
330 - $('.sex_type').click(function () {  
331 - weui.picker([  
332 - {label: '男', value: 0},  
333 - {label: '女', value: 1}  
334 - ], {  
335 - onChange: function (res) {  
336 - console.log(res)  
337 - },  
338 - onConfirm: function (res) {  
339 - $('.sex_value').val(res[0].label)  
340 - }  
341 - }  
342 - )  
343 - })  
344 - // 性别分类  
345 - $('.unit_type').click(function () {  
346 - weui.picker([  
347 - {label: '国企', value: 0},  
348 - {label: '私企', value: 1}  
349 - ], {  
350 - onChange: function (res) {  
351 - console.log(res)  
352 - },  
353 - onConfirm: function (res) {  
354 - $('.unit_value').val(res[0].label)  
355 - }  
356 - }  
357 - )  
358 - })  
359 - //就诊时间  
360 - $('#showDatePicker').on('click', function () {  
361 - weui.datePicker({  
362 - start: 2019,  
363 - end: new Date().getFullYear(),  
364 - onChange: function (result) {  
365 - console.log(result);  
366 - },  
367 - onConfirm: function (result) {  
368 - console.log(result[0].label+' - '+result[1].label+' - '+result[2].label)  
369 - $('.time_value').val(result[0].value+' - '+result[1].value+' - '+result[2].value)  
370 - }  
371 - });  
372 - });  
373 -  
374 -  
375 -  
376 - //语音模块  
377 - // $('.icon-tianxie').hide()  
378 - // $('.voice_first').hide()  
379 - // $('.voice_second').hide()  
380 - $('.voice_third').hide()  
381 - $('.icon_cancle').hide()  
382 - // $('.voice_module').hide()  
383 -  
384 - var title_id = ''  
385 -  
386 - //点击  
387 - $('.info_item').on('click','.title',function () {  
388 - $(this).parent().toggleClass('voice')  
389 - })  
390 -  
391 -  
392 - //点击正在播放按钮  
393 - $('.icon-luying_ongoing').click(function () {  
394 - var videolist = $(".voice_module");  
395 - for (var i = 0; i < videolist.length; i++) {  
396 - var videoid = $(videolist[i]).attr("video-id");  
397 - if (videoid == title_id) {  
398 - $(videolist[i]).show();  
399 - $(videolist[i]).children('.voice_second').hide()  
400 - $(videolist[i]).children('.voice_third').show();  
401 - }  
402 - }  
403 - })  
404 -  
405 -  
406 - var times = "";//倒计时总秒数量  
407 - var time = "";  
408 -  
409 - function countDown(times) {  
410 - var timer = null;  
411 - timer = setInterval(function () {  
412 - var day = 0,  
413 - hour = 0,  
414 - minute = 0,  
415 - second = 0;//时间默认值  
416 - if (times > 0) {  
417 - day = Math.floor(times / (60 * 60 * 24));  
418 - hour = Math.floor(times / (60 * 60)) - (day * 24);  
419 - minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);  
420 - second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);  
421 - }  
422 - if (day <= 9) day = '0' + day;  
423 - if (hour <= 9) hour = '0' + hour;  
424 - if (minute <= 9) minute = '0' + minute;  
425 - if (second <= 9) second = '0' + second;  
426 -  
427 - $('#hour_show').html('<text id="h"></text>' + hour + ':');  
428 - $('#minute_show').html('<text></text>' + minute + ':');  
429 - $('#second_show').html('<text></text>' + second + '');  
430 -  
431 - //  
432 - console.log(day + "天:" + hour + "小时:" + minute + "分钟:" + second + "秒");  
433 - times--;  
434 -  
435 - }, 1000);  
436 - // if (times <= 0) {  
437 - // clearInterval(timer);  
438 - // }  
439 -  
440 - $('.pause').click(function () {  
441 - // timer(intDiff);  
442 - clearInterval(timer);  
443 - localStorage.setItem("times", times)  
444 - })  
445 - $('.stop').click(function () {  
446 - clearInterval(timer);  
447 - times = 0;  
448 - })  
449 - $('.stopping').click(function () {  
450 - clearInterval(timer);  
451 - localStorage.clear()  
452 - })  
453 - }  
454 -  
455 - $('.start').click(function () {  
456 - time = localStorage.getItem("times")  
457 - if (time == null) {  
458 - times = parseInt(60)  
459 - } else {  
460 - times = time;  
461 - }  
462 - console.log(time)  
463 - countDown(times);  
464 - localStorage.setItem("times", times)  
465 - })  
466 -  
467 -  
468 - //添加一条新语音  
469 - var num = 0;  
470 - $('.voice_module').on('click', '.add_voice', function () {  
471 - times=60  
472 - // clearInterval(timer);  
473 - var day = 0,  
474 - hour = 0,  
475 - minute = 0,  
476 - second = 0;//时间默认值  
477 - if (day <= 9) day = '0' + day;  
478 - if (hour <= 9) hour = '0' + hour;  
479 - if (minute <= 9) minute = '0' + minute;  
480 - if (second <= 9) second = '0' + second;  
481 -  
482 - $('#hour_show').html('<text id="h"></text>' + hour + ':');  
483 - $('#minute_show').html('<text></text>' + minute + ':');  
484 - $('#second_show').html('<text></text>' + second + '');  
485 -  
486 -  
487 - num = num + 1  
488 - var parent = $(this).parents('.voice_module')  
489 - var html = '<div class="voice_list" voiceitemid="'+num+'">\n' +  
490 - '<div class="voice_box voice_third" style="display: none;">\n' +  
491 - ' <div class="voice_item">\n' +  
492 - ' <text class="iconfont icon-luyin voice_icon"></text>\n' +  
493 - ' <text class="voice_font luyin">点击图标可播放 时长:10秒</text>\n' +  
494 - ' </div>\n' +  
495 - ' <div class="voice_btn_box">\n' +  
496 - ' <text class="iconfont icon-quxiao cancle_voice"></text>\n' +  
497 - // ' <text class="iconfont icon-tianjia add_voice"></text>\n' +  
498 - ' </div>\n' +  
499 - ' </div>\n' +  
500 - ' <div class="voice_box voice_first">\n' +  
501 - ' <div class="voice_item">\n' +  
502 - ' <text class="iconfont icon-huatong mike voice_icon"></text>\n' +  
503 - ' <text class="voice_font huatong">点击图标开始语音语音最长60秒</text>\n' +  
504 - ' </div>\n' +  
505 - ' <div class="voice_btn_box">\n' +  
506 - ' <text class="iconfont icon-quxiao icon_cancle cancle_voice"></text>\n' +  
507 - ' </div>\n' +  
508 - ' </div>\n' +  
509 - '</div>'  
510 -  
511 -  
512 - // parent.append($('.voice_list').html());  
513 - parent.append(html)  
514 -  
515 - })  
516 -  
517 - //显示弹窗  
518 - var videoid=''  
519 - //生命全局唯一 音频  
520 - var voiceBox;  
521 - $(document).on("click", ".mike", function () {  
522 - $('.first').show()  
523 - $('.play').show()  
524 - $('.start').show()  
525 - $('.stopping').hide()  
526 - $('.stop').hide()  
527 - $('.next_step').hide();  
528 - voiceBox = $(this).parents('.voice_list');  
529 - });  
530 -  
531 - //删除语音  
532 - $(".voice_module").on("click",".cancle_voice",function(){  
533 - $(this).parents(".voice_box").remove();  
534 - })  
535 -  
536 - //开始录音  
537 - $('.start').click(function () {  
538 - $('.start').hide()  
539 - $('.play').hide()  
540 - $('.pause').show()  
541 - $('.stopping').show()  
542 - $('.next_step').hide()  
543 - })  
544 -  
545 - //暂停  
546 - $('.pause').click(function () {  
547 - $('.pause').hide()  
548 - $('.start').show()  
549 - $('.stopping').hide()  
550 -  
551 - })  
552 -  
553 - //停止录音  
554 - $('.stopping').click(function () {  
555 - $('.next_step').show()  
556 - $('.stop').show()  
557 - $('.pause').hide()  
558 - })  
559 -  
560 - //下一步  
561 - $('.next_step').click(function () {  
562 - $('.first').hide()  
563 - $('.second').show()  
564 - })  
565 -  
566 - //点击试听  
567 - $('.audition').click(function () {  
568 - // var videolist = $(".voice_module");  
569 - // for (var i = 0; i < videolist.length; i++) {  
570 - // var videoid = $(videolist[i]).attr("video-id");  
571 - // if (videoid == title_id) {  
572 - // $('.second').hide()  
573 - // $(videolist[i]).show();  
574 - // $(videolist[i]).children('.voice_list').hide()  
575 - // $(videolist[i]).children('.voice_third').show();  
576 - // }  
577 - // }  
578 - })  
579 -  
580 -  
581 - //我要发送  
582 - $('.submit_voice').click(function () {  
583 - voiceBox.find('.voice_first').hide().siblings('.voice_third').show()  
584 - $('.second').hide()  
585 - })  
586 -  
587 - //重新录制  
588 - $('.rerecord').click(function () {  
589 - $('.first').show()  
590 - $('.second').hide()  
591 - $('.stop').hide()  
592 - $('.stopping').hide()  
593 - $('.start').show()  
594 - $('.start').show()  
595 - })  
596 -  
597 - //上传图片  
598 - $(function () {  
599 - var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',  
600 - $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),  
601 - $uploaderInput = $("#uploaderInput"),  
602 - $uploaderFiles = $("#uploaderFiles")  
603 - ;  
604 -  
605 - $uploaderInput.on("change", function (e) {  
606 - // console.log(e)  
607 - var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;  
608 - for (var i = 0, len = files.length; i < len; ++i) {  
609 - var file = files[i];  
610 - console.log(url.createObjectURL(file))  
611 -  
612 - if (url) {  
613 - src = url.createObjectURL(file);  
614 - // var  
615 - } else {  
616 - src = e.target.result;  
617 - }  
618 - $uploaderFiles.append($(tmpl.replace('#url#', src)));  
619 - }  
620 - });  
621 - $uploaderFiles.on("click", "li", function () {  
622 - $galleryImg.attr("style", this.getAttribute("style"));  
623 - $gallery.fadeIn(100);  
624 - });  
625 - $gallery.on("click", function () {  
626 - $gallery.fadeOut(100);  
627 - });  
628 - });  
629 -  
630 -</script>  
631 -</body>  
632 -</html>