info.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <!-- 聊天内容 -->
  6. <scroll-view class="scroll-view" scroll-y="true" scroll-with-animation="true"
  7. :scroll-into-view="scrollToView">
  8. <view class="list-scroll-view">
  9. <view class="chat-ls" v-for="(item,index) in unshiftmsg" :key="index" :id="'msg'+ index">
  10. <view class="chat-time" v-if="item.time != ''">
  11. {{item.time}}
  12. </view>
  13. <view class="msg-m msg-left" v-if="item.speaker !=  friendName">
  14. <image class="user-img" :src="item.file&&item.file.length>0?item.file[0].url:''">
  15. </image>
  16. <!-- 文字 -->
  17. <view class="message" v-if="item.TextType == 0">                           
  18. <view class="msg-text">{{item.content}}</view>
  19. </view>
  20. <!-- 图像 -->
  21. <view class="message img" v-else @tap="previewImg(item.content)">
  22. <image :src="item.content&&item.content.length>0?item.content[0].url:''"
  23. class="msg-img" mode="widthFix"></image>
  24. </view>
  25. </view>
  26. <view class="msg-m msg-right" v-if="item.speaker == friendName">
  27. <image class="user-img" :src="item.file&&item.file.length>0?item.file[0].url:''">
  28. </image>
  29. <!-- 文字 -->
  30. <view class="message" v-if="item.TextType == 0">
  31. <view class="msg-text">{{item.content}}</view>
  32. </view>
  33. <!-- 图像 -->
  34. <view class="message img" v-else @tap="previewImg(item.content)">
  35. <image :src="item.content&&item.content.length>0?item.content[0].url:''"
  36. class="msg-img" mode="widthFix"></image>
  37. </view>
  38. </view>
  39. </view>
  40. </view>
  41. </scroll-view>
  42. </view>
  43. <view class="two">
  44. <submit_1 @inputs="inputs" @heights="heights"></submit_1>
  45. </view>
  46. </view>
  47. </mobile-frame>
  48. </template>
  49. <script>
  50. import moment from 'moment';
  51. import submit_1 from './components/submit_1.vue';
  52. export default {
  53. components: {
  54. submit_1,
  55. },
  56. data() {
  57. return {
  58. friendName: "zs",
  59. user: {},
  60. info: {},
  61. id: '',
  62. name: '',
  63. msg: [],
  64. // 反转数据接收
  65. unshiftmsg: [{
  66. "speaker": "zs",
  67. "content": "这是第一条未读消息",
  68. "time": "2023-01-12 12:21:03",
  69. "TextType": 0
  70. },
  71. {
  72. "speaker": "yy",
  73. "content": "这是第二条未读消息",
  74. "time": "2023-01-12 12:22:58",
  75. "TextType": 0
  76. },
  77. {
  78. "speaker": "zs",
  79. "content": "这是第三条未读消息",
  80. "time": "2023-01-12 12:22:03",
  81. "TextType": 0
  82. },
  83. {
  84. "speaker": "yy",
  85. "content": "这是第四条未读消息",
  86. "time": "2023-01-12 12:21:58",
  87. "TextType": 0
  88. },
  89. {
  90. "speaker": "zs",
  91. "content": "这是第五条未读消息",
  92. "time": "2023-01-12 12:22:03",
  93. "TextType": 0
  94. },
  95. {
  96. "speaker": "yy",
  97. "content": "这是第六条未读消息",
  98. "time": "2023-01-12 12:21:58",
  99. "TextType": 0
  100. },
  101. {
  102. "speaker": "zs",
  103. "content": "这是第七条未读消息",
  104. "time": "2023-01-12 12:22:03",
  105. "TextType": 0
  106. },
  107. {
  108. "speaker": "yy",
  109. "content": "这是第八条未读消息",
  110. "time": "2023-01-12 12:21:58",
  111. "TextType": 0
  112. },
  113. {
  114. "speaker": "zs",
  115. "content": "这是第九条未读消息",
  116. "time": "2023-01-12 12:22:03",
  117. "TextType": 0
  118. },
  119. {
  120. "speaker": "zs",
  121. "content": "这是第十条未读消息",
  122. "time": "2023-01-12 12:21:58",
  123. "TextType": 0
  124. },
  125. ],
  126. imgMsg: [],
  127. inputh: '60',
  128. scrollToView: '',
  129. };
  130. },
  131. onLoad: async function(e) {
  132. const that = this;
  133. that.$set(that, `id`, e.id);
  134. that.$set(that, `name`, e.name);
  135. if (e.name) {
  136. uni.setNavigationBarTitle({
  137. title: e.name
  138. });
  139. }
  140. await that.watchlogin();
  141. },
  142. methods: {
  143. // 监听用户是否登录
  144. watchlogin() {
  145. const that = this;
  146. uni.getStorage({
  147. key: 'token',
  148. success: function(res) {
  149. let user = that.$jwt(res.data);
  150. if (user) {
  151. that.$set(that, `user`, user)
  152. // if (that.id)
  153. that.search()
  154. }
  155. }
  156. })
  157. },
  158. async search() {
  159. const that = this;
  160. let res;
  161. let config = that.$config;
  162. let url = `wss://${config.stompUrl}/ws/exchange/t_m_dev_local/635f82e62df39d4755a25a4a`;
  163. console.log(url);
  164. uni.closeSocket()
  165. uni.connectSocket({
  166. url,
  167. // header: {
  168. // login: 'tehqDev',
  169. // passcode: 'tehqDev'
  170. // },
  171. success: async function(res) {
  172. console.log(res, 's');
  173. // res = await that.$api(`/chatRecord`, `GET`, {
  174. // room: that.id
  175. // }, 'chat');
  176. // if (res.errcode == '0') {
  177. // console.log(res);
  178. // } else {
  179. // uni.showToast({
  180. // title: res.errmsg,
  181. // icon: 'none'
  182. // })
  183. // }
  184. },
  185. fail: function(err) {
  186. console.log(err, 'e');
  187. }
  188. });
  189. // 跳转到最后一条数据 与前面的:id进行对照
  190. that.$nextTick(function() {
  191. console.log(that.unshiftmsg);
  192. that.scrollToView = 'msg' + (that.unshiftmsg.length - 1)
  193. })
  194. },
  195. // 进行图片的预览
  196. previewImg(e) {
  197. const that = this;
  198. let urls = e && e[0] && e[0].url;
  199. // 预览图片
  200. uni.previewImage({
  201. current: 0,
  202. urls: [urls],
  203. longPressActions: {
  204. itemList: ['发送给朋友', '保存图片', '收藏'],
  205. success: function(data) {
  206. console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
  207. },
  208. fail: function(err) {
  209. console.log(err.errMsg);
  210. }
  211. }
  212. });
  213. },
  214. //接受输入内容
  215. inputs(e) {
  216. const that = this;
  217. //时间间隔处理
  218. let data = {
  219. "room": "1001",
  220. "speaker": "zs",
  221. "content": e.message,
  222. "time": moment().format('YYYY-MM-DD HH:mm:ss'),
  223. "TextType": e.type
  224. };
  225. // 发送给服务器消息
  226. // onSendWS(JSON.stringify(data));
  227. that.unshiftmsg.push(data);
  228. // 跳转到最后一条数据 与前面的:id进行对照
  229. that.$nextTick(function() {
  230. that.scrollToView = 'msg' + (that.unshiftmsg.length - 1)
  231. })
  232. if (e.type == 1) {
  233. that.imgMsg.push(e.message);
  234. }
  235. console.log(e)
  236. },
  237. //输入框高度
  238. heights(e) {
  239. const that = this;
  240. that.inputh = e;
  241. that.goBottom();
  242. },
  243. // 滚动到底部
  244. goBottom() {
  245. const that = this;
  246. that.scrollToView = '';
  247. that.$nextTick(function() {
  248. that.scrollToView = 'msg' + (that.unshiftmsg.length - 1)
  249. })
  250. }
  251. }
  252. }
  253. </script>
  254. <style lang="scss">
  255. .main {
  256. display: flex;
  257. flex-direction: column;
  258. width: 100vw;
  259. height: 100vh;
  260. overflow: hidden;
  261. .one {
  262. position: relative;
  263. flex-grow: 1;
  264. .scroll-view {
  265. .chat-ls {
  266. .chat-time {
  267. font-size: 24rpx;
  268. color: rgba(39, 40, 50, 0.3);
  269. line-height: 34rpx;
  270. padding: 10rpx 0rpx;
  271. text-align: center;
  272. }
  273. .msg-m {
  274. display: flex;
  275. padding: 20rpx 0;
  276. .user-img {
  277. flex: none;
  278. width: 80rpx;
  279. height: 80rpx;
  280. border-radius: 40rpx;
  281. border: 1px solid #c0c0c0;
  282. }
  283. .message {
  284. flex: none;
  285. max-width: 480rpx;
  286. }
  287. .img {
  288. margin: 0 20rpx 0 0;
  289. }
  290. .msg-text {
  291. font-size: 32rpx;
  292. color: rgba(39, 40, 50, 1);
  293. line-height: 44rpx;
  294. padding: 18rpx 24rpx;
  295. }
  296. .msg-img {
  297. max-width: 400rpx;
  298. border-radius: 20rpx;
  299. }
  300. }
  301. .msg-left {
  302. flex-direction: row;
  303. .msg-text {
  304. margin-left: 16rpx;
  305. background-color: #f1f1f1;
  306. border-radius: 0rpx 20rpx 20rpx 20rpx;
  307. }
  308. .ms-img {
  309. margin-left: 16rpx;
  310. }
  311. }
  312. .msg-right {
  313. flex-direction: row-reverse;
  314. .msg-text {
  315. margin-right: 16rpx;
  316. background-color: rgba(255, 228, 49, 0.8);
  317. border-radius: 20rpx 0rpx 20rpx 20rpx;
  318. }
  319. .ms-img {
  320. margin-right: 16rpx;
  321. }
  322. }
  323. }
  324. }
  325. }
  326. .two {
  327. background-color: #f0f0f0;
  328. border-top: 1px solid rgba(39, 40, 50, 0.1);
  329. }
  330. }
  331. .scroll-view {
  332. position: absolute;
  333. top: 0;
  334. left: 0;
  335. right: 0;
  336. bottom: 0;
  337. .list-scroll-view {
  338. display: flex;
  339. flex-direction: column;
  340. }
  341. }
  342. </style>