TmOct5/dou_fire
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

开发分支

Browse Source
This commit is contained in:
唐明明
2023-03-14 17:19:21 +08:00
parent a24fe7a84c
commit 9eb1f97e4c
12 changed files with 234 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
pages/im/chat.vue
View File

@@ -1,14 +1,20 @@
<template>
<view class="chat">
<scroll-view class="chat-soll" scroll-y>
<view class="chat-soll">
<view v-for="(item, index) in 50" :key="index">{{item}}滚动的聊天记录</view>
</scroll-view>
</view>
<view class="chat-footer">
<view class="chat-inputs">
<view class="">常用语</view>
<input type="text" placeholder="输入框" confirm-type="send">
<view class="">表情</view>
<view class="">加</view>
<view class="chat-icon">
<image src="@/static/im/icon_01.png" mode="widthFix"></image>
</view>
<input class="chat-input" type="text" placeholder="输入框" confirm-type="send">
<view class="chat-icon">
<image src="@/static/im/icon_02.png" mode="widthFix"></image>
</view>
<view class="chat-icon">
<image src="@/static/im/icon_00.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
@@ -32,7 +38,8 @@
flex-direction: column;
justify-content: space-between;
.chat-soll{
height: 50vh;
flex: 1;
overflow-y: scroll;
}
.chat-footer{
background: white;
@@ -42,6 +49,17 @@
background: #f6f7f9;
height: 80rpx;
border-radius: 40rpx;
.chat-input{
width: calc(100% - 240rpx);
height: 80rpx;
line-height: 80rpx;
}
.chat-icon{
width: 80rpx;
image{
width: 80rpx;
}
}
}
}
}

126
pages/im/msg.vue Normal file
View File

@@ -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>