chat.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  1. <template>
  2. <view class="page" ref="page">
  3. <view style="display: none;position: fixed;left: 50%;top: 50%;">{{ $store.state.hackUpdate }}</view>
  4. <load-more status="loading" v-if="initializing" />
  5. <!-- 消息记录 -->
  6. <chat-panel :storeKey="storeKey" :sending="sending" :sendingdata="sendingdata" @click-avatar="openProfile" @setSending="setSending" :boardheight="boardheight" @chooseQuote="setQuote" ref="panel" />
  7. <!-- 底部 -->
  8. <v-sender
  9. v-if="!initializing"
  10. v-model="message"
  11. ref="sender"
  12. @send="sendTextMessage"
  13. @face="sendVoice"
  14. @sendImage="sendImg"
  15. @sendVedio="sendVedio"
  16. @emoji="sendEmoji"
  17. @input="inputMessage"
  18. @handleEmotion="handleEmotion"
  19. @senderheight="set_sheight"
  20. @keyboardheight="keyboardheight"
  21. :showboard="showboard"
  22. :sendtype="type"
  23. :isgroup="0"
  24. :groupid="friend.id"
  25. :quote="quoteItem"
  26. />
  27. </view>
  28. </template>
  29. <script>
  30. import {
  31. mapState,
  32. mapGetters
  33. } from 'vuex';
  34. import ChatPanel from '../../components/chat-panel.vue';
  35. import api from '../../library/index.js';
  36. import http from '../../library/http.js';
  37. import config from '../../config.js';
  38. export default {
  39. components: {
  40. ChatPanel
  41. },
  42. data() {
  43. return {
  44. quoteItem: {},
  45. friend: {},
  46. message: '',
  47. initializing: false,
  48. getPick: false,
  49. showPickMoney: '',
  50. pickMsg: '',
  51. pickId: '',
  52. pickSender: {},
  53. pickTitle: '',
  54. pickErrorText: '',
  55. storeKey: '',
  56. redpackInfo: {},
  57. sending: false,
  58. sendingdata:[],
  59. senderheight: 120,
  60. sender: [],
  61. receiver: [],
  62. inpuvalue: '',
  63. boardheight: 0,
  64. showboard: false,
  65. type: '',
  66. user:uni.getStorageSync('userInfo'),
  67. system:uni.getStorageSync('system'),
  68. };
  69. },
  70. onShow(event) {
  71. uni.setNavigationBarTitle({
  72. title: decodeURI(this.friend.nickname)
  73. });
  74. },
  75. onLoad(opts) {
  76. uni.setNavigationBarTitle({
  77. title: decodeURI(opts.nickname)
  78. });
  79. // #ifdef APP-PLUS
  80. let currentWebview = this.$mp.page.$getAppWebview();
  81. currentWebview.setStyle({
  82. titleNView: {
  83. titleText:''
  84. },
  85. })
  86. // #endif
  87. this.friend = opts;
  88. this.storeKey = 'U' + this.friend.id;
  89. uni.setStorageSync('cache_key',this.storeKey);
  90. this.getUserInfo(this.friend.id);
  91. this.sender =this.user;
  92. this.receiver = this.friend;
  93. },
  94. onUnload() {
  95. uni.setStorageSync('cache_key','');
  96. },
  97. methods: {
  98. // 选择引用的聊天记录
  99. setQuote(item) {
  100. this.$refs.sender.setQute(item)
  101. this.quoteItem = item
  102. },
  103. // 检测输入值
  104. inputMessage(e) {
  105. // console.log(e);
  106. this.emotion = e;
  107. },
  108. getUserInfo(id) {
  109. if(id>0){
  110. id = parseInt(id);
  111. http.setWait(false).get('user.php?act=userdetail',{id:id,group_id:0,userid:this.user.id}).then(res=>{
  112. this.friend = res.data;
  113. uni.setNavigationBarTitle({
  114. title: decodeURI(this.friend.nickname)
  115. });
  116. })
  117. }else{
  118. var avatar=this.system.admin_logo;
  119. if(avatar.indexOf('http')<=-1) avatar=config.imgUri+avatar;
  120. this.friend={id:0,nickname:this.system.admin_nickname,avatar:avatar};
  121. }
  122. },
  123. toHtml(str) {
  124. str=str.replace(/ /g,"&nbsp;");
  125. str=str.replace(/\n/g,"<br>");
  126. return str;
  127. },
  128. set_sheight(e) {
  129. this.$refs.panel.setAutoHeight(e);
  130. },
  131. keyboardheight(e) {
  132. this.boardheight = e;
  133. this.$refs.panel.setAutoHeight(0);
  134. },
  135. // 选择表情
  136. handleEmotion(value) {
  137. // console.log(value);
  138. this.emotion = value;
  139. this.type = 'emotion';
  140. },
  141. sendEmoji(e) {
  142. this.commitMessage('face', e);
  143. },
  144. sendImg(e) {
  145. this.commitMessage('image', e);
  146. },
  147. sendVedio(e) {
  148. this.commitMessage('vedio', e);
  149. },
  150. // 发送文本消息
  151. sendTextMessage() {
  152. // this.commitMessage('text',this.message);
  153. let that = this
  154. let addStr = '-qute-';
  155. if(this.quoteItem && this.quoteItem.id) {
  156. addStr += 'nickname=' + that.quoteItem.sender.nickname + '&content=' + ( that.quoteItem.type == 'emotion'?that.quoteItem.message.content.content:that.quoteItem.message.content) + '&type=' + that.quoteItem.type
  157. }
  158. this.emotionInfo = {
  159. "type": "emotion",
  160. "value": that.quoteItem.id ? (this.emotion + addStr): this.emotion,
  161. "content": that.quoteItem.id ? (this.emotion + addStr): this.emotion
  162. }
  163. if (this.type == "emotion") {
  164. console.log( 'emotion',this.emotion);
  165. this.commitMessage('emotion', this.emotionInfo);
  166. } else {
  167. var msg=this.toHtml(this.message);
  168. if(that.quoteItem.id) {
  169. msg += addStr
  170. }
  171. console.log( 'text',msg);
  172. this.commitMessage('text', msg);
  173. }
  174. this.quoteItem = {}
  175. this.$refs.sender.clearQute()
  176. },
  177. setSending(e){
  178. this.sending=e;
  179. },
  180. commitMessage(type, sendData) {
  181. this.message = '';
  182. // this.showboard=true
  183. if (type == 'image') {
  184. var mid = sendData.mid;
  185. sendData = sendData.src;
  186. } else if (type == 'vedio') {
  187. var mid = sendData.mid;
  188. // sendData=sendData.src;
  189. } else if (type == 'voice') {
  190. var mid = sendData.mid;
  191. } else {
  192. var mid =
  193. 'm' +
  194. Math.random()
  195. .toString(36)
  196. .substring(2);
  197. }
  198. let data = {
  199. userid: this.user.id,
  200. friend_uid: this.friend.id,
  201. type: 'chat',
  202. msgtype: type,
  203. content: sendData,
  204. mid: mid
  205. };
  206. // console.log(data);
  207. var sendlocal=0;
  208. if((type=='image' && sendData.indexOf('http')<=-1) || (type=='vedio' && sendData.src.indexOf('http')<=-1) || (type=='voice'&& sendData.url.indexOf('http')<=-1) ){
  209. //本地图片不发到服务器
  210. // console.log(sendData);
  211. sendlocal=1;
  212. }
  213. else {
  214. this.$socket.send(data);
  215. }
  216. if(type!=='image' && type!=='voice') sendlocal=1;
  217. // uni.showLoading({
  218. // title: '发送中'
  219. // });
  220. var that = this;
  221. if (sendlocal == 1) {
  222. var arr = {};
  223. arr.id = that.receiver.id;
  224. arr.cache_key = 'U' + arr.id;
  225. arr['self'] = 1;
  226. arr['isloading'] = 1;
  227. arr['receiver_id'] = arr['id'];
  228. arr['sender_id'] = that.sender.id;
  229. arr['group_id'] = 0;
  230. arr['timestamp'] = parseInt(new Date().getTime() / 1000);
  231. arr['time'] = '';
  232. arr['message'] = { type: type, content: sendData };
  233. arr['sender'] = that.sender;
  234. arr['receiver'] = that.receiver;
  235. arr['nickname'] = that.sender.nickname;
  236. arr['avatar'] = that.sender.avatar;
  237. arr['msg_id'] = '';
  238. arr['_mid'] = mid;
  239. that.sendingdata=arr;
  240. that.sending=true;
  241. this.type='text';
  242. //that.sendmsg(arr);
  243. // console.log(sendlocal);
  244. }
  245. //that.sending=true;
  246. },
  247. sendVoice(e) {
  248. this.commitMessage('voice', e);
  249. },
  250. openProfile(e) {
  251. // console.log(JSON.stringify(e));
  252. let params = { id: e.id, status: 'friend' };
  253. return this.$jump('friend.detail', params);
  254. }
  255. },
  256. onNavigationBarButtonTap(e) {
  257. let params = { ...this.friend, status: 'friend' };
  258. return this.$jump('friend.userset', params);
  259. }
  260. };
  261. </script>
  262. <style lang="scss">
  263. $avatar-width: 80upx;
  264. $control-height: 100upx;
  265. $control-input-height: $control-height - $uni-spacing-col-base * 2;
  266. .placeholder {
  267. width: 750upx;
  268. height: 1upx;
  269. }
  270. .message {
  271. &-time {
  272. color: #999;
  273. font-size: 24upx;
  274. text-align: center;
  275. }
  276. &-info {
  277. display: flex;
  278. flex-direction: row;
  279. justify-content: flex-start;
  280. align-items: flex-start;
  281. padding: $uni-spacing-col-lg $uni-spacing-row-lg;
  282. .spacing {
  283. width: $uni-spacing-row-lg;
  284. height: $avatar-width;
  285. position: relative;
  286. display: flex;
  287. flex-direction: column;
  288. align-items: center;
  289. justify-content: center;
  290. flex-shrink: 0;
  291. &::before {
  292. display: block;
  293. content: '';
  294. border: $uni-spacing-row-lg/2 solid transparent;
  295. border-right-color: #fff;
  296. }
  297. }
  298. }
  299. &.right &-info {
  300. flex-direction: row-reverse;
  301. padding-left: $uni-spacing-row-lg;
  302. padding-right: $uni-spacing-row-lg * 2 + $avatar-width;
  303. .spacing::before {
  304. border-right-color: transparent;
  305. border-left-color: $uni-color-primary;
  306. }
  307. }
  308. &.right &-info {
  309. padding-left: $uni-spacing-row-lg * 2 + $avatar-width;
  310. padding-right: $uni-spacing-row-lg;
  311. }
  312. &-avatar {
  313. width: $avatar-width;
  314. height: $avatar-width;
  315. vertical-align: middle;
  316. border-radius: $uni-border-radius-base;
  317. flex-shrink: 0;
  318. }
  319. &-content {
  320. font-size: 32upx;
  321. background: rgba(255, 255, 255, 1);
  322. border-radius: $uni-border-radius-base;
  323. }
  324. &.right &-content {
  325. color: white;
  326. background-color: $uni-color-primary;
  327. }
  328. &--text &-content {
  329. padding: 20upx $uni-spacing-row-base;
  330. }
  331. &-failed {
  332. width: 30upx;
  333. height: 30upx;
  334. background-color: $uni-color-error;
  335. border-radius: 50%;
  336. margin: ($avatar-width - 30upx)/2 $uni-spacing-row-base 0;
  337. }
  338. }
  339. </style>