From e147e1c09ce2cc644d36f49d6c466f9d61df6088 Mon Sep 17 00:00:00 2001
From: zhangdongxue <zhangdongxue@uz.cn>
Date: Thu, 27 Jan 2022 17:40:41 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=90=8C=E6=AD=A5=E6=95=B0=E6=8D=AE]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/friends/info.vue | 521 ++++++++++++++++++--------------------
 1 file changed, 247 insertions(+), 274 deletions(-)

diff --git a/pages/im/friends/info.vue b/pages/im/friends/info.vue
index 5e55e6c..b30252b 100644
--- a/pages/im/friends/info.vue
+++ b/pages/im/friends/info.vue
@@ -1,302 +1,275 @@
 <template>
     <view class="content">
-        <!-- 用户信息 -->
-        <view class="info-flex">
-            <u-avatar
-                :src="userInfo.portraitUrl"
-                shape="square"
-                size="50"
-                bg-color="#fff"
-            ></u-avatar>
-            <view class="info-text">
-                <view class="nickname">{{userInfo.name}}</view>
-                <view class="address" @longpress="copyAddress">地址：{{userInfo.address}}</view>
-            </view>
-        </view>
-        <!-- 用户资料 -->
-        <view class="info-btns">
-            <view class="item">
-                <label>性别</label>
-                <view class="text" v-if="userInfo.gender === 0">保密</view>
-                <view class="text" v-if="userInfo.gender === 1">男</view>
-                <view class="text" v-if="userInfo.gender === 2">女</view>
-            </view>
-        </view>
-        
-        <block v-if="userInfo.is_friend">
-            <view class="info-btns">
-                <view class="item" @click="setRemark">
-                    <label>设置备注</label>
-                     <u-icon name="arrow-right" color="#999" size="16"></u-icon>
-                </view>
-                <view class="item" @click="setRemark">
-                    <label>设置标签</label>
-                    <u-icon name="arrow-right" color="#999" size="16"></u-icon>
-                </view>
-                <view class="item">
-                    <label>聊天免打扰</label>
-                    <u-switch size="22" v-model="status" activeColor="#34CE98" @change="setStatus"></u-switch>
-                </view>
-                <view class="item">
-                    <label>聊天置顶</label>
-                    <u-switch size="22" v-model="isTop" activeColor="#34CE98" @change="setTop"></u-switch>
-                </view>
-            </view>
-            <view class="footer">
-                <view class="footer-item" @click="deleteFriend">
-                    <view class="icon">
-                        <u-icon class="icon-u" name="close-circle-fill" color="#fff" size="26"></u-icon>
-                    </view>
-                    <view class="text">删除好友</view>
-                </view>
-                <view class="footer-item" @click="toPrivate">
-                    <view class="icon">
-                        <u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon>
-                    </view>
-                    <view class="text">发送消息</view>
-                </view>
-                <view class="footer-item" @click="toPrivate">
-                    <view class="icon">
-                        <u-icon class="icon-u" name="camera-fill" color="#fff" size="26"></u-icon>
-                    </view>
-                    <view class="text">视频通话</view>
-                </view>
+        <!-- 用户信息 -->
+        <view class="info-flex">
+            <u-avatar :src="userInfo.portraitUrl" shape="square" size="50" bg-color="#fff" />
+            <view class="info-text">
+                <view class="nickname">{{ userInfo.name }}</view>
+                <view class="address" @longpress="copyAddress">地址：{{ userInfo.address }}</view>
+            </view>
+        </view>
+        <!-- 用户资料 -->
+        <view class="info-btns">
+            <view class="item">
+                <label>性别</label>
+                <view class="text" v-if="userInfo.gender === 0">保密</view>
+                <view class="text" v-if="userInfo.gender === 1">男</view>
+                <view class="text" v-if="userInfo.gender === 2">女</view>
+            </view>
+        </view>
+
+        <block v-if="userInfo.is_friend">
+            <view class="info-btns">
+                <view class="item" @click="setRemark">
+                    <label>设置备注</label>
+                    <u-icon name="arrow-right" color="#999" size="16" />
+                </view>
+                <view class="item" @click="setRemark">
+                    <label>设置标签</label>
+                    <u-icon name="arrow-right" color="#999" size="16" />
+                </view>
+                <view class="item">
+                    <label>聊天免打扰</label>
+                    <u-switch size="22" v-model="status" activeColor="#34CE98" @change="setStatus"></u-switch>
+                </view>
+                <view class="item">
+                    <label>聊天置顶</label>
+                    <u-switch size="22" v-model="isTop" activeColor="#34CE98" @change="setTop"></u-switch>
+                </view>
+            </view>
+            <view class="footer">
+                <view class="footer-item" @click="deleteFriend">
+                    <view class="icon"><u-icon class="icon-u" name="close-circle-fill" color="#fff" size="26" /></view>
+                    <view class="text">删除好友</view>
+                </view>
+                <view class="footer-item" @click="toPrivate">
+                    <view class="icon"><u-icon class="icon-u" name="chat-fill" color="#fff" size="26" /></view>
+                    <view class="text">发送消息</view>
+                </view>
+                <view class="footer-item" @click="toPrivate">
+                    <view class="icon"><u-icon class="icon-u" name="camera-fill" color="#fff" size="26" /></view>
+                    <view class="text">视频通话</view>
+                </view>
             </view>
         </block>
         <block v-else>
