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" :
{

102
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
this.getConversationList()
getImToken().then(res => {
console.log("IMTOKEN", res);
im.connect(res.token, res.userInfo, () => {
this.getConversationList()
})
}
this.getConversationList()
this.isShown = true
}
})
}
this.isShown = true
},
onHide() {
this.isShown = false
@@ -182,15 +179,16 @@
},
getConversationList() {
const count = 1000
const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
const timestamp = 0
RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
console.log('获取列表', res);
if (res.code === 0 && res.conversations.length > 0) {
this.conversations = res.conversations
this.conversations = res.conversations
}
})
})
},
// 进入聊天的详情页面，清理未读消息数量
toDetail(item) {
toDetail(item) {
this.hidePop()
uni.navigateTo({
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
@@ -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;
// }
// }
// }
}
/* 遮罩 */

14
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>
@@ -51,7 +51,7 @@
}
}
},
onLoad(e) {
onLoad(e) {
this.targetId = e.targetId
this.conversationType = e.conversationType // 会话类型
// 消息总数量

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

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

594
pages/topic/details.vue
View File

@@ -1,282 +1,314 @@
<template>
<view class="content">
<view class="backCont">
<image class="img" :src="topicData.cover" mode="aspectFill"></image>
<view class="head">
<view class="ios-top"></view>
<view class="ellipsis title">
{{ topicData.name }}
</view>
<view class="tips" v-if="topicData.category">
# 话题 -- {{ topicData.category.name }} #
</view>
<view class="ellipsis text">
{{ topicData.description }}
</view>
<view class="tool">
<view class="tool-see">
<text>{{ topicData.clicks }} 人游览</text>
<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>
{{ isFavorite ? '已赞' : '点赞' }}
</view>
</view>
</view>
<view class="brief">
<view class="source">
<image class="source-logo" src="/static/find/logo.png" mode="aspectFill"></image>
<view class="source-title">
<view class="source-name">
{{ topicData.author }}
</view>
<view class="source-text">
ZH大健康官方账号
</view>
</view>
</view>
<view class="brief-text">
<rich-text :nodes="topicContent"></rich-text>
</view>
<view class="goods" v-if="goodsArr.length > 0">
<view class="title">
相关商品
</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>
<view class="item-title">
<view class="nowrap item-name">
{{ item.name }}
</view>
<view class="item-price">
￥{{ item.price }}
</view>
</view>
<view class="item-btn" @click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
查看商品
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { topicDet, topicThumb } from '@/apis/interfaces/topic'
import userAuth from '@/public/userAuth'
export default {
data() {
return {
topicData : '',
goodsArr : [],
topicContent: '',
isFavorite : ''
}
},
mounted() {
this.getRank()
},
methods: {
// 详情
getRank(){
topicDet(this.$Route.query.id).then(res => {
uni.setNavigationBarTitle({
title: res.name
})
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;"')
})
},
// 点赞
thumbClick(id) {
if(this.$store.state.token === ''){
const Auth = new userAuth()
Auth.Login()
return
}
topicThumb(id).then(res => {
this.isFavorite = !this.isFavorite
})
}
}
};
</script>
<style lang="scss" scoped>
page {
background: $window-color;
}
.backCont {
position: relative;
width: 100vw;
padding-top: 90%;
&::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
background-color: rgba($color: #000000, $alpha: .35);
}
.img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
filter: blur(10rpx);
overflow: hidden;
}
.head {
padding: $padding * 3 $padding + 30 0;
color: white;
box-sizing: border-box;
position: absolute;
left: 0;
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;
font-size: $title-size-sm;
padding: 0 $padding - 5;
line-height: 48rpx;
display: flex;
&.active {
background-color: white;
color: $text-color;
}
}
}
}
}
.brief {
position: absolute;
top: 90%;
width: 100%;
z-index: 10;
background-color: white;
border-radius: $radius * 3 $radius * 3 0 0;
padding: $padding;
box-sizing: border-box;
.brief-text {
margin: $margin 0;
line-height: 48rpx;
font-size: $title-size-lg;
color: $text-color;
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;
top: 0;
width: 100%;
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;
color: $text-gray-m;
}
}
}
}
.goods {
margin-top: $margin;
.title {
font-weight: bold;
font-size: $title-size;
}
.item {
position: relative;
margin-top: $margin - 10;
background: #f5fdfa;
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;
top: 0;
width: calc(100% - 180rpx);
box-sizing: border-box;
padding: $padding $padding 0 180rpx;
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;
top: $padding + 20;
background-color: $main-color;
color: white;
line-height: 62rpx;
font-size: $title-size-m;
padding: 0 $padding - 10;
border-radius: $radius-m;
}
}
}
<template>
<view class="content">
<view class="backCont">
<image class="img" :src="topicData.cover" mode="aspectFill"></image>
<view class="head">
<view class="ios-top"></view>
<view class="ellipsis title">
{{ topicData.name }}
</view>
<view class="tips" v-if="topicData.category">
# 话题 -- {{ topicData.category.name }} #
</view>
<view class="ellipsis text">
{{ topicData.description }}
</view>
<view class="tool">
<view class="tool-see">
<text>{{ topicData.clicks }} 人游览</text>
<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>
{{ isFavorite ? '已赞' : '点赞' }}
</view>
</view>
</view>
<view class="brief">
<view class="source">
<image class="source-logo" src="/static/find/logo.png" mode="aspectFill"></image>
<view class="source-title">
<view class="source-name">
{{ topicData.author }}
</view>
<view class="source-text">
ZH大健康官方账号
</view>
</view>
</view>
<view class="brief-text">
<rich-text :nodes="topicContent"></rich-text>
</view>
<view class="goods" v-if="goodsArr.length > 0">
<view class="title">
相关商品
</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>
<view class="item-title">
<view class="nowrap item-name">
{{ item.name }}
</view>
<view class="item-price">
￥{{ item.price }}
</view>
</view>
<view class="item-btn"
@click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
查看商品
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
topicDet,
topicThumb
} from '@/apis/interfaces/topic'
import userAuth from '@/public/userAuth'
export default {
data() {
return {
topicData: '',
goodsArr: [],
topicContent: '',
isFavorite: ''
}
},
mounted() {
this.getRank()
},
methods: {
// 详情
getRank() {
topicDet(this.$Route.query.id).then(res => {
uni.setNavigationBarTitle({
title: res.name
})
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;"')
})
},
// 点赞
thumbClick(id) {
if (this.$store.state.token === '') {
const Auth = new userAuth()
Auth.Login()
return
}
topicThumb(id).then(res => {
this.isFavorite = !this.isFavorite
this.topicData.favorites = res
})
}
}
};
</script>
<style lang="scss" scoped>
page {
background: $window-color;
}
.backCont {
position: relative;
width: 100vw;
padding-top: 90%;
&::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
background-color: rgba($color: #000000, $alpha: .35);
}
.img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
filter: blur(10rpx);
overflow: hidden;
}
.head {
padding: $padding * 3 $padding + 30 0;
color: white;
box-sizing: border-box;
position: absolute;
left: 0;
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;
font-size: $title-size-sm;
padding: 0 $padding - 5;
line-height: 48rpx;
display: flex;
&.active {
background-color: white;
color: $text-color;
}
}
}
}
}
.brief {
position: absolute;
top: 90%;
width: 100%;
z-index: 10;
background-color: white;
border-radius: $radius * 3 $radius * 3 0 0;
padding: $padding;
box-sizing: border-box;
.brief-text {
margin: $margin 0;
line-height: 48rpx;
font-size: $title-size-lg;
color: $text-color;
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;
top: 0;
width: 100%;
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;
color: $text-gray-m;
}
}
}
}
.goods {
margin-top: $margin;
.title {
font-weight: bold;
font-size: $title-size;
}
.item {
position: relative;
margin-top: $margin - 10;
background: #f5fdfa;
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;
top: 0;
width: calc(100% - 180rpx);
box-sizing: border-box;
padding: $padding $padding 0 180rpx;
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;
top: $padding + 20;
background-color: $main-color;
color: white;
line-height: 62rpx;
font-size: $title-size-m;
padding: 0 $padding - 10;
border-radius: $radius-m;
}
}
}
</style>

6
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);
console.log('连接结果', res);
callback(res)
})
store.dispatch('setSenderInfo', userInfo)