From 4d5d595329f6ba0c46dd1cab94ac56c57f205c5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=94=90=E6=98=8E=E6=98=8E?= <970899069@qq.com>
Date: Wed, 26 Jan 2022 15:52:55 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E6=96=99=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/friends/index.vue |   1 -
 pages/im/friends/info.vue  | 288 +++++++++++++++++++++----------------
 pages/im/friends/mine.vue  | 112 +++++++++------
 3 files changed, 237 insertions(+), 164 deletions(-)

diff --git a/pages/im/friends/index.vue b/pages/im/friends/index.vue
index c27d632..1811ed5 100644
--- a/pages/im/friends/index.vue
+++ b/pages/im/friends/index.vue
@@ -60,7 +60,6 @@
             getFriends().then(res => {
                 this.indexs = res.indexList;
                 this.friends = res.itemArr;
-                console.log(res.itemArr);
             });
         },
         computed: {},
diff --git a/pages/im/friends/info.vue b/pages/im/friends/info.vue
index 87cdd31..5e55e6c 100644
--- a/pages/im/friends/info.vue
+++ b/pages/im/friends/info.vue
@@ -1,55 +1,76 @@
 <template>
     <view class="content">
-        <!-- 用户信息 -->
-        <view class="user-info u-border-bottom">
-            <u-avatar :src="userInfo.portraitUrl" size="100" />
-
-            <view class="nickname">{{ userInfo.username }}</view>
-            <view class="gender">
-                <u-tag text="保密" v-if="userInfo.gender === 0" color="#fff" borderColor="#999" size="mini"
-                    bgColor="#999"></u-tag>
-                <u-tag text="男" v-if="userInfo.gender === 1" color="#fff" borderColor="#5db6ee" size="mini" icon="man"
-                    bgColor="#5db6ee"></u-tag>
-                <u-tag text="女" v-if="userInfo.gender === 2" color="#fff" borderColor="#e4867a" size="mini" icon="woman"
-                    bgColor="#e4867a"></u-tag>
-            </view>
-            <view class="address" @longpress="copyAddress">{{ userInfo.address }}</view>
-        </view>
-
-        <block v-if="userInfo.is_friend">
-            <view class="actions">
-                <u-cell-group>
-                    <u-cell isLink title="设置备注" @click="setRemark"></u-cell>
-                    <u-cell isLink title="设置标签" @click="setRemark"></u-cell>
-                    <u-cell title="聊天免打扰">
-                        <u-switch slot="value" size="18" v-model="status" activeColor="#34CE98" @change="setStatus">
-                        </u-switch>
-                    </u-cell>
-                    <u-cell title="聊天置顶">
-                        <u-switch slot="value" size="18" v-model="isTop" activeColor="#34CE98" @change="setTop">
-                        </u-switch>
-                    </u-cell>
-                    <!--        <u-cell title="加入黑名单">
-                    <u-switch slot="value" size="18" v-model="block" activeColor="#34CE98" @change="setBlock"></u-switch>
-                </u-cell> -->
-                    <u-cell isLink titleStyle="color: red" title="删除好友" @click="deleteFriend"></u-cell>
-                </u-cell-group>
-            </view>
-
-            <view class="footer">
-                <u-button @click="toPrivate">
-                    <u-icon name="chat" size="20" /> 发送消息
-                </u-button>
-                <u-button @click="toPrivate">
-                    <u-icon name="mic" size="20" /> 音视频通话
-                </u-button>
+        <!-- 用户信息 -->
+        <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>
         </block>
         <block v-else>
-            <view class="footer">
-                <u-button @click="toBeFriend" color="#34CE98">
-                    <uni-icons color="#FFFFFF" type="staff" size="20"></uni-icons> 申请成为好友
-                </u-button>
+            <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>
         </block>
     </view>