-            <view class="footer">
-                <view class="footer-item" @click="toBeFriend">
-                    <view class="icon">
-                        <u-icon class="icon-u" name="plus-people-fill" color="#fff" size="26"></u-icon>
-                    </view>
-                    <view class="text">申请好友</view>
-                </view>
+            <view class="footer">
+                <view class="footer-item" @click="toBeFriend">
+                    <view class="icon"><u-icon class="icon-u" name="plus-people-fill" color="#fff" size="26" /></view>
+                    <view class="text">申请好友</view>
+                </view>
             </view>
         </block>
     </view>
 </template>
 
 <script>
-    import {
-        getFriendInfo,
-        pedingFriend,
-        deleteFriend
-    } from '@/apis/interfaces/im.js'
-    import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
+import { getFriendInfo, pedingFriend, deleteFriend } from '@/apis/interfaces/im.js';
+import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index';
 
-    export default {
-        data() {
-            return {
-                targetId: '',
-                userInfo: {},
-                status: false, // 0 是免打扰，1是正常通知
-                isTop: false,
-                block: false,
-                conversationType: 1
+export default {
+    data() {
+        return {
+            targetId: '',
+            userInfo: {},
+            status: false, // 0 是免打扰，1是正常通知
+            isTop: false,
+            block: false,
+            conversationType: 1
+        };
+    },
+    onLoad(e) {
+        this.targetId = e.targetId;
+        getFriendInfo(e.targetId).then(res => {
+            this.userInfo = res;
+            uni.setNavigationBarTitle({
+                title: res.name
+            });
+        });
+        RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({ status }) => {
+            this.status = !Boolean(status);
+        });
+        RongIMLib.getConversation(this.conversationType, this.targetId, ({ code, conversation }) => {
+            if (code == 0) {
+                this.isTop = conversation.isTop;
             }
-        },
-        onLoad(e) {
-            this.targetId = e.targetId
-            getFriendInfo(e.targetId).then(res => {
-                this.userInfo = res
-                uni.setNavigationBarTitle({
-                    title: res.name
-                })
-            })
-            RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
-                status
-            }) => {
-                this.status = !Boolean(status)
-            })
-            RongIMLib.getConversation(this.conversationType, this.targetId, ({
-                code,
-                conversation
-            }) => {
-                if (code == 0) {
-                    this.isTop = conversation.isTop
+        });
+    },
+    methods: {
+        copyAddress() {
+            uni.setClipboardData({
+                data: this.userInfo.address,
+                success: () => {
+                    uni.showToast({
+                        icon: 'none',
+                        title: '复制区块链成功'
+                    });
                 }
-            })
+            });
         },
-        methods: {
-            copyAddress() {
-                uni.setClipboardData({
-                    data: this.userInfo.address,
-                    success: () => {
-                        uni.showToast({
-                            icon: 'none',
-                            title: '复制区块链成功'
-                        })
+        toPrivate() {
+            uni.redirectTo({
+                url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
+            });
+        },
+        setRemark() {
+            uni.showToast({
+                title: '开发中',
+                icon: 'none'
+            });
+        },
+        deleteFriend() {
+            uni.showModal({
+                title: '删除确认',
+                content: '确认删除后不可恢复',
+                success: e => {
+                    if (e.confirm) {
+                        deleteFriend(this.targetId).then(res => {
+                            // 删除聊天记录
+                            RongIMLib.deleteMessages(1, this.targetId);
+                            RongIMLib.removeConversation(1, this.targetId);
+                            uni.showToast({
+                                icon: 'none',
+                                title: '好友删除成功',
+                                success() {
+                                    uni.switchTab({
+                                        url: '/pages/im/index'
+                                    });
+                                }
+                            });
+                        });
                     }
-                })
-            },
-            toPrivate() {
-                uni.redirectTo({
-                    url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
-                })
-            },
-            setRemark() {
-                uni.showToast({
-                    title: '开发中',
-                    icon : 'none'
-                })
-            },
-            deleteFriend() {
-                uni.showModal({
-                    title: '删除确认',
-                    content: '确认删除后不可恢复',
-                    success: (e) => {
-                        if (e.confirm) {
-                            deleteFriend(this.targetId).then(res => {
-                                // 删除聊天记录
-                                RongIMLib.deleteMessages(1, this.targetId)
-                                RongIMLib.removeConversation(1, this.targetId)
-                                uni.showToast({
-                                    icon: 'none',
-                                    title: '好友删除成功',
-                                    success() {
-                                        uni.switchTab({
-                                            url: '/pages/im/index'
-                                        })
-                                    }
-                                })
-                            })
-                        }
-                    }
-                })
-            },
-            setStatus() {
-                RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
-                    status
-                }) => {
-                    this.status = !Boolean(status)
-                })
-            },
-            setTop() {
-                RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => {
-                    RongIMLib.getConversation(this.conversationType, this.targetId, ({
-                        conversation
-                    }) => {
-                        this.isTop = conversation.isTop
-                    })
-                })
-            },
-            setBlock() {
-
-            },
-            // 申请好友
-            toBeFriend() {
-                pedingFriend(this.targetId).then(res => {
+                }
+            });
+        },
+        setStatus() {
+            RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({ status }) => {
+                this.status = !Boolean(status);
+            });
+        },
+        setTop() {
+            RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, res => {
+                RongIMLib.getConversation(this.conversationType, this.targetId, ({ conversation }) => {
+                    this.isTop = conversation.isTop;
+                });
+            });
+        },
+        setBlock() {},
+        // 申请好友
+        toBeFriend() {
+            pedingFriend(this.targetId)
+                .then(res => {
                     uni.showToast({
                         title: '申请成功',
-                        icon: "none"
-                    })
-                }).catch(err => {
+                        icon: 'none'
+                    });
+                })
+                .catch(err => {
                     uni.showToast({
                         icon: 'error',
                         title: err.message,
                         duration: 2000
-                    })
-                })
-            }
+                    });
+                });
         }
