用户的本地备注信息，暂时不链接网络

App.vue

@@ -7,7 +7,7 @@
     export default {
         onLaunch: function() {
             im.initIm('lmxuhwaglu76d')
-            return
+            // return
             //#ifdef APP-PLUS
             // 获取系统版本号
             getVersions({

README.md

@@ -1,3 +1,6 @@
 # ZhHealth
 
 ZH健康
+
+## uni-icons图标组件
+[图标组件](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons)

manifest.json

@@ -2,7 +2,7 @@
     "name" : "ZH-HEALTH",
     "appid" : "__UNI__C29473D",
     "description" : "ZH-HEALTH，您手上的健康管理专家",
-    "versionName" : "1.0.18",
+    "versionName" : "1.0.19",
     "versionCode" : 100,
     "transformPx" : false,
     /* 5+App特有相关 */

pages/im/friends/info.vue

@@ -2,10 +2,10 @@
     <view class="content">
         <!-- 用户信息 -->
         <view class="info-flex">
-            <u-avatar :src="userInfo.portraitUrl || require('@/static/user/cover.png')" shape="square" size="50"
+            <u-avatar :src="userInfo.portraitUrl || require('@/static/user/cover.png')" shape="square"
-                bg-color="#fff"></u-avatar>
+                :size="rpx2px(100)" bg-color="#fff"></u-avatar>
             <view class="info-text">
-                <view class="nickname">{{ userInfo.name }}</view>
+                <view class="nickname">{{ contact(targetId).name }} ({{ userInfo.name }})</view>
                 <view class="address" @longpress="copyAddress">地址：{{ userInfo.address }}</view>
             </view>
         </view>
@@ -14,20 +14,16 @@
             <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-else-if="userInfo.gender === 1">男</view>
-                <view class="text" v-if="userInfo.gender === 2">女</view>
+                <view class="text" v-else>女</view>
             </view>
         </view>
-
+        <!-- 如果是好友 -->
         <block v-if="userInfo.friendship ==='accepted'">
             <view class="info-btns">
                 <view class="item u-border-bottom" @click="setRemark">
                     <label>设置备注</label>
-                    <u-icon name="arrow-right" color="#eee" size="16" />
+                    <uni-icons type="right" size="32rpx" />
-                </view>
-                <view class="item u-border-bottom" @click="setRemark">
-                    <label>设置标签</label>
-                    <u-icon name="arrow-right" color="#eee" size="16" />
                 </view>
                 <view class="item u-border-bottom">
                     <label>消息免打扰</label>
@@ -69,6 +65,14 @@
                 </view>
             </view>
         </block>
+
+        <u-modal negativeTop="300" :show="modalShow" title="修改备注" showCancelButton @cancel="onHideModal"
+            @confirm="onChangeRemark">
+            <view class="slot-content">
+                <u--input placeholder="好友备注" border="surround" focus v-model="contactRemark" maxlength="12" />
+            </view>
+        </u-modal>
+
         <u-action-sheet :actions="callActions" cancelText="取消" @close="callShow = false" @select="singleCall"
             :show="callShow">
         </u-action-sheet>
@@ -83,12 +87,17 @@
     } from '@/apis/interfaces/im.js'
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
+    import imBase from '../mixins/imBase.js'
+
     // friendship: ''    没有好友关系
     // accepted    好友
     // pending  申请中
     // denied 拒绝 
     // blocked 黑名单
     export default {
+        mixins: [
+            imBase
+        ],
         data() {
             return {
                 targetId: '',
@@ -107,7 +116,9 @@
                     }
                 ],
                 callShow: false,
-                hasPeding: false
+                hasPeding: false,
+                modalShow: false,
+                contactRemark: ''
             }
         },
         onLoad(e) {
@@ -151,7 +162,26 @@
                     url: '/pages/im/private/chat?targetId=' + this.targetId
                 });
             },
+            // 设置好友备注操作
             setRemark() {
+                this.modalShow = true
+                this.contactRemark = this.$store.getters.contactInfo(this.targetId).name
+            },
+            onHideModal() {
+                this.modalShow = false
+            },
+            onChangeRemark() {
+                this.$store.dispatch('setContactRemark', {
+                    targetId: this.targetId,
+                    remark: this.contactRemark
+                })
+                uni.showToast({
+                    icon: 'none',
+                    title: '备注设置成功'
+                })
+                this.onHideModal()
+            },
+            setTag() {
                 uni.showToast({
                     title: '开发中',
                     icon: 'none'
@@ -344,6 +374,10 @@
                 width: 200rpx;
             }
 
+            .uni-icons {
+                color: $text-gray-m !important;
+            }
+
             .text {
                 width: calc(100% - 200rpx);
                 color: $text-gray-m;

pages/im/mixins/imBase.js

@@ -13,5 +13,10 @@ export default {
         sender() {
             return this.$store.getters.sender
         }
+    },
+    methods: {
+        rpx2px(size) {
+            return utils.rpx2px(size)
+        }
     }
 }

store/modules/im.js

@@ -17,7 +17,7 @@ export default {
                 const info = state.contacts[targetId]
 
                 return {
-                    name: info.name,
+                    name: info.remark ? info.remark : info.name,
                     hash: info.hash,
                     portraitUrl: info.localAvatar ? info.localAvatar : require('@/static/user/cover.png')
                 }
@@ -47,9 +47,27 @@ export default {
                 name: contactInfo.name,
                 portraitUrl: contactInfo.portraitUrl
             }
+        },
+        setContactRemark(state, contactInfo) {
+            Vue.set(state.contacts, contactInfo.targetId, contactInfo)
         }
     },
     actions: {
+        setContactRemark({
+            commit
+        }, {
+            targetId,
+            remark
+        }) {
+            contactModel.find('targetId="' + targetId + '"', (err, result) => {
+                if (!err && result.length > 0) {
+                    result[0].remark = remark
+                    contactModel.update('targetId="' + targetId + '"', result[0], (err, res) => {
+                        commit('setContactRemark', result[0])
+                    })
+                }
+            })
+        },
         setSenderInfo({
             commit
         }, contactInfo) {

utils/im/models.js

@@ -9,6 +9,7 @@ const contactModel = usqlite.model('contacts', {
         unique: true
     },
     name: String,
+    remark: String,
     hash: {
         type: String,
         unique: true