im.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
  1. <template>
  2. <view>
  3. <view style="width: 100%;padding-bottom: 140rpx;">
  4. <view style="display: flex;flex-direction: column;" v-for="(item,index) in ListItem" :key='index' >
  5. <view style="margin-top: 15rpx;width: 100%;text-align: center;font-size: 26rpx;color: #999999;">
  6. {{item.createTime}}</view>
  7. <view v-if="item.userId === userId" style="width: 83%;margin-left: 15%;">
  8. <view class="chat-listitem" style="float: right;">
  9. <view v-if="item.content && item.messageType === 1" @longpress="copy(item.content)"
  10. class="chat-listitem-text" style="margin-right: 20rpx;">{{item.content}}</view>
  11. <image @tap="viewImg(item.content)" v-if="item.content && item.messageType === 2" :src="item.content"
  12. style="height: 200rpx;width: 200rpx;margin-right: 20rpx;"></image>
  13. <view>
  14. <image v-if="item.avatar" :src="item.avatar" class="chat-listitem-image"></image>
  15. <image v-else src="../../static/logo.png" class="chat-listitem-image"></image>
  16. </view>
  17. </view>
  18. </view>
  19. <view v-if="item.userId != userId" style="width: 83%;margin-right: 15%;">
  20. <view class="chat-listitem" style="float: left;margin-left: 10rpx;">
  21. <view>
  22. <image :src="item.avatar" class="chat-listitem-image"></image>
  23. </view>
  24. <view v-if="item.content && item.messageType === 1" class="chat-listitem-text1"
  25. style="margin-left: 20rpx;">{{item.content}}</view>
  26. <image @tap="viewImg(item.content)" v-if="item.content && item.messageType === 2" :src="item.content"
  27. style="height: 200rpx;width: 200rpx;margin-left: 20rpx;"></image>
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. <!-- 底部聊天输入框 -->
  33. <view class="input-box ">
  34. <view class="justify-between padding-lr align-center" style="display: flex;width: 100%;background: #FFFFFF;">
  35. <image src="../../static/images/msg/add.png" @click="chooseImage(['album'])"
  36. style="width: 70rpx;height: 70rpx;margin-right: 12rpx;"></image>
  37. <input confirm-type="send" @confirm='setChatSave(1)' type="text" v-model="content"
  38. style="width: 72%;height: 70rpx;background: #F5F5F5;margin: 0 10rpx;border-radius: 5rpx;padding-left: 10rpx;" />
  39. <view class="save" @tap='setChatSave(1)'>发送</view>
  40. </view>
  41. </view>
  42. </view>
  43. </template>
  44. <script>
  45. import configdata from '../../common/config.js';
  46. export default {
  47. data() {
  48. return {
  49. connected: false,
  50. connecting: false,
  51. msg: false,
  52. type4: [],
  53. listRight: {
  54. chat: {
  55. userHead: ""
  56. },
  57. content: "",
  58. sendType: 1,
  59. type: 1
  60. },
  61. content: '',
  62. chatId: '',
  63. type: 1,
  64. ListItem: [],
  65. ShopState: false,
  66. ShopordersId: '',
  67. Shopimage: '',
  68. Shopmoney: '',
  69. ShopTitle: '',
  70. orderState: false,
  71. ordersId: '',
  72. userId: '',
  73. orderimage: '',
  74. orderNum: '',
  75. teamId: '',
  76. hand: 1,
  77. index: 0,
  78. page: 0,
  79. size: 1000,
  80. countDown: '',
  81. chatConversationId: '',
  82. byUserId: ''
  83. };
  84. },
  85. computed: {
  86. showMsg() {
  87. if (this.connected) {
  88. if (this.msg) {
  89. return '收到消息:' + this.msg
  90. } else {
  91. return '等待接收消息'
  92. }
  93. } else {
  94. return '尚未连接'
  95. }
  96. }
  97. },
  98. onUnload() {
  99. // uni.closeSocket()
  100. uni.hideLoading()
  101. },
  102. onLoad(d) {
  103. this.userId = this.$queue.getData('userId');
  104. this.byUserId = d.byUserId
  105. this.chatConversationId = d.chatConversationId;
  106. this.connect();
  107. // if (d.teamName) {
  108. // uni.setNavigationBarTitle({
  109. // title: d.teamName
  110. // });
  111. // }
  112. },
  113. onShow() {
  114. if (this.connected || this.connecting) {
  115. } else {
  116. this.connect();
  117. }
  118. },
  119. onHide() {
  120. uni.closeSocket()
  121. },
  122. methods: {
  123. copy(content) {
  124. uni.showModal({
  125. title: '温馨提示',
  126. content: '确认要复制此文字吗?',
  127. showCancel: true,
  128. cancelText: '取消',
  129. confirmText: '确认',
  130. success: res => {
  131. if (res.confirm) {
  132. uni.setClipboardData({
  133. data: content,
  134. success: r => {
  135. this.$queue.showToast('复制成功');
  136. }
  137. });
  138. }
  139. }
  140. });
  141. },
  142. getDateDiff(data) {
  143. // 传进来的data必须是日期格式,不能是时间戳
  144. //var str = data;
  145. //将字符串转换成时间格式
  146. var timePublish = new Date(data);
  147. var timeNow = new Date();
  148. var minute = 1000 * 60;
  149. var hour = minute * 60;
  150. var day = hour * 24;
  151. var month = day * 30;
  152. var result = "2";
  153. var diffValue = timeNow - timePublish;
  154. var diffMonth = diffValue / month;
  155. var diffWeek = diffValue / (7 * day);
  156. var diffDay = diffValue / day;
  157. var diffHour = diffValue / hour;
  158. var diffMinute = diffValue / minute;
  159. if (diffMonth > 3) {
  160. result = timePublish.getFullYear() + "-";
  161. result += timePublish.getMonth() + "-";
  162. result += timePublish.getDate();
  163. } else if (diffMonth > 1) { //月
  164. result = data.substring(0, 10);
  165. } else if (diffWeek > 1) { //周
  166. result = data.substring(0, 10);
  167. } else if (diffDay > 1) { //天
  168. result = data.substring(0, 10);
  169. } else if (diffHour > 1) { //小时
  170. result = parseInt(diffHour) + "小时前";
  171. } else if (diffMinute > 1) { //分钟
  172. result = parseInt(diffMinute) + "分钟前";
  173. } else {
  174. result = "刚刚";
  175. }
  176. return result;
  177. },
  178. connect() {
  179. let that = this;
  180. let userId = that.$queue.getData('userId');
  181. if (that.connected || that.connecting) {
  182. uni.showModal({
  183. content: '正在连接或者已经连接,请勿重复连接',
  184. showCancel: false
  185. })
  186. return false
  187. }
  188. that.connecting = true
  189. uni.showLoading({
  190. title: '连接中...'
  191. })
  192. uni.connectSocket({
  193. // url: 'ws://192.168.1.17:8180/sqx_fast/chatSocket/' + userId,
  194. url: this.config("WSHOST1") + userId,
  195. data() {
  196. return {
  197. msg: 'Hello'
  198. }
  199. },
  200. header: {
  201. 'content-type': 'application/json'
  202. },
  203. method: 'GET',
  204. success(res) {
  205. uni.hideLoading();
  206. that.getTimeOrListItem1();
  207. // 这里是接口调用成功的回调,不是连接成功的回调,请注意
  208. },
  209. fail(err) {
  210. // 这里是接口调用失败的回调,不是连接失败的回调,请注意
  211. console.log("--------------"+JSON.stringify(err))
  212. }
  213. });
  214. uni.onSocketOpen((res) => {
  215. that.connecting = false
  216. that.connected = true
  217. uni.hideLoading()
  218. // uni.showToast({
  219. // icon: 'none',
  220. // title: '连接成功'
  221. // })
  222. console.log('onOpen', res);
  223. });
  224. uni.onSocketError((err) => {
  225. that.connecting = false
  226. that.connected = false
  227. uni.hideLoading()
  228. uni.showModal({
  229. content: '网络较差,请稍后再试',
  230. showCancel: false
  231. })
  232. console.log('onError', err);
  233. });
  234. uni.onSocketMessage(function (res) {
  235. console.log('收到服务器内容:' + JSON.stringify(res));
  236. setTimeout(() => {
  237. that.getTimeOrListItem1();
  238. }, 50);
  239. });
  240. uni.onSocketClose((res) => {
  241. that.connected = false
  242. that.startRecive = false
  243. that.msg = false
  244. console.log('onClose', res)
  245. });
  246. },
  247. close() {
  248. uni.closeSocket()
  249. },
  250. getTimeOrListItem1() {
  251. this.$Request.get('/app/chat/selectChatContent?page=1&limit=1000&chatConversationId=' + this.chatConversationId).then(
  252. res => {
  253. this.ListItem = [];
  254. if (res.data) {
  255. var time = '';
  256. res.data.list.forEach(d => {
  257. if (!d.avatar) {
  258. // d.chat.userHead = '../../static/logo.png';
  259. let avatar = this.$queue.getData('avatar');
  260. d.avatar = avatar
  261. }
  262. this.ListItem.push(d);
  263. });
  264. this.ListItem = this.ListItem.reverse();;
  265. setTimeout(() => {
  266. uni.pageScrollTo({
  267. scrollTop: 99999,
  268. duration: 0
  269. });
  270. }, 50);
  271. }
  272. uni.hideLoading();
  273. });
  274. },
  275. getChatSave() {
  276. let userId = this.$queue.getData('userId');
  277. let phone = this.$queue.getData('phone');
  278. let userName = this.$queue.getData('userName');
  279. if (!phone) {
  280. phone = this.$queue.getData('userName');
  281. }
  282. let avatar = this.$queue.getData('avatar');
  283. let data = {
  284. userId: userId,
  285. userHead: avatar,
  286. userName: userName,
  287. storeId: '0',
  288. storeHead: '',
  289. storeName: ''
  290. }
  291. this.$Request.postJson('/chat/save', data).then(res => {
  292. if (res.status === 0) {
  293. this.chatId = res.data.chatId;
  294. uni.showLoading({
  295. title: '加载中...'
  296. });
  297. this.getTimeOrListItem1();
  298. }
  299. });
  300. },
  301. setChatSave(type) {
  302. //type:1文字 2图片
  303. if (type === 1 && this.content == '') {
  304. this.$queue.showToast('请输入聊天内容');
  305. return;
  306. }
  307. // if (this.chatId == '' || this.chatId == undefined) {
  308. // this.$queue.showToast('网络较差,请稍后再试');
  309. // return;
  310. // }
  311. let userId = this.$queue.getData('userId');
  312. let avatar = this.$queue.getData('avatar');
  313. let phone = this.$queue.getData('phone');
  314. let userName = this.$queue.getData('userName');
  315. if (!phone) {
  316. phone = this.$queue.getData('userName');
  317. }
  318. console.log(this.byUserId)
  319. let data = {
  320. content: this.content,
  321. messageType: type,
  322. userId: this.byUserId,
  323. chatConversationId: this.chatConversationId,
  324. }
  325. data = JSON.stringify(data);
  326. let that = this;
  327. uni.sendSocketMessage({
  328. data: data,
  329. success(res) {
  330. let avatar = that.$queue.getData('avatar');
  331. if (!avatar) {
  332. avatar = '../../static/logo.png';
  333. }
  334. let data = {
  335. chat: {
  336. userHead: avatar
  337. },
  338. content: that.content,
  339. type: type,
  340. userId: userId
  341. }
  342. console.log(data,'data99999999999999999')
  343. // that.ListItem.push(data);
  344. setTimeout(() => {
  345. that.getTimeOrListItem1();
  346. }, 50);
  347. console.log(that.content);
  348. },
  349. fail(err) {
  350. console.log(err);
  351. }
  352. })
  353. this.content = '';
  354. },
  355. //发送图片
  356. chooseImage(sourceType) {
  357. let that = this
  358. uni.chooseImage({
  359. count: 1,
  360. sourceType: ['album', 'camera'],
  361. success: res => {
  362. for (let i = 0; i < res.tempFilePaths.length; i++) {
  363. this.$queue.showLoading("上传中...");
  364. uni.uploadFile({ // 上传接口
  365. url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
  366. filePath: res.tempFilePaths[i],
  367. name: 'file',
  368. success: (uploadFileRes) => {
  369. console.log(uploadFileRes)
  370. this.content = JSON.parse(uploadFileRes.data).data;
  371. this.setChatSave(2);
  372. uni.hideLoading();
  373. }
  374. });
  375. }
  376. }
  377. })
  378. },
  379. config: function(name) {
  380. var info = null;
  381. if (name) {
  382. var name2 = name.split("."); //字符分割
  383. if (name2.length > 1) {
  384. info = configdata[name2[0]][name2[1]] || null;
  385. } else {
  386. info = configdata[name] || null;
  387. }
  388. if (info == null) {
  389. let web_config = cache.get("web_config");
  390. if (web_config) {
  391. if (name2.length > 1) {
  392. info = web_config[name2[0]][name2[1]] || null;
  393. } else {
  394. info = web_config[name] || null;
  395. }
  396. }
  397. }
  398. }
  399. return info;
  400. },
  401. //查看大图
  402. viewImg(item) {
  403. let imgsArray = [];
  404. imgsArray[0] = item;
  405. uni.previewImage({
  406. current: 0,
  407. urls: imgsArray
  408. });
  409. },
  410. },
  411. };
  412. </script>
  413. <style>
  414. page {
  415. background-color: #F7F7F7;
  416. }
  417. .bg {
  418. background-color: #FFFFFF;
  419. }
  420. .input-box {
  421. position: fixed;
  422. bottom: 0;
  423. left: 0;
  424. height: 120rpx;
  425. width: 100%;
  426. display: flex;
  427. box-sizing: content-box;
  428. z-index: 999;
  429. /* background-color: #ececec; */
  430. /* padding: 0 5rpx; */
  431. }
  432. .chat-listitem {
  433. display: flex;
  434. margin-top: 20rpx;
  435. padding: 10rpx;
  436. }
  437. .chat-listitem-text {
  438. color: #FFFFFF;
  439. background: #005DFF;
  440. margin-top: 10rpx;
  441. width: fit-content;
  442. padding: 15rpx;
  443. font-size: 30rpx;
  444. height: max-content;
  445. word-wrap: break-word;
  446. word-break: break-all;
  447. border-radius: 10rpx;
  448. }
  449. .chat-listitem-text1 {
  450. /* color: #FFFFFF; */
  451. background: #FFFFFF;
  452. margin-top: 10rpx;
  453. width: fit-content;
  454. padding: 15rpx;
  455. font-size: 30rpx;
  456. height: max-content;
  457. word-wrap: break-word;
  458. word-break: break-all;
  459. border-radius: 10rpx;
  460. }
  461. .chat-listitem-image-type4 {
  462. /* color: #FFFFFF; */
  463. background: #FFFFFF;
  464. width: fit-content;
  465. font-size: 30rpx;
  466. height: max-content;
  467. word-wrap: break-word;
  468. word-break: break-all;
  469. border-top-left-radius: 20rpx;
  470. border-top-right-radius: 20rpx;
  471. }
  472. .chat-listitem-image {
  473. margin-top: 5rpx;
  474. width: 75rpx;
  475. height: 75rpx;
  476. border-radius: 5rpx;
  477. }
  478. .save {
  479. width: 130rpx;
  480. text-align: center;
  481. border-radius: 70rpx;
  482. height: 70rpx;
  483. color: #FFF;
  484. background:#005DFF;
  485. margin: 5rpx 10rpx 0;
  486. line-height: 70rpx;
  487. }
  488. </style>