-    };
+    }
+};
 </script>
 
 <style lang="scss" scoped>
-    .content {
-        min-height: 100vh;
-        background: $window-color;
-        padding-top: $padding;
+.content {
+    min-height: 100vh;
+    background: $window-color;
+    padding-top: $padding;
+    box-sizing: border-box;
+}
+
+// 用户信息
+.info-flex {
+    padding: $padding;
+    margin: 0 $margin;
+    display: flex;
+    background: white;
+    border-radius: $radius;
+    .info-text {
+        width: calc(100% - 50px);
+        padding-left: $padding;
         box-sizing: border-box;
-    }
-    
-    // 用户信息
-    .info-flex{
-        padding: $padding;
-        margin: 0 $margin;
-        display: flex;
-        background: white;
-        border-radius: $radius;
-        .info-text{
-            width: calc(100% - 50px);
-            padding-left: $padding;
-            box-sizing: border-box;
-            .nickname{
-                line-height: 30px;
-                font-size: $title-size + 6;
-                color: $text-color;
-                text-align: left;
-            }
-            .address{
-                line-height: 20px;
-                font-size: $title-size-sm;
-                color: $text-gray;
-                text-align: left;
-                @extend .nowrap;
-            }
-        }
-    }
-    
-    // footer
-    .footer{
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        padding: $padding*2 $padding;
-        display: flex;
-        justify-content: space-around;
-        .footer-item{
-            margin: 0 $margin/2;
-            text-align: center;
-            .icon{
-                background: $main-color;
-                width: 88rpx;
-                height: 88rpx;
-                line-height: 88rpx;
-                display: inline-block;
-                border-radius: 50%;
-                .icon-u{
-                    margin-top: calc((88rpx/2) - 13px);
-                    margin-left: calc((88rpx/2) - 13px);
-                }
-            }
-            .text{
-                color: $main-color;
-                font-size: $title-size-m;
-                text-align: center;
-                padding-top: 10rpx;
-            }
-        }
-    }
-    
-    // btns
-    
-    .info-btns{
-        background: white;
-        margin: $margin;
-        border-radius: $radius;
-        .item{
-            line-height: 100rpx;
-            border-bottom: solid 1rpx $border-color;
-            display: flex;
-            align-items: center;
-            padding: 0 $padding;
-            justify-content: space-between;
-            font-size: $title-size-lg;
-            &:last-child{
-                border-bottom: none;
-            }
-            label{
-                width: 200rpx;
-            }
-            .text{
-                width: calc(100% - 200rpx);
-                color: $text-gray-m;
-                text-align: right;
-                @extend .nowrap;
-            }
-        }
-    }
-    
+        .nickname {
+            line-height: 30px;
+            font-size: $title-size + 6;
+            color: $text-color;
+            text-align: left;
+        }
+        .address {
+            line-height: 20px;
+            font-size: $title-size-sm;
+            color: $text-gray;
+            text-align: left;
+            @extend .nowrap;
+        }
+    }
+}
+
+// footer
+.footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: $padding * 2 $padding;
+    display: flex;
+    justify-content: space-around;
+    .footer-item {
+        margin: 0 $margin/2;
+        text-align: center;
+        .icon {
+            background: $main-color;
+            width: 88rpx;
+            height: 88rpx;
+            line-height: 88rpx;
+            display: inline-block;
+            border-radius: 50%;
+            .icon-u {
+                margin-top: calc((88rpx / 2) - 13px);
+                margin-left: calc((88rpx / 2) - 13px);
+            }
+        }
+        .text {
+            color: $main-color;
+            font-size: $title-size-m;
+            text-align: center;
+            padding-top: 10rpx;
+        }
+    }
+}
+
+// btns
+
+.info-btns {
+    background: white;
+    margin: $margin;
+    border-radius: $radius;
+    .item {
+        line-height: 100rpx;
+        border-bottom: solid 1rpx $border-color;
+        display: flex;
+        align-items: center;
+        padding: 0 $padding;
+        justify-content: space-between;
+        font-size: $title-size-lg;
+        &:last-child {
+            border-bottom: none;
+        }
+        label {
+            width: 200rpx;
+        }
+        .text {
+            width: calc(100% - 200rpx);
+            color: $text-gray-m;
+            text-align: right;
+            @extend .nowrap;
+        }
+    }
+}
 </style>