messages.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
  1. <template>
  2. <view class="container">
  3. <TabBar :tabIndex="tabIndex"></TabBar>
  4. <uni-popup ref="popup" type="center">
  5. <Popup :content1="popup.content1" :content2="popup.content2" :tip1="popup.tip1" :tip2="popup.tip2" :btntext="popup.btntext" @closePopup="closePopup" @toService="toService" :btnEvent="'toService'"></Popup>
  6. </uni-popup>
  7. <uni-popup ref="paypopup" type="bottom" :safe-area="false">
  8. <PayPopup :swiperIndex="payPopupIndex" @closePopup="closePayPopup"></PayPopup>
  9. </uni-popup>
  10. <uni-popup ref="vippopup" type="center">
  11. <VipPopup :swiperIndex="vipPopupIndex" @closePopup="closeVipPopup"></VipPopup>
  12. </uni-popup>
  13. <view id="topnav" class="topnav flex-start" :style="{'height':`${topbarOffsetHeight-statusBarHeight}px`,'padding-top':`${statusBarHeight}px`}" >
  14. <view class="nav-item font44 fw600">
  15. 消息
  16. </view>
  17. <image :src="`${assetsUrl}message-setting.png`" mode="aspectFill" class="nav-img" @click="openSetting"></image>
  18. </view>
  19. <scroll-view class="scroll-view"
  20. v-if="scrollHeight>0"
  21. scroll-y="true"
  22. lower-threshold="200"
  23. :style="{'height':`${scrollHeight}px`,'padding-top':`${topbarOffsetHeight}px`}"
  24. >
  25. <!-- <view class="message-item flex-between">
  26. <image :src="`${assetsUrl}message-system.png`" mode="aspectFill" class="left-img"></image>
  27. <view class="right-info">
  28. <view class="ri-top flex-between">
  29. <view class="rit-title fw600 font32">
  30. 系统通知
  31. </view>
  32. <view class="rit-time font22 fw400">
  33. 2022-8-31 09:57:13
  34. </view>
  35. </view>
  36. <view class="ri-bottom flex-between">
  37. <view class="rib-text font28 fw400">
  38. heihei
  39. </view>
  40. <view class="rib-num font20 fw400">
  41. 99
  42. </view>
  43. </view>
  44. </view>
  45. </view> -->
  46. <view class="message-item flex-between" v-for="(item,index) in messagesList" :key="index" :data-index="index" @touchstart="touchStart" @touchend="touchEnd">
  47. <image :src="item.userProfile.avatar" mode="aspectFill" class="left-img" :style="{'width':`${showDelIndex===index?'0rpx':'120rpx'}`}" @click="toTalk(item.userProfile.userID)"></image>
  48. <view class="right-info" @click="toTalk(item.userProfile.userID)">
  49. <view class="ri-top flex-between">
  50. <view class="rit-title fw600 font32">
  51. {{item.userProfile.nick}}
  52. </view>
  53. <view class="rit-time font22 fw400">
  54. {{item.lastMessage.lastTimeStr}}
  55. </view>
  56. </view>
  57. <view class="ri-bottom flex-between">
  58. <view class="rib-text font28 fw400">
  59. {{item.lastMessage.payload.text}}
  60. </view>
  61. <view class="rib-num font20 fw400" v-if="item.unreadCount!==0">
  62. {{item.unreadCount}}
  63. </view>
  64. </view>
  65. </view>
  66. <view class="del-box font28 fw400" :style="{'width':`${showDelIndex===index?'120rpx':'0rpx'}`}" @click="delConversation">
  67. 删除
  68. </view>
  69. </view>
  70. <!-- <view class="no-more font24 fw400" v-if="messagesList.length!==0&&messagesList.length>=recommendTotal">没有更多了</view> -->
  71. <Status type="noMsg" text="暂无消息" v-if="showNoMsg"></Status>
  72. </scroll-view>
  73. </view>
  74. </template>
  75. <script>
  76. import TabBar from '@/components/TabBar/TabBar.vue';
  77. import Popup from '@/components/Popup/Popup.vue';
  78. import VipPopup from '@/components/Popup/VipPopup.vue';
  79. import PayPopup from '@/components/Popup/PayPopup.vue';
  80. import Status from '@/components/Status/Status.vue';
  81. /**
  82. * 腾讯位置服务,手机账号:18996226740
  83. */
  84. import wxMap from '@/static/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js';
  85. const wxMapSdk=new wxMap({key:'E5SBZ-T2YC3-CBL3F-YGFQQ-26PP2-ERFII'})
  86. export default {
  87. components:{TabBar,Popup,VipPopup,PayPopup,Status},
  88. data() {
  89. return {
  90. scrollHeight:0,
  91. topNavAlpha:0,
  92. assetsUrl:this.$util.assetsUrl,
  93. startTime:0,
  94. startPosition:0,
  95. endPosition:0,
  96. showDelIndex:-1,
  97. tabIndex:1,
  98. messagesList:[],
  99. popup:{
  100. content1:'',
  101. content2:'',
  102. tip1:'',
  103. tip2:'',
  104. btntext:''
  105. },
  106. payPopupIndex:-1,
  107. vipPopupIndex:-1,
  108. userInfo:null,//会话消息用户信息
  109. showNoMsg:false,
  110. systemMsg:{},
  111. };
  112. },
  113. computed: {
  114. statusBarHeight() {
  115. return this.$store.state.statusBarHeight;
  116. },
  117. topbarOffsetHeight() {
  118. return this.$store.state.topbarOffsetHeight;
  119. },
  120. platform(){
  121. return this.$store.state.platform;
  122. },
  123. mineInfo(){
  124. return this.$store.state.userInfo
  125. }
  126. },
  127. onLoad() {
  128. this.computedScollviewHeight();
  129. if(!uni.getStorageSync('token')){
  130. this.showNoMsg=true;
  131. return;
  132. }
  133. uni.$TUIKit.on(uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated);
  134. },
  135. onShow() {
  136. if(!uni.getStorageSync('token')){
  137. return;
  138. }
  139. this.getSystemMessages();
  140. this.getUserMessages();
  141. },
  142. onShareAppMessage(){
  143. return {
  144. title: '糖果公园',
  145. path: `/pages/login/login?share=${this.userInfo.inviteCode}`,
  146. }
  147. },
  148. methods:{
  149. /**
  150. * 计算scroll高度
  151. */
  152. computedScollviewHeight() {
  153. let query = uni.createSelectorQuery().in(this);
  154. let heightLeaf = this.$store.state.tabbarHeight/2;
  155. query.select('#topnav').boundingClientRect(data => {
  156. heightLeaf += data.height;
  157. }).exec(() => {
  158. let sysInfo = uni.getSystemInfoSync();
  159. this.scrollHeight = sysInfo.windowHeight - heightLeaf;
  160. });
  161. },
  162. toLogin(){
  163. uni.reLaunch({
  164. url:'/pages/login/login'
  165. })
  166. },
  167. closePopup(){
  168. this.$refs.popup.close();
  169. },
  170. closePayPopup(){
  171. this.payPopupIndex=-1;
  172. this.$refs.paypopup.close();
  173. },
  174. closeVipPopup(){
  175. this.vipPopupIndex=-1;
  176. this.$refs.vippopup.close();
  177. },
  178. touchStart(e){
  179. this.startTime = Date.now()
  180. this.startPosition = e.changedTouches[0].clientX;
  181. },
  182. touchEnd(e){
  183. const endTime = Date.now()
  184. if (endTime - this.startTime <100){
  185. return;
  186. }
  187. if (Math.abs(this.endPosition - this.startPosition) > 100){
  188. this.endPosition = e.changedTouches[0].clientX;
  189. let elePosition = this.endPosition - this.startPosition < 0 ? "toLeft": "toRight";
  190. console.log(elePosition)
  191. if(elePosition==='toLeft'){
  192. this.showDelIndex=e.currentTarget.dataset.index;
  193. }
  194. else{
  195. this.showDelIndex=-1;
  196. }
  197. } else {
  198. return;
  199. }
  200. },
  201. onConversationListUpdated(event){
  202. if(event.data.length===0){
  203. this.messagesList=[];
  204. this.showNoMsg=true;
  205. return;
  206. }
  207. else{
  208. this.getUserMessages();
  209. }
  210. },
  211. delConversation(){
  212. uni.$TUIKit.deleteConversation(this.messagesList[this.showDelIndex].conversationID);
  213. this.showDelIndex=-1;
  214. },
  215. openSetting(){
  216. if(!uni.getStorageSync('token')){
  217. this.popup={
  218. content1:'您还未登录',
  219. content2:'该功能登录后才能使用',
  220. tip1:'',
  221. tip2:'',
  222. btntext:'去登录'
  223. }
  224. this.$refs.popup.open();
  225. return;
  226. }
  227. uni.showActionSheet({
  228. itemList: ['全部已读', '清空消息'],
  229. success: (res)=>{
  230. if(res.tapIndex===0){
  231. uni.$TUIKit.setAllMessageRead({scope:uni.$TUIKitTypes.READ_ALL_MSG});
  232. }
  233. if(res.tapIndex===1){
  234. uni.showModal({
  235. title:'清空消息列表',
  236. content:'清空消息列表后,暂无恢复,请确认是否清空消息列表',
  237. success: (ress) => {
  238. if(ress.confirm){
  239. this.messagesList.forEach(item=>{
  240. uni.$TUIKit.deleteConversation(item.conversationID);
  241. })
  242. }
  243. }
  244. })
  245. }
  246. },
  247. fail: res=>{
  248. console.log(res.errMsg);
  249. }
  250. });
  251. },
  252. getSystemMessages(){
  253. let user=JSON.parse(uni.getStorageSync('user'));
  254. this.$api.public.notifyActive({}).then(res=>{
  255. this.$api.public.loadSystemMsgs({
  256. completeUser:user,
  257. onlineRecent:false,
  258. page:{
  259. index:1,
  260. size:20,
  261. sortValue:null
  262. }
  263. }).then(result=>{
  264. })
  265. })
  266. },
  267. getUserMessages(){
  268. uni.$TUIKit.getConversationList().then(res=>{
  269. console.log(res.data.conversationList)
  270. for(let i=0;i<res.data.conversationList.length;i++){
  271. res.data.conversationList[i].lastMessage.lastTimeStr=this.$moment(res.data.conversationList[i].lastMessage.lastTime*1000).format('YYYY-MM-DD hh:mm:ss');
  272. if(res.data.conversationList[i].lastMessage.type==='TIMImageElem'){
  273. res.data.conversationList[i].lastMessage.payload.text="[图片消息]"
  274. }
  275. if(res.data.conversationList[i].lastMessage.type==='TIMVideoFileElem'){
  276. res.data.conversationList[i].lastMessage.payload.text="[视频消息]"
  277. }
  278. if(res.data.conversationList[i].lastMessage.type==='TIMSoundElem'){
  279. res.data.conversationList[i].lastMessage.payload.text="[音频消息]"
  280. }
  281. if(res.data.conversationList[i].lastMessage.type==='TIMCustomElem'){
  282. let msg=JSON.parse(res.data.conversationList[i].lastMessage.payload.data);
  283. if(msg.type===99)
  284. {
  285. res.data.conversationList[i].lastMessage.payload.text="[系统消息]"
  286. }
  287. if(msg.type===5)
  288. {
  289. res.data.conversationList[i].lastMessage.payload.text="[图片消息]"
  290. }
  291. if(msg.type===6){
  292. res.data.conversationList[i].lastMessage.payload.text="[视频消息]"
  293. }
  294. if(msg.type===100){
  295. res.data.conversationList.splice(i,1);
  296. i--;
  297. // res.data.conversationList[i].userProfile.nick='社区动态';
  298. // res.data.conversationList[i].userProfile.avatar=`${this.assetsUrl}message-active.png`
  299. // res.data.conversationList[i].lastMessage.payload.text="[有人喜欢你]"
  300. }
  301. }
  302. }
  303. this.messagesList=res.data.conversationList;
  304. if(this.messagesList.length===0){
  305. this.showNoMsg=true;
  306. }
  307. else{
  308. this.showNoMsg=false;
  309. }
  310. })
  311. },
  312. toTalk(id){
  313. uni.showLoading({
  314. mask:true,
  315. title:'加载中'
  316. })
  317. let user=JSON.parse(uni.getStorageSync('user'));
  318. this.$api.public.userDetail({getAlbum:true,completeUser:user,uponUserId:id}).then(res=>{
  319. console.log(res);
  320. this.userInfo=res.data;
  321. let arr=[],obj={latitude:0,longitude:0};
  322. obj.latitude=this.userInfo.geo.lat;
  323. obj.longitude=this.userInfo.geo.lon;
  324. arr.push(obj);
  325. wxMapSdk.calculateDistance({
  326. mode:'straight',
  327. from:{
  328. latitude: this.$store.state.latitude,
  329. longitude: this.$store.state.longitude
  330. },
  331. to:arr,
  332. success:dists=>{
  333. uni.hideLoading();
  334. if(dists.message==="query ok"){
  335. console.log(dists,this.mineInfo)
  336. for(let j=0;j<dists.result.elements.length;j++){
  337. this.userInfo.distance=(dists.result.elements[j].distance>1000?`${Math.floor(dists.result.elements[j].distance/100)/10}km`:`${dists.result.elements[j].distance}m`)
  338. }
  339. if(this.mineInfo.sex==='Male'&&!this.mineInfo.vip){
  340. if(this.platform==='ios'){
  341. this.vipPopupIndex=0;
  342. this.$refs.vippopup.open();
  343. return;
  344. }
  345. else{
  346. this.payPopupIndex=0;
  347. this.$refs.paypopup.open();
  348. return;
  349. }
  350. }
  351. if(this.mineInfo.sex==='Famale'&&!this.mineInfo.realMan){
  352. this.popup={
  353. content1:'认证后才能开启私聊哦',
  354. content2:'给客服回复关键词「真人认证」',
  355. tip1:'',
  356. tip2:'',
  357. btntext:'联系客服去认证'
  358. }
  359. this.$refs.popup.open();
  360. return;
  361. }
  362. uni.navigateTo({
  363. url:`/pagesSub/chatting/chatting?conversationid=C2C${id}`
  364. })
  365. }
  366. else{
  367. uni.showToast({
  368. title:'计算距离失败',
  369. icon:'none'
  370. });
  371. uni.navigateTo({
  372. url:`/pagesSub/chatting/chatting?conversationid=C2C${id}`
  373. })
  374. }
  375. },
  376. fail:err=>{
  377. console.log(err)
  378. }
  379. })
  380. })
  381. },
  382. }
  383. }
  384. </script>
  385. <style lang="scss" scoped>
  386. .container{
  387. width: 100vw;
  388. height: 100vh;
  389. background-color: $bgcolor1;
  390. position: relative;
  391. .topnav {
  392. padding: 0 10rpx;
  393. position: fixed;
  394. top: 0;
  395. left: 0;
  396. width: 100%;
  397. z-index: 100;
  398. backdrop-filter: blur(10px);
  399. .nav-item {
  400. height: 56rpx;
  401. margin-left: 16rpx;
  402. color: #ffffff;
  403. }
  404. .nav-img{
  405. width: 44rpx;
  406. height: 44rpx;
  407. margin: 4rpx 0rpx 0rpx 13rpx;
  408. }
  409. }
  410. .scroll-view{
  411. .message-item{
  412. width: 100vw;
  413. box-sizing: border-box;
  414. padding: 24rpx 28rpx;
  415. .left-img{
  416. width: 120rpx;
  417. height: 120rpx;
  418. margin-right: 24rpx;
  419. border-radius: 44rpx;
  420. transition: all 0.3s;
  421. }
  422. .right-info{
  423. flex: 1;
  424. height: 120rpx;
  425. transition: all 0.3s;
  426. .ri-top{
  427. margin-top: 8rpx;
  428. .rit-title{
  429. color: $fontcolor5;
  430. }
  431. .rit-time{
  432. color: $fontcolor2;
  433. }
  434. }
  435. .ri-bottom{
  436. margin-top: 20rpx;
  437. .rib-text{
  438. color: $fontcolor3;
  439. }
  440. .rib-num{
  441. width:36rpx;
  442. height: 36rpx;
  443. border-radius: 36rpx;
  444. background-color: #FE3B49;
  445. color: #ffffff;
  446. line-height: 36rpx;
  447. text-align: center;
  448. }
  449. }
  450. }
  451. .del-box{
  452. background-color: #FE3B49;
  453. color: #ffffff;
  454. height: 120rpx;
  455. transition: all 0.3s;
  456. overflow: hidden;
  457. line-height: 120rpx;
  458. text-align: center;
  459. margin-left: 16rpx;
  460. }
  461. }
  462. }
  463. }
  464. </style>