调整聊天界面样式
This commit is contained in:
唐明明
@@ -4,7 +4,7 @@
|
||||
"configurations": [{
|
||||
"app-plus" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
"launchtype" : "remote"
|
||||
},
|
||||
"default" :
|
||||
{
|
||||
|
||||
6
App.vue
6
App.vue
@@ -1,13 +1,13 @@
|
||||
<script>
|
||||
import {
|
||||
getVersions
|
||||
} from './apis/interfaces/versions'
|
||||
import { getVersions } from './apis/interfaces/versions'
|
||||
import im from '@/utils/im/index.js'
|
||||
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
im.initIm('lmxuhwaglu76d')
|
||||
|
||||
return
|
||||
|
||||
//#ifdef APP-PLUS
|
||||
// 获取系统版本号
|
||||
getVersions({
|
||||
|
||||
11
pages.json
11
pages.json
@@ -376,8 +376,11 @@
|
||||
},
|
||||
{
|
||||
"path": "pages/im/private/index",
|
||||
"name": "imPrivate",
|
||||
"style": {
|
||||
"navigationBarTitleText": "单聊",
|
||||
"navigationBarTitleText": "聊天",
|
||||
"navigationBarBackgroundColor":"#FFFFFF",
|
||||
"disableScroll": true,
|
||||
"app-plus": {
|
||||
"titleNView": {
|
||||
"type": "default",
|
||||
@@ -393,36 +396,42 @@
|
||||
},
|
||||
{
|
||||
"path": "pages/im/private/setting",
|
||||
"name": "imPrivateSetting",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设置"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/im/friends/index",
|
||||
"name": "imFriends",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的好友"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/im/friends/pending",
|
||||
"name": "imFriendsPending",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新的朋友"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/im/friends/info",
|
||||
"name": "imFriendsInfo",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/im/friends/mine",
|
||||
"name": "imFriendsMine",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的资料"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/im/group/index",
|
||||
"name": "imGroup",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的群聊"
|
||||
}
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
<div>
|
||||
<view class="list">
|
||||
<view class="list__item" @click="toPending">
|
||||
<u-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" randomBgColor></u-avatar>
|
||||
<u-avatar size="35" icon="plus-people-fill" fontSize="26" randomBgColor></u-avatar>
|
||||
<text class="list__item__user-name">新的朋友</text>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="list__item" @click="toGroup">
|
||||
<u-avatar shape="square" size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar>
|
||||
<u-avatar size="35" icon="account-fill" fontSize="26" randomBgColor></u-avatar>
|
||||
<text class="list__item__user-name">我的群聊</text>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
@@ -25,6 +25,7 @@
|
||||
<view class="list" v-for="(item1, index1) in item" :key="index1">
|
||||
<view class="list__item" @click="toInfo">
|
||||
<image class="list__item__avatar" :src="item1.url"></image>
|
||||
<!-- <u-avatar size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar> -->
|
||||
<text class="list__item__user-name">{{item1.name}}</text>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
@@ -119,7 +120,7 @@
|
||||
&__avatar {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
border-radius: 3px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&__user-name {
|
||||
|
||||
@@ -1,43 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="$store.state.token != ''">
|
||||
<div class="container">
|
||||
<div class="msg-item u-border-bottom" v-for="(item, index) in conversations" @click="toDetail(item)">
|
||||
<div class="avatar">
|
||||
<u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-7, -7]"
|
||||
:value="item.unreadMessageCount" />
|
||||
<u-avatar shape="square" :src="friend(item.targetId).portraitUrl"></u-avatar>
|
||||
</div>
|
||||
<div class="content ">
|
||||
<div class="name">
|
||||
<h3>{{ friend(item.targetId).name }}</h3>
|
||||
<span class="time">{{ item.sentTime|timeCustomCN }}</span>
|
||||
</div>
|
||||
<div class="u-line-1">{{ item.latestMessage.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<u-loadmore status="nomore" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<u-button @click="toLogin">去登录</u-button>
|
||||
</div>
|
||||
</div>
|
||||
<view class="content">
|
||||
<view v-if="$store.state.token != ''">
|
||||
<block v-if="conversations.length < 1">
|
||||
<view class="vertical null-list">
|
||||
<u-empty
|
||||
icon="http://cdn.uviewui.com/uview/empty/message.png"
|
||||
textColor="#999"
|
||||
text="暂无好友消息"
|
||||
>
|
||||
<template>
|
||||
<view class="null-list-btn">开启聊天</view>
|
||||
</template>
|
||||
</u-empty>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)">
|
||||
<view class="mssage-action">
|
||||
<block v-if="!friend(item.targetId).portraitUrl">
|
||||
<u-avatar
|
||||
clsss="mssage-action-cover"
|
||||
size="44"
|
||||
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
|
||||
font-size="14"
|
||||
randomBgColor
|
||||
></u-avatar>
|
||||
</block>
|
||||
<block v-else>
|
||||
<u-avatar
|
||||
clsss="mssage-action-cover"
|
||||
:src="friend(item.targetId).portraitUrl"
|
||||
size="44"
|
||||
></u-avatar>
|
||||
</block>
|
||||
<view class="mssage-action-content">
|
||||
<view class="mssage-header">
|
||||
<view class="header-name">{{ friend(item.targetId).name || '未知用户' }}</view>
|
||||
<view class="header-time">{{ item.sentTime|timeCustomCN }}</view>
|
||||
</view>
|
||||
<view class="mssage-msg">{{ item.latestMessage.content }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 未登录 -->
|
||||
<view v-else class="vertical null-list">
|
||||
<u-empty
|
||||
icon="http://cdn.uviewui.com/uview/empty/permission.png"
|
||||
textColor="#999"
|
||||
text="登录后开启聊天吧~"
|
||||
>
|
||||
<template>
|
||||
<view class="null-list-btn" @click="toLogin">去登录</view>
|
||||
</template>
|
||||
</u-empty>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RongIMLib from '@rongcloud/imlib-uni'
|
||||
import im from '@/utils/im/index.js'
|
||||
import userAuth from '@/public/userAuth'
|
||||
import {
|
||||
getImToken
|
||||
} from '@/apis/interfaces/im.js'
|
||||
import { getImToken } from '@/apis/interfaces/im.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShown: true, // 当前页面显示状态
|
||||
conversations: [] // 会话列表
|
||||
conversations: [] ,// 会话列表
|
||||
isImToken: '', // 是否已鉴权
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -47,31 +80,33 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
onShow() {
|
||||
if (this.$store.state.token !== '') {
|
||||
if(this.isImToken === ''){
|
||||
getImToken().then(res => {
|
||||
im.syncFriends()
|
||||
im.connect(res.token, res.userInfo)
|
||||
|
||||
this.isImToken = res.token
|
||||
this.getConversationList()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
}
|
||||
this.getConversationList()
|
||||
this.isShown = true
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
this.isShown = false
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
if (e.index == 0) {}
|
||||
if (e.index == 1) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/friends/index',
|
||||
fail: (err) => {
|
||||
console.log(err);
|
||||
}
|
||||
if (e.index == 0) {
|
||||
uni.showToast({
|
||||
title: '开发中暂未开放，敬请期待',
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
if (e.index == 1) {
|
||||
this.$Router.push({name: 'imFriends'})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.getters.newMessage': function(n, o) {
|
||||
@@ -105,50 +140,80 @@
|
||||
// 进入聊天的详情页面，清理未读消息数量
|
||||
toDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/private/index?targetId=' + item.targetId +
|
||||
'&conversationType=' + item.conversationType
|
||||
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item.conversationType
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 0 $uni-spacing-col-lg $uni-spacing-col-lg $uni-spacing-col-lg;
|
||||
}
|
||||
|
||||
.msg-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $uni-spacing-col-lg 0;
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
margin-right: $uni-spacing-col-lg;
|
||||
|
||||
.u-badge {
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
flex: 1;
|
||||
|
||||
.name {
|
||||
background-color: $window-color;
|
||||
min-height: 100vh;
|
||||
.null-list{
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
&-btn{
|
||||
margin-top: $margin * 2;
|
||||
line-height: 70rpx;
|
||||
color: $main-color;
|
||||
border:solid 1rpx $main-color;
|
||||
padding: 0 ($padding*3);
|
||||
font-size: $title-size-m;
|
||||
border-radius: 35rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.mssage-box{
|
||||
background: white;
|
||||
.mssage-action{
|
||||
position: relative;
|
||||
padding: 20rpx $padding;
|
||||
&::after{
|
||||
position: absolute;
|
||||
left: $padding + 108;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: " ";
|
||||
height: 1rpx;
|
||||
background: $border-color;
|
||||
}
|
||||
&-content{
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
height: 44px;
|
||||
left: $padding + 108;
|
||||
right: $margin;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.mssage-header{
|
||||
display: flex;
|
||||
font-size: $title-size;
|
||||
line-height: 40rpx;
|
||||
justify-content: space-between;
|
||||
font-size: $uni-font-size-base;
|
||||
|
||||
.time {
|
||||
font-size: $uni-font-size-sm;
|
||||
color: $uni-text-color-grey;
|
||||
.header-name{
|
||||
flex: 1;
|
||||
@extend .nowrap;
|
||||
}
|
||||
.header-time{
|
||||
padding-left: $padding;
|
||||
font-size: $title-size-sm - 2;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.u-line-1 {
|
||||
color: $u-info;
|
||||
font-size: $uni-font-size-sm;
|
||||
.mssage-msg{
|
||||
font-size: $title-size-sm - 2;
|
||||
color: $text-gray;
|
||||
@extend .nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-item:last-child{
|
||||
.mssage-action::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,41 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<scroll-view ref="scrollview" :scroll-y="true" class="scroll" :scroll-into-view="scrollIntoID"
|
||||
:scroll-with-animation="false">
|
||||
<view v-for="(item,index) in messages" :id="'chatId_'+index">
|
||||
<div :class="item.messageDirection == 1 ? 'right' : 'left'">
|
||||
<div class="avatar" v-if="item.messageDirection == 2">
|
||||
<u-avatar :src="userInfo.portraitUrl" @click="showFriend" shape="square" />
|
||||
</div>
|
||||
<div class="msg">
|
||||
{{ item.content.content }}
|
||||
<div class="status" v-if="item.messageDirection == 1">
|
||||
<u-icon v-if="item.sentStatus == 50" name="checkbox-mark" />
|
||||
<span v-else>未读</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar" v-if="item.messageDirection == 1">
|
||||
<u-avatar text="Me" @click="showMine" shape="square" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="time">{{ item.sentTime|timeCustomCN }}</div>
|
||||
<view class="chat-content">
|
||||
<scroll-view class="chat-scrool" :scroll-y="true" :scroll-into-view="scrollIntoID" :scroll-with-animation="false">
|
||||
<!-- 聊天窗口 -->
|
||||
<view class="chat-item" v-for="(item,index) in messages" :key="index" :id="'chatId_'+index">
|
||||
<view class="chat-item-time">
|
||||
<text>{{ item.sentTime|timeCustomCN }}</text>
|
||||
</view>
|
||||
<view class="chat-item-article" :class="item.messageDirection == 1 ? 'right' : 'left'">
|
||||
<view class="chat-msg">
|
||||
<view class="chat-msg-text">{{ item.content.content }}</view>
|
||||
<!-- 预留一些图片，语音表情包等位置 -->
|
||||
</view>
|
||||
<view class="chat-status" :class="{'hide': item.sentStatus == 50}" v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
|
||||
<view class="chat-avatar">
|
||||
<!-- <u-avatar :src="userInfo.portraitUrl" @click="showFriend"></u-avatar> -->
|
||||
<u-avatar
|
||||
text="无"
|
||||
fontSize="14"
|
||||
bg-color="rgba(0,0,0,.2)"
|
||||
></u-avatar>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<div class="footer">
|
||||
<div class="left">
|
||||
<u-icon name="volume" />
|
||||
</div>
|
||||
<div class="middle">
|
||||
<u--input autoBlur confirmHold confirmType="send" @confirm="send" v-model="inputTxt" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-button type="primary" v-if="showSendButton" class="custom-style" text="发送" @click="send"></u-button>
|
||||
<u-icon v-else name="plus" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<view class="chat-footer">
|
||||
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send" cursor-spacing="10"/>
|
||||
<button class="chat-push" size="mini" @click="send">发送</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -188,98 +180,117 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$footer-height: 55px;
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - 55px);
|
||||
width: 100vw;
|
||||
padding: 0 $uni-spacing-col-lg;
|
||||
.chat-content{
|
||||
height: 100vh;
|
||||
background: $window-color;
|
||||
.chat-scrool{
|
||||
height: calc(100vh - 140rpx);
|
||||
box-sizing: border-box;
|
||||
padding-bottom: $padding;
|
||||
.chat-item{
|
||||
.chat-item-time{
|
||||
text-align: center;
|
||||
padding: $padding/2 $padding;
|
||||
text{
|
||||
background: rgba($color: #000000, $alpha: .2);
|
||||
color: white;
|
||||
font-size: $title-size-sm - 4;
|
||||
line-height: 40rpx;
|
||||
padding: 0 15rpx;
|
||||
display: inline-block;
|
||||
border-radius: $radius-lg;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.chat-item-article{
|
||||
position: relative;
|
||||
padding: 10rpx ($padding + 110) 0;
|
||||
overflow: hidden;
|
||||
min-height: 40px;
|
||||
.chat-msg{
|
||||
overflow: hidden;
|
||||
.chat-msg-text{
|
||||
display: inline-block;
|
||||
padding: ($padding - 10) $padding;
|
||||
color: $text-color;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
}
|
||||
.chat-status{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-sm;
|
||||
text-align: right;
|
||||
&.hide{
|
||||
color: $text-gray-m;
|
||||
}
|
||||
}
|
||||
.chat-avatar{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
&.left{
|
||||
.chat-avatar{
|
||||
left: $margin;
|
||||
}
|
||||
.chat-msg{
|
||||
.chat-msg-text{
|
||||
background-color: white;
|
||||
border-radius: 0 $radius*2 $radius*2 $radius*2;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.right{
|
||||
.chat-avatar{
|
||||
right: $margin;
|
||||
}
|
||||
.chat-msg{
|
||||
text-align: right;
|
||||
.chat-msg-text{
|
||||
border-radius: $radius*2 0 $radius*2 $radius*2;
|
||||
background: $main-color;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-footer{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
height: $footer-height;
|
||||
background-color: $uni-bg-color-grey;
|
||||
|
||||
.u-icon {
|
||||
padding: $uni-spacing-col-sm;
|
||||
border: 1px solid $u-content-color;
|
||||
border-radius: $uni-border-radius-circle;
|
||||
right: 0;
|
||||
height: 140rpx;
|
||||
padding: 20rpx ($padding + 150rpx) 40rpx $padding;
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
z-index: 99;
|
||||
.chat-input{
|
||||
background: $window-color;
|
||||
height: 80rpx;
|
||||
border-radius: $radius-lg;
|
||||
font-size: $title-size-m;
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.left {
|
||||
padding: 0 $uni-spacing-col-lg;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.middle {
|
||||
flex: 1;
|
||||
|
||||
.u-input {
|
||||
background-color: $uni-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 0 $uni-spacing-col-lg;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-style {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.time {
|
||||
text-align: center;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: $u-light-color;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: top;
|
||||
|
||||
.avatar {
|
||||
margin-top: $uni-spacing-col-base;
|
||||
}
|
||||
|
||||
.msg {
|
||||
font-size: $uni-font-size-base;
|
||||
margin: $uni-spacing-col-base;
|
||||
padding: $uni-spacing-col-base;
|
||||
word-wrap: break-word;
|
||||
width: 60%;
|
||||
border-radius: $uni-border-radius-base;
|
||||
position: relative;
|
||||
|
||||
.status {
|
||||
.chat-push[size='mini']{
|
||||
position: absolute;
|
||||
right: 8rpx;
|
||||
bottom: 5rpx;
|
||||
font-size: $uni-font-size-base / 1.5;
|
||||
color: $uni-text-color-grey;
|
||||
right: $margin;
|
||||
top: 20rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 120rpx;
|
||||
background: $main-color;
|
||||
color: white;
|
||||
border-radius: $radius-lg;
|
||||
font-size: $title-size-m;
|
||||
font-weight: bold;
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
.msg {
|
||||
background-color: $uni-bg-color-grey;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
|
||||
.msg {
|
||||
background-color: $u-primary-disabled;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -65,4 +65,5 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user