Accueil Explorer Aide
S'inscrire Connexion
bulomakaka
/
ekexiu.app
Suivre 2
Voter 1
Fork 0
Code Tickets 0 Pull Requests 0 Commits 70 Publications 0 Wiki

Aucune description

Aborescence: 8c7bdde4a6
Branches Tags
ekexiu.app
/
app
/
html
/
chats.html

chats.html 26KB
Historique Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852 
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. 		<title></title>
  7. 		<link href="../css/mui.min.css" rel="stylesheet" />
  8. 		<link rel="stylesheet" type="text/css" href="../css/app.css" />
  9. 		<link href="../css/iconfont.css" rel="stylesheet" />
  10. 		<link href="../css/mui.imageviewer.css" rel="stylesheet" />
  11. 		<style>
  12. 			html,
  13. 			body {
  14. 				height: 100%;
  15. 				margin: 0px;
  16. 				padding: 0px;
  17. 				overflow: hidden;
  18. 				-webkit-touch-callout: none;
  19. 				-webkit-user-select: none;
  20. 			}
  21. 			footer {
  22. 				position: fixed;
  23. 				width: 100%;
  24. 				height: 50px;
  25. 				min-height: 50px;
  26. 				border-top: solid 1px #bbb;
  27. 				left: 0px;
  28. 				bottom: 0px;
  29. 				overflow: hidden;
  30. 				padding: 0px 50px;
  31. 				background-color: #fafafa;
  32. 			}
  33. 			.footer-left {
  34. 				position: absolute;
  35. 				width: 50px;
  36. 				height: 50px;
  37. 				left: 0px;
  38. 				bottom: 0px;
  39. 				text-align: center;
  40. 				vertical-align: middle;
  41. 				line-height: 100%;
  42.  				padding: 12px 4px;
  43.  			}
  44.  			.footer-right {
  45.  				position: absolute;
  46.  				width: 50px;
  47.  				height: 50px;
  48.  				right: 0px;
  49.  				bottom: 0px;
  50.  				text-align: center;
  51.  				vertical-align: middle;
  52.  				line-height: 100%;
  53.  				padding: 12px 5px;
  54.  				display: inline-block;
  55.  			}
  56.  			.footer-center {
  57.  				height: 100%;
  58.  				padding: 5px 0px;
  59.  			}
  60.  			.footer-center [class*=input] {
  61.  				width: 100%;
  62.  				height: 100%;
  63.  				border-radius: 5px;
  64.  			}
  65.  			.footer-center .input-text {
  66.  				background: #fff;
  67.  				border: solid 1px #ddd;
  68.  				padding: 10px !important;
  69.  				font-size: 16px !important;
  70.  				line-height: 18px !important;
  71.  				font-family: verdana !important;
  72.  				overflow: hidden;
  73.  			}
  74.  			.footer-center .input-sound {
  75.  				background-color: #eee;
  76.  			}
  77.  			.mui-content {
  78.  				height: 100%;
  79.  				padding: 44px 0px 50px 0px;
  80.  				overflow: auto;
  81.  				background-color: #eaeaea;
  82.  			}
  83.  			#msg-list {
  84.  				height: 100%;
  85.  				overflow: auto;
  86.  				-webkit-overflow-scrolling: touch;
  87.  			}
  88.  			.msg-item {
  89.  				padding: 8px;
  90.  				clear: both;
  91.  			}
  92.  			.msg-item .mui-item-clear {
  93.  				clear: both;
  94.  			}
  95.  			.msg-item .msg-user {
  96.  				width: 38px;
  97.  				height: 38px;
  98.  				border: solid 1px #d3d3d3;
  99.  				display: inline-block;
  100.  				background: #fff;
  101.  				border-radius: 3px;
  102.  				vertical-align: top;
  103.  				text-align: center;
  104.  				float: left;
  105.  				padding: 3px;
  106.  				color: #ddd;
  107.  			}
  108.  			
  109.  			.msg-item .msg-user-img{
  110.  				width: 38px;
  111.  				height: 38px;
  112.  				display: inline-block;
  113.  				border-radius: 3px;
  114.  				vertical-align: top;
  115.  				text-align: center;
  116.  				float: left;
  117.  				color: #ddd;
  118.  			}
  119.  			
  120.  			.msg-item .msg-content {
  121.  				display: inline-block;
  122.  				border-radius: 5px;
  123.  				border: solid 1px #d3d3d3;
  124.  				background-color: #FFFFFF;
  125.  				color: #333;
  126.  				padding: 8px;
  127.  				vertical-align: top;
  128.  				font-size: 15px;
  129.  				position: relative;
  130.  				margin: 0px 8px;
  131.  				max-width: 75%;
  132.  				min-width: 35px;
  133.  				float: left;
  134.  			}
  135.  			.msg-item .msg-content .msg-content-inner {
  136.  				overflow-x: hidden;
  137.  			}
  138.  			.msg-item .msg-content .msg-content-arrow {
  139.  				position: absolute;
  140.  				border: solid 1px #d3d3d3;
  141.  				border-right: none;
  142.  				border-top: none;
  143.  				background-color: #FFFFFF;
  144.  				width: 10px;
  145.  				height: 10px;
  146.  				left: -5px;
  147.  				top: 12px;
  148.  				-webkit-transform: rotateZ(45deg);
  149.  				transform: rotateZ(45deg);
  150.  			}
  151.  			.msg-item-self .msg-user,
  152.  			.msg-item-self .msg-content {
  153.  				float: right;
  154.  			}
  155.  			.msg-item-self .msg-content .msg-content-arrow {
  156.  				left: auto;
  157.  				right: -5px;
  158.  				-webkit-transform: rotateZ(225deg);
  159.  				transform: rotateZ(225deg);
  160.  			}
  161.  			.msg-item-self .msg-content,
  162.  			.msg-item-self .msg-content .msg-content-arrow {
  163.  				background-color: #4CD964;
  164.  				color: #fff;
  165.  				border-color: #2AC845;
  166.  			}
  167.  			footer .mui-icon {
  168.  				color: #999999;
  169.  			}
  170.  			footer .mui-icon:active {
  171.  				color: #FF9900 !important;
  172.  			}/*#007AFF*/
  173.  			footer .mui-icon-paperplane:before {
  174.  				content: "发送";
  175.  			}
  176.  			footer .mui-icon-paperplane {
  177.  				/*-webkit-transform: rotateZ(45deg);
  178.  				transform: rotateZ(45deg);*/
  179.  				
  180.  				font-size: 16px;
  181.  				word-break: keep-all;
  182.  				line-height: 100%;
  183.  				padding-top: 6px;
  184.  				color: rgba(0, 135, 250, 1);
  185.  			}
  186.  			#msg-sound {
  187.  				-webkit-user-select: none !important;
  188.  				user-select: none !important;
  189.  			}
  190.  			.rprogress {
  191.  				position: absolute;
  192.  				left: 50%;
  193.  				top: 50%;
  194.  				width: 140px;
  195.  				height: 140px;
  196.  				margin-left: -70px;
  197.  				margin-top: -70px;
  198.  				background-image: url(../images/arecord.png);
  199.  				background-repeat: no-repeat;
  200.  				background-position: center center;
  201.  				background-size: 30px 30px;
  202.  				background-color: rgba(0, 0, 0, 0.7);
  203.  				border-radius: 5px;
  204.  				display: none;
  205.  				-webkit-transition: .15s;
  206.  			}
  207.  			.rschedule {
  208.  				background-color: rgba(0, 0, 0, 0);
  209.  				border: 5px solid rgba(0, 183, 229, 0.9);
  210.  				opacity: .9;
  211.  				border-left: 5px solid rgba(0, 0, 0, 0);
  212.  				border-right: 5px solid rgba(0, 0, 0, 0);
  213.  				border-radius: 50px;
  214.  				box-shadow: 0 0 15px #2187e7;
  215.  				width: 46px;
  216.  				height: 46px;
  217.  				position: absolute;
  218.  				left: 50%;
  219.  				top: 50%;
  220.  				margin-left: -23px;
  221.  				margin-top: -23px;
  222.  				-webkit-animation: spin 1s infinite linear;
  223.  				animation: spin 1s infinite linear;
  224.  			}
  225.  			.r-sigh{
  226.  				display: none;
  227.  				border-radius: 50px;
  228.  				box-shadow: 0 0 15px #2187e7;
  229.  				width: 46px;
  230.  				height: 46px;
  231.  				position: absolute;
  232.  				left: 50%;
  233.  				top: 50%;
  234.  				margin-left: -23px;
  235.  				margin-top: -23px;
  236.  				text-align: center;
  237.  				line-height: 46px;
  238.  				font-size: 40px;
  239.  				font-weight: bold;
  240.  				color: #2187e7;
  241.  			}
  242.  			.rprogress-sigh{
  243.  				background-image: none !important;
  244.  			}
  245.  			.rprogress-sigh .rschedule{
  246.  				display: none !important;
  247.  			}
  248.  			.rprogress-sigh .r-sigh{
  249.  				display: block !important;
  250.  			}
  251.  			.rsalert {
  252.  				font-size: 12px;
  253.  				color: #bbb;
  254.  				text-align: center;
  255.  				position: absolute;
  256.  				border-radius: 5px;
  257.  				width: 130px;
  258.  				margin: 5px 5px;
  259.  				padding: 5px;
  260.  				left: 0px;
  261.  				bottom: 0px;
  262.  			}
  263.  			@-webkit-keyframes spin {
  264.  				0% {
  265.  					-webkit-transform: rotate(0deg);
  266.  				}
  267.  				100% {
  268.  					-webkit-transform: rotate(360deg);
  269.  				}
  270.  			}
  271.  			@keyframes spin {
  272.  				0% {
  273.  					transform: rotate(0deg);
  274.  				}
  275.  				100% {
  276.  					transform: rotate(360deg);
  277.  				}
  278.  			}
  279.  			#h {
  280.  				background: #fff;
  281.  				border: solid 1px #ddd;
  282.  				padding: 10px !important;
  283.  				font-size: 16px !important;
  284.  				font-family: verdana !important;
  285.  				line-height: 18px !important;
  286.  				overflow: visible;
  287.  				position: absolute;
  288.  				left: -1000px;
  289.  				right: 0px;
  290.  				word-break: break-all;
  291.  				word-wrap: break-word;
  292.  			}
  293.  			.cancel {
  294.  				background-color: darkred;
  295.  			}
  296.  			
  297.  			.displayNone {
  298.  				display: none;
  299.  			}
  300.  			#consultCon {
  301.  				margin: -11px 15px -11px;
  302.  			}
  303.  			#lookConBtn {
  304.  				text-align: center;
  305.  			}
  306.  			
  307.  			/*#middlePopover {
  308.  				height: 200px;
  309.  				width:80%;
  310.  				margin: auto;
  311.  			}*/
  312.  			.mui-popover #arrow {
  313.  				background: none;
  314.  			}
  315.  			.assessAtarStyle {
  316.  				padding-bottom: 10px;
  317.  				left: 0;
  318.  				z-index: 999;
  319.  			}
  320.  			#assessText {
  321.  				
  322.  			}
  323.  			.showCon {
  324.  				padding: 10px 20px;
  325.  			}
  326.  			/*待评价开始*/
  327.  			.frmbtn1 {
  328.  				border:1px solid red;
  329.  				border-radius:6px;
  330.  				color:red;
  331.  			}
  332.  			.frmbtn1.mui-btn:enabled:active{
  333.  				background: red;
  334.  				color: #fff;
  335.  			}
  336.  			/*待评价结束*/
  337.  		</style>
  338.  	</head>
  339.   	<body contextmenu="return false;">
  340.  		<header class="mui-bar mui-bar-nav toptitbox">
  341.  			<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback" id="backBtn">
  342.  				<a href="consultlist.html"></a>
  343.  			</span>
  344.  			<h1 class="mui-title toptit" id="chatName"></h1>
  345.  			<span class="mui-icon mui-icon-contact mui-pull-right personhead"></span>
  346.  		</header>
  347.  		<pre id='h'></pre>
  348.  		<script id='msg-template' type="text/template">
  349.  			<% for(var i in record){ var item=record[i]; %>
  350.  				<div class="msg-item <%= (item.sender=='self'?' msg-item-self':'') %>" msg-type='<%=(item.type)%>' msg-content='<%=(item.content)%>'>
  351.  					<!--对话内容渲染-->
  352.  					<% if(item.sender=='self' ) { %>
  353.  						<!--<i class="msg-user mui-icon mui-icon-person"></i>-->
  354.  						<img class="msg-user msg-user-img" src="../images/dialogue.png" alt="" />
  355.  					<% } else { %>
  356.  						<img class="msg-user msg-user-img" src="../images/logo.png" alt="" />
  357.  					<% } %>
  358.  					<div class="msg-content">
  359.  						<div class="msg-content-inner">
  360.  							<% if(item.type=='text' ) { %>
  361.  								<%=( item.content|| '&nbsp;&nbsp;') %>
  362.  							<% } else if(item.type=='image' ) { %>
  363.  								<img class="msg-content-image" src="<%=(item.content)%>" style="max-width: 100px;" />
  364.  							<% } else if(item.type=='sound' ) { %>
  365.  								<span class="mui-icon mui-icon-mic" style="font-size: 18px;font-weight: bold;"></span>
  366.  								<span class="play-state">点击播放</span>
  367.  							<% } %>
  368.  						</div>
  369.  						<div class="msg-content-arrow"></div>
  370.  					</div>
  371.  					<div class="mui-item-clear"></div>
  372.  				</div>
  373.  			<% } %>
  374.  		</script>
  375.  		<div class="mui-content">
  376.  			<div class="displayNone" id="status"></div>
  377.  			<!--评价内容-->
  378.  			<!--<div id="middlePopover" class="mui-popover">
  379. 				<div class="mui-popover-arrow" id="arrow"></div>
  380. 				<div class="mui-scroll-wrapper">
  381. 					<div class="mui-scroll">
  382. 						<ul class="mui-table-view showCon" >
  383. 							<div class="assessAtarStyle">
  384. 								<div class="levelbox" id="showStar">
  385. 						        	<span class="mui-icon iconfont icon-favor"></span>
  386. 					        		<span class="mui-icon iconfont icon-favor"></span>
  387. 					        		<span class="mui-icon iconfont icon-favor"></span>
  388. 					        		<span class="mui-icon iconfont icon-favor"></span>
  389. 					        		<span class="mui-icon iconfont icon-favor"></span>
  390. 					        	</div>
  391. 					       </div>
  392. 					       <div id="assessText"></div>
  393. 						</ul>
  394. 					</div>
  395. 				</div>
  396. 	
  397. 			</div>--><!--评价内容-->
  398.  			
  399.  			
  400.  			
  401.  			<div class="operatebox">
  402.  				<div class="themespan mui-pull-left">
  403.  					<span class="" id="consultTitle">
  404.  						上面的例子用了很多属性来设置边框。
  405.  					</span>
  406.  				</div>
  407.  				
  408.  				<!--我的需求，进行中-->
  409. 				<div class="operatebtnbox mui-pull-right displayNone" id="confirm">
  410. 					<button class="mui-btn mui-btn-block mui-btn-outlined frmbtn operatebtn" id="confirmBtn" >点击确认完成咨询</button>
  411. 				</div>
  412. 				<!--我的需求，未评价-->
  413. 				<div class="operatebtnbox mui-pull-right displayNone" id="assessBtn">
  414. 					<button class="mui-btn mui-btn-block mui-btn-outlined frmbtn1 operatebtn"  style="width:80px;">去评价</button>
  415. 				</div>
  416. 				<!--我的需求，已评价-->
  417. 				<div class="operatebtnbox mui-pull-right operated displayNone" id="assessed">
  418. 					<a href="#middlePopover">
  419. 						<div class="evabox" id="assessed_center">
  420. 							<span>已评价</span>
  421. 							<div class="levelbox" id="my_starContainer">
  422. 					        	<span class="mui-icon iconfont icon-favor"></span> <!--无色星星icon-favor  黄色星icon-favorfill-->
  423. 				        		<span class="mui-icon iconfont icon-favor"></span>
  424. 				        		<span class="mui-icon iconfont icon-favor"></span>
  425. 				        		<span class="mui-icon iconfont icon-favor"></span>
  426. 				        		<span class="mui-icon iconfont icon-favor"></span>
  427. 				        	</div>
  428. 						</div>
  429. 					</a>
  430. 				</div>
  431. 				
  432. 				<!--收到咨询，对方未评价-->
  433. 				<div class="operatebtnbox mui-pull-right displayNone" style="width:30%;" id="that_weiassess">
  434. 					<div class="evabox"><span>对方还未评价</span></div>
  435. 				</div>
  436. 				<!--收到咨询，进行中-->
  437. 				<div class="operatebtnbox mui-pull-right displayNone" id="waying" style="width:30%;">
  438. 					<div class="evabox"><span>进行中</span></div>
  439. 				</div>
  440. 				<!--收到咨询，对方已评价-->
  441. 				<div class="operatebtnbox mui-pull-right operated displayNone" id="that_assessed" style="cursor: pointer;">
  442. 					<a href="#middlePopover">
  443. 						<div class="evabox" >
  444. 							<span>对方已评价</span>
  445. 							<div class="levelbox" id="consult_starContainer">
  446. 					        	<span class="mui-icon iconfont icon-favor"></span> <!--无色星星icon-favor  黄色星icon-favorfill-->
  447. 				        		<span class="mui-icon iconfont icon-favor"></span>
  448. 				        		<span class="mui-icon iconfont icon-favor"></span>
  449. 				        		<span class="mui-icon iconfont icon-favor"></span>
  450. 				        		<span class="mui-icon iconfont icon-favor"></span>
  451. 				        	</div>
  452. 						</div>
  453. 					</a>
  454. 					
  455. 					
  456. 				</div>
  457.  				
  458.  			</div>
  459.  			
  460.  			
  461.  			<div class="consult_content">
  462.  				<ul class="mui-table-view" >
  463. 	 				<li class="mui-table-view-cell mui-collapse" id="mui-active" style="background-color:#fff;">
  464. 	 					<div class="mui-collapse-content" id="consultCon">
  465. 							可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，
  466. 							只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可；mui官网中的方法说明，
  467. 							使用的就是折叠面板控件。
  468. 						</div>
  469. 						<a class="mui-navigate-right" href="#" id="lookConBtn">查看咨询内容</a>
  470. 					</li>
  471.  				</ul>
  472.  				
  473.  			</div>
  474.  			
  475.  			
  476.  			<div id='msg-list'> 
  477.  				
  478.  			</div>
  479.  		</div>
  480.  		
  481.  		<footer class="" id="chatFooter">
  482.  			<div class="footer-left">
  483.  				<i id='msg-image' class="mui-icon mui-icon-camera" style="font-size: 28px;"></i>
  484.  			</div>
  485.  			<div class="footer-center">
  486.  				<textarea id='msg-text' type="text" class='input-text'></textarea>
  487.  				<button id='msg-sound' type="button" class='input-sound' style="display: none;">按住说话</button>
  488.  			</div>
  489.  			<label for="" class="footer-right">
  490.  				<i id='msg-type' class="mui-icon mui-icon-mic"></i>
  491.  			</label>
  492.  		</footer>
  493.  		<div id='sound-alert' class="rprogress">
  494.  			<div class="rschedule"></div>
  495.  			<div class="r-sigh">!</div>
  496.  			<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>
  497.  		</div>
  498.  		<script src="../js/public/mui.min.js"></script>
  499.  		<script src="../js/public/base.js"></script>
  500.  		<script src="../js/public/mui.imageViewer.js"></script>
  501.  		<script src="../js/public/arttmpl.js"></script>
  502.  		<script type="text/javascript" src="../js/chats.js"></script>
  503.  		<script type="text/javascript" charset="utf-8">
  504.  			/*mui.init({
  505. 				swipeBack: true //启用右滑关闭功能
  506. 			});*/
  507. 			/*mui('.mui-scroll-wrapper').scroll();
  508. 			mui('body').on('shown', '.mui-popover', function(e) {
  509. 				//console.log('shown', e.detail.id);//detail为当前popover元素
  510. 				console.log('shown');
  511. 			});
  512. 			mui('body').on('hidden', '.mui-popover', function(e) {
  513. 				//console.log('hidden', e.detail.id);//detail为当前popover元素
  514. 			});*/
  515. 			
  516.  		
  517.  		
  518.  		
  519.  		
  520.  		
  521.  		
  522.  		
  523.  		
  524.  			/*(function($, doc) {
  525.  				var MIN_SOUND_TIME = 800;
  526.  				$.init({
  527.  					gestureConfig: {
  528.  						tap: true, //默认为true
  529.  						doubletap: true, //默认为false
  530.  						longtap: true, //默认为false
  531.  						swipe: true, //默认为true
  532.  						drag: true, //默认为true
  533.  						hold: true, //默认为false，不监听
  534.  						release: true //默认为false，不监听
  535.  					}
  536.  				});
  537.  				template.config('escape', false);
  538.  				//$.plusReady=function(fn){fn();};
  539.  				$.plusReady(function() {
  540.  					plus.webview.currentWebview().setStyle({
  541.  						softinputMode: "adjustResize"
  542.  					});
  543.  					var showKeyboard = function() {
  544.  						if ($.os.ios) {
  545.  							var webView = plus.webview.currentWebview().nativeInstanceObject();
  546.  							webView.plusCallMethod({
  547.  								"setKeyboardDisplayRequiresUserAction": false
  548.  							});
  549.  						} else {
  550.  							var Context = plus.android.importClass("android.content.Context");
  551.  							var InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
  552.  							var main = plus.android.runtimeMainActivity();
  553.  							var imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
  554.  							imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
  555.  							//var view = ((ViewGroup)main.findViewById(android.R.id.content)).getChildAt(0);
  556.  							imm.showSoftInput(main.getWindow().getDecorView(), InputMethodManager.SHOW_IMPLICIT);
  557.  							//alert("ll");
  558.  						}
  559.  					};
  560.    					var record = [{
  561.    						sender: 'zs',
  562.    						type: 'text',
  563.    						content: 'Hi，我是 科袖 小管家！'
  564.    					}];
  565.  					var ui = {
  566.  						body: doc.querySelector('body'),
  567.  						footer: doc.querySelector('footer'),
  568.  						footerRight: doc.querySelector('.footer-right'),
  569.  						footerLeft: doc.querySelector('.footer-left'),
  570.  						btnMsgType: doc.querySelector('#msg-type'),
  571.  						boxMsgText: doc.querySelector('#msg-text'),
  572.  						boxMsgSound: doc.querySelector('#msg-sound'),
  573.  						btnMsgImage: doc.querySelector('#msg-image'),
  574.  						areaMsgList: doc.querySelector('#msg-list'),
  575.  						boxSoundAlert: doc.querySelector('#sound-alert'),
  576.  						h: doc.querySelector('#h'),
  577.  						content: doc.querySelector('.mui-content')
  578.  					};
  579.  					ui.h.style.width = ui.boxMsgText.offsetWidth+'px';
  580.  					//alert(ui.boxMsgText.offsetWidth );
  581.  					var footerPadding = ui.footer.offsetHeight - ui.boxMsgText.offsetHeight;
  582.  					var msgItemTap = function(msgItem, event) {
  583.  						var msgType = msgItem.getAttribute('msg-type');
  584.  						var msgContent = msgItem.getAttribute('msg-content')
  585.  						if (msgType == 'sound') {
  586.  							player = plus.audio.createPlayer(msgContent);
  587.  							var playState = msgItem.querySelector('.play-state');
  588.  							playState.innerText = '正在播放...';
  589.  							player.play(function() {
  590.  								playState.innerText = '点击播放';
  591.  							}, function(e) {
  592.  								playState.innerText = '点击播放';
  593.  							});
  594.  						}
  595.  					};
  596.  					var imageViewer = new $.ImageViewer('.msg-content-image', {
  597.  						dbl: false
  598.  					});
  599.  					var bindMsgList = function() {
  600.  						//绑定数据:
  601. // 						tp.bind({
  602. // 							template: 'msg-template',
  603. // 							element: 'msg-list',
  604. // 							model: record
  605. // 						});
  606.  						ui.areaMsgList.innerHTML = template('msg-template', {
  607.  							"record": record
  608.  						});
  609.  						var msgItems = ui.areaMsgList.querySelectorAll('.msg-item');
  610.  						[].forEach.call(msgItems, function(item, index) {
  611.  							item.addEventListener('tap', function(event) {
  612.  								msgItemTap(item, event);
  613.  							}, false);
  614.  						});
  615.  						imageViewer.findAllImage();
  616.  						ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight +  ui.areaMsgList.offsetHeight;
  617.  					};
  618.  					bindMsgList();
  619.  					window.addEventListener('resize', function() {
  620.  						ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight +  ui.areaMsgList.offsetHeight;
  621.  					}, false);
  622.  					var send = function(msg) {
  623.  						record.push(msg);
  624.  						bindMsgList();
  625.  						toRobot(msg.content);
  626.  					};
  627.  					var toRobot = function(info) {
  628.    						var apiUrl = 'http://www.tuling123.com/openapi/api';
  629. //						var apiUrl = baseUrl+'/ajax/tidings/qacon';
  630.  						$.getJSON(apiUrl, {
  631.  							"key": 'acfbca724ea1b5db96d2eef88ce677dc',
  632.  							"info": info,
  633.  							"userid": plus.device.uuid
  634.  						}, function(data) {
  635.  							//alert(JSON.stringify(data));
  636.  							record.push({
  637.  								sender: 'zs',
  638.  								type: 'text',
  639.  								content: data.text
  640.  							});
  641.  							bindMsgList();
  642.  						});
  643.  					};
  644.   					function msgTextFocus() {
  645.  							ui.boxMsgText.focus();
  646.  							setTimeout(function() {
  647.  								ui.boxMsgText.focus();
  648.  							}, 150);
  649.  						}
  650.  						//解决长按“发送”按钮，导致键盘关闭的问题；
  651.  					ui.footerRight.addEventListener('touchstart', function(event) {
  652.  						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
  653.  							msgTextFocus();
  654.  							event.preventDefault();
  655.  						}
  656.  					});
  657.  					//解决长按“发送”按钮，导致键盘关闭的问题；
  658.  					ui.footerRight.addEventListener('touchmove', function(event) {
  659.  						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
  660.  							msgTextFocus();
  661.  							event.preventDefault();
  662.  						}
  663.  					});
  664.  					//					ui.footerRight.addEventListener('touchcancel', function(event) {
  665.  					//						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
  666.  					//							msgTextFocus();
  667.  					//							event.preventDefault();
  668.  					//						}
  669.  					//					});
  670.  					//					ui.footerRight.addEventListener('touchend', function(event) {
  671.  					//						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
  672.  					//							msgTextFocus();
  673.  					//							event.preventDefault();
  674.  					//						}
  675.  					//					});
  676.  					ui.footerRight.addEventListener('release', function(event) {
  677.  						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
  678.  							//showKeyboard();
  679.  							ui.boxMsgText.focus();
  680.  							setTimeout(function() {
  681.  								ui.boxMsgText.focus();
  682.  							}, 150);
  683.  							//							event.detail.gesture.preventDefault();
  684.  							send({
  685.  								sender: 'self',
  686.  								type: 'text',
  687.  								content: ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '<br/>')
  688.  							});
  689.  							ui.boxMsgText.value = '';
  690.  							$.trigger(ui.boxMsgText, 'input', null);
  691.  						} else if (ui.btnMsgType.classList.contains('mui-icon-mic')) {
  692.  							ui.btnMsgType.classList.add('mui-icon-compose');
  693.  							ui.btnMsgType.classList.remove('mui-icon-mic');
  694.  							ui.boxMsgText.style.display = 'none';
  695.  							ui.boxMsgSound.style.display = 'block';
  696.  							ui.boxMsgText.blur();
  697.  							document.body.focus();
  698.  						} else if (ui.btnMsgType.classList.contains('mui-icon-compose')) {
  699.  							ui.btnMsgType.classList.add('mui-icon-mic');
  700.  							ui.btnMsgType.classList.remove('mui-icon-compose');
  701.  							ui.boxMsgSound.style.display = 'none';
  702.  							ui.boxMsgText.style.display = 'block';
  703.  							//--
  704.  							//showKeyboard();
  705.  							ui.boxMsgText.focus();
  706.  							setTimeout(function() {
  707.  								ui.boxMsgText.focus();
  708.  							}, 150);
  709.  						}
  710.  					}, false);
  711.  					ui.footerLeft.addEventListener('tap', function(event) {
  712.  						var btnArray = [{
  713.  							title: "拍照"
  714.  						}, {
  715.  							title: "从相册选择"
  716.  						}];
  717.  						plus.nativeUI.actionSheet({
  718.  							title: "选择照片",
  719.  							cancel: "取消",
  720.  							buttons: btnArray
  721.  						}, function(e) {
  722.  							var index = e.index;
  723.  							switch (index) {
  724.  								case 0:
  725.  									break;
  726.  								case 1:
  727.  									var cmr = plus.camera.getCamera();
  728.  									cmr.captureImage(function(path) {
  729.  										send({
  730.  											sender: 'self',
  731.  											type: 'image',
  732.  											content: "file://" +  plus.io.convertLocalFileSystemURL(path)
  733.  										});
  734.  									}, function(err) {});
  735.  									break;
  736.  								case 2:
  737.  									plus.gallery.pick(function(path) {
  738.  										send({
  739.  											sender: 'self',
  740.  											type: 'image',
  741.  											content: path
  742.  										});
  743.  									}, function(err) {}, null);
  744.  									break;
  745.  							}
  746.  						});
  747.  					}, false); 
  748.  					var setSoundAlertVisable=function(show){
  749.  						if(show){
  750.  							ui.boxSoundAlert.style.display = 'block';
  751.  							ui.boxSoundAlert.style.opacity = 1;
  752.  						}else{
  753.  							ui.boxSoundAlert.style.opacity = 0;
  754.  							//fadeOut完成再真正隐藏
  755.  							setTimeout(function(){
  756.  								ui.boxSoundAlert.style.display = 'none';
  757.  							},200);
  758.  						}
  759.  					};
  760.  					var recordCancel = false;
  761.  					var recorder = null;
  762.  					var audio_tips = document.getElementById("audio_tips");
  763. 					var startTimestamp = null;
  764. 					var stopTimestamp = null;
  765. 					var stopTimer = null;
  766. 					ui.boxMsgSound.addEventListener('hold', function(event) {
  767. 						recordCancel = false;
  768. 						if(stopTimer)clearTimeout(stopTimer);
  769. 						audio_tips.innerHTML = "手指上划，取消发送";
  770. 						ui.boxSoundAlert.classList.remove('rprogress-sigh');
  771. 						setSoundAlertVisable(true);
  772. 						recorder = plus.audio.getRecorder();
  773. 						if (recorder == null) {
  774. 							plus.nativeUI.toast("不能获取录音对象");
  775. 							return;
  776. 						}
  777. 						startTimestamp = (new Date()).getTime();
  778. 						recorder.record({
  779. 							filename: "_doc/audio/"
  780. 						}, function(path) {
  781. 							if (recordCancel) return;
  782. 							send({
  783. 								sender: 'self',
  784. 								type: 'sound',
  785. 								content: path
  786. 							});
  787. 						}, function(e) {
  788. 							plus.nativeUI.toast("录音时出现异常: " +  e.message);
  789. 						});
  790. 					}, false);
  791. 					ui.body.addEventListener('drag', function(event) {
  792. 						//console.log('drag');
  793. 						if (Math.abs(event.detail.deltaY) > 50) {
  794. 							if (!recordCancel) {
  795. 								recordCancel = true;
  796. 								if (!audio_tips.classList.contains("cancel")) {
  797. 									audio_tips.classList.add("cancel");
  798. 								}
  799. 								audio_tips.innerHTML = "松开手指，取消发送";
  800. 							}
  801. 						} else {
  802. 							if (recordCancel) {
  803. 								recordCancel = false;
  804. 								if (audio_tips.classList.contains("cancel")) {
  805. 									audio_tips.classList.remove("cancel");
  806. 								}
  807. 								audio_tips.innerHTML = "手指上划，取消发送";
  808. 							}
  809. 						}
  810. 					}, false);
  811. 					ui.boxMsgSound.addEventListener('release', function(event) {
  812. 						//console.log('release');
  813. 						if (audio_tips.classList.contains("cancel")) {
  814. 							audio_tips.classList.remove("cancel");
  815. 							audio_tips.innerHTML = "手指上划，取消发送";
  816. 						}
  817. 						//
  818. 						stopTimestamp = (new Date()).getTime();
  819. 						if (stopTimestamp - startTimestamp < MIN_SOUND_TIME) {
  820. 							audio_tips.innerHTML = "录音时间太短";
  821. 							ui.boxSoundAlert.classList.add('rprogress-sigh');
  822. 							recordCancel = true;
  823. 							stopTimer=setTimeout(function(){
  824. 								setSoundAlertVisable(false);
  825. 							},800);
  826. 						}else{
  827. 							setSoundAlertVisable(false);
  828. 						}
  829. 						recorder.stop();
  830. 					}, false);
  831. 					ui.boxMsgSound.addEventListener("touchstart", function(e) {
  832. 						//console.log("start....");
  833. 						e.preventDefault();
  834. 					});
  835. 					ui.boxMsgText.addEventListener('input', function(event) {
  836. 						ui.btnMsgType.classList[ui.boxMsgText.value == '' ? 'remove' : 'add']('mui-icon-paperplane');
  837. 						ui.btnMsgType.setAttribute("for", ui.boxMsgText.value == '' ? '' : 'msg-text');
  838. 						ui.h.innerText = ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '\n-') || '-';
  839. 						ui.footer.style.height = (ui.h.offsetHeight +  footerPadding) +  'px';
  840. 						ui.content.style.paddingBottom = ui.footer.style.height;
  841. 					});
  842. 					ui.boxMsgText.addEventListener('tap', function(event) {
  843. 						ui.boxMsgText.focus();
  844. 						setTimeout(function() {
  845. 							ui.boxMsgText.focus();
  846. 						}, 0);
  847. 					}, false);
  848. 				});
  849. 			}(mui, document));*/
  850. 		</script>
  851. 	</body>
  852. </html>