@@ -76,7 +97,7 @@
         },
         onLoad(e) {
             this.targetId = e.targetId
-            getFriendInfo(e.targetId).then(res => {
+            getFriendInfo(e.targetId).then(res => {
                 this.userInfo = res
                 uni.setNavigationBarTitle({
                     title: res.name
@@ -114,9 +135,9 @@
                 })
             },
             setRemark() {
-                uni.showToast({
-                    icon: 'none',
-                    title: '开发中'
+                uni.showToast({
+                    title: '开发中',
+                    icon : 'none'
                 })
             },
             deleteFriend() {
@@ -184,75 +205,98 @@
 <style lang="scss" scoped>
     .content {
         min-height: 100vh;
-        background: $window-color;
-    }
-
-    .actions {
-        background: white;
-        margin-top: $padding / 2;
-    }
-
-    // 用户信息
-    .user-info {
-        padding: $padding 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        background: white;
-
-        .nickname {
-            font-size: 42rpx;
-            padding-top: $padding;
-        }
-
-        .address {
-            line-height: 64rpx;
-            font-size: 26rpx;
-            color: $text-gray;
-        }
-
-        .gender {
-            padding-top: $padding/2;
-
-            text {
-                font-size: $title-size-sm;
-                background: #303133;
-                padding: 0 10rpx;
-                color: white;
-                border-radius: $radius-m;
-                line-height: 30rpx;
-                display: inline-block;
-            }
-        }
-    }
-
-    .user-lists {
-        margin-top: $margin;
-        background: white;
-
-        .user-lists-item {
-            padding: 0 $padding;
-            display: flex;
-            justify-content: space-between;
-            line-height: 90rpx;
-            font-size: $title-size-lg;
-
-            label {
-                color: $text-color;
-            }
-
-            text {
-                color: $text-gray;
-            }
-        }
-    }
-
-    .footer {
-        padding: $padding / 2;
-
-        .u-button {
-            margin-top: $padding / 2;
-        }
-    }
+        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;
+            .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>
diff --git a/pages/im/friends/mine.vue b/pages/im/friends/mine.vue
index 1171ced..a7070d1 100644
--- a/pages/im/friends/mine.vue
+++ b/pages/im/friends/mine.vue
@@ -13,30 +13,25 @@
                 <view class="address">地址：{{infoObj.address}}</view>
             </view>
         </view>
-        <!-- 按钮组 -->
+        <!-- 用户身份 -->
         <view class="info-btns">
             <view class="item">
                 <label>性别</label>
-                <view class="text">{{infoObj.gender === 0 ? '男': '女'}}</view>
+                <view class="text" v-if="infoObj.gender === 0">保密</view>
+                <view class="text" v-if="infoObj.gender === 1">男</view>
+                <view class="text" v-if="infoObj.gender === 2">女</view>
             </view>
             <view class="item">
-                <label>地址二维码</label>
-                <u-icon name="arrow-right" color="#999" size="14"></u-icon>
+                <label>HASH</label>
+                <view class="text">{{infoObj.hash}}</view>
             </view>
         </view>
-        <!-- footer -->
-        <view class="footer">
-            <view class="footer-item">
-                <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">
-                <view class="icon">
-                    <u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon>
-                </view>
-                <view class="text">发消息</view>
+        <!-- 二维码 -->
+        <view class="info-code">
+            <uqrcode class="info-code-src" :size="198" ref="uQRCode" text="qrContent" />
+            <view class="info-code-text">
+                <view>ZH-HEALTH扫一扫上面的二维码</view>
+                <view>添加我的好友</view>
             </view>
         </view>
     </view>
@@ -55,15 +50,18 @@
                     portraitUrl : '',
                     gender      : 0,
                     hash        : ''
-                }
+                },
+                qrContent: 'ADDFRIEND|'
 			}
 		},
         onLoad(e){
             console.log(e)
+            
         },
 		mounted() {
 			getUserInfo(this.$Route.query.targetId).then(res => {
                 this.infoObj = res
+                this.qrContent += res.userId
                 console.log(this.infoObj)
 			})
 		},
@@ -77,6 +75,52 @@
     .content{
         background: $window-color;
         min-height: 100vh;
+        padding-top: $padding;
+        box-sizing: border-box;
+        .info-code{
+            background: white;
+            margin: 0 $margin;
+            border-radius: $radius;
+            padding: $padding*3 $padding $padding;
+            text-align: center;
+            &-src{
+                display: inline-block;
+            }
+            &-text{
+                text-align: center;
+                color: $text-gray;
+                font-size: $title-size-sm;
+                line-height: 40rpx;
+                padding: $padding 0;
+            }
+        }
+        // 用户信息
+        .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;
@@ -108,31 +152,11 @@
                 }
             }
         }
-        // 用户信息
-        .info-flex{
-            padding: $padding;
-            display: flex;
-            .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;
-                }
-                .address{
-                    line-height: 20px;
-                    font-size: $title-size-lg;
-                    color: $text-gray;
-                    @extend .nowrap;
-                }
-            }
-        }
-        // 用户信息
+        
+        // btns
         .info-btns{
             background: white;
-            margin: 0 $margin;
+            margin: $margin;
             border-radius: $radius;
             .item{
                 line-height: 100rpx;
@@ -144,8 +168,14 @@
                 &:last-child{
                     border-bottom: none;
                 }
+                label{
+                    width: 200rpx;
+                }
                 .text{
+                    width: calc(100% - 200rpx);
                     color: $text-gray-m;
+                    text-align: right;
+                    @extend .nowrap;
                 }
             }
         }