From a30f2f9bd0076fedb451a5f03d792b396337b6dc Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Fri, 21 Jan 2022 17:47:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=88=E6=81=AF=E5=88=97=E8=A1=A8=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .hbuilderx/launch.json       |   2 +-
 pages/im/index.vue           | 102 +-----
 pages/im/private/index.vue   |  14 +-
 pages/im/private/setting.vue |   1 -
 pages/topic/details.vue      | 594 ++++++++++++++++++-----------------
 utils/im/index.js            |   6 +-
 6 files changed, 340 insertions(+), 379 deletions(-)

diff --git a/.hbuilderx/launch.json b/.hbuilderx/launch.json
index 59d78d5..a97fd25 100644
--- a/.hbuilderx/launch.json
+++ b/.hbuilderx/launch.json
@@ -4,7 +4,7 @@
     "configurations": [{
      	"app-plus" : 
      	{
-     		"launchtype" : "remote"
+     		"launchtype" : "local"
      	},
      	"default" : 
      	{
diff --git a/pages/im/index.vue b/pages/im/index.vue
index a8cc868..741e92a 100644
--- a/pages/im/index.vue
+++ b/pages/im/index.vue
@@ -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;
-        //         }
-        //     }
-        // }
     }
 
     /* 遮罩 */
diff --git a/pages/im/private/index.vue b/pages/im/private/index.vue
index ee6d370..eada86a 100644
--- a/pages/im/private/index.vue
+++ b/pages/im/private/index.vue
@@ -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 // 会话类型
             // 消息总数量
diff --git a/pages/im/private/setting.vue b/pages/im/private/setting.vue
index 4c7353b..9de754e 100644
--- a/pages/im/private/setting.vue
+++ b/pages/im/private/setting.vue
@@ -31,7 +31,6 @@
         getUserInfo
     } from '@/apis/interfaces/im.js'
 
-
     export default {
         data() {
             return {
diff --git a/pages/topic/details.vue b/pages/topic/details.vue
index c73c794..90137c6 100644
--- a/pages/topic/details.vue
+++ b/pages/topic/details.vue
@@ -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>
diff --git a/utils/im/index.js b/utils/im/index.js
index 028e9b7..b769da0 100644
--- a/utils/im/index.js
+++ b/utils/im/index.js
@@ -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)