gui-im-input.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <template name="gui-im-input">
  2. <view>
  3. <view class="gui-im-footer"
  4. :style="{paddingBottom:paddingB}">
  5. <view class="gui-im-menus graceIMFonts icon-voice"
  6. hover-class="gui-tap" v-if="voiceBtnShow"
  7. @tap="showRec"></view>
  8. <view class="gui-im-menus graceIMFonts icon-photograph"
  9. hover-class="gui-tap"
  10. @tap="chooseImg"></view>
  11. <view class="gui-im-input">
  12. <input type="text" v-model="inputMsg"
  13. @confirm="sendTextMsg" :cursor-spacing="35" />
  14. </view>
  15. <view class="gui-items"
  16. style="padding:0 12rpx; margin-right:10rpx;"
  17. hover-class="gui-tap" @tap="sendTextMsg">发送</view>
  18. </view>
  19. <!-- 语音输入 -->
  20. <view class="gui-im-record" v-if="recShow">
  21. <view class="gui-im-record-txt">
  22. {{recTxt}}<text v-if="recing">已录音 : {{recLength}} s</text>
  23. </view>
  24. <view class="gui-im-record-btn"
  25. @tap="rec" :class="[recing ? 'gui-im-recording' : '']"></view>
  26. <view class="gui-im-send-voice"
  27. v-if="tmpVoice != ''">
  28. <text @tap="sendVoiceMsg">发送语音</text>
  29. </view>
  30. <view class="gui-im-record-close graceIMFonts icon-close"
  31. @tap="closeRec" v-if="!recing"></view>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. var bgAudioMannager = uni.getBackgroundAudioManager();
  37. export default {
  38. name : "gui-im-input",
  39. props : { },
  40. data() {
  41. return {
  42. paddingB : '0',
  43. uploading : false,
  44. recShow : false,
  45. recTxt : "请点击绿色按钮开始录音",
  46. inputMsg : "",
  47. recorderManager : null,
  48. recing : false,
  49. recLength : 1,
  50. recTimer : null,
  51. tmpVoice : '',
  52. voiceLen : 0,
  53. voiceBtnShow : false,
  54. // 播放相关
  55. player : null,
  56. playTxt : "试听语音"
  57. }
  58. },
  59. created : function(){
  60. // #ifndef H5
  61. this.voiceBtnShow = true;
  62. this.recorderManager = uni.getRecorderManager();
  63. this.recorderManager.onStop((res) => {
  64. this.tmpVoice = res.tempFilePath;
  65. this.recing = false;
  66. this.recTxt = "... 已录音 "+this.recLength+
  67. "s, 点击绿色按钮重新录音 ...";
  68. clearInterval(this.recTimer);
  69. });
  70. this.recorderManager.onError(() => {
  71. uni.showToast({ title: '录音失败', icon: 'none' });
  72. this.recing = false;
  73. this.recTxt = "请点击绿色按钮开始录音",
  74. clearInterval(this.recTimer);
  75. });
  76. // #endif
  77. // #ifdef MP
  78. try {
  79. var res = uni.getSystemInfoSync();
  80. res.model = res.model.replace(' ', '');
  81. res.model = res.model.toLowerCase();
  82. var res1 = res.model.indexOf('iphonex');
  83. if(res1 > 5){res1 = -1;}
  84. var res2 = res.model.indexOf('iphone1');
  85. if(res2 > 5){res2 = -1;}
  86. if(res1 != -1 || res2 != -1){
  87. this.paddingB = uni.upx2px(50)+'px';
  88. }
  89. } catch (e){return null;}
  90. // #endif
  91. },
  92. methods:{
  93. // 录音
  94. rec : function(){
  95. if (this.recing){
  96. this.recorderManager.stop();
  97. this.recing = false;
  98. this.recTxt = "... 已录音 "+this.recLength
  99. +"s, 点击绿色按钮重新录音 ...";
  100. clearInterval(this.recTimer);
  101. } else {
  102. this.recorderManager.start({duration:60000, format:'mp3' });
  103. this.recing = true;
  104. this.recTxt = "... 正在录音 ...";
  105. this.recLength = 1;
  106. this.recTimer = setInterval(()=>{this.recLength++;}, 1000);
  107. }
  108. },
  109. // 发送录音
  110. sendVoiceMsg : function(){
  111. if (this.tmpVoice == '') {
  112. uni.showToast({ title: "请先录制一段语音", icon: "none" });
  113. return;
  114. }
  115. // 关闭界面
  116. this.recShow = false;
  117. this.$emit('sendVoice', this.tmpVoice, this.recLength);
  118. this.tmpVoice = '';
  119. this.recLength = 0;
  120. this.recTxt = "请点击绿色按钮开始录音";
  121. },
  122. // 展示录音界面
  123. showRec : function(){this.recShow = true;},
  124. // 关闭录音界面
  125. closeRec: function (){this.recShow = false;},
  126. // 发送文本消息
  127. sendTextMsg: function () {
  128. if (this.inputMsg < 1) {return false;}
  129. this.$emit('sendText', this.inputMsg);
  130. this.inputMsg = '';
  131. },
  132. // 选择图片
  133. chooseImg : function(){
  134. uni.chooseImage({
  135. count : 1,
  136. sizeType : ['compressed'],
  137. sourceType : ['album', 'camera'],
  138. success : (res)=>{
  139. const tempFilePaths = res.tempFilePaths;
  140. this.$emit('chooseImage', tempFilePaths[0]);
  141. }
  142. });
  143. }
  144. }
  145. }
  146. </script>
  147. <style scoped>
  148. .gui-im-footer{background:#FFFFFF; width:100%; position:fixed; left:0; bottom:0; height:100rpx; display:flex; flex-wrap:nowrap; overflow:hidden; box-shadow:1px 1px 6px #999999; align-items:center;}
  149. .gui-im-footer .gui-items{width:auto; line-height:88rpx; flex-shrink:0; font-size:28rpx; color:#2B2E3D;}
  150. .gui-im-menus{width:80rpx; height:80rpx; flex-shrink:0; line-height:80rpx; text-align:center;}
  151. .gui-im-input{width:600rpx; margin:10rpx; padding:10rpx 16rpx; background:#F4F5F6; border-radius:6rpx; height:60rpx;}
  152. .gui-im-input input{width:100%; background:#F4F5F6; color:#2B2E3D; height:40rpx; line-height:40rpx; font-size:28rpx; margin-top:10rpx;}
  153. .gui-im-record{width:100%; position:fixed; left:0; bottom:0; background:#FFFFFF; padding:30px 0; padding-bottom:100rpx; z-index:11; box-shadow:1px 1px 6px #999999;}
  154. .gui-im-record-close{width:100rpx; height:100rpx; position:absolute; top:0px; right:0px; z-index:100; text-align:center; line-height:100rpx; color:#888888; font-size:38rpx !important;}
  155. .gui-im-record-txt{text-align:center; font-size:26rpx; line-height:30px; padding-bottom:10px; color:#CCCCCC;}
  156. .gui-im-record-btn{width:60px; height:60px; margin:0 auto; border:5px solid #F1F2F3; border-radius:100%; background:#00B26A;}
  157. .gui-im-recording{background:#FF0000; animation:fade linear 2s infinite;}
  158. @keyframes fade{from{opacity:0.1;} 50%{opacity:1;} to{opacity:0.1;}}
  159. .gui-im-record-txt text{color:#00B26A; padding:0 12px;}
  160. .gui-im-send-voice{margin-top:12px; font-size:28rpx; color:#00BA62; text-align:center;}
  161. .gui-im-send-voice text{margin:0 15px; color:#00BA62;}
  162. @font-face{font-family:"graceIMFonts"; src:url('data:font/truetype;charset=utf-8;base64,d09GMgABAAAAAASoAAsAAAAACpAAAARbAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqILIZ4ATYCJAMUCwwABCAFhG0HSxsHCcgOJQUABgUAAMBk8EB6fW8yk/3Z7Cd4BLPXQW6vA9B99wc4f67lvzL5jC8R2YVkAS+XAsN4QPB1pPqF+wfHUj8K/8Hyvu1BXjGyLDq25lGBDagb1ySRuNkEfcvRGr5iXEVcDQGYRBOJS2OXykbwRoFqQYpmTZc48HZYUBEkgaF3BBypENvQMbT12hNgq/b24g35wgANXYLX6jelSITc52EvKqRlDzJKWljFuYDbcSCBTAAFYkGgZxZuhipT05hBv+dOLYCJgYb2POx50vPyFxW2DZaiQzqT/8MDDYlCgHCAGk+KrY0reB4m8aDB8yQeJDwv50HBiwrZtGh0ur0JhAGiEhCdYIisoERHonui2lcmOM2zJHp7m6a+suXpoNZng9tfDG17vkyohugi+3dbns4wdwWyFuTaGyL2DH1o+v/RweMTg2Y6LqngIEk2qXNSr6zPX9naOrilZVBb25D29qFN+/Nh99riT7Z3vdsad6xlyKkr1tWNZ09eGz6kkbRWS7iliav7hBVp1hm64Q4O3rMhcFCzzBa4ywoa3MgWtHtjyNAmVUhYR3kdd6O7DasHDfpeN2jwb7vbQFjoV6Fa7o6VK9v0qChdVrZdRURhRbwW3rqlUHWLS5mMreMeM3nRSDO2TbYUy16uGosg002pTpZwphre5b7iZKa3S1VPqnNboCS+PE4Hmd9c9SJ2Lk+1zG3JjnAsPmH0XBpvDWJl+WX186e6zIWKSG6z0np0qthYRZSdTEQULL34fb9uJZ66RKiru0eP4K4lSXcWecR/xPf20/WbFi0Bz/8qJrcUz0VLHq9jd7SqyEjVyoWKSFZYZV4TL99QQihCuiGEghgP3sLyqYFyCAlv/7hDnEsCyWXFCOnjZkAVINnlhrLtTEJFJEusvRjRsGVZpxpGRH+psDBFlC1MRCRsj0k9bjZvPtcjYrOpiXamCVUROssu7hLWO2VNhdl5+yxFRU/Z8/pcBwNGkpu2yNAKAPaY/CNXAvak/CmXAfaM/CYXH8o/w6M7d+aODar8ZrgUAB2fJ5zRauxBhbTgeNSSWHrgShOOqa8crbp6d0qSt09n10Gh0T6LTOBwDfjzrxh7EEUmBAZBFmh4EAUSg0SkwmaCjotCcGBQAyYZlBzvIgCKG0I5gXTGAAS+nIKGN9dB4ssnUmH/QCeY/+DAV0gwGSICzugiWUw3GxZgjmER8V1IESyTCDvz1YvrsdSmc9Qu18jNmDqVIIrLznUnS7CJaRH7ONuleMYIItQyUDFcD+u6hWxqqVhg0TJjdnpMzpSgJ4oWLAN8aYCC4WBgRBA8XSAUBCxMiLIww9fz+vVgJNrQ4aARXT/8zWAoTpTVI+KIJjYBskRjJuralEon7UjEw2iEgCC3QgsDRDF1YXQes0DYwZupYAQY0cgZIjbpxNDJSFJNdPU6Yx5LT5ueeAZdaEIKJXThwGPGdM60RcRz0WJbUY1TF8sb8IrH8sVdigkAAA==') format('truetype');}
  163. .graceIMFonts{font-family:"graceIMFonts" !important; font-style:normal; color:#2B2E3D; font-size:56rpx;}
  164. .icon-voice:before{content:"\e63a";}
  165. .icon-photograph:before{content:"\e619";}
  166. .icon-close:before{content:"\e625";}
  167. .icon-kbd{content:"\e73b";}
  168. </style>