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": [{ "configurations": [{
"app-plus" : "app-plus" :
{ {
"launchtype" : "remote" "launchtype" : "local"
}, },
"default" : "default" :
{ {

86
pages/im/index.vue
View File

@@ -4,9 +4,9 @@
<block v-if="conversations.length < 1"> <block v-if="conversations.length < 1">
<view class="vertical null-list"> <view class="vertical null-list">
<u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息"> <u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息">
<template> <!-- <template>
<view class="null-list-btn">开启聊天</view> <view class="null-list-btn">开启聊天</view>
</template> </template> -->
</u-empty> </u-empty>
</view> </view>
</block> </block>
@@ -67,7 +67,6 @@
return { return {
isShown: true, // 当前页面显示状态 isShown: true, // 当前页面显示状态
conversations: [], // 会话列表 conversations: [], // 会话列表
isImToken: '', // 是否已鉴权
connection: 0, connection: 0,
/* 窗口尺寸 */ /* 窗口尺寸 */
winSize: {}, winSize: {},
@@ -89,16 +88,14 @@
}, },
onShow() { onShow() {
if (this.$store.state.token !== '') { if (this.$store.state.token !== '') {
if (this.isImToken === '') {
getImToken().then(res => { getImToken().then(res => {
im.connect(res.token, res.userInfo) console.log("IMTOKEN", res);
this.isImToken = res.token im.connect(res.token, res.userInfo, () => {
this.getConversationList() this.getConversationList()
}) })
})
} }
this.getConversationList()
this.isShown = true this.isShown = true
}
}, },
onHide() { onHide() {
this.isShown = false this.isShown = false
@@ -182,8 +179,9 @@
}, },
getConversationList() { getConversationList() {
const count = 1000 const count = 1000
const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型 const timestamp = 0
RongIMLib.getConversationList(undefined, count, timestamp, (res) => { RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
console.log('获取列表', res);
if (res.code === 0 && res.conversations.length > 0) { if (res.code === 0 && res.conversations.length > 0) {
this.conversations = res.conversations this.conversations = res.conversations
} }
@@ -279,76 +277,6 @@
background: $border-color; 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-view class="chat-scrool" :scroll-y="true" :scroll-into-view="scrollIntoID"
:scroll-with-animation="false"> :scroll-with-animation="false">
<!-- 聊天窗口 --> <!-- 聊天窗口 -->
<view class="chat-item" v-for="(item,index) in messages" :key="index" :id="'chatId_'+index"> <view class="chat-item" v-for="(item,index) in messages" :key="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-item-article" :class="item.messageDirection == 1 ? 'right' : 'left'">
<view class="chat-msg"> <view class="chat-msg">
<view class="chat-msg-text">{{ item.content.content }}</view> <view class="chat-msg-text">{{ item.content.content }}</view>
@@ -15,11 +12,14 @@
<view class="chat-status" :class="{'hide': item.sentStatus == 50}" <view class="chat-status" :class="{'hide': item.sentStatus == 50}"
v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view> v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
<view class="chat-avatar"> <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> @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> </view>
<view class="chat-item-time" :id="'chatId_'+index">
<text>{{ item.sentTime|timeCustomCN }}</text>
</view>
</view> </view>
</scroll-view> </scroll-view>

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

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

44
pages/topic/details.vue
View File

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

4
utils/im/index.js
View File

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