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

<!--
 * @Author: ch
 * @Date: 2022-03-22 16:13:00
 * @LastEditors: ch
 * @LastEditTime: 2022-04-25 19:34:58
 * @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="$Router.push(`/messageList?id=${item.id}`)">
			<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">{{item.lastMessage.payload.content}}</text>
				</view>
				<view class="msgItem--right">
					<text class="msgItem--time">{{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';
export default {
	components: { BsEmpty },
	data (){
		return {
			sessionData : this.$store.state.sessionData
		}
	}
}
</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>