shop-app/pages/account/message/group.vue

<!--
 * @Author: ch
 * @Date: 2022-03-22 16:13:00
 * @LastEditors: ch
 * @LastEditTime: 2022-05-14 16:32:09
 * @Description: file content
-->
<template>
	<view >
		<BsEmpty tips="暂时还没有消息哦~" v-if="!$store.state.sessionData.length" 
			:icon="require('@/static/message/empty.png')" />
		<view class="msgItem" v-for="item in $store.state.sessionData" :key="item.id"
			@click="openMsg(item)">
			<image class="msgItem--headImg" src="@/static/account/tx.png"></image>
			<view class="msgItem--con">
				<view>
					<text class="msgItem--title">{{item.fromNickname}}</text>
					<text class="msgItem--text" v-if="item.lastMessage">
						<template v-if="item.lastMessage.type == msgType.TXT">{{item.lastMessage.payload.content || item.lastMessage.payload.text}}</template>
						<template v-if="item.lastMessage.type == msgType.CUSTOM">[链接]</template>
						<template v-if="item.lastMessage.type == msgType.IMG">[图片]</template>
						<template v-if="item.lastMessage.type == msgType.VIDEO">[视频]</template>
					</text>
				</view>
				<view class="msgItem--right">
					<text class="msgItem--time" v-if="item.lastMessage">{{item.lastMessage.createTimeStamp}}</text>
					<u-badge class="msgItem--badge" :value="item.unreadCount"></u-badge>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import BsEmpty from '../../../components/BsEmpty.vue';
import {MSG_TYPE} from '@/common/dicts/im';
export default {
	components: { BsEmpty },
	data (){
		return {
			msgType : MSG_TYPE,
			sessionData : this.$store.state.sessionData
		}
	},
	onShow(){
		if(!this.$store.state.token){
			this.$Router.push('/login');
		}
	},
	methods:{
		openMsg(item){
			this.$store.commit('SET_SESSION_MSG_ID', item.id);
			if(item.type === 3){
				this.$Router.push(`/messageChat?sessionId=${item.id}`);
			}else{
				this.$Router.push(`/messageSystem`);
			}
			
		}
	}
}
</script>
<style lang="scss" scoped>
.msgItem{
	display: flex;
	padding: 40rpx 0 0 40rpx;
	&--headImg{
		width: 106rpx;
		height: 106rpx;
		margin-right: 30rpx;
	}
	&--con{
		flex: 1;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid $color-grey2;
		padding: 0 40rpx 40rpx 0;
	}
	&--title{
		width: 350rpx;
		display: block;
		font-size: $font-size-lg;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		margin-bottom: 20rpx;
	}
	&--text{
		width: 350rpx;
		font-size: $font-size-base;
		line-height: 36rpx;
		color: $color-grey4;
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2; 
	}
	&--right{
		text-align: right;
	}
	&--time{
		font-size: $font-size-sm;
		color: $color-grey4;
		display: block;
		height: 36rpx;
		line-height: 36rpx;
		margin-bottom: 20rpx;
	}
	&--badge{
		display: inline-block;
	}
}
</style>