chatGroup.vue 45 KB

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