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

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"
-                bg-color="#fff"></u-avatar>
+            <u-avatar :src="userInfo.portraitUrl || require('@/static/user/cover.png')" shape="square"
+                :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-if="userInfo.gender === 2">女</view>
+                <view class="text" v-else-if="userInfo.gender === 1">男</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" />
-                </view>
-                <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">
                     <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)
+        }
     }
 }