添加群聊页面

src/i18n/zhHk/router.js

@@ -27,6 +27,9 @@ export default {
   LanguageSettings:"語言設置",
   AdministratorSettings:"管理員設置",
   Download:"下載鏈接",
-  ChatMessage:"聊天信息"
-  
+  ChatMessage:"聊天信息",
+  GroupQRCode:"羣二維碼",
+  AddMember:"添加成員",
+  GroupMembers:"羣成員",
+  ContactList:"通訊錄"
 };

src/i18n/zhHk/transaction.js

@@ -57,5 +57,7 @@ export default {
     FailedToClaim:"領取失敗",
     SuccessfulPurchase:"買入成功",
     FailedToBuy:"買入失敗",
-    EstimationOfGasFailed:"估算 gas 失敗:",    
+    EstimationOfGasFailed:"估算 gas 失敗:",
+    Cancel: "取消",
+    Sure: "確定", 
 };

src/router/system.js

@@ -147,6 +147,36 @@ export const systemRoutes = [
         meta: { title: "router.ChatMessage", keepAlive: false, navbar: true, leftArrow: true }, //  chat详情
         component: () => import("@/views/im/detail/index.vue"),
       },
+      {
+        path: "qrcode",
+        name: "qrcode",
+        meta: { title: "router.GroupQRCode", keepAlive: false, navbar: true, leftArrow: true }, //  二维码详情
+        component: () => import("@/views/im/detail/qrcode/index.vue"),
+      },
+      {
+        path: "chatLog",
+        name: "chatLog",
+        meta: { title: "router.ChatMessage", keepAlive: false, navbar: true, leftArrow: true }, //  聊天记录
+        component: () => import("@/views/im/detail/chatLog/index.vue"),
+      },
+      {
+        path: "addMember",
+        name: "addMember",
+        meta: { title: "router.AddMember", keepAlive: false, navbar: false, leftArrow: true }, //  添加成员
+        component: () => import("@/views/im/detail/addMember/index.vue"),
+      },
+      {
+        path: "checkMember",
+        name: "checkMember",
+        meta: { title: "router.GroupMembers", keepAlive: false, navbar: true, leftArrow: true }, //  查看成员
+        component: () => import("@/views/im/detail/checkMember/index.vue"),
+      },
+      {
+        path: "contact",
+        name: "contact",
+        meta: { title: "router.ContactList", keepAlive: false, navbar: true, leftArrow: true }, //  通讯录
+        component: () => import("@/views/im/contactList/index.vue"),
+      },
     ],
   },
 ]

src/updater/update.json

