hrjy 3 سال پیش
والد
کامیت
bebfc9bca3
1فایلهای تغییر یافته به همراه71 افزوده شده و 1 حذف شده
  1. 71 1
      pages/message/message.vue

+ 71 - 1
pages/message/message.vue

@@ -1,6 +1,21 @@
 <template>
 	<view class="center">
-		
+		<view class="message">
+			<view class="item" v-for="l in list">
+				<view class="img">
+					<image :src="l.image" mode=""></image>
+				</view>
+				<view class="right">
+					<view class="top">
+						<view class="title">{{ l.name }}</view><view class="time">{{ l.time }}</view>
+					</view>
+					<view class="bottom">
+						<view class="concent clamp2">{{ l.last_message.detail }}</view><view class="icon" v-show="l.unwatch_message>0"></view>
+					</view>
+				</view>
+			</view>
+			
+		</view>
 	</view>
 </template>
 
@@ -19,6 +34,7 @@ export default {
 	methods: {
 		loadData() {
 			messageList({page:1,limit:10}).then(({data}) =>{
+				this.list = data
 				console.log(data)
 			})
 		}
@@ -32,5 +48,59 @@ export default {
 	width: 100%;
 	background: #F8F8F8;
 }
+	.message {
+		margin-top: 20rpx;
+		font-family: PingFangSC-Medium;
+		background-color: #fff;
+		.item {
+			display: flex;
+			padding: 30rpx 0;
+			margin: 0 30rpx;
+			border-bottom: solid 1rpx #f8f8f8;
+			.img {
+				margin: auto 0;
+				width: 110rpx;
+				margin-left: 0rpx;
+				image {
+					width: 80rpx;
+					height: 80rpx;
+				}
+			}
+			.right {
+				width: calc(100% - 110rpx);
+				display: grid;
+				align-content: space-between;
+				.top {
+					display: flex;
+					justify-content: space-between;
+					.title {
+						color: #000;
+						font-size: 30rpx;
+					}
+					.time {
+						color: #999999;
+						font-size: 25rpx;
+					}
+				}
+				.bottom {
+					display: flex;
+					justify-content: space-between;
+					.concent {
+						width: calc(100% - 30rpx);
+						color: #999999;
+						font-size: 26rpx;
+					}
+					.icon {
+						margin: auto 0;
+						width: 10rpx;
+						height: 10rpx;
+						background-color: #FB555C;
+						border-radius: 50%;
+					}
+				}
+				
+			}
+		}
+	}
 
 </style>