You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/account/message/system.vue

124 lines
2.5 KiB

<!--
* @Author: ch
* @Date: 2022-03-26 14:32:03
* @LastEditors: ch
3 years ago
* @LastEditTime: 2022-05-21 11:39:26
* @Description: file content
-->
<template>
3 years ago
<view class="main">
3 years ago
<view class="msg-item" v-for="item in msgData" :key="item.id">
<view class="msg-item--title">
3 years ago
<text>{{item.payload.title }} {{item.id}}</text>
3 years ago
<text class="msg-item--time">{{item.createTimeStamp}}</text>
</view>
3 years ago
<view class="msg-item--con">
<image class="msg-item--img" src="@/static/message/xt.png" mode="widthFix"/>
<view class="msg-item--desc">{{item.payload.content}}</view>
</view>
</view>
3 years ago
<u-loadmore status="loading" v-if="!msgData.length"/>
</view>
</template>
<script>
3 years ago
import {Im, CreateUUID, ToAsyncAwait} from '@/common/utils';
export default {
3 years ago
data(){
3 years ago
return {}
3 years ago
},
3 years ago
computed:{
3 years ago
curSessionData(){
3 years ago
const data = this.$store.state.imData.find(i =>i.id == this.$Route.query.sessionId) || {}
if(data.id){
Im.setCurSessionId(data.id);
}
return data;
3 years ago
},
3 years ago
msgData (){
3 years ago
return this.curSessionData ? this.curSessionData.messageList : [];
3 years ago
}
},
3 years ago
watch:{
curSessionData(){
this.setTitle();
}
},
3 years ago
onReachBottom(){
this.getHistoryMsg();
},
3 years ago
onShow(){
3 years ago
if(!this.$route.query.sessionId){
3 years ago
this.$Router.back();
return false
}
3 years ago
this.getHistoryMsg();
3 years ago
this.readMsg();
3 years ago
this.setTitle();
3 years ago
},
methods:{
3 years ago
/**
* 获取历史消息
*/
3 years ago
setTitle(){
uni.setNavigationBarTitle({
title : this.curSessionData?.fromNickname || '系统消息'
});
},
async getHistoryMsg(){
3 years ago
this.loading = true;
3 years ago
const lastMsg = this.msgData?.length ? this.msgData[0] : {};
await ToAsyncAwait(Im.getHistoryMsg({
content : {
sessionId : this.$route.query.sessionId,
topMessageId : lastMsg.id || null
}
}));
3 years ago
},
3 years ago
/**
3 years ago
* 把当前会话消息置为已读
3 years ago
*/
3 years ago
async readMsg(){
Im.setRead({
content: {
sessionId : this.$route.query.sessionId
}
3 years ago
});
3 years ago
}
}
}
</script>
<style lang="scss" scoped>
3 years ago
.msg-item{
padding: 40rpx 0 0 40rpx;
&--title{
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 40rpx;
font-size: $font-size-lg;
color: $color-grey6;
}
&--time{
font-size: $font-size-sm;
color: $color-grey4;
}
&--con{
display: flex;
border-bottom: 1px solid $color-grey2;
padding: 40rpx 0;
}
&--img{
width: 140rpx;
height: 140rpx;
border-radius: 12rpx;
margin-right: 40rpx;
}
&--desc{
width: 455rpx;
font-size: $font-size-base;
line-height: 39rpx;
color: $color-grey5;
}
}
</style>