@@ -1,7 +1,7 @@
 {
-  "version": "1.0.31",
-  "releaseDate": "2025-07-30 02:39:08",
-  "checksum": "a6b3639814cc76c7ec3b8d5697e769d21b641975a265402c0815c38a27fb64a2",
+  "version": "1.0.32",
+  "releaseDate": "2025-07-30 02:45:02",
+  "checksum": "5abab9c433030caf2fc1ee1fff9e629569f0cfb15da41f525f7be137da4af9ba",
   "minBinaryVersion": "1.0.0",
   "mandatory": true,
   "upDataDescription": "✨修正一些錯誤。。。。!!！"

src/views/im/contactList/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        通讯录
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/im/detail/addMember/index.vue

@@ -0,0 +1,243 @@
+<template>
+    <div class="container">
+        <van-nav-bar :title="$t('router.AddMember')" left-arrow class="app-bar-header" @click-left="router.back()">
+            <template #right>
+                <div class="btn" :class="checked.length == 0?'':'active-btn'" @click="submit">完成({{ checked.length }})</div>
+            </template>
+        </van-nav-bar>
+  
+        <van-index-bar class="list">
+            <template v-for="(group, groupIndex) in memberGroups" :key="group.index">
+                <van-index-anchor :index="group.index" />
+                <van-checkbox-group v-model="checked">
+                    <van-cell-group inset>
+                        <van-cell
+                            v-for="(item, index) in group.members"
+                            :key="item.id"
+                            clickable
+                            @click="toggle(groupIndex, index)"
+                        >
+                            <template #icon>
+                                <van-checkbox checked-color="#4765DD"
+                                    :name="item"
+                                    :ref="el => setCheckboxRef(groupIndex, index, el)"
+                                    @click.stop
+                                />
+                            </template>
+                            <template #title>
+                                <div class="cell-item">
+                                    <van-image class="img-icon" round :src="item.avatar" />
+                                    <div>{{ item.name }}</div>
+                                </div>
+                            </template>
+                        </van-cell>
+                    </van-cell-group>
+                </van-checkbox-group>
+            </template>
+        </van-index-bar>
+  
+        <div class="footer-box">
+            <div class="avatar-list">
+                <van-image
+                    v-for="item in checked"
+                    :key="item.id"
+                    class="img-icon"
+                    round
+                    :src="item.avatar"
+                />
+            </div>
+            <div class="selected-count">已选{{ checked.length }}人</div>
+        </div>
+    </div>
+  </template>
+  
+
+<script setup>
+const router = useRouter();
+
+const checked = ref([]);
+
+const memberGroups = ref([
+  {
+    index: 'A',
+    members: [
+      { id: '1', name: '安琪拉', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+      { id: '2', name: '艾琳', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+    ],
+  },
+  {
+    index: 'B',
+    members: [
+      { id: '3', name: '白起', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+      { id: '4', name: '百里守约', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+    ],
+  },
+  {
+    index: 'C',
+    members: [
+      { id: '1', name: '安琪拉', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+      { id: '2', name: '艾琳', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+    ],
+  },
+  {
+    index: 'D',
+    members: [
+      { id: '3', name: '白起', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+      { id: '4', name: '百里守约', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+    ],
+  },
+  {
+    index: 'E',
+    members: [
+      { id: '1', name: '安琪拉', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+      { id: '2', name: '艾琳', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+    ],
+  },
+  {
+    index: 'F',
+    members: [
+      { id: '3', name: '白起', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+      { id: '4', name: '百里守约', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+    ],
+  },
+  {
+    index: 'G',
+    members: [
+      { id: '3', name: '白起', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+      { id: '4', name: '百里守约', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+    ],
+  },
+]);
+
+const checkboxRefs = ref([]);
+onBeforeUpdate(() => {
+  checkboxRefs.value = [];
+});
+
+const setCheckboxRef = (groupIndex, index, el) => {
+  if (!checkboxRefs.value[groupIndex]) {
+    checkboxRefs.value[groupIndex] = [];
+  }
+  checkboxRefs.value[groupIndex][index] = el;
+};
+
+// 切换选中
+const toggle = (groupIndex, index) => {
+  checkboxRefs.value[groupIndex]?.[index]?.toggle();
+};
+
+const submit = () => {
+    if(checked.value.length == 0) return;
+    console.log("已选择成员：", checked.value);
+    router.push('detail')
+};
+
+</script>
+
+<style lang="less" scoped>
+.container{
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+.app-bar-header {
+  :deep(.van-nav-bar__title) {
+    font-weight: 500;
+  }
+  :deep(.van-icon) {
+    color: @font-color3;
+  }
+  .btn{
+    height: 25px;
+    line-height: 25px;
+    padding: 0 6px;
+    background: #F2F2F2;
+    border-radius: 4px;
+    box-sizing: border-box;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 12px;
+    color: #8D8D8D;
+  }
+  .active-btn{
+    background: #4765DD;
+    color: #FFFFFF;
+  }
+}
+.list{
+    flex: 1;
+    overflow: auto;
+    :deep(.van-cell-group--inset){
+        border-radius:12px !important;
+    }
+    :deep(.van-cell){
+        padding: 12px 16px !important;
+    }
+    :deep(.van-cell:after){
+      left: 90px;
+    }
+    :deep(.van-index-anchor--sticky){
+        background: #F7F8FA !important;
+        color: #4765DD !important;
+    }
+    :deep(.van-index-bar__index){
+        font-weight: 400 !important;
+        font-size: 10px !important;
+        color: #1D2129 !important;
+        margin-bottom: 8px !important;
+    }
+    :deep(.van-index-bar__index--active){
+        color: #4765DD !important;
+    }
+    .cell-item{
+        display: flex;
+        align-items: center;
+        margin-left: 12px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: #000000;
+        .img-icon{
+            width: 32px;
+            height: 32px;
+            flex-shrink: 0;
+            margin-right: 12px;
+        }
+    }
+}
+.list::-webkit-scrollbar{
+    width: 0;
+}
+.footer-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 16px;
+    height: 54px;
+    background: #ffffff;
+    padding: 0 16px;
+    box-sizing: border-box;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 15px;
+    color: #8d8d8d;
+
+    .avatar-list {
+        display: flex;
+        overflow-x: auto;
+        .img-icon {
+            width: 32px;
+            height: 32px;
+            flex-shrink: 0;
+            margin-right: 4px;
+        }
+    }
+    .avatar-list::-webkit-scrollbar{
+        height: 0;
+    }
+    .selected-count {
+        margin-left: 16px;
+        white-space: nowrap;
+    }
+}
+</style>

src/views/im/detail/chatLog/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        111
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/im/detail/checkMember/index.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="container">
+        <van-search class="search-item"
+            v-model="value"
+            show-action
+            placeholder="请输入搜索关键词"
+            @search="onSearch"
+        >
+            <template #left-icon>
+                <svg-icon class="search-icon" name="search" />
+            </template>
+            <template #action>
+                <van-button type="default" class="action-btn">搜索</van-button>
+            </template>
+        </van-search>
+        <div class="content">
+            <div class="list-ul">
+                <div class="list-li" v-for="(item,index) in 10">
+                    <van-image class="li-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+                    <div class="li-cont" :class="{ 'no-border': index === 9 }">
+                        <span>单循环</span>
+                        <div class="leader" v-if="index == 0">群主</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+.container{
+    height: 100%;
+    :deep(.van-search){
+        padding: 4px 16px !important;
+    }
+    .search-item{
+        :deep(.van-search__action){
+            padding: 0 0 0 12px !important;
+            box-sizing: border-box !important;
+            line-height: initial !important;
+        }
+        :deep(.van-search__content){
+            background: #F7F8FA !important;
+            border-radius: 22px !important;
+            padding-left: 10px !important;
+        }
+        :deep(.van-field__left-icon){
+            margin-right: 0 !important;
+            height: 24px;
+        }
+        :deep(.van-search__field){
+            padding:4px 0 !important;
+            line-height: initial !important;
+            box-sizing: border-box;
+        }
+        :deep(.van-field__value){
+            height: 24px !important;
+            line-height: 26px !important;
+        }
+        .search-icon{
+            height: 24px;
+            width: 24px;
+            margin-right: 10px;
+            color: #95A9ED;
+        }
+        .action-btn{
+            padding:0 22px;
+            height: 34px;
+            box-sizing: border-box;
+            background: #4765DD;
+            border-radius: 22px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 15px;
+            color: #FFFFFF;
+            border:none !important;
+        }
+    }
+    .search-item :deep(input::placeholder) {
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: #95A9ED;
+    }
+    .content{
+        margin: 8px 16px;
+        .list-ul{
+            background: #fff;
+            border-radius: 12px;
+            padding: 12px 16px;
+            .list-li{
+                display: flex;
+                align-items: center;
+                .li-img{
+                    width: 32px;
+                    height: 32px;
+                    flex-shrink: 0;
+                    margin-right: 12px;
+                }
+                .li-cont{
+                    flex: 1;
+                    display: flex;
+                    align-items: center;
+                    border-bottom: 1px solid #F2F2F2;
+                    padding-top:10px;
+                    padding-bottom: 10px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 500;
+                    font-size: 15px;
+                    color: #000000;
+                    .leader{
+                        background: rgba(71,101,221,0.2);
+                        border-radius: 4px;
+                        padding: 1px 6px;
+                        font-family: PingFang SC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 10px;
+                        color: #4765DD;
+                        margin-left: 8px;
+                    }
+                }
+                .no-border {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/im/detail/index.vue

@@ -3,14 +3,14 @@
         <div class="box-item">
             <div class="item-title">
                 <div class="text-lf">群聊成员</div>
-                <div class="text-ri">查看8名群成员<svg-icon class="item-icon" name="right1"/></div>
+                <div class="text-ri" @click="checkMember">查看8名群成员<svg-icon class="item-icon" name="right1"/></div>
             </div>
             <div class="member-box">
                 <div class="member-li" v-for="item in 8">
                     <van-image class="member-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
                     <div>希希子</div>
                 </div>
-                <div class="member-li">
+                <div class="member-li" @click="addMember">
                     <div class="add">
                         <svg-icon class="add-icon" name="add3" />
                     </div>
@@ -22,20 +22,20 @@
             <van-cell
                 title="群聊名称"
                 :value="information.name"
-                is-link
+                is-link @click="changeUpdateName(1)"
             ></van-cell>
-            <van-cell title="群二维码" :value="information.qrCode" is-link>
+            <van-cell title="群二维码" :value="information.qrCode" is-link @click="goQrcode">
                 <template #value>
                     <svg-icon class="qrcode-icon" name="qrcode"/>
                 </template>
             </van-cell>
             <van-cell
                 title="群公告"
-                :value="information.notice"
+                :value="information.notice" @click="showNotice = true"
                 is-link
             ></van-cell>
             <van-cell
-                title="我在群里的昵称" class="user-bar-list-last"
+                title="我在群里的昵称" class="user-bar-list-last" @click="changeUpdateName(2)"
                 :value="information.nickname"
                 is-link
             ></van-cell>
@@ -53,22 +53,125 @@
             </van-cell>
         </van-cell-group>
         <van-cell-group class="user-bar-list">
-            <van-cell class="user-bar-list-last" title="查看聊天记录" is-link></van-cell>
+            <van-cell class="user-bar-list-last" title="查看聊天记录" is-link @click="goChatDetail"></van-cell>
         </van-cell-group>
-        <div class="exit">退出群聊</div>
+        <div class="exit" @click="showExit = true">退出群聊</div>
+        <!-- 修改信息弹框 -->
+        <van-popup v-model:show="showUpdateName" :style="{ borderRadius:'25px' }">
+            <div class="pop-content-password">
+                <div class="pop-title-password">{{type == 1?'修改群聊名称':'修改昵称'}}</div>
+                <van-field v-model="newName" class="pop-input" placeholder="请输入名称" />
+                <div class="pop-btn-password">
+                    <van-button type="default" class="btn-password cancel" @click="cancel">{{ $t('wallet.Cancel') }}</van-button>
+                    <van-button type="default" class="btn-password confirm" @click="popConfirm" :disabled="isDisabledConfirm">{{ $t('wallet.Sure') }}</van-button>
+                </div>
+            </div>
+        </van-popup>
+        <!-- 公告弹框 -->
+        <van-popup v-model:show="showNotice" position="bottom" round style="height:280px">
+            <div class="pop-content">
+                <div class="pop-title">
+                    <div @click="showNotice = false">取消</div>
+                    <div class="save" @click="changeUpdateNotice">保存</div>
+                </div>
+                <van-field class="textarea-item"
+                    v-model="newNotice"
+                    rows="2"
+                    autosize
+                    type="textarea"
+                    placeholder="请输入公告内容..."
+                    show-word-limit
+                />
+            </div>
+        </van-popup>
+        <!-- 退出群聊弹框 -->
+        <van-popup v-model:show="showExit" :style="{ borderRadius:'25px' }">
+            <div class="pop-content-password">
+                <div class="pop-title-password">确定要退出群聊吗？</div>
+                <div class="pop-btn-password" style="margin-top: 50px;">
+                    <van-button type="default" class="btn-password cancel" @click="showExit = false">{{ $t('wallet.Cancel') }}</van-button>
+                    <van-button type="default" class="btn-password confirm" @click="popConfirm">{{ $t('wallet.Sure') }}</van-button>
+                </div>
+            </div>
+        </van-popup>
     </div>
 </template>
 
 <script setup>
+import { useRouter,useRoute } from 'vue-router'
 import { reactive } from 'vue'
+import { showNotify } from 'vant';
+const router = useRouter();
+
+
 const information = reactive({
     name:'群聊',
     qrCode:'',
     notice:'367657',
     nickname:'vs大放送'
 })
+const type = ref(1);//1:修改群聊名称  2：修改我的群昵称
 const disturb = ref(true);
 const topStory = ref(false);
+const showUpdateName = ref(false);
+const isDisabledConfirm = ref(false);
+const showNotice = ref(false);
+const showExit = ref(false);
+const newName = ref('');
+const newNotice = ref('');
+const changeUpdateName = (val) => {
+    type.value = val;
+    newName.value = val == 1?information.name:information.nickname
+    showUpdateName.value = true;
+}
+// 群聊名称取消
+const cancel = () => {
+    showUpdateName.value = false;
+}
+// 群聊名称确定
+const popConfirm = () => {
+    if(!newName.value){
+        showNotify({ type: 'warning', message: '请输入名称' });
+        return;
+    }
+    isDisabledConfirm.value = true;
+    setTimeout(() => {
+        isDisabledConfirm.value = false;
+        showUpdateName.value = false;
+        if(type.value == 1){
+            information.name = newName.value;
+        }else{
+            information.nickname = newName.value;
+        }
+    }, 1000);
+}
+// 群公告
+const changeUpdateNotice = () => {
+    if(!newNotice.value){
+        showNotify({ type: 'warning', message: '请输入公告内容' });
+        return;
+    }
+    setTimeout(() => {
+        showNotice.value = false;
+        information.notice = newNotice.value;
+    }, 500);
+}
+// 跳转群二维码页面
+const goQrcode = () => {
+    router.push('qrcode')
+}
+// 跳转聊天记录
+const goChatDetail = () => {
+    router.push('chatLog')
+}
+// 跳转添加成员页面
+const addMember = () => {
+    router.push('addMember')
+}
+// 跳转查看成员页面
+const checkMember = () => {
+    router.push('checkMember')
+}
 </script>
 
 <style lang="less" scoped>
@@ -147,7 +250,7 @@ const topStory = ref(false);
         overflow: hidden;
         margin-bottom: 16px;
         .van-cell {
-            height: 44px;
+            // height: 44px;
             background: @bg-color1;
             border-bottom: 1px solid @bg-color1;
             font-size: 15px;
@@ -186,6 +289,85 @@ const topStory = ref(false);
         text-align: center;
         line-height: 44px;
     }
-   
+    .pop-content-password{
+        padding: 27px 35px 25px 34px;
+        .pop-title-password{
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 17px;
+            color: #000000;
+            text-align: center;
+        }
+        .pop-input{
+            background: #F2F2F2;
+            border-radius: 8px;
+            height: 40px;
+            margin: 21px 0 31px;
+        }
+        .pop-btn-password{
+            display: flex;
+            justify-content: center;
+            .btn-password{
+                width: 83px;
+                height: 29px;
+                line-height: 29px;
+                padding: 5px 0 !important;
+                border-radius: 6px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                box-sizing:border-box;
+            }
+            .cancel{
+                margin-right: 17px !important;
+                border: 1px solid #D8D8D8;
+                color: #000 !important;
+            }
+            .confirm{
+                background: @theme-color1;
+                color: #FFF;
+                font-weight: 500;
+                border: none !important;
+            }
+        }
+    }
+    :deep(.van-popup--center) {
+        margin: 0 40px !important;
+        width: auto !important;
+    }
+    .pop-content{
+        background: #F7F8FA;
+        height: 280px;
+        .pop-title{
+            background: #fff;
+            padding: 0 20px;
+            height: 48px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-sizing: border-box;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 15px;
+            color: #4F4F4F;
+            .save{
+                font-weight: 500;
+                color: #4765DD;
+            }
+        }
+        .textarea-item{
+            background: #F7F8FA !important;
+            :deep(.van-cell__value){
+                font-weight: 400 !important;
+                font-size: 15px !important;
+            }
+        }
+        .textarea-item :deep(textarea::placeholder) {
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 15px;
+            color: #8D8D8D;
+        }
+    }
 }
 </style>

src/views/im/detail/qrcode/index.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="container">
+        <div class="content">
+            <van-image class="img-icon" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+            <div class="title">群聊：天使竞技聊天群</div>
+            <qrcode-vue
+                :value="qrtext"
+                :size="196"
+                background="transparent"
+            />
+            <div class="qr-title">该二维码7天内（07月17日前）有效</div>
+            <van-button class="qr-btn" type="primary" size="large">保存到相册</van-button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import QrcodeVue from "qrcode.vue";
+const qrtext = ref('');
+</script>
+
+<style lang="less" scoped>
+.container{
+    display: flex;
+    flex-direction: column;
+    .content{
+        margin: 32px 58px 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 15px;
+        color: #000000;
+        .img-icon{
+            width: 82px;
+            height: 82px;
+            margin-bottom: 12px;
+        }
+        .title{
+            margin-bottom: 20px;
+        }
+        .qr-title{
+            margin-top: 20px;
+            font-size: 12px;
+            color: #8D8D8D;
+            margin-bottom: 54px;
+        }
+        .qr-btn{
+            height: 40px !important;
+            line-height: 40px !important;
+            background: @theme-color1;
+            border-radius:50px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 15px;
+            padding: 9px 0;
+            box-sizing: border-box;
+            color: #FFFFFF;
+        }
+        :deep(.van-button--primary){
+            border: none !important;
+        }
+    }
+}
+</style>

src/views/im/index.vue

@@ -9,7 +9,7 @@
         <div>发现</div>
       </div>
       <div class="header-ri">
-        <svg-icon style="width: 25px; height: 25px;margin-right: 8px;" name="person" />
+        <svg-icon style="width: 25px; height: 25px;margin-right: 8px;" name="person" @click="goPerson"/>
         <svg-icon style="width: 25px; height: 25px;" name="add" />
       </div>
     </div>
@@ -69,6 +69,9 @@ const scheduleNotification = async   () => {
 const goToPage = () => {
   router.push('chat')
 }
+const goPerson = () => {
+  router.push('contact')
+}
 onMounted(()=>{
   // scheduleNotification()
 })