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

消息列表展示优化

Browse Source
This commit is contained in:
Jason.Chen
2022-01-21 17:47:37 +08:00
parent 80cd737e39
commit a30f2f9bd0
6 changed files with 340 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.hbuilderx/launch.json
View File

@@ -4,7 +4,7 @@
"configurations": [{
"app-plus" :
{
"launchtype" : "remote"
"launchtype" : "local"
},
"default" :
{

86
pages/im/index.vue
View File

@@ -4,9 +4,9 @@
<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>
<!-- <template>
<view class="null-list-btn">开启聊天</view>
</template>
</template> -->
</u-empty>
</view>
</block>
@@ -67,7 +67,6 @@
return {
isShown: true, // 当前页面显示状态
conversations: [], // 会话列表
isImToken: '', // 是否已鉴权
connection: 0,
/* 窗口尺寸 */
winSize: {},
@@ -89,16 +88,14 @@
},
onShow() {
if (this.$store.state.token !== '') {
if (this.isImToken === '') {
getImToken().then(res => {
im.connect(res.token, res.userInfo)
this.isImToken = res.token
console.log("IMTOKEN", res);
im.connect(res.token, res.userInfo, () => {
this.getConversationList()
})
})
}
this.getConversationList()
this.isShown = true
}
},
onHide() {
this.isShown = false
@@ -182,8 +179,9 @@
},
getConversationList() {
const count = 1000
const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
const timestamp = 0
RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
console.log('获取列表', res);
if (res.code === 0 && res.conversations.length > 0) {
this.conversations = res.conversations
}
@@ -279,76 +277,6 @@
background: $border-color;
}
}
// .message-box:not(:last-child) {
// .message-action {
// &::after {
// position: absolute;
// left: $padding + 108;
// right: 0;
// bottom: 0;
// content: " ";
// height: 1rpx;
// background: $border-color;
// }
// }
// }
// .message-box {
// background: white;
// .message-action {
// position: relative;
// padding: 20rpx $padding;
// .message-avatar {
// position: relative;
// background: red;
// }
// &-content {
// position: absolute;
// top: 20rpx;
// height: 44px;
// left: $padding + 108;
// right: $margin;
// display: flex;
// flex-direction: column;
// justify-content: center;
// .message-header {
// display: flex;
// font-size: $title-size;
// line-height: 40rpx;
// justify-content: space-between;
// .header-name {
// flex: 1;
// @extend .nowrap;
// }
// .header-time {
// padding-left: $padding;
// font-size: $title-size-sm - 2;
// color: $text-gray;
// }
// }
// .message-msg {
// font-size: $title-size-sm - 2;
// color: $text-gray;
// @extend .nowrap;
// }
// }
// }
// &-item:last-child {
// .message-action::after {
// display: none;
// }
// }
// }
}
/* 遮罩 */

12
pages/im/private/index.vue
View File

@@ -3,10 +3,7 @@
<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" v-for="(item,index) in messages" :key="index">
<view class="chat-item-article" :class="item.messageDirection == 1 ? 'right' : 'left'">
<view class="chat-msg">
<view class="chat-msg-text">{{ item.content.content }}</view>
@@ -15,11 +12,14 @@
<view class="chat-status" :class="{'hide': item.sentStatus == 50}"
v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
<view class="chat-avatar">
<u-avatar v-if="item.messageDirection == 2" :src="friend(targetId).portraitUrl"
<u-avatar v-if="item.messageDirection == 2" bg-color="#ffffff" :src="userInfo.portraitUrl"
@click="showFriend(targetId)"></u-avatar>
<u-avatar v-else @click="showMine" :src="$store.getters.sender.portraitUrl" />
<u-avatar v-else @click="showMine" bg-color="#ffffff" :src="$store.getters.sender.portraitUrl" />
</view>
</view>
<view class="chat-item-time" :id="'chatId_'+index">
<text>{{ item.sentTime|timeCustomCN }}</text>
</view>
</view>
</scroll-view>

1
pages/im/private/setting.vue
View File

@@ -31,7 +31,6 @@
getUserInfo
} from '@/apis/interfaces/im.js'
export default {
data() {
return {

44
pages/topic/details.vue
View File

@@ -19,7 +19,8 @@
<text>{{ topicData.favorites }} 人点赞</text>
</view>
<view class="tool-btn" :class="{active : isFavorite}" @click="thumbClick(topicData.topic_id)">
<u-icon name="thumb-up-fill" :color="isFavorite ? '#333': '#fff'" size="17" style="margin-right: 5rpx;"></u-icon>
<u-icon name="thumb-up-fill" :color="isFavorite ? '#333': '#fff'" size="17"
style="margin-right: 5rpx;"></u-icon>
{{ isFavorite ? '已赞' : '点赞' }}
</view>
</view>
@@ -44,7 +45,9 @@
相关商品
</view>
<view class="item" v-for="(item, index) in goodsArr" :key="index">
<image class="item-cover" src="http://api.zh.shangkelian.cn/storage/images/2022/01/06/fc143605e2a1557989e96652d990579f.png" mode="aspectFill"></image>
<image class="item-cover"
src="http://api.zh.shangkelian.cn/storage/images/2022/01/06/fc143605e2a1557989e96652d990579f.png"
mode="aspectFill"></image>
<view class="item-title">
<view class="nowrap item-name">
{{ item.name }}
@@ -53,7 +56,8 @@
￥{{ item.price }}
</view>
</view>
<view class="item-btn" @click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
<view class="item-btn"
@click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
查看商品
</view>
</view>
@@ -64,7 +68,10 @@
</template>
<script>
import { topicDet, topicThumb } from '@/apis/interfaces/topic'
import {
topicDet,
topicThumb
} from '@/apis/interfaces/topic'
import userAuth from '@/public/userAuth'
export default {
data() {
@@ -88,10 +95,10 @@
this.topicData = res
this.goodsArr = res.goods
this.isFavorite = res.is_favorite
this.topicContent = res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
this.topicContent = res.content.replace(/\<img/gi,
'<img style="max-width:100%;height:auto;display:block;"')
})
},
// 点赞
thumbClick(id) {
if (this.$store.state.token === '') {
@@ -101,6 +108,8 @@
}
topicThumb(id).then(res => {
this.isFavorite = !this.isFavorite
this.topicData.favorites = res
})
}
}
@@ -116,6 +125,7 @@
position: relative;
width: 100vw;
padding-top: 90%;
&::after {
position: absolute;
content: '';
@@ -126,6 +136,7 @@
z-index: 2;
background-color: rgba($color: #000000, $alpha: .35);
}
.img {
position: absolute;
left: 0;
@@ -136,6 +147,7 @@
filter: blur(10rpx);
overflow: hidden;
}
.head {
padding: $padding * 3 $padding + 30 0;
color: white;
@@ -145,32 +157,39 @@
top: 0;
width: 100%;
z-index: 9;
.title {
font-size: $title-size + 8;
margin-bottom: $margin - 10;
height: 100rpx;
font-weight: 600;
}
.tips {
margin-bottom: $margin + 20;
}
.text {
margin: $margin 0 $margin + 10;
line-height: 48rpx;
height: 100rpx;
font-size: $title-size-lg;
}
.tool {
width: 100%;
font-size: $title-size-m;
display: flex;
line-height: 48rpx;
.tool-see {
flex: 1;
text {
padding-right: $padding;
}
}
.tool-btn {
border: 2rpx solid white;
border-radius: $radius * 2;
@@ -178,6 +197,7 @@
padding: 0 $padding - 5;
line-height: 48rpx;
display: flex;
&.active {
background-color: white;
color: $text-color;
@@ -196,6 +216,7 @@
border-radius: $radius * 3 $radius * 3 0 0;
padding: $padding;
box-sizing: border-box;
.brief-text {
margin: $margin 0;
line-height: 48rpx;
@@ -204,14 +225,17 @@
padding: 0 $padding - 20;
box-sizing: border-box;
}
.source {
position: relative;
.source-logo {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
margin-top: $margin - 24;
}
.source-title {
position: absolute;
left: 0;
@@ -220,10 +244,12 @@
padding-left: 90rpx;
box-sizing: border-box;
font-size: $title-size-lg;
.source-name {
font-weight: 600;
margin-bottom: $margin - 25;
}
.source-text {
line-height: 48rpx;
font-size: $title-size-m;
@@ -235,10 +261,12 @@
.goods {
margin-top: $margin;
.title {
font-weight: bold;
font-size: $title-size;
}
.item {
position: relative;
margin-top: $margin - 10;
@@ -246,11 +274,13 @@
border-radius: $radius;
padding: $padding;
box-sizing: border-box;
.item-cover {
width: 120rpx;
height: 90rpx;
border-radius: $radius-m;
}
.item-title {
position: absolute;
left: 0;
@@ -261,11 +291,13 @@
font-size: $title-size-lg;
margin-bottom: 10px;
color: $text-color;
.item-price {
color: $text-price;
margin-top: $margin - 20;
}
}
.item-btn {
position: absolute;
right: $padding;

4
utils/im/index.js
View File

@@ -36,9 +36,11 @@ const setNotifyBadge = (count) => {
* @param {string} token token
* @param {object} userInfo {userId: string, name: string, portraitUrl: string}
*/
const connect = (token, userInfo) => {
const connect = (token, userInfo, callback) => {
RongIMLib.connect(token, res => {
console.log('连接结果', res);
callback(res)
})
store.dispatch('setSenderInfo', userInfo)