index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
  1. <!-- 消息列表 -->
  2. <template>
  3. <navigator style="margin-top: 100upx;" v-if="IS_TOURIST==1||isTrader2 == 1 " url="../login/index"
  4. class="main_btn_m get_phone to_login">
  5. {{isTrader2 == 1?'去登陆商户':'未登录'}}
  6. </navigator>
  7. <scroll-view v-else class="conversations" scroll-y="true">
  8. <view class="tab_status_box" style="margin-top: 10upx;">
  9. <view class="tab_status_box_focus">消息列表
  10. </view>
  11. <view style="position: relative;" class="tab_status_box_no_focus">
  12. <navigator url="./notice">平台消息</navigator>
  13. <view v-if="user_info.ss_notice_unreaded>0" class="num">{{user_info.ss_notice_unreaded}}</view>
  14. </view>
  15. </view>
  16. <view style="background-color: #f7f7f7;height: 10upx;margin-top: 0upx;"></view>
  17. <view v-if="conversations.length !=0">
  18. <view @click="navigateToChat(conversation)" class="scroll-item" v-for="(conversation, key) in conversations"
  19. :key="key">
  20. <view class="item-head">
  21. <image style="border-radius: 100%;overflow: hidden;"
  22. :src="conversation.data.avatar||'../../static/user.png'" class="head-icon"></image>
  23. <view class="item-head_unread" v-if="conversation.unread">{{conversation.unread}}</view>
  24. </view>
  25. <view class="scroll-item_info">
  26. <view class="item-info-top">
  27. <text style="max-width: 380upx;"
  28. class="item-info-top_name nowrap">{{conversation.data.name||'用户名称'}}</text>
  29. <view style="display: flex;align-items: center;">
  30. <view style="background-color: #00c3b8;color: #FFFFFF;margin-right: 10upx;font-size: 24upx;height: 32upx;line-height: 32upx;width: 106upx;text-align: center;" v-if="conversation.userId.indexOf('userlogin')==0">官方客服</view>
  31. <view class="item-info-top_time nowrap">{{formatDate(conversation.lastMessage.timestamp)}}
  32. </view>
  33. </view>
  34. <!-- <view class="item-info-top_time">{{(conversation.lastMessage.timestamp)}}</view> -->
  35. </view>
  36. <view class="item-info-bottom">
  37. <view class="item-info-bottom-item">
  38. <view class="item-info-top_content" v-if="conversation.lastMessage.type == 'text'">
  39. {{conversation.lastMessage.payload.text}}
  40. </view>
  41. <view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'video'">
  42. [视频消息]</view>
  43. <view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'audio'">
  44. [语音消息]</view>
  45. <view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'image'">
  46. [图片消息]</view>
  47. <view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'file'">
  48. [文件消息]</view>
  49. <view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'order'">
  50. [自定义消息:订单]</view>
  51. <view class="item-info-top_content" v-else>[[未识别内容]]</view>
  52. <view class="item-info-bottom_action" @click.stop="removeConversation(conversation)"></view>
  53. </view>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. <view class="no-conversation" v-else>
  59. 当前没有会话
  60. </view>
  61. <view class="action-container" v-if="action.show">
  62. <view class="layer" @click="action.show = false"></view>
  63. <view class="action-box">
  64. <view class="action-item" @click="topConversation">{{action.conversation.top ? '取消置顶' : '置顶聊天'}}</view>
  65. <view class="action-item" @click="removeConversation">删除聊天</view>
  66. </view>
  67. </view>
  68. </scroll-view>
  69. </template>
  70. <script>
  71. import commonData from '../../commonData.js'
  72. import commonFun from '../../commonFun.js'
  73. export default {
  74. data() {
  75. return {
  76. isTrader2: 2,
  77. IS_TOURIST: uni.getStorageSync('IS_TOURIST'), //获取游客模式
  78. formatDate: commonFun.formatDate,
  79. sys_role: commonData.sys_role, //角色
  80. unreadTotal: 0,
  81. conversations: [],
  82. action: {
  83. conversation: null,
  84. show: false,
  85. user_info: {},
  86. },
  87. user_info: {}
  88. }
  89. },
  90. onPullDownRefresh() {
  91. if (this.isTrader2 != 1 && this.IS_TOURIST != 1) {
  92. this.get_data()
  93. }else{
  94. uni.stopPullDownRefresh();
  95. }
  96. },
  97. onShow() {
  98. this.IS_TOURIST = uni.getStorageSync('IS_TOURIST')||0
  99. let isTrader2 = uni.getStorageSync('isTrader2') || 2 //设置isTrader2为是否是现场经理
  100. this.isTrader2 = isTrader2
  101. if (isTrader2 != 1 && this.IS_TOURIST != 1) {
  102. this.get_info(this.get_data())
  103. }
  104. },
  105. methods: {
  106. // 获取个人信息
  107. get_info(callback = () => {}) {
  108. commonFun.get_user_info(res => {
  109. this.user_info = res.data.Result
  110. console.log('消息页获取个人信息')
  111. console.log(this.user_info)
  112. callback()
  113. })
  114. },
  115. // 获取数据
  116. get_data() {
  117. //监听会话列表变化
  118. let self = this;
  119. commonFun.goEasy.im.on(commonFun.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, (content) => {
  120. self.renderConversations(content);
  121. });
  122. //加载会话列表
  123. uni.showLoading({
  124. title: "加载中...",
  125. mask: true
  126. });
  127. commonFun.goEasy.im.latestConversations({
  128. onSuccess: function(result) {
  129. console.log('加载会话列表成功')
  130. let content = result.content;
  131. console.log(content)
  132. self.renderConversations(content);
  133. uni.hideLoading();
  134. uni.stopPullDownRefresh();
  135. },
  136. onFailed: function(error) {
  137. uni.hideLoading()
  138. uni.stopPullDownRefresh();
  139. console.log("获取最新会话列表失败:, code:" + error.code + " content:" + error.content);
  140. }
  141. });
  142. },
  143. // 置顶/取消会话
  144. topConversation() {
  145. uni.showLoading({
  146. title: "加载中...",
  147. mask: true
  148. });
  149. let conversation = this.action.conversation;
  150. let failedDescription = conversation.top ? '取消置顶失败' : '置顶失败';
  151. this.action.show = false;
  152. if (conversation.type === commonFun.GoEasy.IM_SCENE.PRIVATE) {
  153. commonFun.goEasy.im.topPrivateConversation({
  154. userId: conversation.userId,
  155. top: !conversation.top,
  156. onSuccess: function() {
  157. uni.hideLoading();
  158. },
  159. onFailed: function(error) {
  160. uni.hideLoading();
  161. uni.showToast({
  162. title: failedDescription,
  163. icon: "none"
  164. });
  165. console.log(error);
  166. }
  167. });
  168. } else {
  169. commonFun.goEasy.im.topGroupConversation({
  170. groupId: conversation.groupId,
  171. top: !conversation.top,
  172. onSuccess: function() {
  173. uni.hideLoading();
  174. },
  175. onFailed: function(error) {
  176. uni.hideLoading();
  177. uni.showToast({
  178. title: failedDescription,
  179. icon: "none"
  180. });
  181. console.log(error);
  182. }
  183. });
  184. }
  185. },
  186. // 移除会话
  187. removeConversation(conversation) {
  188. uni.showModal({
  189. content: '确认删除?',
  190. success: (res) => {
  191. if (res.confirm) {
  192. uni.showLoading({
  193. title: "加载中...",
  194. mask: true
  195. });
  196. let failedDescription = "删除失败";
  197. // let conversation = this.action.conversation;
  198. // this.action.show = false;
  199. if (conversation.type === commonFun.GoEasy.IM_SCENE.PRIVATE) {
  200. commonFun.goEasy.im.removePrivateConversation({
  201. userId: conversation.userId,
  202. onSuccess: function() {
  203. uni.hideLoading();
  204. },
  205. onFailed: function(error) {
  206. uni.hideLoading();
  207. uni.showToast({
  208. title: failedDescription,
  209. icon: "none"
  210. });
  211. console.log(error);
  212. }
  213. });
  214. } else {
  215. commonFun.goEasy.im.removeGroupConversation({
  216. groupId: conversation.groupId,
  217. onSuccess: function() {
  218. uni.hideLoading()
  219. },
  220. onFailed: function(error) {
  221. uni.hideLoading();
  222. uni.showToast({
  223. title: failedDescription,
  224. icon: "none"
  225. });
  226. console.log(error);
  227. }
  228. });
  229. }
  230. }
  231. }
  232. })
  233. },
  234. // 渲染数据列表
  235. renderConversations(content) {
  236. // this.save_friends_info(content.conversations)
  237. // console.log(content.conversations)
  238. this.conversations = content.conversations || [];
  239. let unreadTotal = content.unreadTotal;
  240. this.setUnreadAmount(unreadTotal);
  241. },
  242. // 将基本信息存入本地(go_easy不会获取历史头像和姓名)
  243. // save_friends_info(data) {
  244. // let friends_info = uni.getStorageSync('friends_info') || []
  245. // let friends_info_new = []
  246. // data.map(item => {
  247. // if (item.data.name) {
  248. // friends_info_new.push(item)
  249. // } else {
  250. // friends_info.map(item2 => {
  251. // })
  252. // }
  253. // })
  254. // uni.setStorageSync('friends_info', friends_info_new)
  255. // },
  256. // 渲染icon右上角数字
  257. setUnreadAmount(unreadTotal) {
  258. commonFun.get_user_info(res => {
  259. let ss_notice_unreaded = res.data.Result.ss_notice_unreaded
  260. this.user_info = res.data.Result
  261. this.unreadTotal = Number(unreadTotal) + ss_notice_unreaded;
  262. if (this.unreadTotal > 0) {
  263. uni.setTabBarBadge({
  264. index: 1,
  265. text: this.unreadTotal.toString()
  266. });
  267. } else {
  268. uni.removeTabBarBadge({
  269. index: 1
  270. });
  271. }
  272. })
  273. },
  274. // 跳转到会话区
  275. navigateToChat(conversation) {
  276. console.log(conversation)
  277. uni.setStorageSync('targetUser', {
  278. ...conversation.data
  279. })
  280. uni.navigateTo({
  281. url: './chat?to=' + conversation.userId
  282. });
  283. },
  284. showAction(conversation) {
  285. this.action.conversation = conversation;
  286. this.action.show = true;
  287. }
  288. }
  289. }
  290. </script>
  291. <style>
  292. page {
  293. height: 100%;
  294. }
  295. .num {
  296. position: absolute;
  297. width: 40upx;
  298. height: 40upx;
  299. background: #FF0000;
  300. border-radius: 50%;
  301. color: #ffffff;
  302. text-align: center;
  303. line-height: 40upx;
  304. font-size: 22upx !important;
  305. right: -40upx;
  306. top: 0upx;
  307. }
  308. .conversations {
  309. width: 750rpx;
  310. overflow-x: hidden;
  311. display: flex;
  312. flex-direction: column;
  313. box-sizing: border-box;
  314. /* height: 100%; */
  315. padding-bottom: 100upx;
  316. }
  317. .conversations .scroll-item {
  318. height: 152rpx;
  319. display: flex;
  320. align-items: center;
  321. padding-left: 32rpx;
  322. border-bottom: 1px solid #EFEFEF;
  323. }
  324. .conversations .scroll-item .head-icon {
  325. width: 100rpx;
  326. height: 100rpx;
  327. margin-right: 28rpx;
  328. }
  329. .conversations .scroll-item_info {
  330. height: 151rpx;
  331. width: 590rpx;
  332. padding-right: 32rpx;
  333. box-sizing: border-box;
  334. }
  335. .conversations .scroll-item_info .item-info-top {
  336. padding-top: 20rpx;
  337. height: 60rpx;
  338. line-height: 60rpx;
  339. display: flex;
  340. align-items: center;
  341. justify-content: space-between;
  342. }
  343. .conversations .item-info-top_name {
  344. font-size: 34rpx;
  345. color: #262628;
  346. }
  347. .conversations .item-info-top_time {
  348. font-size: 26rpx;
  349. color: rgba(179, 179, 179, 0.8);
  350. font-family: Source Han Sans CN;
  351. }
  352. .conversations .item-info-bottom {
  353. height: 40rpx;
  354. line-height: 40rpx;
  355. overflow: hidden;
  356. }
  357. .conversations .item-info-bottom-item {
  358. display: flex;
  359. justify-content: space-between;
  360. }
  361. .item-info-bottom .item-info-top_content {
  362. font-size: 30rpx;
  363. color: #b3b3b3;
  364. overflow: hidden;
  365. text-overflow: ellipsis;
  366. white-space: nowrap;
  367. }
  368. .item-info-bottom .item-info-bottom_action {
  369. width: 50rpx;
  370. height: 50rpx;
  371. font-size: 20rpx;
  372. background: url("../../static/images_go/action.png") no-repeat center;
  373. background-size: 28rpx 30rpx;
  374. }
  375. .no-conversation {
  376. width: 100%;
  377. text-align: center;
  378. height: 80rpx;
  379. line-height: 80rpx;
  380. font-size: 28rpx;
  381. color: #9D9D9D;
  382. }
  383. .item-head {
  384. position: relative;
  385. }
  386. .item-head .item-head_unread {
  387. padding: 6rpx;
  388. background-color: #EE593C;
  389. color: #FFFFFF;
  390. font-size: 24rpx;
  391. line-height: 28rpx;
  392. border-radius: 24rpx;
  393. min-width: 24rpx;
  394. min-height: 24rpx;
  395. text-align: center;
  396. position: absolute;
  397. top: 0;
  398. right: 15rpx;
  399. }
  400. .action-container {
  401. width: 100%;
  402. height: 100%;
  403. position: absolute;
  404. top: 0;
  405. left: 0;
  406. display: flex;
  407. justify-content: center;
  408. align-items: center;
  409. }
  410. .action-container .layer {
  411. position: absolute;
  412. top: 0;
  413. left: 0;
  414. background: rgba(51, 51, 51, 0.5);
  415. width: 100%;
  416. height: 100%;
  417. z-index: 99;
  418. }
  419. .action-box {
  420. width: 400rpx;
  421. height: 240rpx;
  422. background: #ffffff;
  423. position: relative;
  424. z-index: 100;
  425. border-radius: 20rpx;
  426. overflow: hidden;
  427. }
  428. .action-item {
  429. text-align: center;
  430. line-height: 120rpx;
  431. font-size: 34rpx;
  432. color: #262628;
  433. border-bottom: 1px solid #EFEFEF;
  434. }
  435. </style>