chatGroup.vue 45 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604
  1. <template>
  2. <view class="app">
  3. <view id="app-top">
  4. <uni-nav-bar statusBar backgroundColor="#f8f8f8" left-icon="left" @clickLeft="utils.navigateBack()" fixed >
  5. <view slot="right" @tap="tapMore">
  6. <image style="width: 30px;" src="/static/chat/chat-more.png" mode="widthFix"></image>
  7. </view>
  8. <view class="fx-r fx-bc fx-ac" style="width: 100%;">
  9. <view class="fx-r fx-bc fx-ac" v-if="isNetwork">
  10. <u-loading-icon size="18"></u-loading-icon>
  11. <text style="font-size: 14px;margin-left: 4px;">链接中..</text>
  12. </view>
  13. <text v-else style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 14px;">
  14. {{chatUser == null ? '加载中..' : ( chatUser.name + '(' + chatUser.count + ')') }}
  15. </text>
  16. </view>
  17. </uni-nav-bar>
  18. </view>
  19. <view class="pop-alert" v-if="remindAr.length > 0" @tap="tapReminClose">
  20. <u-alert type="error" :description="getRemind()"></u-alert>
  21. <view class="t"><u-icon name="close"></u-icon></view>
  22. </view>
  23. <scroll-view class="wechat-body" :style="'height:calc(100vh - ' + barheight + 'px - ' + fotInputheight + 'px - ' + inputBottom + 'px)'" scroll-y="true" @scrolltoupper="tapTupper" :scroll-with-animation="scrollAnimation" :scroll-into-view="'view_' + scrollMsgId">
  24. <view class="loading fx-r fx-ac fx-bc" v-if="loaData.isLoad">
  25. <image src="/static/chat/xloading.png"></image>
  26. </view>
  27. <view style="height: 10px;"></view>
  28. <view class="chat-item" :id="'view_' + item.msgId" v-for="(item,index) in data">
  29. <view class='fx-h fx-bc fx-ac' v-if="item.isShowTime == 1">
  30. <view class="msg-time">{{utils.timeLastdate(item.time,true)}}</view>
  31. </view>
  32. <!-- 文字内容 -->
  33. <chatMsg v-if="item.type =='text'" @longUserItem="tapLongUserItem" @userItem="tapUserItem" @longItem="tapLongItem" @rsend="tapRsend(item.msgId)" :item="item"></chatMsg>
  34. <!--发送图片-->
  35. <chatImg v-if="item.type =='img'" @longUserItem="tapLongUserItem" @userItem="tapUserItem" @longItem="tapLongItem" @openImg="tapOpenImg" @rsend="tapRsend(item.msgId)" :item="item"></chatImg>
  36. <!--发送红包-->
  37. <chatRed :key="theKey" @userItem="tapUserItem" v-if="item.type =='red_envelope'" @redItem="tapRedItem" :item="item"></chatRed>
  38. <!--语音消息-->
  39. <chatVoice v-if="item.type =='voice'" @longUserItem="tapLongUserItem" @userItem="tapUserItem" @rsend="tapRsend(item.msgId)" :item="item"></chatVoice>
  40. <!--群公告-->
  41. <chatGroupMsg v-if="item.type =='group_text'" @userItem="tapUserItem" @rsend="tapRsend(item.msgId)" :item="item"></chatGroupMsg>
  42. <!--红包情况-->
  43. <chatTip v-if="['red_envelope_tip','tip','group_del','withdraw'].indexOf(item.type) >= 0" :item="item"></chatTip>
  44. </view>
  45. </scroll-view>
  46. <view class="foot-view-info" id="foot-view-info">
  47. <view class="foot-view fx-r fx-bc">
  48. <image class="icon" src="/static/chat/voice.svg" @tap="tapRecord"></image>
  49. <textarea auto-height @input="tapInput" class="fx-g1" v-model="msg" :focus="focus" @focus="tapFoucus" :confirm-hold="true" :hold-keyboard="true" :adjust-position="false" @blur="tapBlur" ></textarea>
  50. <image @tap="tapCkFace(true)" class="icon" src="/static/chat/face.svg" v-if="!isFace"></image>
  51. <image @tap="tapCkFace(false)" class="icon" src="/static/chat/cmore.svg" v-else></image>
  52. <image @tap="tapOpenGroup" class="icon" style="width: 28px;height: 28px;" v-if="msg == ''" src="/static/chat/cadd.svg"></image>
  53. <view class="send-btn" @tap="tapSend" v-else>发送</view>
  54. </view>
  55. <!--表情-->
  56. <view class="face-view" :hidden="!isFace">
  57. <swiper class="swiper" circular :indicator-dots="true">
  58. <swiper-item v-for="item in faceAr">
  59. <view class="face-items fx-r fx-bc">
  60. <view class="item fx-h fx-bc fx-ac" v-for="(item2,index) in item">
  61. <image @tap="tapFaceSet(item2)" :src="'../../static/face/face_' + item2.key + '.png'" mode="widthFix"></image>
  62. </view>
  63. </view>
  64. </swiper-item>
  65. </swiper>
  66. </view>
  67. <recording ref="recording" @end="tapRecordH5"></recording>
  68. <!--收藏-->
  69. <view class="group-view" :hidden="!isGroup">
  70. <scroll-view scroll-y>
  71. <view class="group-items fx-r fx-bc" >
  72. <view class="item fx-h fx-bc fx-ac" @tap="tapPhoto">
  73. <view class="item-bg fx-h fx-bc fx-ac"><image src="../../static/chat/chat-phone.svg"></image></view>
  74. <view class="text">相册</view>
  75. </view>
  76. <view class="item fx-h fx-bc fx-ac" @tap="tapCamera">
  77. <view class="item-bg fx-h fx-bc fx-ac"><image src="../../static/chat/chat-camera.svg"></image></view>
  78. <view class="text">拍摄</view>
  79. </view>
  80. <view class="item fx-h fx-bc fx-ac" @tap="tapOpen" :data-url="'./redpack/red?groupId=' + groupId + '&type=chat_group'">
  81. <view class="item-bg fx-h fx-bc fx-ac"><image src="../../static/chat/chat-reg.svg"></image></view>
  82. <view class="text">红包</view>
  83. </view>
  84. <view class="item fx-h fx-bc fx-ac" @tap="tapCollectList">
  85. <view class="item-bg fx-h fx-bc fx-ac"><image src="../../static/chat/chat-collect.svg"></image></view>
  86. <view class="text">收藏</view>
  87. </view>
  88. </view>
  89. </scroll-view>
  90. </view>
  91. </view>
  92. <view class="red-lq fx-h fx-bc fx-ac" v-if="isOpenRed">
  93. <view class="bg fx-h fx-bc">
  94. <image class="bg-img" src="../../static/chat/group_award_background.png" ></image>
  95. <view class="red-close" @tap="isOpenRed = false">
  96. <u-icon name="close" color="#ffffff" size="18"></u-icon>
  97. </view>
  98. <view class="red-tip fx-h fx-bc">
  99. <image :src="utils.getAvatar(lqRed.sendUser.avatar,'chat')" mode="aspectFill"></image>
  100. <text>{{lqRed.sendUser.nickname}}的红包</text>
  101. </view>
  102. <view class="red-lv" v-if="lqRed.state == 1" :class="redAnim" @tap="tapOpenLv">
  103. <image src="../../static/chat/open_group_award_icon.png" mode="widthFix"></image>
  104. </view>
  105. <view class="red-lm" v-if="lqRed.state == 2" >
  106. <view class="red-sm">手慢了,红包派完了</view>
  107. <view class="red-look" @tap="tapOpen" :data-url="'redpack/look?id=' + lqRed.data.id" >查看红包详情></view>
  108. </view>
  109. </view>
  110. </view>
  111. <view class="pop-win" v-if="isPopAt">
  112. <view class="bg" @tap="tapHidePopAt"></view>
  113. <view class="pop-body" :style="{transform : isPopAt2 ? 'translateY(0)' : 'translateY(100%)'}">
  114. <view class="key_main fx-h">
  115. <view class="nav-top">
  116. <u-icon name="arrow-down" @tap="tapHidePopAt"></u-icon>
  117. <view class="title">请选择提醒的人</view>
  118. </view>
  119. <view class="search-view">
  120. <u--input
  121. placeholder="搜索联系人"
  122. prefixIcon="search"
  123. clearable
  124. border="none"
  125. prefixIconStyle="font-size: 22px;color: #909399"
  126. v-model="popKeyword"
  127. @input="tapPopKeyWord"
  128. ></u--input>
  129. </view>
  130. <scroll-view class="pop-win-scroll" scroll-y :scroll-into-view="toView" scroll-with-animation='true' show-scrollbar="false" >
  131. <view class="item fx-r fx-bc" @tap="taopPopItem(item2)" v-for="(item2,index2) in chatUserList">
  132. <image :src="item2.avatar" mode="aspectFill"></image>
  133. <view class="info fx-h fx-ac">
  134. <rich-text class="title" :nodes="getRanValue(item2.nickname)"></rich-text>
  135. </view>
  136. </view>
  137. <view class="loading fx-r fx-ac fx-bc" v-if="user.isFrite && !user.isFoot">
  138. <image src="/static/chat/xloading.png"></image>
  139. <text>正在载入更多...</text>
  140. </view>
  141. <view class="loading complete" :hidden="!user.isFoot">已加载全部</view>
  142. </scroll-view>
  143. </view>
  144. </view>
  145. </view>
  146. <view class="mb2-tip" v-if="showOpen">
  147. <view class="bg" @tap="showOpen = false"></view>
  148. <view class="pop-view" :style="'left:' + showLeft+ 'px;top:' + showTop + 'px'">
  149. <view class="pop-lv"></view>
  150. <view v-if="showData.type == 'text'">
  151. <view class="item fx-r fx-bc" @tap="tapCopy">复制</view>
  152. <view class="item fx-r fx-bc" @tap="tapAddCollection">收藏</view>
  153. <view class="item fx-r fx-bc" @tap="tapZf">转发</view>
  154. <view class="item fx-r fx-bc" v-if="showData.sendUser.uid == user.uid && (utils.strtotime() - showData.time ) < 60 * 5" @tap="tapWithdraw">撤回</view>
  155. </view>
  156. <view v-if="showData.type == 'img'">
  157. <view class="item fx-r fx-bc" @tap="tapAddCollection">收藏</view>
  158. <view class="item fx-r fx-bc" @tap="tapDown">下载图片</view>
  159. <view class="item fx-r fx-bc" @tap="tapZf">转发</view>
  160. <view class="item fx-r fx-bc" v-if="showData.sendUser.uid == user.uid && (utils.strtotime() - showData.time ) < 60 * 5" @tap="tapWithdraw">撤回</view>
  161. </view>
  162. <view v-if="showData.type == 'voice'">
  163. <view class="item fx-r fx-bc" @tap="tapAddCollection">收藏</view>
  164. <view class="item fx-r fx-bc" @tap="tapZf">转发</view>
  165. <view class="item fx-r fx-bc" v-if="showData.sendUser.uid == user.uid && (utils.strtotime() - showData.time ) < 60 * 2" @tap="tapWithdraw">撤回</view>
  166. </view>
  167. </view>
  168. </view>
  169. </view>
  170. </template>
  171. <style lang="scss">
  172. .pop-win{position: fixed;width: 100%;height: 100%;left: 0;top: 0;}
  173. .pop-win .bg{position: absolute;width: 100%;height: 100%;left: 0;top: 0;background: rgba(0, 0, 0, 0.5);}
  174. .pop-body{width:100vw;height: 100vh;position: fixed;bottom: 0px;top:0px;left:0px;right:0px;z-index:100;display: flex;flex-direction: column;justify-content: flex-end;transform: translateY(100%);transition:all 0.4s;}
  175. .key_main{ width:100vw;height: 900rpx;background: #fff;box-sizing: border-box;display: flex;flex-direction: column;}
  176. .key_main .nav-top{height: 40px;position: relative;}
  177. .key_main .nav-top .title{text-align: center;font-size: 14px;color: #000;line-height: 40px;}
  178. .key_main .u-icon{position: absolute;left: 10px;top: 20px;}
  179. .key_main .search-view{height: 40px;padding: 10px;}
  180. .key_main scroll-view{height:calc(100% - 90px);}
  181. .pop-win-scroll .item{background: #fff;padding:0 10px;position: relative;}
  182. .pop-win-scroll .item:active{background: #f1f1f1;}
  183. .pop-win-scroll .item image{width: 40px;height: 40px;border-radius: 50%;}
  184. .pop-win-scroll .item .info{width: calc(100% - 70px);margin-left: 10px;font-size: 14px;color:#787878;border-bottom: 1px solid #f1f1f1;height: 60px;}
  185. .pop-win-scroll .item .flg{background: #ff5857;width: 20px;height: 20px;border-radius: 50%;font-size: 10px;text-align: center;line-height: 20px;color: #fff;}
  186. .pop-win-scroll .item:last-child .info{border-bottom: 0;}
  187. .pop-win-scroll .letter{padding: 10px;background: #F8F6F6;}
  188. .red-lq{position: fixed;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.5);left: 0;top: 0;z-index: 10;}
  189. .red-lq .bg{position: relative;width: 100%;}
  190. .red-lq .bg image.bg-img{width: 80%;height: 70vh;}
  191. .red-tip{position: absolute;color: #ffdfb0;margin-top: 30px;font-weight: 14px;}
  192. .red-tip image{width: 50px;height: 50px;border-radius: 50px;}
  193. .red-tip text{margin-top: 10px;}
  194. .red-lq .red-close{position: absolute;left: 55px;top: 14px;}
  195. .red-lv{position: absolute;bottom: 25%;}
  196. .red-lv image{width: 100px;}
  197. .anim-rotate {
  198. transform-style: preserve-3d;
  199. animation: rotate 1s linear infinite;
  200. }
  201. @keyframes rotate{
  202. 0%{
  203. transform: rotateY(0deg);
  204. }
  205. 100%{
  206. transform: rotateY(360deg);
  207. }
  208. }
  209. .red-lm{position: absolute;bottom: 15%;font-size: 14px;color: #ffdfb0;}
  210. .red-look{padding: 6px 0; }
  211. .wechat-body{background: #F1F1F1;position: relative;}
  212. .foot-view{padding:10px;background: #fff;width: calc(100% - 20px);bottom: 0;min-height: 40px;}
  213. .foot-view .icon{width: 30px;height: 30px;margin: 0px 4px;}
  214. .foot-view textarea{width: auto;background: #f1f1f1;border-radius: 6px;height: 20px;margin: 0px 4px;padding: 10px 10px;font-size: 14px;}
  215. .foot-view-info{background: #fff;}
  216. .msg-time{font-size: 14px;color: #ccc;}
  217. .send-btn{background: $ic-appcolor;color: #fff;font-size: 12px;padding:6px 10px;border-radius: 6px;margin-left: 2px ;}
  218. .send-btn:active{background: #dddddd;}
  219. .face-view{width: 100%;z-index: 9;background: #fff;height: 250px;}
  220. .face-view swiper{height: 250px;}
  221. .face-view .face-items{padding: 10px;}
  222. .face-view .face-items .item{width: 12.5%;height: calc((100vw - 20px) / 8 );}
  223. .face-view .face-items .item image{width: 50%;}
  224. .group-view{width: 100%;z-index: 9;background: #F1F1F1;}
  225. .group-view scroll-view{height: 100%;}
  226. .group-view .group-items{padding: 10px;}
  227. .group-view .group-items .item{width: 25%;padding: 10px 0;}
  228. .group-view .group-items .item .item-bg{width: 50px;height:50px;background: #fff;border-radius: 10px;}
  229. .group-view .group-items .item .item-bg image{width: 20px;height: 20px;}
  230. .group-view .group-items .item .text{font-size: 12px;margin-top: 4px;color: $ic-default-text;}
  231. .mb2-tip{position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 999;}
  232. .mb2-tip .bg{width: 100%;height: 100%;top: 0;left: 0;position: absolute;}
  233. .mb2-tip .pop-view{position: absolute;background: #fff;border-radius: 6px;border: 1px solid #f1f1f1;padding: 10px 20px;top: 56px;z-index: 9;left: 20px;}
  234. .mb2-tip .pop-view .item{padding:10px 0;}
  235. .mb2-tip .pop-view .item:active{background: #f1f1f1;}
  236. .pop-alert{position: relative;}
  237. .pop-alert .t{position: absolute;z-index: 99;top: 10px;right: 10px;}
  238. </style>
  239. <script>
  240. import {mapState,mapMutations } from 'vuex';
  241. import chatMsg from "@/components/tm-public/chat/msg.vue";
  242. import chatImg from "@/components/tm-public/chat/cimg.vue";
  243. import chatRed from "@/components/tm-public/chat/red.vue";
  244. import chatTip from "@/components/tm-public/chat/tip.vue";
  245. import chatRedTranfer from "@/components/tm-public/chat/redTransfer.vue";
  246. import chatRedEnvelopeTransfer from "@/components/tm-public/chat/redEnvelopeTransfer.vue";
  247. import chatRedEnvelopeTransferRefund from "@/components/tm-public/chat/redEnvelopeTransferRefund.vue";
  248. import chatGroupMsg from "@/components/tm-public/chat/chatGroupMsg.vue";
  249. import chatVoice from "@/components/tm-public/chat/voice.vue";
  250. // #ifdef H5
  251. import recording from '@/components/tm-public/recording/recordingH5.vue';//H5
  252. // #endif
  253. // #ifdef APP
  254. import recording from '@/components/tm-public/recording/recordingApp.vue';//APP
  255. // #endif
  256. import Message from "@/library/socket/Message.js";
  257. import face from "@/library/utils/Face.js";
  258. var LetterList = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#'];
  259. const inputHeight = 260;
  260. export default {
  261. computed: mapState(['user','sysData']),
  262. components:{
  263. chatMsg,
  264. chatImg,
  265. chatRed,
  266. chatTip,
  267. chatRedTranfer,
  268. chatRedEnvelopeTransfer,
  269. chatRedEnvelopeTransferRefund,
  270. chatGroupMsg,
  271. chatVoice,
  272. recording
  273. },
  274. data() {
  275. return {
  276. isNetwork : false,
  277. data : [],
  278. chatUser : null,
  279. msg : "",
  280. barheight : 0,
  281. groupId : 0,
  282. usercode : "",
  283. showOpen : false,
  284. showData : {},
  285. showLeft : "",
  286. showTop : "",
  287. theKey : 0,
  288. inputBottom : 0,
  289. keyHeight : 0,
  290. isShowTop : false,
  291. scrollMsgId : "",
  292. showInput : false,
  293. scrollAnimation : false,
  294. focus : false,
  295. isFace : false,
  296. faceAr : [],
  297. isGroup : false,
  298. loaData:{
  299. isFrite : true,
  300. isFoot : false,
  301. isLoad : false,
  302. page : 1,
  303. },
  304. tempFilePaths : [],
  305. redAnim : "",
  306. isOpenRed : false,
  307. lqRed : {},
  308. redLqBack : [],
  309. fotInputheight : 0,
  310. /**提醒人**/
  311. isPopAt : false,
  312. isPopAt2 : false,
  313. toView : "",
  314. chatUserList: [],
  315. letter : [],
  316. popKeyword : "",
  317. popItemIn : [],
  318. msgId : "",
  319. nid : 0,
  320. userGroup : {
  321. isFirst:false,
  322. isLoad:false,
  323. isFoot:false,
  324. page:1
  325. },
  326. mbAr : {},
  327. remindAr : []
  328. }
  329. },
  330. onLoad(option){
  331. this.groupId = option.groupId;
  332. this.usercode = option.usercode || "";
  333. this.msgId = option.msgId || "";
  334. this.nid = option.nid || 0;
  335. var strRed = uni.getStorageSync("chat_red_" + this.groupId);
  336. if(strRed != null && strRed != '') {
  337. this.redLqBack = JSON.parse(strRed);
  338. }
  339. this.$nextTick(() => {
  340. uni.createSelectorQuery().select("#app-top").boundingClientRect(res=>{
  341. this.barheight = res == null ? 40 : (res.height + 10);
  342. if(this.$device.platform == 'ios') {
  343. this.barheight = res.height + 60;
  344. }
  345. }).exec();
  346. uni.createSelectorQuery().select("#foot-view-info").boundingClientRect(res=>{
  347. this.fotInputheight = res.height;
  348. }).exec();
  349. });
  350. uni.$on('socketMessage',this.socketMessage);
  351. uni.$on('redTransferCheck',this.redTransferCheck);
  352. uni.$on('chatClear',this.chatClear);
  353. uni.$on('chatDel',this.chatDel);
  354. uni.$on('glRkName',this.glRkName);
  355. uni.$on('socketOpen',this.socketOpen);
  356. uni.$on('socketClose',this.socketClose);
  357. let faceAr = [];
  358. let nI = 0;
  359. let index = 0;
  360. faceAr[0] = [];
  361. for(let i in face.face) {
  362. if(nI <= faceAr.length && index == 0) {
  363. faceAr[nI] = [];
  364. }
  365. faceAr[nI].push({
  366. key : i,
  367. value : face.face[i].value
  368. });
  369. index ++;
  370. if(index >= 40) {
  371. index = 0;
  372. nI++;
  373. }
  374. }
  375. this.faceAr = faceAr;
  376. this.getInit();
  377. },
  378. onUnload() {
  379. uni.$off('socketMessage',this.socketMessage);
  380. uni.$off('redTransferCheck',this.redTransferCheck);
  381. uni.$off('chatClear',this.chatClear);
  382. uni.$off('chatDel',this.chatDel);
  383. uni.$off('glRkName',this.glRkName);
  384. uni.$off('socketOpen',this.socketOpen);
  385. uni.$off('socketClose',this.socketClose);
  386. },
  387. onShow() {
  388. this.onKeyboardHeight();
  389. this.isNetwork = !this.webSocket.socketOpen;
  390. },
  391. methods: {
  392. ...mapMutations(['checkUserLogin','setSys','setTxbagenum']),
  393. /**
  394. * 基本数据
  395. */
  396. getInit:function(){
  397. this
  398. .request
  399. .post("chatGroupInit",{groupId:this.groupId})
  400. .then(res=>{
  401. if(res.code == 200) {
  402. this.chatUser = res.data;
  403. this.getData(true);
  404. this.chatRead(true);
  405. } else {
  406. uni.navigateBack({ delta:1});
  407. uni.showModal({title: '系统提示',content:res.msg,showCancel: false});
  408. }
  409. })
  410. .catch(err=>{
  411. uni.navigateBack({ delta:1});
  412. uni.showModal({title: '系统提示',content:"加载失败",showCancel: false});
  413. });
  414. this
  415. .request
  416. .post("GroupRemind",{groupId:this.groupId})
  417. .then(res => {
  418. if(res.code == 200) {
  419. this.remindAr = res.data;
  420. }
  421. })
  422. .catch(err=>{});
  423. },
  424. /**
  425. *
  426. */
  427. getData:function(isPull = false){
  428. if(this.user == null){
  429. return;
  430. }
  431. this
  432. .request
  433. .post("chatMsg",{group_id:this.groupId,page:this.loaData.page,nid:this.nid})
  434. .then(res=>{
  435. if(res.code == 200) {
  436. this.loaData.isLoad = false;
  437. this.isDisabled = false;
  438. if (isPull) {
  439. this.data = res.data.list;
  440. if(res.data.list.length > 0)
  441. if(this.msgId != '') {
  442. this.setScrollInto(this.msgId);
  443. } else {
  444. this.setScrollInto(res.data.list[res.data.list.length - 1].msgId);
  445. }
  446. } else {
  447. this.getDescData(res.data.list,'down');
  448. }
  449. if (res.data.list.length != res.data.pageSize) {
  450. this.loaData.isFoot = true;
  451. }
  452. this.loaData.isFrite = false;
  453. this.getwcTime();
  454. } else {
  455. uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
  456. }
  457. });
  458. },
  459. /**
  460. * 上拉加载
  461. */
  462. tapTupper:function(){
  463. if(this.loaData.isFoot || this.loaData.isLoad || this.loaData.isFrite) {
  464. return;
  465. }
  466. this.loaData.isLoad = true;
  467. this.loaData.page ++;
  468. this.getData();
  469. },
  470. /**
  471. * 得到焦点
  472. * @param {Object} e
  473. */
  474. tapFoucus:function(e){
  475. this.showInput = true;
  476. var bfn = ()=>{
  477. this.isFace = false;
  478. this.isGroup = false;
  479. this.isRecord = false;
  480. this.$refs['recording'].hide();
  481. //this.inputBottom = 0;
  482. this.lastScrollInto();
  483. };
  484. setTimeout(()=>{
  485. bfn()
  486. },100);
  487. },
  488. /**
  489. * 失去焦点
  490. * @param {Object} e
  491. */
  492. tapBlur:function(e){
  493. setTimeout(()=>{
  494. this.showInput = false;
  495. },100);
  496. },
  497. onKeyboardHeight: function() {
  498. uni.onKeyboardHeightChange(res => {
  499. this.$set(this,'inputBottom',res.height);
  500. if(res.height > this.keyHeight) this.keyHeight = res.height;
  501. });
  502. },
  503. /**
  504. * 计算时间
  505. */
  506. getwcTime:function(){
  507. var time = 0;
  508. for(var i in this.data){
  509. var d = this.data[i];
  510. if(time == 0 || (d.time - time) > 3 * 60) {
  511. this.data[i].isShowTime = 1;
  512. time = d.time;
  513. } else {
  514. this.data[i].isShowTime = 0;
  515. }
  516. if(['red_envelope_transfer','red_envelope'].indexOf(d.type) >= 0) {
  517. if(this.redLqBack.indexOf(this.data[i].msgId) >= 0) {
  518. d.isReceiveRed = true;
  519. this.$set(this.data,i,d);
  520. } else {
  521. this.data[i].isReceiveRed = false;
  522. }
  523. } else {
  524. this.data[i].isReceiveRed = false;
  525. }
  526. }
  527. this.theKey ++;
  528. },
  529. /**
  530. *
  531. * @param {Object} data
  532. */
  533. getDescData:function(data,desc = 'down'){
  534. var msgId = "";
  535. if(desc == 'down') {
  536. if(this.data.length > 0) {
  537. msgId = this.data[0].msgId;
  538. }
  539. var newData = [];
  540. for(var i in data) {
  541. var d = data[i];
  542. if(!this.findData(d.msgId)) {
  543. newData.push(d);
  544. }
  545. }
  546. this.$forceUpdate();
  547. this.data = newData.concat(this.data);
  548. this.scrollAnimation = false;
  549. this.setScrollInto(msgId);
  550. }
  551. //
  552. if(desc == 'up') {
  553. var newData = [];
  554. for(var i in data) {
  555. var d = data[i];
  556. if(!this.findData(d.msgId)) {
  557. newData.push(d);
  558. msgId = d.msgId;
  559. }
  560. }
  561. this.$forceUpdate();
  562. this.data = this.data.concat(newData);
  563. this.scrollAnimation = true;
  564. this.setScrollInto(msgId);
  565. }
  566. },
  567. /**
  568. * 设置滚动位置
  569. * @param {Object} msgId
  570. */
  571. setScrollInto:function(msgId){
  572. if(msgId == "") return ;
  573. setTimeout(()=>{ this.scrollMsgId = msgId; },200);
  574. },
  575. /**
  576. * 弹出上去到底
  577. */
  578. lastScrollInto:function(){
  579. this.scrollMsgId = "1";
  580. if(this.data.length <= 2) return;
  581. setTimeout(()=>{
  582. this.scrollMsgId = this.data[this.data.length - 1].msgId;
  583. },200);
  584. },
  585. /**
  586. * 打开图片
  587. * @param {Object} img
  588. */
  589. tapOpenImg:function(img) {
  590. var imgs = [];
  591. for(var i in this.data) {
  592. if(this.data[i].type == 'img') imgs.push(this.data[i].data);
  593. }
  594. uni.previewImage({current:img,urls:imgs});
  595. },
  596. /**
  597. * 查询重复数据
  598. * @param {Object} msgId
  599. */
  600. findData:function(msgId) {
  601. for(var i in this.data) {
  602. if(this.data[i].msgId == msgId) return true;
  603. }
  604. return false;
  605. },
  606. /**
  607. * 发送消息
  608. */
  609. tapSend:function(){
  610. if(this.msg == '') {
  611. return;
  612. }
  613. var bb = this.msg.match(/\@(.*?) /g);
  614. var ddAr = [];
  615. for(var i in bb) {
  616. var nickname = bb[i].trim();
  617. nickname = nickname.substr(1,nickname.length - 1);
  618. for(var i in this.chatUserList) {
  619. if(this.chatUserList[i].nickname == nickname) {
  620. ddAr.push(this.chatUserList[i].uid);
  621. }
  622. }
  623. }
  624. //消息发送
  625. var msgId = this.webSocket.createMsgId();
  626. var sendPack = {};
  627. sendPack.data = this.msg;
  628. sendPack.type = "text";
  629. sendPack.chat_id = "";
  630. sendPack.f_uid = "";
  631. sendPack.msg_id = msgId;
  632. sendPack.group_id = this.groupId;
  633. sendPack.remind_id = ddAr.length > 0 ? ddAr.join(',') : '';
  634. var mess = new Message(JSON.stringify(sendPack),"groupChat",true,1,true);
  635. mess.id = msgId;
  636. //消息添加
  637. var data = {};
  638. data.chat = this.chatUser.chat;
  639. data.sendUser = {
  640. nickname : this.chatUser.meUser.nickname,
  641. avatar : this.user.avatar,
  642. uid : this.user.uid
  643. };
  644. data.group_type = 'group_chat';
  645. data.type = 'text';
  646. data.data = this.msg;
  647. data.is_remind = 0;
  648. data.isSend = 0;
  649. data.time = this.utils.strtotime();
  650. data.nid = 0;
  651. data.msgId = msgId;
  652. var bool = this.webSocket.send(mess,(res)=>{
  653. for(var i in this.data) {
  654. if(this.data[i].msgId == msgId) {
  655. this.$set(this.data[i],'isSend',1);
  656. this.chatRead();
  657. break;
  658. }
  659. }
  660. },err=>{
  661. for(var i in this.data) {
  662. if(this.data[i].msgId == msgId) {
  663. this.$set(this.data[i],'isSend',-1);
  664. break;
  665. }
  666. }
  667. });
  668. this.data.push(data);
  669. this.getwcTime();
  670. this.setScrollInto(msgId);
  671. this.msg = '';
  672. },
  673. tapRsend:function(msgId){
  674. var item = null;
  675. for(var i in this.data) {
  676. if(this.data[i].msgId == msgId) {
  677. this.$set(this.data[i],'isSend',0);
  678. item =this.data[i];
  679. break;
  680. }
  681. }
  682. if(item == null) return;
  683. var sendPack = {};
  684. sendPack.data = item.data;
  685. sendPack.type = item.type;
  686. sendPack.chat_id = "";
  687. sendPack.f_uid = "";
  688. sendPack.msg_id = item.msgId;
  689. sendPack.group_id = this.groupId;
  690. sendPack.remind_id = "";
  691. var mess = new Message(JSON.stringify(sendPack),"groupChat",true,1,true);
  692. mess.id = data.msgId;
  693. var bool = this.webSocket.send(mess,(res)=>{
  694. let isSend = false;
  695. if(this.utils.isJSON(res)) {
  696. let rAr = JSON.parse(res);
  697. if(rAr.code == 1) {
  698. isSend = true;
  699. } else {
  700. this.utils.Tip(rAr.msg);
  701. }
  702. }
  703. for(var i in this.data) {
  704. if(this.data[i].msgId == msgId) {
  705. this.$set(this.data[i],'isSend',isSend ? 1 : -1);
  706. if(isSend) this.chatRead();
  707. break;
  708. }
  709. }
  710. },err=>{
  711. for(var i in this.data) {
  712. if(this.data[i].msgId == msgId) {
  713. this.$set(this.data[i],'isSend',-1);
  714. break;
  715. }
  716. }
  717. });
  718. },
  719. /**
  720. * 选择相机
  721. */
  722. tapPhoto:function(){
  723. // #ifdef APP-PLUS
  724. this.$store.dispatch('permission/requestPermissions', 'WRITE_EXTERNAL_STORAGE').then(res => {
  725. console.log(res);
  726. if(res !== 1) return;
  727. uni.chooseImage({
  728. count: 10,
  729. sizeType: ['compressed'], // 原图还是压缩图
  730. sourceType: ['album'], // 相册还是相机
  731. success: (res)=> {
  732. var tempFilePaths = res.tempFilePaths;//图片列表
  733. this.upFileImg(tempFilePaths);
  734. }
  735. });
  736. });
  737. return;
  738. // #endif
  739. uni.chooseImage({
  740. count: 10,
  741. sizeType: ['compressed'], // 原图还是压缩图
  742. sourceType: ['album'], // 相册还是相机
  743. success: (res)=> {
  744. var tempFilePaths = res.tempFilePaths;//图片列表
  745. this.upFileImg(tempFilePaths);
  746. }
  747. });
  748. },
  749. /**
  750. * 选择拍摄
  751. */
  752. tapCamera:function(){
  753. // #ifdef APP-PLUS
  754. this.$store.dispatch('permission/requestPermissions', 'WRITE_EXTERNAL_STORAGE').then(res => {
  755. console.log(res);
  756. if(res !== 1) return;
  757. uni.chooseImage({
  758. count: 1,
  759. sizeType: ['compressed'],
  760. sourceType: ['camera'],
  761. success:(res) => {
  762. var tempFilePaths = res.tempFilePaths;
  763. this.upFileImg(tempFilePaths);
  764. }
  765. });
  766. });
  767. return;
  768. // #endif
  769. uni.chooseImage({
  770. count: 1,
  771. sizeType: ['compressed'],
  772. sourceType: ['camera'],
  773. success:(res) => {
  774. var tempFilePaths = res.tempFilePaths;
  775. this.upFileImg(tempFilePaths);
  776. }
  777. });
  778. },
  779. /**
  780. * 切换表情
  781. */
  782. tapCkFace:function(bool){
  783. var bfn = ()=>{
  784. this.isFace = bool;
  785. if(bool){
  786. this.isGroup = false;
  787. this.isRecord = false;
  788. this.$refs['recording'].hide();
  789. this.inputBottom = this.keyHeight > 0 ? this.keyHeight : inputHeight;
  790. this.lastScrollInto();
  791. } else {
  792. this.inputBottom = 0;
  793. }
  794. uni.hideKeyboard();
  795. };
  796. if(this.showInput) {
  797. setTimeout(()=>{
  798. bfn()
  799. },100);
  800. } else {
  801. bfn();
  802. }
  803. },
  804. /**
  805. * 切换更多
  806. */
  807. tapOpenGroup:function(){
  808. this.isFace = false;
  809. this.isRecord = false;
  810. this.$refs['recording'].hide();
  811. var bfn = ()=>{
  812. this.isGroup = ! this.isGroup;
  813. if(this.isGroup){
  814. this.inputBottom = this.keyHeight > 0 ? this.keyHeight : inputHeight;
  815. this.lastScrollInto();
  816. } else {
  817. this.inputBottom = 0;
  818. }
  819. uni.hideKeyboard();
  820. };
  821. if(this.showInput) {
  822. setTimeout(()=>{
  823. bfn()
  824. },100);
  825. } else {
  826. bfn();
  827. }
  828. },
  829. /**
  830. * 设置face
  831. * @param {Object} index
  832. */
  833. tapFaceSet:function(item) {
  834. console.log(item);
  835. this.msg += item.value;
  836. },
  837. /**
  838. * 通讯数据
  839. * @param {Object} res
  840. */
  841. socketMessage:function(res){
  842. if(res.code == null) return;
  843. var uData = JSON.parse(res.data);
  844. if(this.groupId == uData.group_id) {
  845. for(var i in this.data) {
  846. if(this.data[i].msgId == uData.msgId) return;
  847. }
  848. if(uData.is_remind == 1) {
  849. let isAdd = true;
  850. for(let i in this.remindAr) {
  851. if(this.remindAr[i].uid == uData.sendUser.uid) {
  852. isAdd = false;
  853. }
  854. }
  855. if(isAdd) {
  856. this.remindAr.push({
  857. uid : uData.sendUser.uid,
  858. nickname : uData.sendUser.nickname
  859. });
  860. }
  861. }
  862. if(uData.type == "withdraw") {
  863. for(var i in this.data) {
  864. if(uData.data == this.data[i].msgId) {
  865. this.$delete(this.data,i);
  866. }
  867. }
  868. }
  869. if(!this.getRepeat(this.data,uData.msgId)) {
  870. this.data.push(uData);
  871. setTimeout(()=>{ this.scrollMsgId = uData.msgId; },200);
  872. this.chatRead();
  873. }
  874. }
  875. },
  876. /**
  877. * 网络链接成功
  878. */
  879. socketOpen:function(){
  880. this.isNetwork = false;
  881. },
  882. /**
  883. * 网络关闭 | 需重新链接
  884. */
  885. socketClose:function(){
  886. //console.log('xxx');
  887. this.isNetwork = true;
  888. },
  889. /**
  890. * 清理数据
  891. * @param {Object} group_id
  892. */
  893. chatClear:function(group_id){
  894. if(group_id == this.groupId) {
  895. this.data = [];
  896. this.$forceUpdate();
  897. }
  898. },
  899. /**
  900. * 清理数据
  901. * @param {Object} group_id
  902. */
  903. chatDel:function(group_id){
  904. uni.navigateBack({fail:1});
  905. },
  906. /**
  907. * 上传图片
  908. * @param {Object} tempFilePaths
  909. */
  910. upFileImg:function(tempFilePaths) {
  911. var msgId = "";
  912. for (var i in tempFilePaths) {
  913. msgId = this.webSocket.createMsgId();
  914. var data = {};
  915. data.chat = this.chatUser.chat;
  916. data.sendUser = {
  917. nickname : this.chatUser.meUser.nickname,
  918. avatar : this.user.avatar,
  919. uid : this.user.uid
  920. };
  921. data.group_type = 'group_chat';
  922. data.type = "img";
  923. data.data = tempFilePaths[i];
  924. data.is_remind = 0;
  925. data.isSend = 0;
  926. data.time = this.utils.strtotime();
  927. data.nid = 0;
  928. data.msgId = msgId;
  929. this.data.push(data);
  930. this.tempFilePaths.push(data);
  931. }
  932. this.upActionImg();
  933. setTimeout(()=>{
  934. this.scrollMsgId = msgId;
  935. },200);
  936. this.getwcTime()
  937. },
  938. /**
  939. * 上传图片
  940. * @param {Object} data
  941. */
  942. upActionImg:function() {
  943. if(this.tempFilePaths.length <= 0) {
  944. this.isUpImg = false;
  945. return;
  946. }
  947. this.isUpImg = true;
  948. var tmpData = this.tempFilePaths[0];
  949. this
  950. .request
  951. .post(this.request.getApi("qiniu"),{type:"jpg"})
  952. .then(res=>{
  953. uni.uploadFile({
  954. url: 'https://up-z0.qiniup.com',
  955. filePath: tmpData.data,
  956. name: 'file',
  957. formData: {
  958. 'key': res.data.mk_str,
  959. 'token': res.data.token
  960. },
  961. success: (uploadFileRes) => {
  962. var sendPack = {};
  963. sendPack.data = res.data.url;
  964. sendPack.type = "img";
  965. sendPack.chat_id = "";
  966. sendPack.f_uid = "";
  967. sendPack.group_id = this.groupId;
  968. sendPack.msg_id = tmpData.msgId;
  969. this.webSocket.send((new Message(JSON.stringify(sendPack),"groupChat",true,1,true)),
  970. (res) => {
  971. var data = JSON.parse(res);
  972. if(data.code == 1) {
  973. this.inUpAction(tmpData.msgId,1);
  974. this.chatRead();
  975. } else {
  976. this.inUpAction(tmpData.msgId,-1);
  977. }
  978. },
  979. error=>{
  980. this.inUpAction(tmpData.msgId,-1);
  981. });
  982. },
  983. fail:()=>{
  984. this.inUpAction(msgId,-1);
  985. }
  986. });
  987. })
  988. .catch(err=>{
  989. this.inUpAction(msgId,-1);
  990. });
  991. },
  992. /**
  993. * 执行状态
  994. */
  995. inUpAction:function(msgId,type) {
  996. for(var i in this.data) {
  997. if(this.data[i].msgId == msgId) this.$set(this.data[i],"isSend",type);
  998. }
  999. this.tempFilePaths.splice(0,1);
  1000. this.upActionImg();
  1001. },
  1002. /**
  1003. * 打开
  1004. * @param {Object} ev
  1005. */
  1006. tapOpen: function(ev) {
  1007. let url = ev.currentTarget.dataset.url;
  1008. this.utils.navigateTo(url);
  1009. },
  1010. /**
  1011. * 领取红包页面
  1012. * @param {Object} ev
  1013. */
  1014. tapRedItem:function(ev){
  1015. this.lqRed.data = JSON.parse(ev.data);
  1016. console.log(this.lqRed);
  1017. uni.showLoading({ title:"加载中.." });
  1018. this.lqRed.sendUser = ev.sendUser;
  1019. this.lqRed.msgId = ev.msgId;
  1020. this.lqRed.state = 1;
  1021. this
  1022. .request
  1023. .post("chatRedEvelope",{id:this.lqRed.data.id})
  1024. .then(res=>{
  1025. uni.hideLoading();
  1026. if(res.code == 200) {
  1027. console.log(res);
  1028. if(!res.data.is_receive && this.user.uid != ev.data.send_uid) {
  1029. this.isOpenRed = true;
  1030. } else {
  1031. this.redTransferCheck(this.lqRed.msgId);
  1032. uni.navigateTo({ url:"redpack/look?id=" + this.lqRed.data.id});
  1033. }
  1034. } else {
  1035. uni.hideLoading();
  1036. uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
  1037. }
  1038. })
  1039. .catch(err=>{
  1040. uni.hideLoading();
  1041. uni.showModal({title: '系统提示',content: "加载失败",showCancel: false});
  1042. });
  1043. },
  1044. /**
  1045. * 确认领取红包
  1046. */
  1047. tapOpenLv:function(){
  1048. this.redAnim = "anim-rotate";
  1049. this
  1050. .request
  1051. .post("drwReceive",{
  1052. id : this.lqRed.data.id
  1053. })
  1054. .then(res=>{
  1055. this.redAnim = "";
  1056. if(res.code == 200) {
  1057. if(res.data.status == 200) {
  1058. this.isOpenRed = false;
  1059. let music = uni.createInnerAudioContext();
  1060. music.src = "/static/img/red_receive.mp3";
  1061. music.play();
  1062. this.redTransferCheck(this.lqRed.msgId);
  1063. uni.navigateTo({ url:"redpack/look?id=" + this.lqRed.data.id});
  1064. }
  1065. if(res.data.status == 100) {
  1066. this.lqRed.state = 2;
  1067. this.redTransferCheck(this.lqRed.msgId);
  1068. }
  1069. } else {
  1070. uni.showModal({title: '系统提示',content:res.msg,showCancel: false});
  1071. }
  1072. })
  1073. .catch(err=>{
  1074. this.redAnim = "";
  1075. uni.showModal({title: '系统提示',content:"领取失败,请重新尝试!",showCancel: false});
  1076. });
  1077. },
  1078. /**
  1079. * 验证码
  1080. *
  1081. */
  1082. tapZc:function(){
  1083. uni.navigateTo({
  1084. url:"redpack/groupUserSend?groupId=" + this.groupId + "&type=transfer"
  1085. });
  1086. },
  1087. /**
  1088. * 打开转账数据
  1089. * @param {Object} ev
  1090. */
  1091. tapRedTransferItem:function(ev){
  1092. var data = JSON.parse(ev.data);
  1093. uni.navigateTo({
  1094. url:"redpack/transferLook?id=" + data.id + "&msgId=" + ev.msgId
  1095. });
  1096. },
  1097. /**
  1098. * 转账阅读
  1099. * @param {Object} msgId
  1100. */
  1101. redTransferCheck:function(msgId){
  1102. this.redMsg(msgId);
  1103. setTimeout(()=>{this.getwcTime();},200);
  1104. },
  1105. /**
  1106. * 红包阅读/存
  1107. * @param {Object} msgId
  1108. */
  1109. redMsg:function(msgId){
  1110. for(var i in this.redLqBack) {
  1111. if(this.redLqBack[i] == msgId) return;
  1112. }
  1113. this.redLqBack.push(msgId);
  1114. if(this.redLqBack.length > 500) {
  1115. this.redLqBack.splice(0,10);
  1116. }
  1117. uni.setStorage({
  1118. key : "chat_red_" + this.groupId,
  1119. data : JSON.stringify(this.redLqBack)
  1120. })
  1121. },
  1122. tapInput:function(ev){
  1123. var value = ev.detail.value;
  1124. if(value == '') return;
  1125. if(value[value.length - 1] == '@') {
  1126. this.isPopAt = true;
  1127. setTimeout(()=>{
  1128. this.isPopAt2 = true;
  1129. },200);
  1130. this.userGroup.page = 1;
  1131. this.tapLxInit(true);
  1132. uni.hideKeyboard();
  1133. }
  1134. //var bb = value.match(/\@(.*?) /g);
  1135. },
  1136. tapHidePopAt:function(){
  1137. this.isPopAt2 = false;
  1138. setTimeout(()=>{
  1139. this.isPopAt = false;
  1140. },200);
  1141. },
  1142. /**
  1143. * 搜索观察家
  1144. */
  1145. tapPopKeyWord:function(){
  1146. this.page = {page:1,isLoad:false,isFoot:false};
  1147. if(this.mbAr[this.popKeyword] != null) {
  1148. this.data = this.mbAr[this.popKeyword];
  1149. } else {
  1150. this.tapLxInit(true);
  1151. }
  1152. },
  1153. /**
  1154. * 遍历字符串
  1155. */
  1156. getRanValue:function(str) {
  1157. let value = str;
  1158. if (value.indexOf(this.popKeyword)!==-1) {
  1159. let reg = new RegExp(this.popKeyword, 'gi')
  1160. return value.replace(reg, `<font style="color:#2fbec0">${this.popKeyword}</font>`)
  1161. } else {
  1162. return value
  1163. }
  1164. },
  1165. /**
  1166. * 点击事件
  1167. */
  1168. taopPopItem:function(item){
  1169. this.msg += item.nickname + " ";
  1170. this.tapHidePopAt();
  1171. this.focus = true;
  1172. },
  1173. tapLongUserItem:function(item){
  1174. this.msg += "@"+item.data.sendUser.nickname + " ";
  1175. this.chatUserList.push({
  1176. uid : item.data.sendUser.uid,
  1177. nickname : item.data.sendUser.nickname
  1178. });
  1179. },
  1180. /**
  1181. * 获取提醒人数据
  1182. */
  1183. tapLxInit:function(isPull){
  1184. uni.showLoading({ title:"加载中.."});
  1185. this
  1186. .request
  1187. .post("chatGroupUser",{
  1188. groupId : this.groupId,
  1189. page : this.userGroup.page,
  1190. keyword : this.popKeyword
  1191. })
  1192. .then(res=>{
  1193. uni.hideLoading();
  1194. if(res.code == 200) {
  1195. this.userGroup.isFrite = true;
  1196. this.userGroup.isLoad = false;
  1197. if(isPull) {
  1198. this.chatUserList = res.data.list;
  1199. } else {
  1200. this.chatUserList = this.chatUserList.concat(res.data.list);
  1201. }
  1202. //是否到底
  1203. if(res.data.list.length != res.data.pageSize) {
  1204. this.userGroup.isFoot = true;
  1205. }
  1206. if(this.userGroup.page == 1 && this.popKeyword != ''){
  1207. this.mbAr[this.popKeyword] = res.data.list;
  1208. }
  1209. } else {
  1210. this.utils.Tip(res.msg);
  1211. }
  1212. })
  1213. .catch(err=>{
  1214. console.log(err);
  1215. uni.hideLoading();
  1216. this.utils.Tip("加载失败");
  1217. });
  1218. },
  1219. /**
  1220. * 更多
  1221. */
  1222. tapMore:function(){
  1223. uni.navigateTo({
  1224. url:"group/info/groupInfo?groupId=" + this.groupId
  1225. })
  1226. },
  1227. chatRead:function(bool = false){
  1228. this
  1229. .request
  1230. .post("chatRead",{groupId:this.groupId})
  1231. .then(res=>{
  1232. if(res.code == 200) {
  1233. uni.$emit('chatRead',{groupId:this.groupId,bool:bool});
  1234. } else {
  1235. uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
  1236. }
  1237. });
  1238. },
  1239. /**
  1240. * 查看收藏
  1241. */
  1242. tapCollectList:function(){
  1243. uni.navigateTo({
  1244. url:"collection/collect?groupId=" + this.groupId + "&nickname=" + encodeURIComponent(this.chatUser.name) + "&avatar="
  1245. + (this.chatUser.img == '' ? '/static/img/logo.png' : encodeURIComponent(this.chatUser.img))
  1246. });
  1247. },
  1248. /**
  1249. * 长安效果
  1250. */
  1251. tapLongItem:function(ev){
  1252. var index = ev.dom.currentTarget.dataset.id;
  1253. var left = ev.dom.touches[0].pageX;
  1254. var top = ev.dom.touches[0].clientY;
  1255. var leftW = this.$device.screenWidth - left;
  1256. var topW = this.$device.screenHeight - top;
  1257. this.showLeft = leftW < 190 ? (left - (190 - leftW)): left;
  1258. this.showTop = topW < 250 ? (top - (250 - topW)) : top;
  1259. this.showOpen = true;
  1260. this.showData = ev.data;
  1261. },
  1262. /**
  1263. * 复制内容
  1264. */
  1265. tapCopy:function(){
  1266. this.showOpen = false;
  1267. uni.setClipboardData({
  1268. data: this.showData.data,
  1269. success: data => {
  1270. this.utils.showAlert({
  1271. title: "复制成功!",
  1272. icon: "none",
  1273. mask: true
  1274. })
  1275. },
  1276. fail: err => {
  1277. this.utils.showAlert({
  1278. title: "复制失败,请重新复制",
  1279. icon: "none",
  1280. mask: true
  1281. })
  1282. },
  1283. });
  1284. },
  1285. tapAddCollection:function(){
  1286. this.showOpen = false;
  1287. uni.showLoading({ title:"操作中.." });
  1288. this
  1289. .request
  1290. .post("collectAdd",{
  1291. msg_id : this.showData.msgId,
  1292. data : this.showData.data,
  1293. nickname : this.showData.user.nickname
  1294. })
  1295. .then(res=>{
  1296. uni.hideLoading();
  1297. if( res.code== 200){
  1298. this.utils.Tip("操作成功");
  1299. } else {
  1300. uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
  1301. }
  1302. })
  1303. .catch(err=>{
  1304. uni.hideLoading();
  1305. uni.showModal({title: '系统提示',content:"操作失败!",showCancel: false});
  1306. })
  1307. },
  1308. tapDown:function(){
  1309. this.showOpen = false;
  1310. uni.downloadFile({
  1311. url : this.showData.data,
  1312. success:(resFile)=>{
  1313. if (resFile.statusCode === 200) {
  1314. uni.saveImageToPhotosAlbum({
  1315. filePath: resFile.tempFilePath,
  1316. success: (res)=> {
  1317. this.utils.Tip("保存图片成功");
  1318. },
  1319. fail:(res)=> {
  1320. this.utils.showAlert("保存失败,请重新操作");
  1321. },
  1322. complete: function(res) {},
  1323. })
  1324. } else {
  1325. this.isDown = false;
  1326. this.utils.showAlert("保存失败,请重新操作");
  1327. }
  1328. },
  1329. fail:()=>{
  1330. this.isDown = false;
  1331. this.utils.showAlert("保存失败,请重新操作");
  1332. }
  1333. });
  1334. },
  1335. tapRecord:function(){
  1336. this.isRecord = !this.isRecord;
  1337. if(this.isRecord) {
  1338. this.isGroup = false;
  1339. this.isFace = false;
  1340. this.inputBottom = 150;
  1341. this.$refs['recording'].open();
  1342. } else {
  1343. this.inputBottom = 0;
  1344. this.$refs['recording'].hide();
  1345. }
  1346. },
  1347. /**
  1348. * @param {Object} pm
  1349. */
  1350. tapRecordH5:function(recAr){
  1351. uni.showLoading({ title:"发送中.."});
  1352. this
  1353. .request
  1354. .post("chatUpVoice",recAr)
  1355. .then( res => {
  1356. uni.hideLoading();
  1357. if(res.code == 200) {
  1358. var msgId = this.webSocket.createMsgId();
  1359. //消息添加
  1360. var data = {};
  1361. data.chat = this.chatUser.chat;
  1362. data.sendUser = {
  1363. nickname : this.chatUser.meUser.nickname,
  1364. avatar : this.user.avatar,
  1365. uid : this.user.uid
  1366. };
  1367. data.group_type = 'group_chat';
  1368. data.type = 'voice';
  1369. data.data = JSON.stringify({time:recAr.duration,filePath:res.data.msgFile});
  1370. data.is_remind = 0;
  1371. data.isSend = 0;
  1372. data.time = this.utils.strtotime();
  1373. data.nid = 0;
  1374. data.msgId = msgId;
  1375. this.data.push(data);
  1376. this.getwcTime();
  1377. this.setScrollInto(msgId);
  1378. var sendPack = {};
  1379. sendPack.data = JSON.stringify({time:recAr.duration,filePath:res.data.msgFile});
  1380. sendPack.type = "voice";
  1381. sendPack.chat_id = "";
  1382. sendPack.f_uid = "";
  1383. sendPack.group_id = this.groupId;
  1384. sendPack.msg_id = msgId;
  1385. this.webSocket.send((new Message(JSON.stringify(sendPack),"groupChat",true,1,true)),
  1386. (res) => {
  1387. var data = JSON.parse(res);
  1388. if(data.code == 1) {
  1389. this.inUpAction(msgId,1);
  1390. this.chatRead();
  1391. } else {
  1392. this.inUpAction(msgId,-1);
  1393. }
  1394. },
  1395. error=>{
  1396. this.inUpAction(msgId,-1);
  1397. });
  1398. } else {
  1399. uni.showModal({title: '系统提示',content:res.msg,showCancel: false});
  1400. }
  1401. })
  1402. .catch(err=>{
  1403. console.log(err);
  1404. uni.hideLoading();
  1405. uni.showModal({title: '系统提示',content:"发送失败,请重新尝试!",showCancel: false});
  1406. });
  1407. },
  1408. /**
  1409. * 撤回
  1410. */
  1411. tapWithdraw:function(){
  1412. this.showOpen = false;
  1413. uni.showLoading({ title:"撤回中..."});
  1414. this
  1415. .request
  1416. .post("withdraw",{groupId : this.groupId,msg_id:this.showData.msgId})
  1417. .then(res=>{
  1418. uni.hideLoading();
  1419. if(res.code == 200) {
  1420. for(var i in this.data) {
  1421. if(this.data[i].msgId == this.showData.msgId) {
  1422. var data = this.data[i];
  1423. data.type = "tip";
  1424. data.data = "你撤回了一条消息";
  1425. this.$set(this.data,i,data);
  1426. }
  1427. }
  1428. } else {
  1429. this.utils.Tip(res.msg);
  1430. }
  1431. })
  1432. .catch(err=>{
  1433. uni.hideLoading();
  1434. this.utils.Tip("加载失败");
  1435. });
  1436. },
  1437. /**
  1438. * 我要转发
  1439. */
  1440. tapZf:function(){
  1441. this.showOpen = false;
  1442. uni.navigateTo({
  1443. url:"transmit?msgId=" + this.showData.msgId + "&data=" + this.showData.data + "&type=" + this.showData.type
  1444. });
  1445. },
  1446. /**
  1447. * 查看用户信息
  1448. */
  1449. tapUserItem:function(uid){
  1450. uni.navigateTo({
  1451. url:"/pages/chat/friend/info?usercode=" + uid
  1452. })
  1453. },
  1454. glRkName:function(data){
  1455. if(this.groupId == data.groupId) {
  1456. this.getData(true);
  1457. }
  1458. },
  1459. /**
  1460. * 是否判断重复msgId
  1461. */
  1462. getRepeat:function(data,msgId){
  1463. for(var i in data) {
  1464. if(data[i].msgId == msgId) return true;
  1465. }
  1466. return false;
  1467. },
  1468. tapReminClose:function(){
  1469. this.remindAr = [];
  1470. //更新提醒时间
  1471. this.request.post("GroupRemindOk",{groupId : this.groupId}).then(res=>{}).catch(err=>{});
  1472. },
  1473. /**
  1474. * @你
  1475. */
  1476. getRemind:function(){
  1477. let reStr = "";
  1478. for(let i in this.remindAr) {
  1479. let d = this.remindAr[i];
  1480. if(reStr == "") {
  1481. reStr += d.nickname + "@你";
  1482. } else {
  1483. reStr += "," + d.nickname + "@你";
  1484. }
  1485. }
  1486. return reStr;
  1487. }
  1488. }
  1489. }
  1490. </script>
  1491. <style>
  1492. </style>