开发分支

2023-03-14 17:19:21 +08:00
parent a24fe7a84c
commit 9eb1f97e4c
12 changed files with 234 additions and 54 deletions
--- a/pages/im/msg.vue
+++ b/pages/im/msg.vue
@@ -0,0 +1,126 @@
+<template>
+	<view class="msg">
+		<!-- 消息为空 -->
+		<view class="msg-null" v-if="msgs.length <= 0">
+			<image class="icon" src="@/static/im/icon_03.png" mode="widthFix"></image>
+			<text>暂无好友消息</text>
+		</view>
+		<!-- 消息列表 -->
+		<view class="msg-list" v-else>
+			<view class="item-flex" v-for="(item,index) in msgs" :key="index" @click="onMsg(item.id)">
+				<u-avatar
+					:text="surname(item.nickname)"
+					fontSize="18"
+					size="42"
+					shape="square"
+					randomBgColor
+				></u-avatar>
+				<view class="item-content">
+					<view class="nickname nowrap">
+						<view class="nowrap">{{item.nickname}}</view>
+						<view class="time">{{item.time}}</view>
+					</view>
+					<view class="lastmsg nowrap">{{item.latmsg}}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				msgs: [
+					{
+						nickname: '张静',
+						cover	: require('@/static/imgs/famous_img.png'),
+						latmsg	: '我的业务办理的怎么样了？',
+						time	: '10:00'
+					}, {
+						nickname: 'Utest',
+						cover	: "",
+						latmsg	: '我的业务办理的怎么样了？',
+						time	: '10:00'
+					}, {
+						nickname: '唐明阳',
+						cover	: "",
+						latmsg	: '我的业务办理的怎么样了？',
+						time	: '10:00'
+					}
+				]
+			};
+		},
+		computed: {
+			surname(){
+				return (nickname) => {
+					return nickname.substring(0,1)
+				}
+			}
+		},
+		methods: {
+			onMsg(id){
+				let cartId = id || null
+				this.$Router.push({
+					name	: 'ImChat',
+					params	: { cartId } 
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.msg{ }
+	// 消息空的
+	.msg-null{
+		height: 88vh;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		.icon{
+			width: 188rpx;
+			opacity: .3;
+		}
+		text{
+			font-size: 32rpx;
+			color: #888;
+		}
+	}
+	// 消息信息
+	.item-flex{
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		padding: 20rpx 30rpx;
+		align-items: center;
+		.item-content{
+			width: calc(100% - 42px);
+			padding-left: 30rpx;
+			box-sizing: border-box;
+			.nickname{
+				position: relative;
+				padding-right: 230rpx;
+				font-weight: bold;
+				line-height: 50rpx;
+			}
+			.lastmsg{
+				line-height: 42rpx;
+				height: 42rpx;
+				color: gray;
+				font-size: 28rpx;
+			}
+			.time{
+				position: absolute;
+				right: 0;
+				top: 0;
+				width: 200rpx;
+				color: gray;
+				font-size: 28rpx;
+				font-weight: normal;
+				text-align: right;
+			}
+		}
+	}
+</style>