diff --git a/src/App.vue b/src/App.vue
index ad3ede0..92c6ac6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,7 +46,8 @@ export default {
 
       const routeDeep = [
         '/message', '/attention', '/home', '/me', '/publish',
-        '/home/share-to-friend',
+        '/message/share-to-friend',
+        '/message/joined-group-chat',
         '/country-choose',
         '/edit-userinfo',
         '/edit-userinfo-item',
diff --git a/src/assets/img/icon/newicon/ap2.png b/src/assets/img/icon/newicon/ap2.png
deleted file mode 100644
index f98d261..0000000
Binary files a/src/assets/img/icon/newicon/ap2.png and /dev/null differ
diff --git a/src/assets/img/icon/newicon/ap3.png b/src/assets/img/icon/newicon/ap3.png
deleted file mode 100644
index 71a61dc..0000000
Binary files a/src/assets/img/icon/newicon/ap3.png and /dev/null differ
diff --git a/src/assets/img/icon/newicon/ap6.png b/src/assets/img/icon/newicon/ap6.png
deleted file mode 100644
index 906401e..0000000
Binary files a/src/assets/img/icon/newicon/ap6.png and /dev/null differ
diff --git a/src/assets/img/icon/newicon/apd.png b/src/assets/img/icon/newicon/apd.png
deleted file mode 100644
index 04cdacb..0000000
Binary files a/src/assets/img/icon/newicon/apd.png and /dev/null differ
diff --git a/src/assets/img/icon/newicon/bqp.png b/src/assets/img/icon/newicon/bqp.png
deleted file mode 100644
index 3c82a93..0000000
Binary files a/src/assets/img/icon/newicon/bqp.png and /dev/null differ
diff --git a/src/assets/img/icon/newicon/c6t.png b/src/assets/img/icon/newicon/c6t.png
deleted file mode 100644
index 5a13ef4..0000000
Binary files a/src/assets/img/icon/newicon/c6t.png and /dev/null differ
diff --git a/src/assets/img/icon/newicon/c8g.png b/src/assets/img/icon/newicon/c8g.png
deleted file mode 100644
index df1a375..0000000
Binary files a/src/assets/img/icon/newicon/c8g.png and /dev/null differ
diff --git a/src/assets/img/icon/newicon/c8h.png b/src/assets/img/icon/newicon/c8h.png
deleted file mode 100644
index 935d8b9..0000000
Binary files a/src/assets/img/icon/newicon/c8h.png and /dev/null differ
diff --git a/src/assets/img/icon/newicon/c8i.png b/src/assets/img/icon/newicon/c8i.png
deleted file mode 100644
index ed0bd17..0000000
Binary files a/src/assets/img/icon/newicon/c8i.png and /dev/null differ
diff --git a/src/assets/img/icon/newicon/c8j.png b/src/assets/img/icon/newicon/c8j.png
deleted file mode 100644
index d22361a..0000000
Binary files a/src/assets/img/icon/newicon/c8j.png and /dev/null differ
diff --git a/src/assets/img/icon/newicon/c8k.png b/src/assets/img/icon/newicon/c8k.png
deleted file mode 100644
index e0ada53..0000000
Binary files a/src/assets/img/icon/newicon/c8k.png and /dev/null differ
diff --git a/src/assets/scss/custom.less b/src/assets/scss/custom.less
index 1c6f2dc..c36b400 100644
--- a/src/assets/scss/custom.less
+++ b/src/assets/scss/custom.less
@@ -11,8 +11,8 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  padding: .7rem 1rem;
-  border-radius: 1px;
+  padding: 1rem 1.8rem;
+  border-radius: .3rem;
   font-size: 1.4rem;
 }
 
diff --git a/src/components/Check.vue b/src/components/Check.vue
index 5f73321..9d813f5 100644
--- a/src/components/Check.vue
+++ b/src/components/Check.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="check" @click="$emit('update:modelValue',!modelValue)">
+  <div class="check" @click.stop="$emit('update:modelValue',!modelValue)">
     <img v-show="!modelValue" src="../assets/img/icon/components/check/round-gray.png" alt="">
     <img v-show="modelValue && mode === 'gray'" src="../assets/img/icon/components/check/check-gray.png" alt="">
     <img v-show="modelValue && mode === 'red'" src="../assets/img/icon/components/check/check-red.png" alt="">
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 553a60a..fe4f5c2 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -65,8 +65,8 @@
 
       <div class="input-toolbar">
         <div class="call-friend">
-          <div class="friend" v-for="item in friends" @click="toggleCall(item)">
-            <img :style="item.select?'opacity: .5;':''" class="avatar" :src="item.avatar" alt="">
+          <div class="friend" v-for="item in friends.all" @click="toggleCall(item)">
+            <img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
             <span>{{ item.name }}</span>
             <img v-if="item.select" class="checked" src="../assets/img/icon/components/check/check-red-share.png">
           </div>
diff --git a/src/components/Share.vue b/src/components/Share.vue
index 8319f11..b6fd5a2 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -6,8 +6,8 @@
         <back mode="light" img="close" direction="right" @click="closeShare"></back>
       </div>
       <div class="friends  ">
-        <div class="friend" v-for="item in friends" @click="toggleCall(item)">
-          <img :style="item.select?'opacity: .5;':''" class="avatar" :src="item.avatar" alt="">
+        <div class="friend" v-for="item in friends.all" @click="toggleCall(item)">
+          <img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
           <span>{{ item.name }}</span>
           <img v-if="item.select" class="checked" src="../assets/img/icon/components/check/check-red-share.png">
         </div>
@@ -18,11 +18,11 @@
       </div>
       <div class="line"></div>
       <div class="shares ">
-        <div class="share-to " @click="$nav('/home/share-to-friend')">
+        <div class="share-to " @click="$nav('/message/share-to-friend')">
           <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
           <span>私信朋友</span>
         </div>
-        <div class="share-to" >
+        <div class="share-to">
           <img src="../assets/img/icon/components/video/torichang.png" alt="">
           <span>分享日常</span>
         </div>
@@ -68,27 +68,28 @@
           <img src="../assets/img/icon/components/video/download.png" alt="">
           <span>保存本地</span>
         </div>
-        <div class="tool  ">
-          <img src="../assets/img/icon/components/video/star.png" alt="">
+        <div class="tool" @click="toggleCollect">
+          <img v-if="isCollect" src="../assets/img/icon/components/video/star-full.png" alt="">
+          <img v-else src="../assets/img/icon/components/video/star.png" alt="">
           <span>收藏</span>
         </div>
-        <div class="tool  ">
+        <div class="tool">
           <img src="../assets/img/icon/components/video/comeonplay.png" alt="">
           <span>合拍</span>
         </div>
-        <div class="tool ">
+        <div class="tool">
           <img src="../assets/img/icon/components/video/bizhi.webp" alt="">
           <span>动态壁纸</span>
         </div>
-        <div class="tool ">
+        <div class="tool">
           <img src="../assets/img/icon/components/video/dislike.png" alt="">
           <span>不感兴趣</span>
         </div>
-        <div class="tool ">
+        <div class="tool" @click="copyLink">
           <img src="../assets/img/icon/components/video/link.png" alt="">
           <span>复制链接</span>
         </div>
-        <div class="tool ">
+        <div class="tool">
           <img src="../assets/img/icon/components/video/qrcode.png" alt="">
           <span>抖音码</span>
         </div>
@@ -121,7 +122,7 @@
           @cancel="cancel"
           maskMode="light"
           height="50vh"
-          mode="white">
+          mode="light">
         <div class="option-dialog">
           <div class="buttons">
             <b-button v-if="showProgress"
@@ -178,8 +179,8 @@
             </template>
           </div>
           <div class="dialog-friends">
-            <div class="dialog-friend" v-for="item in friends">
-              <img :src="item.avatar" alt="">
+            <div class="dialog-friend" v-for="item in friends.all">
+              <img :src="$imgPreview(item.avatar)" alt="">
               <div class="right">
                 <span>{{ item.name }}</span>
                 <div class="share-btn">分享</div>
@@ -199,7 +200,7 @@
           v-model="showShareDuoshan"
           @cancel="cancel"
           maskMode="light"
-          mode="white">
+          mode="light">
         <div class="share-to-duoshan">
           <img src="../assets/img/icon/components/video/duoshan-logo2.png" class="logo">
           <div class="wrapper">
@@ -235,7 +236,7 @@ export default {
   computed: {
     ...mapState(['friends']),
     selectFriends() {
-      return this.friends.filter(v => v.select)
+      return this.friends.all.filter(v => v.select)
     }
   },
   data() {
@@ -252,9 +253,27 @@ export default {
       showShare2QQ: false,
       showShare2Webo: false,
       showShareDuoshan: false,
+      isCollect: false
     }
   },
   methods: {
+    async copyLink() {
+      this.closeShare()
+      this.$showLoading()
+      await this.$sleep(500)
+      this.$hideLoading()
+      this.$notice('复制成功')
+    },
+    toggleCollect() {
+      this.closeShare()
+      if (this.isCollect) {
+        this.$notice('取消收藏成功')
+      } else {
+        this.$notice('收藏成功')
+      }
+      this.isCollect = !this.isCollect
+
+    },
     download() {
       this.showShareDialog = true
       this.showDownload = false
diff --git a/src/pages/home/Share2Friend.vue b/src/pages/home/Share2Friend.vue
deleted file mode 100644
index 83c41f0..0000000
--- a/src/pages/home/Share2Friend.vue
+++ /dev/null
@@ -1,2538 +0,0 @@
-<template>
-  <div class="Share2Friend">
-    <BaseHeader backImg="close">
-      <template v-slot:center>
-        <span class="f16">私信给</span>
-      </template>
-      <template v-slot:bottom>
-        <Search :isShowText="isShowText"
-                showText="取消"
-                @click="isShowText = true"
-                @notice="isShowText = false;"
-                @clear="isShowText = false"
-                class="ml2r mr2r mt1r" placeholder="输入城市或区县名搜索" v-model="searchKey"></Search>
-      </template>
-    </BaseHeader>
-    <div ref="list" class="content" @scroll="scroll">
-      <div class="list">
-        <div v-for="(value, name)  of friendsOk">
-          <div :class="name === '#'?'top':name" class="row no-active no-padding index">
-            <span>{{ name }}</span>
-          </div>
-          <div class="local-row" v-for="item  of value" @click="item.select = !item.select">
-            <Check mode="red" v-model="item.select"/>
-            <img :src="$imgPreview(item.avatar)" alt="">
-            <span>{{ item.name }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="indicator-ctn">
-      <div class="indicator">
-        <div class="item" data-index="top">#</div>
-        <div class="item">A</div>
-        <div class="item">B</div>
-        <div class="item">C</div>
-        <div class="item">D</div>
-        <div class="item">E</div>
-        <div class="item">F</div>
-        <div class="item">G</div>
-        <div class="item">H</div>
-        <div class="item">I</div>
-        <div class="item">J</div>
-        <div class="item">K</div>
-        <div class="item">L</div>
-        <div class="item">M</div>
-        <div class="item">N</div>
-        <div class="item">O</div>
-        <div class="item">P</div>
-        <div class="item">Q</div>
-        <div class="item">R</div>
-        <div class="item">S</div>
-        <div class="item">T</div>
-        <div class="item">U</div>
-        <div class="item">V</div>
-        <div class="item">W</div>
-        <div class="item">X</div>
-        <div class="item">Y</div>
-        <div class="item">Z</div>
-      </div>
-    </div>
-    <div class="hover"
-         :style="{ top : currentFixedIndicatorTop }"
-         ref="hover"
-         v-if="currentFixedIndicator">
-      <img src="../../assets/img/icon/components/video/water.png" alt="">
-      <span>{{ currentFixedIndicator }}</span>
-    </div>
-  </div>
-</template>
-<script>
-import Search from "../../components/Search";
-import {mapState} from "vuex";
-import axios from "axios";
-import Check from "../../components/Check";
-
-export default {
-  name: "Share2Friend",
-  components: {Search, Check},
-  props: {},
-  computed: {
-    // ...mapState(['friends']),
-    selectFriends() {
-      return this.friends.filter(v => v.select)
-    }
-  },
-  data() {
-    return {
-      country: [
-        {
-          "code": "+1-264",
-          "name": "安圭拉",
-          "pinyin": "A"
-        },
-        {
-          "code": "+1-268",
-          "name": "安地卡及巴布达",
-          "pinyin": "A"
-        },
-        {
-          "code": "+244",
-          "name": "安哥拉",
-          "pinyin": "A"
-        },
-        {
-          "code": "+353",
-          "name": "爱尔兰",
-          "pinyin": "A"
-        },
-        {
-          "code": "+372",
-          "name": "爱沙尼亚",
-          "pinyin": "A"
-        },
-        {
-          "code": "+376",
-          "name": "安道尔",
-          "pinyin": "A"
-        },
-        {
-          "code": "+853",
-          "name": "澳门",
-          "pinyin": "A"
-        },
-        {
-          "code": "+20",
-          "name": "埃及",
-          "pinyin": "A"
-        },
-        {
-          "code": "+61",
-          "name": "澳大利亚  科科斯（基林）群岛  圣诞岛",
-          "pinyin": "A"
-        },
-        {
-          "code": "+1-242",
-          "name": "巴哈马",
-          "pinyin": "B"
-        },
-        {
-          "code": "+1-246",
-          "name": "巴巴多斯",
-          "pinyin": "B"
-        },
-        {
-          "code": "+1-441",
-          "name": "百慕大",
-          "pinyin": "B"
-        },
-        {
-          "code": "+226",
-          "name": "布吉纳法索",
-          "pinyin": "B"
-        },
-        {
-          "code": "+229",
-          "name": "贝宁",
-          "pinyin": "B"
-        },
-        {
-          "code": "+257",
-          "name": "布隆迪",
-          "pinyin": "B"
-        },
-        {
-          "code": "+267",
-          "name": "博茨瓦纳",
-          "pinyin": "B"
-        },
-        {
-          "code": "+354",
-          "name": "冰岛",
-          "pinyin": "B"
-        },
-        {
-          "code": "+359",
-          "name": "保加利亚",
-          "pinyin": "B"
-        },
-        {
-          "code": "+375",
-          "name": "白俄罗斯",
-          "pinyin": "B"
-        },
-        {
-          "code": "+387",
-          "name": "波斯尼亚和黑塞哥维那",
-          "pinyin": "B"
-        },
-        {
-          "code": "+389",
-          "name": "北马其顿",
-          "pinyin": "B"
-        },
-        {
-          "code": "+501",
-          "name": "伯利兹",
-          "pinyin": "B"
-        },
-        {
-          "code": "+507",
-          "name": "巴拿马",
-          "pinyin": "B"
-        },
-        {
-          "code": "+591",
-          "name": "玻利维亚",
-          "pinyin": "B"
-        },
-        {
-          "code": "+595",
-          "name": "巴拉圭",
-          "pinyin": "B"
-        },
-        {
-          "code": "+675",
-          "name": "巴布亚新几内亚",
-          "pinyin": "B"
-        },
-        {
-          "code": "+680",
-          "name": "帛琉",
-          "pinyin": "B"
-        },
-        {
-          "code": "+970",
-          "name": "巴勒斯坦",
-          "pinyin": "B"
-        },
-        {
-          "code": "+973",
-          "name": "巴林",
-          "pinyin": "B"
-        },
-        {
-          "code": "+975",
-          "name": "不丹",
-          "pinyin": "B"
-        },
-        {
-          "code": "+32",
-          "name": "比利时",
-          "pinyin": "B"
-        },
-        {
-          "code": "+48",
-          "name": "波兰",
-          "pinyin": "B"
-        },
-        {
-          "code": "+55",
-          "name": "巴西",
-          "pinyin": "B"
-        },
-        {
-          "code": "+92",
-          "name": "巴基斯坦",
-          "pinyin": "B"
-        },
-        {
-          "code": "+240",
-          "name": "赤道几内亚",
-          "pinyin": "C"
-        },
-        {
-          "code": "+1-767",
-          "name": "多米尼克",
-          "pinyin": "D"
-        },
-        {
-          "code": "+228",
-          "name": "多哥",
-          "pinyin": "D"
-        },
-        {
-          "code": "+670",
-          "name": "东帝汶",
-          "pinyin": "D"
-        },
-        {
-          "code": "+45",
-          "name": "丹麦",
-          "pinyin": "D"
-        },
-        {
-          "code": "+49",
-          "name": "德国",
-          "pinyin": "D"
-        },
-        {
-          "code": "+82",
-          "name": "大韩民国",
-          "pinyin": "D"
-        },
-        {
-          "code": "+213",
-          "name": "阿尔及利亚",
-          "pinyin": "E"
-        },
-        {
-          "code": "+247",
-          "name": "阿森松岛",
-          "pinyin": "E"
-        },
-        {
-          "code": "+291",
-          "name": "厄立特里亚",
-          "pinyin": "E"
-        },
-        {
-          "code": "+297",
-          "name": "阿鲁巴",
-          "pinyin": "E"
-        },
-        {
-          "code": "+355",
-          "name": "阿尔巴尼亚",
-          "pinyin": "E"
-        },
-        {
-          "code": "+593",
-          "name": "厄瓜多尔",
-          "pinyin": "E"
-        },
-        {
-          "code": "+968",
-          "name": "阿曼",
-          "pinyin": "E"
-        },
-        {
-          "code": "+971",
-          "name": "阿联酋",
-          "pinyin": "E"
-        },
-        {
-          "code": "+994",
-          "name": "阿塞拜疆",
-          "pinyin": "E"
-        },
-        {
-          "code": "+54",
-          "name": "阿根廷",
-          "pinyin": "E"
-        },
-        {
-          "code": "+93",
-          "name": "阿富汗",
-          "pinyin": "E"
-        },
-        {
-          "code": "+238",
-          "name": "佛得角",
-          "pinyin": "F"
-        },
-        {
-          "code": "+298",
-          "name": "法罗群岛",
-          "pinyin": "F"
-        },
-        {
-          "code": "+358",
-          "name": "芬兰",
-          "pinyin": "F"
-        },
-        {
-          "code": "+379",
-          "name": "梵蒂冈",
-          "pinyin": "F"
-        },
-        {
-          "code": "+500",
-          "name": "福克兰群岛和 南乔治亚和南桑威奇群岛",
-          "pinyin": "F"
-        },
-        {
-          "code": "+594",
-          "name": "法属圭亚那",
-          "pinyin": "F"
-        },
-        {
-          "code": "+679",
-          "name": "斐济",
-          "pinyin": "F"
-        },
-        {
-          "code": "+689",
-          "name": "法属玻里尼西亚",
-          "pinyin": "F"
-        },
-        {
-          "code": "+33",
-          "name": "法国",
-          "pinyin": "F"
-        },
-        {
-          "code": "+63",
-          "name": "菲律宾",
-          "pinyin": "F"
-        },
-        {
-          "code": "+1-473",
-          "name": "格瑞那达",
-          "pinyin": "G"
-        },
-        {
-          "code": "+220",
-          "name": "冈比亚",
-          "pinyin": "G"
-        },
-        {
-          "code": "+242",
-          "name": "刚果（布）",
-          "pinyin": "G"
-        },
-        {
-          "code": "+243",
-          "name": "刚果（金）（即前 扎伊尔）",
-          "pinyin": "G"
-        },
-        {
-          "code": "+299",
-          "name": "格陵兰",
-          "pinyin": "G"
-        },
-        {
-          "code": "+506",
-          "name": "哥斯达黎加",
-          "pinyin": "G"
-        },
-        {
-          "code": "+590",
-          "name": "瓜德罗普",
-          "pinyin": "G"
-        },
-        {
-          "code": "+592",
-          "name": "圭亚那",
-          "pinyin": "G"
-        },
-        {
-          "code": "+995",
-          "name": "格鲁吉亚",
-          "pinyin": "G"
-        },
-        {
-          "code": "+53",
-          "name": "古巴",
-          "pinyin": "G"
-        },
-        {
-          "code": "+57",
-          "name": "哥伦比亚",
-          "pinyin": "G"
-        },
-        {
-          "code": "+504",
-          "name": "洪都拉斯",
-          "pinyin": "H"
-        },
-        {
-          "code": "+509",
-          "name": "海地",
-          "pinyin": "H"
-        },
-        {
-          "code": "+31",
-          "name": "荷兰",
-          "pinyin": "H"
-        },
-        {
-          "code": "+224",
-          "name": "几内亚",
-          "pinyin": "J"
-        },
-        {
-          "code": "+233",
-          "name": "加纳",
-          "pinyin": "J"
-        },
-        {
-          "code": "+241",
-          "name": "加彭",
-          "pinyin": "J"
-        },
-        {
-          "code": "+245",
-          "name": "几内亚比绍",
-          "pinyin": "J"
-        },
-        {
-          "code": "+253",
-          "name": "吉布提",
-          "pinyin": "J"
-        },
-        {
-          "code": "+420",
-          "name": "捷克",
-          "pinyin": "J"
-        },
-        {
-          "code": "+686",
-          "name": "基里巴斯",
-          "pinyin": "J"
-        },
-        {
-          "code": "+855",
-          "name": "柬埔寨",
-          "pinyin": "J"
-        },
-        {
-          "code": "+996",
-          "name": "吉尔吉斯斯坦",
-          "pinyin": "J"
-        },
-        {
-          "code": "+1",
-          "name": "加拿大",
-          "pinyin": "J"
-        },
-        {
-          "code": "+1-345",
-          "name": "开曼群岛",
-          "pinyin": "K"
-        },
-        {
-          "code": "+225",
-          "name": "科特迪瓦",
-          "pinyin": "K"
-        },
-        {
-          "code": "+237",
-          "name": "喀麦隆",
-          "pinyin": "K"
-        },
-        {
-          "code": "+254",
-          "name": "肯尼亚",
-          "pinyin": "K"
-        },
-        {
-          "code": "+269",
-          "name": "科摩罗",
-          "pinyin": "K"
-        },
-        {
-          "code": "+383",
-          "name": "科索沃",
-          "pinyin": "K"
-        },
-        {
-          "code": "+385",
-          "name": "克罗地亚",
-          "pinyin": "K"
-        },
-        {
-          "code": "+682",
-          "name": "库克群岛",
-          "pinyin": "K"
-        },
-        {
-          "code": "+965",
-          "name": "科威特",
-          "pinyin": "K"
-        },
-        {
-          "code": "+974",
-          "name": "卡塔尔",
-          "pinyin": "K"
-        },
-        {
-          "code": "+218",
-          "name": "利比亚",
-          "pinyin": "L"
-        },
-        {
-          "code": "+231",
-          "name": "利比里亚",
-          "pinyin": "L"
-        },
-        {
-          "code": "+250",
-          "name": "卢旺达",
-          "pinyin": "L"
-        },
-        {
-          "code": "+262",
-          "name": "留尼汪和 马约特",
-          "pinyin": "L"
-        },
-        {
-          "code": "+266",
-          "name": "赖索托",
-          "pinyin": "L"
-        },
-        {
-          "code": "+352",
-          "name": "卢森堡",
-          "pinyin": "L"
-        },
-        {
-          "code": "+370",
-          "name": "立陶宛",
-          "pinyin": "L"
-        },
-        {
-          "code": "+371",
-          "name": "拉脱维亚",
-          "pinyin": "L"
-        },
-        {
-          "code": "+423",
-          "name": "列支敦斯登",
-          "pinyin": "L"
-        },
-        {
-          "code": "+856",
-          "name": "老挝",
-          "pinyin": "L"
-        },
-        {
-          "code": "+961",
-          "name": "黎巴嫩",
-          "pinyin": "L"
-        },
-        {
-          "code": "+40",
-          "name": "罗马尼亚",
-          "pinyin": "L"
-        },
-        {
-          "code": "+1-664",
-          "name": "蒙特塞拉特",
-          "pinyin": "M"
-        },
-        {
-          "code": "+212",
-          "name": "摩洛哥",
-          "pinyin": "M"
-        },
-        {
-          "code": "+222",
-          "name": "毛里塔尼亚",
-          "pinyin": "M"
-        },
-        {
-          "code": "+223",
-          "name": "马里",
-          "pinyin": "M"
-        },
-        {
-          "code": "+230",
-          "name": "模里西斯",
-          "pinyin": "M"
-        },
-        {
-          "code": "+258",
-          "name": "莫桑比克",
-          "pinyin": "M"
-        },
-        {
-          "code": "+261",
-          "name": "马达加斯加",
-          "pinyin": "M"
-        },
-        {
-          "code": "+265",
-          "name": "马拉维",
-          "pinyin": "M"
-        },
-        {
-          "code": "+356",
-          "name": "马尔他",
-          "pinyin": "M"
-        },
-        {
-          "code": "+373",
-          "name": "摩尔多瓦",
-          "pinyin": "M"
-        },
-        {
-          "code": "+377",
-          "name": "摩纳哥",
-          "pinyin": "M"
-        },
-        {
-          "code": "+382",
-          "name": "蒙特内哥罗",
-          "pinyin": "M"
-        },
-        {
-          "code": "+596",
-          "name": "马提尼克",
-          "pinyin": "M"
-        },
-        {
-          "code": "+691",
-          "name": "密克罗尼西亚联邦",
-          "pinyin": "M"
-        },
-        {
-          "code": "+692",
-          "name": "马绍尔群岛",
-          "pinyin": "M"
-        },
-        {
-          "code": "+880",
-          "name": "孟加拉国 孟加拉国",
-          "pinyin": "M"
-        },
-        {
-          "code": "+960",
-          "name": "马尔地夫",
-          "pinyin": "M"
-        },
-        {
-          "code": "+976",
-          "name": "蒙古国",
-          "pinyin": "M"
-        },
-        {
-          "code": "+51",
-          "name": "秘鲁",
-          "pinyin": "M"
-        },
-        {
-          "code": "+52",
-          "name": "墨西哥",
-          "pinyin": "M"
-        },
-        {
-          "code": "+95",
-          "name": "缅甸",
-          "pinyin": "M"
-        },
-        {
-          "code": "+1",
-          "name": "美国",
-          "pinyin": "M"
-        },
-        {
-          "code": "+211",
-          "name": "南苏丹",
-          "pinyin": "N"
-        },
-        {
-          "code": "+227",
-          "name": "尼日尔",
-          "pinyin": "N"
-        },
-        {
-          "code": "+234",
-          "name": "奈及利亚",
-          "pinyin": "N"
-        },
-        {
-          "code": "+264",
-          "name": "纳米比亚",
-          "pinyin": "N"
-        },
-        {
-          "code": "+505",
-          "name": "尼加拉瓜",
-          "pinyin": "N"
-        },
-        {
-          "code": "+674",
-          "name": "瑙鲁",
-          "pinyin": "N"
-        },
-        {
-          "code": "+683",
-          "name": "纽埃",
-          "pinyin": "N"
-        },
-        {
-          "code": "+977",
-          "name": "尼泊尔",
-          "pinyin": "N"
-        },
-        {
-          "code": "+27",
-          "name": "南非",
-          "pinyin": "N"
-        },
-        {
-          "code": "+47",
-          "name": "挪威",
-          "pinyin": "N"
-        },
-        {
-          "code": "+351",
-          "name": "葡萄牙",
-          "pinyin": "P"
-        },
-        {
-          "code": "+41",
-          "name": "瑞士",
-          "pinyin": "R"
-        },
-        {
-          "code": "+46",
-          "name": "瑞典",
-          "pinyin": "R"
-        },
-        {
-          "code": "+81",
-          "name": "日本",
-          "pinyin": "R"
-        },
-        {
-          "code": "+1-721",
-          "name": "圣马丁",
-          "pinyin": "S"
-        },
-        {
-          "code": "+1-758",
-          "name": "圣卢西亚",
-          "pinyin": "S"
-        },
-        {
-          "code": "+1-784",
-          "name": "圣文森特和格林纳丁斯",
-          "pinyin": "S"
-        },
-        {
-          "code": "+221",
-          "name": "塞内加尔",
-          "pinyin": "S"
-        },
-        {
-          "code": "+232",
-          "name": "塞拉利昂",
-          "pinyin": "S"
-        },
-        {
-          "code": "+239",
-          "name": "圣多美和普林西比",
-          "pinyin": "S"
-        },
-        {
-          "code": "+248",
-          "name": "塞舌尔",
-          "pinyin": "S"
-        },
-        {
-          "code": "+249",
-          "name": "苏丹",
-          "pinyin": "S"
-        },
-        {
-          "code": "+252",
-          "name": "索马利亚",
-          "pinyin": "S"
-        },
-        {
-          "code": "+259",
-          "name": "桑给巴尔，但从未使用",
-          "pinyin": "S"
-        },
-        {
-          "code": "+260",
-          "name": "尚比亚",
-          "pinyin": "S"
-        },
-        {
-          "code": "+268",
-          "name": "斯威士兰",
-          "pinyin": "S"
-        },
-        {
-          "code": "+290",
-          "name": "圣赫勒拿 和 特里斯坦-达库尼亚",
-          "pinyin": "S"
-        },
-        {
-          "code": "+357",
-          "name": "赛普勒斯",
-          "pinyin": "S"
-        },
-        {
-          "code": "+378",
-          "name": "圣马力诺",
-          "pinyin": "S"
-        },
-        {
-          "code": "+381",
-          "name": "塞尔维亚",
-          "pinyin": "S"
-        },
-        {
-          "code": "+386",
-          "name": "斯洛维尼亚",
-          "pinyin": "S"
-        },
-        {
-          "code": "+421",
-          "name": "斯洛伐克",
-          "pinyin": "S"
-        },
-        {
-          "code": "+503",
-          "name": "萨尔瓦多",
-          "pinyin": "S"
-        },
-        {
-          "code": "+508",
-          "name": "圣皮埃尔和密克隆",
-          "pinyin": "S"
-        },
-        {
-          "code": "+597",
-          "name": "苏里南",
-          "pinyin": "S"
-        },
-        {
-          "code": "+677",
-          "name": "所罗门群岛",
-          "pinyin": "S"
-        },
-        {
-          "code": "+685",
-          "name": "萨摩亚",
-          "pinyin": "S"
-        },
-        {
-          "code": "+966",
-          "name": "沙乌地阿拉伯",
-          "pinyin": "S"
-        },
-        {
-          "code": "+94",
-          "name": "斯里兰卡",
-          "pinyin": "S"
-        },
-        {
-          "code": "+1-649",
-          "name": "特克斯和凯科斯群岛",
-          "pinyin": "T"
-        },
-        {
-          "code": "+216",
-          "name": "突尼西亚",
-          "pinyin": "T"
-        },
-        {
-          "code": "+255",
-          "name": "坦桑尼亚",
-          "pinyin": "T"
-        },
-        {
-          "code": "+676",
-          "name": "汤加",
-          "pinyin": "T"
-        },
-        {
-          "code": "+688",
-          "name": "图瓦卢",
-          "pinyin": "T"
-        },
-        {
-          "code": "+690",
-          "name": "托克劳",
-          "pinyin": "T"
-        },
-        {
-          "code": "+992",
-          "name": "塔吉克斯坦",
-          "pinyin": "T"
-        },
-        {
-          "code": "+993",
-          "name": "土库曼斯坦",
-          "pinyin": "T"
-        },
-        {
-          "code": "+66",
-          "name": "泰国",
-          "pinyin": "T"
-        },
-        {
-          "code": "+90",
-          "name": "土耳其",
-          "pinyin": "T"
-        },
-        {
-          "code": "+256",
-          "name": "乌干达",
-          "pinyin": "W"
-        },
-        {
-          "code": "+380",
-          "name": "乌克兰",
-          "pinyin": "W"
-        },
-        {
-          "code": "+502",
-          "name": "危地马拉",
-          "pinyin": "W"
-        },
-        {
-          "code": "+673",
-          "name": "文莱",
-          "pinyin": "W"
-        },
-        {
-          "code": "+678",
-          "name": "瓦努阿图",
-          "pinyin": "W"
-        },
-        {
-          "code": "+681",
-          "name": "瓦利斯和富图纳",
-          "pinyin": "W"
-        },
-        {
-          "code": "+998",
-          "name": "乌兹别克斯坦",
-          "pinyin": "W"
-        },
-        {
-          "code": "+58",
-          "name": "委内瑞拉",
-          "pinyin": "W"
-        },
-        {
-          "code": "+210",
-          "name": "西撒哈拉",
-          "pinyin": "X"
-        },
-        {
-          "code": "+263",
-          "name": "辛巴威",
-          "pinyin": "X"
-        },
-        {
-          "code": "+687",
-          "name": "新喀里多尼亚",
-          "pinyin": "X"
-        },
-        {
-          "code": "+852",
-          "name": "香港",
-          "pinyin": "X"
-        },
-        {
-          "code": "+963",
-          "name": "叙利亚",
-          "pinyin": "X"
-        },
-        {
-          "code": "+30",
-          "name": "希腊",
-          "pinyin": "X"
-        },
-        {
-          "code": "+34",
-          "name": "西班牙",
-          "pinyin": "X"
-        },
-        {
-          "code": "+36",
-          "name": "匈牙利",
-          "pinyin": "X"
-        },
-        {
-          "code": "+64",
-          "name": "新西兰",
-          "pinyin": "X"
-        },
-        {
-          "code": "+65",
-          "name": "新加坡",
-          "pinyin": "X"
-        },
-        {
-          "code": "+1-284",
-          "name": "英属维尔京群岛",
-          "pinyin": "Y"
-        },
-        {
-          "code": "+246",
-          "name": "英属印度洋领地",
-          "pinyin": "Y"
-        },
-        {
-          "code": "+251",
-          "name": "衣索比亚",
-          "pinyin": "Y"
-        },
-        {
-          "code": "+374",
-          "name": "亚美尼亚",
-          "pinyin": "Y"
-        },
-        {
-          "code": "+962",
-          "name": "约旦",
-          "pinyin": "Y"
-        },
-        {
-          "code": "+964",
-          "name": "伊拉克",
-          "pinyin": "Y"
-        },
-        {
-          "code": "+967",
-          "name": "叶门",
-          "pinyin": "Y"
-        },
-        {
-          "code": "+972",
-          "name": "以色列",
-          "pinyin": "Y"
-        },
-        {
-          "code": "+39",
-          "name": "义大利",
-          "pinyin": "Y"
-        },
-        {
-          "code": "+44",
-          "name": "英国",
-          "pinyin": "Y"
-        },
-        {
-          "code": "+62",
-          "name": "印尼",
-          "pinyin": "Y"
-        },
-        {
-          "code": "+84",
-          "name": "越南",
-          "pinyin": "Y"
-        },
-        {
-          "code": "+91",
-          "name": "印度",
-          "pinyin": "Y"
-        },
-        {
-          "code": "+98",
-          "name": "伊朗",
-          "pinyin": "Y"
-        },
-        {
-          "code": "+235",
-          "name": "乍得",
-          "pinyin": "Z"
-        },
-        {
-          "code": "+236",
-          "name": "中非",
-          "pinyin": "Z"
-        },
-        {
-          "code": "+350",
-          "name": "直布罗陀",
-          "pinyin": "Z"
-        },
-        {
-          "code": "+850",
-          "name": "朝鲜民主主义人民共和国",
-          "pinyin": "Z"
-        },
-        {
-          "code": "+886",
-          "name": "中华民国",
-          "pinyin": "Z"
-        },
-        {
-          "code": "+56",
-          "name": "智利",
-          "pinyin": "Z"
-        },
-        {
-          "code": "+86",
-          "name": "中国",
-          "pinyin": "Z"
-        }
-      ],
-      countryOk: {
-        "A": [
-          {
-            "code": "+1-264",
-            "name": "安圭拉",
-            "pinyin": "A"
-          },
-          {
-            "code": "+1-268",
-            "name": "安地卡及巴布达",
-            "pinyin": "A"
-          },
-          {
-            "code": "+244",
-            "name": "安哥拉",
-            "pinyin": "A"
-          },
-          {
-            "code": "+353",
-            "name": "爱尔兰",
-            "pinyin": "A"
-          },
-          {
-            "code": "+372",
-            "name": "爱沙尼亚",
-            "pinyin": "A"
-          },
-          {
-            "code": "+376",
-            "name": "安道尔",
-            "pinyin": "A"
-          },
-          {
-            "code": "+853",
-            "name": "澳门",
-            "pinyin": "A"
-          },
-          {
-            "code": "+20",
-            "name": "埃及",
-            "pinyin": "A"
-          },
-          {
-            "code": "+61",
-            "name": "澳大利亚  科科斯（基林）群岛  圣诞岛",
-            "pinyin": "A"
-          }
-        ],
-        "B": [
-          {
-            "code": "+1-242",
-            "name": "巴哈马",
-            "pinyin": "B"
-          },
-          {
-            "code": "+1-246",
-            "name": "巴巴多斯",
-            "pinyin": "B"
-          },
-          {
-            "code": "+1-441",
-            "name": "百慕大",
-            "pinyin": "B"
-          },
-          {
-            "code": "+226",
-            "name": "布吉纳法索",
-            "pinyin": "B"
-          },
-          {
-            "code": "+229",
-            "name": "贝宁",
-            "pinyin": "B"
-          },
-          {
-            "code": "+257",
-            "name": "布隆迪",
-            "pinyin": "B"
-          },
-          {
-            "code": "+267",
-            "name": "博茨瓦纳",
-            "pinyin": "B"
-          },
-          {
-            "code": "+354",
-            "name": "冰岛",
-            "pinyin": "B"
-          },
-          {
-            "code": "+359",
-            "name": "保加利亚",
-            "pinyin": "B"
-          },
-          {
-            "code": "+375",
-            "name": "白俄罗斯",
-            "pinyin": "B"
-          },
-          {
-            "code": "+387",
-            "name": "波斯尼亚和黑塞哥维那",
-            "pinyin": "B"
-          },
-          {
-            "code": "+389",
-            "name": "北马其顿",
-            "pinyin": "B"
-          },
-          {
-            "code": "+501",
-            "name": "伯利兹",
-            "pinyin": "B"
-          },
-          {
-            "code": "+507",
-            "name": "巴拿马",
-            "pinyin": "B"
-          },
-          {
-            "code": "+591",
-            "name": "玻利维亚",
-            "pinyin": "B"
-          },
-          {
-            "code": "+595",
-            "name": "巴拉圭",
-            "pinyin": "B"
-          },
-          {
-            "code": "+675",
-            "name": "巴布亚新几内亚",
-            "pinyin": "B"
-          },
-          {
-            "code": "+680",
-            "name": "帛琉",
-            "pinyin": "B"
-          },
-          {
-            "code": "+970",
-            "name": "巴勒斯坦",
-            "pinyin": "B"
-          },
-          {
-            "code": "+973",
-            "name": "巴林",
-            "pinyin": "B"
-          },
-          {
-            "code": "+975",
-            "name": "不丹",
-            "pinyin": "B"
-          },
-          {
-            "code": "+32",
-            "name": "比利时",
-            "pinyin": "B"
-          },
-          {
-            "code": "+48",
-            "name": "波兰",
-            "pinyin": "B"
-          },
-          {
-            "code": "+55",
-            "name": "巴西",
-            "pinyin": "B"
-          },
-          {
-            "code": "+92",
-            "name": "巴基斯坦",
-            "pinyin": "B"
-          }
-        ],
-        "C": [
-          {
-            "code": "+240",
-            "name": "赤道几内亚",
-            "pinyin": "C"
-          }
-        ],
-        "D": [
-          {
-            "code": "+1-767",
-            "name": "多米尼克",
-            "pinyin": "D"
-          },
-          {
-            "code": "+228",
-            "name": "多哥",
-            "pinyin": "D"
-          },
-          {
-            "code": "+670",
-            "name": "东帝汶",
-            "pinyin": "D"
-          },
-          {
-            "code": "+45",
-            "name": "丹麦",
-            "pinyin": "D"
-          },
-          {
-            "code": "+49",
-            "name": "德国",
-            "pinyin": "D"
-          },
-          {
-            "code": "+82",
-            "name": "大韩民国",
-            "pinyin": "D"
-          }
-        ],
-        "E": [
-          {
-            "code": "+213",
-            "name": "阿尔及利亚",
-            "pinyin": "E"
-          },
-          {
-            "code": "+247",
-            "name": "阿森松岛",
-            "pinyin": "E"
-          },
-          {
-            "code": "+291",
-            "name": "厄立特里亚",
-            "pinyin": "E"
-          },
-          {
-            "code": "+297",
-            "name": "阿鲁巴",
-            "pinyin": "E"
-          },
-          {
-            "code": "+355",
-            "name": "阿尔巴尼亚",
-            "pinyin": "E"
-          },
-          {
-            "code": "+593",
-            "name": "厄瓜多尔",
-            "pinyin": "E"
-          },
-          {
-            "code": "+968",
-            "name": "阿曼",
-            "pinyin": "E"
-          },
-          {
-            "code": "+971",
-            "name": "阿联酋",
-            "pinyin": "E"
-          },
-          {
-            "code": "+994",
-            "name": "阿塞拜疆",
-            "pinyin": "E"
-          },
-          {
-            "code": "+54",
-            "name": "阿根廷",
-            "pinyin": "E"
-          },
-          {
-            "code": "+93",
-            "name": "阿富汗",
-            "pinyin": "E"
-          }
-        ],
-        "F": [
-          {
-            "code": "+238",
-            "name": "佛得角",
-            "pinyin": "F"
-          },
-          {
-            "code": "+298",
-            "name": "法罗群岛",
-            "pinyin": "F"
-          },
-          {
-            "code": "+358",
-            "name": "芬兰",
-            "pinyin": "F"
-          },
-          {
-            "code": "+379",
-            "name": "梵蒂冈",
-            "pinyin": "F"
-          },
-          {
-            "code": "+500",
-            "name": "福克兰群岛和 南乔治亚和南桑威奇群岛",
-            "pinyin": "F"
-          },
-          {
-            "code": "+594",
-            "name": "法属圭亚那",
-            "pinyin": "F"
-          },
-          {
-            "code": "+679",
-            "name": "斐济",
-            "pinyin": "F"
-          },
-          {
-            "code": "+689",
-            "name": "法属玻里尼西亚",
-            "pinyin": "F"
-          },
-          {
-            "code": "+33",
-            "name": "法国",
-            "pinyin": "F"
-          },
-          {
-            "code": "+63",
-            "name": "菲律宾",
-            "pinyin": "F"
-          }
-        ],
-        "G": [
-          {
-            "code": "+1-473",
-            "name": "格瑞那达",
-            "pinyin": "G"
-          },
-          {
-            "code": "+220",
-            "name": "冈比亚",
-            "pinyin": "G"
-          },
-          {
-            "code": "+242",
-            "name": "刚果（布）",
-            "pinyin": "G"
-          },
-          {
-            "code": "+243",
-            "name": "刚果（金）（即前 扎伊尔）",
-            "pinyin": "G"
-          },
-          {
-            "code": "+299",
-            "name": "格陵兰",
-            "pinyin": "G"
-          },
-          {
-            "code": "+506",
-            "name": "哥斯达黎加",
-            "pinyin": "G"
-          },
-          {
-            "code": "+590",
-            "name": "瓜德罗普",
-            "pinyin": "G"
-          },
-          {
-            "code": "+592",
-            "name": "圭亚那",
-            "pinyin": "G"
-          },
-          {
-            "code": "+995",
-            "name": "格鲁吉亚",
-            "pinyin": "G"
-          },
-          {
-            "code": "+53",
-            "name": "古巴",
-            "pinyin": "G"
-          },
-          {
-            "code": "+57",
-            "name": "哥伦比亚",
-            "pinyin": "G"
-          }
-        ],
-        "H": [
-          {
-            "code": "+504",
-            "name": "洪都拉斯",
-            "pinyin": "H"
-          },
-          {
-            "code": "+509",
-            "name": "海地",
-            "pinyin": "H"
-          },
-          {
-            "code": "+31",
-            "name": "荷兰",
-            "pinyin": "H"
-          }
-        ],
-        "J": [
-          {
-            "code": "+224",
-            "name": "几内亚",
-            "pinyin": "J"
-          },
-          {
-            "code": "+233",
-            "name": "加纳",
-            "pinyin": "J"
-          },
-          {
-            "code": "+241",
-            "name": "加彭",
-            "pinyin": "J"
-          },
-          {
-            "code": "+245",
-            "name": "几内亚比绍",
-            "pinyin": "J"
-          },
-          {
-            "code": "+253",
-            "name": "吉布提",
-            "pinyin": "J"
-          },
-          {
-            "code": "+420",
-            "name": "捷克",
-            "pinyin": "J"
-          },
-          {
-            "code": "+686",
-            "name": "基里巴斯",
-            "pinyin": "J"
-          },
-          {
-            "code": "+855",
-            "name": "柬埔寨",
-            "pinyin": "J"
-          },
-          {
-            "code": "+996",
-            "name": "吉尔吉斯斯坦",
-            "pinyin": "J"
-          },
-          {
-            "code": "+1",
-            "name": "加拿大",
-            "pinyin": "J"
-          }
-        ],
-        "K": [
-          {
-            "code": "+1-345",
-            "name": "开曼群岛",
-            "pinyin": "K"
-          },
-          {
-            "code": "+225",
-            "name": "科特迪瓦",
-            "pinyin": "K"
-          },
-          {
-            "code": "+237",
-            "name": "喀麦隆",
-            "pinyin": "K"
-          },
-          {
-            "code": "+254",
-            "name": "肯尼亚",
-            "pinyin": "K"
-          },
-          {
-            "code": "+269",
-            "name": "科摩罗",
-            "pinyin": "K"
-          },
-          {
-            "code": "+383",
-            "name": "科索沃",
-            "pinyin": "K"
-          },
-          {
-            "code": "+385",
-            "name": "克罗地亚",
-            "pinyin": "K"
-          },
-          {
-            "code": "+682",
-            "name": "库克群岛",
-            "pinyin": "K"
-          },
-          {
-            "code": "+965",
-            "name": "科威特",
-            "pinyin": "K"
-          },
-          {
-            "code": "+974",
-            "name": "卡塔尔",
-            "pinyin": "K"
-          }
-        ],
-        "L": [
-          {
-            "code": "+218",
-            "name": "利比亚",
-            "pinyin": "L"
-          },
-          {
-            "code": "+231",
-            "name": "利比里亚",
-            "pinyin": "L"
-          },
-          {
-            "code": "+250",
-            "name": "卢旺达",
-            "pinyin": "L"
-          },
-          {
-            "code": "+262",
-            "name": "留尼汪和 马约特",
-            "pinyin": "L"
-          },
-          {
-            "code": "+266",
-            "name": "赖索托",
-            "pinyin": "L"
-          },
-          {
-            "code": "+352",
-            "name": "卢森堡",
-            "pinyin": "L"
-          },
-          {
-            "code": "+370",
-            "name": "立陶宛",
-            "pinyin": "L"
-          },
-          {
-            "code": "+371",
-            "name": "拉脱维亚",
-            "pinyin": "L"
-          },
-          {
-            "code": "+423",
-            "name": "列支敦斯登",
-            "pinyin": "L"
-          },
-          {
-            "code": "+856",
-            "name": "老挝",
-            "pinyin": "L"
-          },
-          {
-            "code": "+961",
-            "name": "黎巴嫩",
-            "pinyin": "L"
-          },
-          {
-            "code": "+40",
-            "name": "罗马尼亚",
-            "pinyin": "L"
-          }
-        ],
-        "M": [
-          {
-            "code": "+1-664",
-            "name": "蒙特塞拉特",
-            "pinyin": "M"
-          },
-          {
-            "code": "+212",
-            "name": "摩洛哥",
-            "pinyin": "M"
-          },
-          {
-            "code": "+222",
-            "name": "毛里塔尼亚",
-            "pinyin": "M"
-          },
-          {
-            "code": "+223",
-            "name": "马里",
-            "pinyin": "M"
-          },
-          {
-            "code": "+230",
-            "name": "模里西斯",
-            "pinyin": "M"
-          },
-          {
-            "code": "+258",
-            "name": "莫桑比克",
-            "pinyin": "M"
-          },
-          {
-            "code": "+261",
-            "name": "马达加斯加",
-            "pinyin": "M"
-          },
-          {
-            "code": "+265",
-            "name": "马拉维",
-            "pinyin": "M"
-          },
-          {
-            "code": "+356",
-            "name": "马尔他",
-            "pinyin": "M"
-          },
-          {
-            "code": "+373",
-            "name": "摩尔多瓦",
-            "pinyin": "M"
-          },
-          {
-            "code": "+377",
-            "name": "摩纳哥",
-            "pinyin": "M"
-          },
-          {
-            "code": "+382",
-            "name": "蒙特内哥罗",
-            "pinyin": "M"
-          },
-          {
-            "code": "+596",
-            "name": "马提尼克",
-            "pinyin": "M"
-          },
-          {
-            "code": "+691",
-            "name": "密克罗尼西亚联邦",
-            "pinyin": "M"
-          },
-          {
-            "code": "+692",
-            "name": "马绍尔群岛",
-            "pinyin": "M"
-          },
-          {
-            "code": "+880",
-            "name": "孟加拉国 孟加拉国",
-            "pinyin": "M"
-          },
-          {
-            "code": "+960",
-            "name": "马尔地夫",
-            "pinyin": "M"
-          },
-          {
-            "code": "+976",
-            "name": "蒙古国",
-            "pinyin": "M"
-          },
-          {
-            "code": "+51",
-            "name": "秘鲁",
-            "pinyin": "M"
-          },
-          {
-            "code": "+52",
-            "name": "墨西哥",
-            "pinyin": "M"
-          },
-          {
-            "code": "+95",
-            "name": "缅甸",
-            "pinyin": "M"
-          },
-          {
-            "code": "+1",
-            "name": "美国",
-            "pinyin": "M"
-          }
-        ],
-        "N": [
-          {
-            "code": "+211",
-            "name": "南苏丹",
-            "pinyin": "N"
-          },
-          {
-            "code": "+227",
-            "name": "尼日尔",
-            "pinyin": "N"
-          },
-          {
-            "code": "+234",
-            "name": "奈及利亚",
-            "pinyin": "N"
-          },
-          {
-            "code": "+264",
-            "name": "纳米比亚",
-            "pinyin": "N"
-          },
-          {
-            "code": "+505",
-            "name": "尼加拉瓜",
-            "pinyin": "N"
-          },
-          {
-            "code": "+674",
-            "name": "瑙鲁",
-            "pinyin": "N"
-          },
-          {
-            "code": "+683",
-            "name": "纽埃",
-            "pinyin": "N"
-          },
-          {
-            "code": "+977",
-            "name": "尼泊尔",
-            "pinyin": "N"
-          },
-          {
-            "code": "+27",
-            "name": "南非",
-            "pinyin": "N"
-          },
-          {
-            "code": "+47",
-            "name": "挪威",
-            "pinyin": "N"
-          }
-        ],
-        "P": [
-          {
-            "code": "+351",
-            "name": "葡萄牙",
-            "pinyin": "P"
-          }
-        ],
-        "R": [
-          {
-            "code": "+41",
-            "name": "瑞士",
-            "pinyin": "R"
-          },
-          {
-            "code": "+46",
-            "name": "瑞典",
-            "pinyin": "R"
-          },
-          {
-            "code": "+81",
-            "name": "日本",
-            "pinyin": "R"
-          }
-        ],
-        "S": [
-          {
-            "code": "+1-721",
-            "name": "圣马丁",
-            "pinyin": "S"
-          },
-          {
-            "code": "+1-758",
-            "name": "圣卢西亚",
-            "pinyin": "S"
-          },
-          {
-            "code": "+1-784",
-            "name": "圣文森特和格林纳丁斯",
-            "pinyin": "S"
-          },
-          {
-            "code": "+221",
-            "name": "塞内加尔",
-            "pinyin": "S"
-          },
-          {
-            "code": "+232",
-            "name": "塞拉利昂",
-            "pinyin": "S"
-          },
-          {
-            "code": "+239",
-            "name": "圣多美和普林西比",
-            "pinyin": "S"
-          },
-          {
-            "code": "+248",
-            "name": "塞舌尔",
-            "pinyin": "S"
-          },
-          {
-            "code": "+249",
-            "name": "苏丹",
-            "pinyin": "S"
-          },
-          {
-            "code": "+252",
-            "name": "索马利亚",
-            "pinyin": "S"
-          },
-          {
-            "code": "+259",
-            "name": "桑给巴尔，但从未使用",
-            "pinyin": "S"
-          },
-          {
-            "code": "+260",
-            "name": "尚比亚",
-            "pinyin": "S"
-          },
-          {
-            "code": "+268",
-            "name": "斯威士兰",
-            "pinyin": "S"
-          },
-          {
-            "code": "+290",
-            "name": "圣赫勒拿 和 特里斯坦-达库尼亚",
-            "pinyin": "S"
-          },
-          {
-            "code": "+357",
-            "name": "赛普勒斯",
-            "pinyin": "S"
-          },
-          {
-            "code": "+378",
-            "name": "圣马力诺",
-            "pinyin": "S"
-          },
-          {
-            "code": "+381",
-            "name": "塞尔维亚",
-            "pinyin": "S"
-          },
-          {
-            "code": "+386",
-            "name": "斯洛维尼亚",
-            "pinyin": "S"
-          },
-          {
-            "code": "+421",
-            "name": "斯洛伐克",
-            "pinyin": "S"
-          },
-          {
-            "code": "+503",
-            "name": "萨尔瓦多",
-            "pinyin": "S"
-          },
-          {
-            "code": "+508",
-            "name": "圣皮埃尔和密克隆",
-            "pinyin": "S"
-          },
-          {
-            "code": "+597",
-            "name": "苏里南",
-            "pinyin": "S"
-          },
-          {
-            "code": "+677",
-            "name": "所罗门群岛",
-            "pinyin": "S"
-          },
-          {
-            "code": "+685",
-            "name": "萨摩亚",
-            "pinyin": "S"
-          },
-          {
-            "code": "+966",
-            "name": "沙乌地阿拉伯",
-            "pinyin": "S"
-          },
-          {
-            "code": "+94",
-            "name": "斯里兰卡",
-            "pinyin": "S"
-          }
-        ],
-        "T": [
-          {
-            "code": "+1-649",
-            "name": "特克斯和凯科斯群岛",
-            "pinyin": "T"
-          },
-          {
-            "code": "+216",
-            "name": "突尼西亚",
-            "pinyin": "T"
-          },
-          {
-            "code": "+255",
-            "name": "坦桑尼亚",
-            "pinyin": "T"
-          },
-          {
-            "code": "+676",
-            "name": "汤加",
-            "pinyin": "T"
-          },
-          {
-            "code": "+688",
-            "name": "图瓦卢",
-            "pinyin": "T"
-          },
-          {
-            "code": "+690",
-            "name": "托克劳",
-            "pinyin": "T"
-          },
-          {
-            "code": "+992",
-            "name": "塔吉克斯坦",
-            "pinyin": "T"
-          },
-          {
-            "code": "+993",
-            "name": "土库曼斯坦",
-            "pinyin": "T"
-          },
-          {
-            "code": "+66",
-            "name": "泰国",
-            "pinyin": "T"
-          },
-          {
-            "code": "+90",
-            "name": "土耳其",
-            "pinyin": "T"
-          }
-        ],
-        "W": [
-          {
-            "code": "+256",
-            "name": "乌干达",
-            "pinyin": "W"
-          },
-          {
-            "code": "+380",
-            "name": "乌克兰",
-            "pinyin": "W"
-          },
-          {
-            "code": "+502",
-            "name": "危地马拉",
-            "pinyin": "W"
-          },
-          {
-            "code": "+673",
-            "name": "文莱",
-            "pinyin": "W"
-          },
-          {
-            "code": "+678",
-            "name": "瓦努阿图",
-            "pinyin": "W"
-          },
-          {
-            "code": "+681",
-            "name": "瓦利斯和富图纳",
-            "pinyin": "W"
-          },
-          {
-            "code": "+998",
-            "name": "乌兹别克斯坦",
-            "pinyin": "W"
-          },
-          {
-            "code": "+58",
-            "name": "委内瑞拉",
-            "pinyin": "W"
-          }
-        ],
-        "X": [
-          {
-            "code": "+210",
-            "name": "西撒哈拉",
-            "pinyin": "X"
-          },
-          {
-            "code": "+263",
-            "name": "辛巴威",
-            "pinyin": "X"
-          },
-          {
-            "code": "+687",
-            "name": "新喀里多尼亚",
-            "pinyin": "X"
-          },
-          {
-            "code": "+852",
-            "name": "香港",
-            "pinyin": "X"
-          },
-          {
-            "code": "+963",
-            "name": "叙利亚",
-            "pinyin": "X"
-          },
-          {
-            "code": "+30",
-            "name": "希腊",
-            "pinyin": "X"
-          },
-          {
-            "code": "+34",
-            "name": "西班牙",
-            "pinyin": "X"
-          },
-          {
-            "code": "+36",
-            "name": "匈牙利",
-            "pinyin": "X"
-          },
-          {
-            "code": "+64",
-            "name": "新西兰",
-            "pinyin": "X"
-          },
-          {
-            "code": "+65",
-            "name": "新加坡",
-            "pinyin": "X"
-          }
-        ],
-        "Y": [
-          {
-            "code": "+1-284",
-            "name": "英属维尔京群岛",
-            "pinyin": "Y"
-          },
-          {
-            "code": "+246",
-            "name": "英属印度洋领地",
-            "pinyin": "Y"
-          },
-          {
-            "code": "+251",
-            "name": "衣索比亚",
-            "pinyin": "Y"
-          },
-          {
-            "code": "+374",
-            "name": "亚美尼亚",
-            "pinyin": "Y"
-          },
-          {
-            "code": "+962",
-            "name": "约旦",
-            "pinyin": "Y"
-          },
-          {
-            "code": "+964",
-            "name": "伊拉克",
-            "pinyin": "Y"
-          },
-          {
-            "code": "+967",
-            "name": "叶门",
-            "pinyin": "Y"
-          },
-          {
-            "code": "+972",
-            "name": "以色列",
-            "pinyin": "Y"
-          },
-          {
-            "code": "+39",
-            "name": "义大利",
-            "pinyin": "Y"
-          },
-          {
-            "code": "+44",
-            "name": "英国",
-            "pinyin": "Y"
-          },
-          {
-            "code": "+62",
-            "name": "印尼",
-            "pinyin": "Y"
-          },
-          {
-            "code": "+84",
-            "name": "越南",
-            "pinyin": "Y"
-          },
-          {
-            "code": "+91",
-            "name": "印度",
-            "pinyin": "Y"
-          },
-          {
-            "code": "+98",
-            "name": "伊朗",
-            "pinyin": "Y"
-          }
-        ],
-        "Z": [
-          {
-            "code": "+235",
-            "name": "乍得",
-            "pinyin": "Z"
-          },
-          {
-            "code": "+236",
-            "name": "中非",
-            "pinyin": "Z"
-          },
-          {
-            "code": "+350",
-            "name": "直布罗陀",
-            "pinyin": "Z"
-          },
-          {
-            "code": "+850",
-            "name": "朝鲜民主主义人民共和国",
-            "pinyin": "Z"
-          },
-          {
-            "code": "+886",
-            "name": "中华民国",
-            "pinyin": "Z"
-          },
-          {
-            "code": "+56",
-            "name": "智利",
-            "pinyin": "Z"
-          },
-          {
-            "code": "+86",
-            "name": "中国",
-            "pinyin": "Z"
-          }
-        ]
-      },
-      history: [],
-      isShowText: false,
-      searchKey: '',
-      indexOffsetTop: {},
-      currentFixedIndicator: '',
-      currentFixedIndicatorTop: 0,
-      friends: [],
-      friendsOk: {},
-    }
-  },
-  created() {
-    this.getFriends()
-  },
-  mounted() {
-    let indexs = document.querySelectorAll('.index')
-    indexs.forEach(v => {
-      this.indexOffsetTop[v.children[0].innerText] = v.offsetTop
-    })
-    let items = document.querySelectorAll('.item')
-    let item = document.querySelector(`.item:nth-child(2)`)
-    let itemHeight = item.clientHeight
-    let ul = document.querySelector('.indicator')
-    let ulOffsetTop = ul.offsetTop
-    let resetColor = 'rgb(143, 143, 158)'
-    ul.addEventListener('touchstart', e => {
-      let pageY = e.touches[0].pageY - ulOffsetTop
-      let currentIndex = pageY / itemHeight
-      currentIndex = Math.floor(currentIndex)
-      render(currentIndex)
-      this.currentFixedIndicatorTop = e.touches[0].pageY - 28 + 'px'
-    })
-    ul.addEventListener('touchmove', e => {
-      let pageY = e.touches[0].pageY - ulOffsetTop
-      this.currentFixedIndicatorTop = e.touches[0].pageY - 28 + 'px'
-
-      let currentIndex = pageY / itemHeight
-      currentIndex = Math.floor(currentIndex)
-      if (currentIndex >= 0 && currentIndex < 27) {
-        render(currentIndex)
-      }
-    })
-    ul.addEventListener('touchend', e => {
-      return this.currentFixedIndicator = ''
-    })
-    let render = (currentIndex) => {
-      items.forEach((el, index) => {
-        el.style.color = resetColor
-      })
-      items[currentIndex].style.color = '#fff'
-      this.currentFixedIndicator = items[currentIndex].innerText
-      this.goto(items[currentIndex])
-    }
-  },
-  methods: {
-    async getFriends() {
-      let res = await this.$api.user.friends()
-      if (res.code === this.SUCCESS) {
-        this.friends = res.data
-        res.data = res.data.sort((a, b) => {
-          if (a.pinyin < b.pinyin) return -1;
-          if (a.pinyin > b.pinyin) return 1;
-          return 0;
-        })
-        res.data.map(v => {
-          if (this.friendsOk[v.pinyin]) {
-            this.friendsOk[v.pinyin].push(v)
-          } else {
-            this.friendsOk[v.pinyin] = [v]
-          }
-        })
-        console.log(this.friendsOk)
-        if (this.friendsOk['#']) {
-
-        }
-      }
-    },
-    goto(el) {
-      let list = this.$refs.list
-      let py
-      if (el.dataset['index']) {
-        py = 'top'
-      } else {
-        py = el.innerText
-      }
-      if (document.querySelector(`.${py}`)) {
-        list.scrollTop = document.querySelector(`.${py}`).offsetTop - 100
-      }
-    },
-    scroll(e) {
-      // let isFixed = document.querySelector(`.fixed`)
-      // console.log(isFixed)
-      // let listScrollTop = e.target.scrollTop + (isFixed ? 110 : 110)
-      let listScrollTop = e.target.scrollTop + 110
-      // console.log('listScrollTop', listScrollTop)
-      let currentKey = null
-      for (const key in this.indexOffsetTop) {
-        // if (currentKey) break
-        let offsetTop = this.indexOffsetTop[key]
-        // console.log('offsetTop',offsetTop)
-        if (offsetTop < listScrollTop) {
-          currentKey = key
-        }
-      }
-      this.currentFixedIndicator = currentKey
-      // console.log('currentKey', currentKey)
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-@import "../../assets/scss/index";
-
-.Share2Friend {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  overflow: auto;
-  color: white;
-  font-size: 1.4rem;
-
-  .indicator-ctn {
-    width: 2.5rem;
-    height: 100vh;
-    position: fixed;
-    z-index: 3;
-    top: 0;
-    right: 0.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .indicator {
-      width: 2.5rem;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-
-      div {
-        color: @second-text-color;
-        //transition: all .3s;
-        font-size: 1rem;
-        padding: .1rem;
-      }
-
-      .arrow {
-        padding: 0 0 .3rem 0;
-        width: 0;
-        height: 0;
-        border: .5rem solid transparent;
-        border-bottom: 1rem solid @second-text-color;
-      }
-    }
-  }
-
-  .fixed {
-    position: fixed;
-    top: 11rem;
-    left: 2rem;
-    right: 2rem;
-  }
-
-  .content {
-    height: calc(100% - 11rem);
-    margin-top: 11rem;
-    box-sizing: border-box;
-    width: 100%;
-    overflow-y: scroll;
-
-    .list {
-      //padding-right: 2.5rem;
-
-      .row {
-        padding: 0 2rem;
-      }
-
-      .local-row {
-        display: flex;
-        align-items: center;
-        padding: 1rem 2rem;
-
-        &:active{
-          background: rgb(35, 41, 58);
-        }
-
-        .check {
-          height: 2.2rem;
-          width: 2.2rem;
-          margin-right: 1.5rem;
-        }
-
-        img {
-          height: 4.5rem;
-          width: 4.5rem;
-          border-radius: 50%;
-          margin-right: 1.5rem;
-        }
-      }
-    }
-  }
-
-  .hover {
-    position: absolute;
-    right: 4rem;
-    top: 20rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    span {
-      position: absolute;
-      margin-right: 1rem;
-      font-size: 1.8rem;
-    }
-
-    img {
-      height: 5rem;
-    }
-  }
-
-}
-</style>
diff --git a/src/pages/message/JoinedGroupChat.vue b/src/pages/message/JoinedGroupChat.vue
new file mode 100644
index 0000000..3a7bf16
--- /dev/null
+++ b/src/pages/message/JoinedGroupChat.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="Share2Friend">
+    <BaseHeader
+        backMode="light"
+        backImg="back" style="z-index: 7;">
+      <template v-slot:center>
+        <span class="f16">已加入的群聊</span>
+      </template>
+      <template v-slot:right>
+        <div>
+          <span class="f16" :class="selectFriends.length?'save-yes':'save-no'" @click="save">
+            完成{{ selectFriends.length ? `(${selectFriends.length})` : '' }}
+          </span>
+        </div>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <div class="list">
+        <div class="local-row" v-for="item of friends.all" @click="toggleSelect(item);">
+          <Check mode="red" v-model="item.select"/>
+          <img :src="$imgPreview(item.avatar)" alt="">
+          <div class="desc">
+            <span class="name">{{ item.name.length > 20 ? item.name.substr(0, 20) + '...' : item.name }}</span>
+            <span class="num">(3)</span>
+          </div>
+        </div>
+      </div>
+      <NoMore></NoMore>
+    </div>
+  </div>
+</template>
+<script>
+import Search from "../../components/Search";
+import {mapState} from "vuex";
+import axios from "axios";
+import Check from "../../components/Check";
+import {forIn} from "lodash";
+
+export default {
+  name: "Share2Friend",
+  components: {Search, Check},
+  props: {},
+  computed: {
+    // ...mapState(['friends']),
+  },
+  data() {
+    return {
+      friends: {
+        all: {},
+        recent: [],
+        eachOther: [],
+      },
+      selectFriends: [],
+    }
+  },
+  created() {
+    this.getFriends()
+  },
+  methods: {
+    save() {
+      if (!this.selectFriends.length) return
+      this.$back()
+    },
+    toggleSelect(item) {
+      let resIndex = this.selectFriends.findIndex(v => v.name === item.name)
+      if (resIndex !== -1) {
+        item.select = false
+        this.selectFriends.splice(resIndex, 1)
+      } else {
+        item.select = true
+        this.selectFriends.push(item)
+      }
+    },
+    async getFriends() {
+      let res = await this.$api.user.friends()
+      if (res.code === this.SUCCESS) {
+        this.friends = res.data
+        this.friends.all = this.friends.all.sort((a, b) => {
+          if (a.pinyin < b.pinyin) return -1;
+          if (a.pinyin > b.pinyin) return 1;
+          return 0;
+        })
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/scss/index";
+
+.Share2Friend {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .content {
+    padding-top: 6rem;
+  }
+
+
+  .save-yes {
+    color: @primary-btn-color;
+  }
+
+  .save-no {
+    color: @disable-primary-btn-color;
+  }
+
+  .list {
+
+    .local-row {
+      display: flex;
+      align-items: center;
+      padding: 1rem 2rem;
+
+      &:active {
+        background: rgb(35, 41, 58);
+      }
+
+      .check {
+        height: 2.2rem;
+        width: 2.2rem;
+        margin-right: 1.5rem;
+      }
+
+      img {
+        height: 4.5rem;
+        width: 4.5rem;
+        border-radius: 50%;
+        margin-right: 1.5rem;
+      }
+
+      .desc {
+        .num {
+          margin-left: .5rem;
+          color: @second-text-color;
+        }
+      }
+    }
+  }
+
+}
+</style>
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index ba0d0d3..e890ffa 100644
--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -92,7 +92,7 @@
             <img class="left" src="../../assets/img/icon/people-gray.png" alt="">
             <div class="right">
               <span>已加入的群聊</span>
-              <back direction="right" scale="1.2"></back>
+              <back direction="right" mode="light"></back>
             </div>
           </div>
           <div class="friend-list">
@@ -101,8 +101,7 @@
               <img class="left" src="../../assets/img/icon/head-image.jpeg" alt="">
               <div class="right">
                 <span>{{ item.name }}</span>
-                <img v-if="item.select" src="../../assets/img/icon/message/checked.png" alt="">
-                <img v-if="!item.select" src="../../assets/img/icon/message/no-check2.png" alt="">
+                <Check mode="red" style="height: 2rem;width: 2rem;" v-model="item.select"/>
               </div>
             </div>
           </div>
@@ -115,7 +114,7 @@
       </div>
       <div class="joined-chat-wrapper" v-show="showJoinedChat">
         <div class="nav">
-          <back @click="showJoinedChat = false" mode="light" scale="1.8"></back>
+          <back @click="showJoinedChat = false" mode="light" scale="1.2"></back>
           <span>已加入的群聊</span>
           <span>&nbsp;</span>
         </div>
@@ -128,7 +127,7 @@
                 <div class="name">{{ text.length > 20 ? text.substr(0, 20) + '...' : text }}</div>
                 <div class="num">(3)</div>
               </div>
-              <back direction="right" scale="1.2"></back>
+              <back direction="right" mode="light"></back>
             </div>
           </div>
         </div>
@@ -142,13 +141,15 @@
 import Footer from '../../components/Footer.vue'
 import Search from "../../components/Search";
 import FromBottomDialog from '../../components/dialog/FromBottomDialog'
+import Check from "../../components/Check";
 
 export default {
   name: "Message",
   components: {
     Footer,
     Search,
-    FromBottomDialog
+    FromBottomDialog,
+    Check
   },
   data() {
     return {
@@ -232,8 +233,7 @@ export default {
   created() {
     console.log(22)
   },
-  methods: {
-  }
+  methods: {}
 }
 </script>
 
diff --git a/src/pages/message/Share2Friend.vue b/src/pages/message/Share2Friend.vue
new file mode 100644
index 0000000..a1c7a63
--- /dev/null
+++ b/src/pages/message/Share2Friend.vue
@@ -0,0 +1,595 @@
+<template>
+  <div class="Share2Friend">
+    <BaseHeader backImg="close" style="z-index: 7;">
+      <template v-slot:center>
+        <span class="f16">私信给</span>
+      </template>
+      <template v-slot:bottom>
+        <div class="search">
+          <div class="search-select-friends" v-if="selectFriends.length">
+            <div class="wrapper">
+              <img :src="$imgPreview(item.avatar)" v-for="item in selectFriends" @click="toggleSelect(item)">
+            </div>
+          </div>
+          <img v-else class="search-icon" src="../../assets/img/icon/search-gray.png" alt="">
+          <input type="text" placeholder="搜索" v-model="searchKey">
+          <img v-if="searchKey" @click="clear" class="clear" src="../../assets/img/icon/components/gray-close-full.png">
+        </div>
+      </template>
+    </BaseHeader>
+    <div class="is-search"
+         :style="{ height : (selectFriends.length && searchResult.length) ? 'calc(100% - 27.2rem)' : 'calc(100% - 11.2rem)' }"
+         v-show="searchKey">
+      <div class="list" v-if="searchResult.length">
+        <div class="local-row" v-for="item of searchResult" @click="toggleSelect(item);searchKey = '';">
+          <Check mode="red" v-model="item.select"/>
+          <img :src="$imgPreview(item.avatar)" alt="">
+          <div class="desc">
+            <span class="name">
+              <span v-if="item.name.indexOf(searchKey) > -1">
+                {{ item.name.substr(0, item.name.indexOf(searchKey)) }}<span style="color: #ffd800">{{
+                  searchKey
+                }}</span>{{ item.name.substr(item.name.indexOf(searchKey) + searchKey.length) }}
+              </span>
+              <span v-else>{{ item.name }}</span>
+            </span>
+            <span class="account" v-if="item.account">
+              抖音号：
+              <span v-if="item.account.indexOf(searchKey) > -1">
+                {{ item.account.substr(0, item.account.indexOf(searchKey)) }}<span style="color: #ffd800">{{
+                  searchKey
+                }}</span>{{ item.account.substr(item.account.indexOf(searchKey) + searchKey.length) }}
+              </span>
+              <span v-else>{{ item.account }}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="no-result" v-else>
+        <img src="../../assets/img/icon/no-result.png" alt="">
+        <span class="n1">搜索结果为空</span>
+        <span class="n2">没有搜索到相关的联系人</span>
+      </div>
+    </div>
+    <div ref="list"
+         :style="{ paddingBottom : selectFriends.length ? '16rem' : 0 }"
+         class="content"
+         @scroll="scroll">
+      <div class="list">
+        <div class="row" @click="$nav('/message/joined-group-chat')">
+          <span>已加入的群聊</span>
+          <back :scale=".7" direction="right"></back>
+        </div>
+        <div class="title">最近聊天</div>
+        <div class="local-row" v-for="item  of friends.recent" @click="toggleSelect(item)">
+          <Check mode="red" v-model="item.select"/>
+          <img :src="$imgPreview(item.avatar)" alt="">
+          <span>{{ item.name }}</span>
+        </div>
+        <div class="title">互关好友</div>
+        <div class="local-row" v-for="item  of friends.eachOther" @click="toggleSelect(item)">
+          <Check mode="red" v-model="item.select"/>
+          <img :src="$imgPreview(item.avatar)" alt="">
+          <span>{{ item.name }}</span>
+        </div>
+        <div class="title">全部</div>
+        <div v-for="(value, name)  of friendsSort">
+          <div :class="name === '#'?'top':name" class="title">
+            <span>{{ name }}</span>
+          </div>
+          <div class="local-row" v-for="item  of value" @click="toggleSelect(item)">
+            <Check mode="red" v-model="item.select"/>
+            <img :src="$imgPreview(item.avatar)" alt="">
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="share2friend" v-if="selectFriends.length && searchResult.length">
+        <div class="comment">
+          <textarea placeholder="有什么想和好友说的..."></textarea>
+          <img class="poster" src="../../assets/img/poster/1.jpg" alt="">
+        </div>
+        <div class="wrapper">
+          <div class="create-chat" v-if="selectFriends.length>1">
+            <Check mode="red" v-model="isCreateChat"/>
+            <span>创建群聊</span>
+          </div>
+          <b-button type="primary">{{ selectFriends.length > 1 ? '分别发送' : '发送' }}</b-button>
+        </div>
+      </div>
+    </div>
+    <div class="indicator-ctn">
+      <div class="indicator">
+        <div class="item" data-index="top">#</div>
+        <div class="item">A</div>
+        <div class="item">B</div>
+        <div class="item">C</div>
+        <div class="item">D</div>
+        <div class="item">E</div>
+        <div class="item">F</div>
+        <div class="item">G</div>
+        <div class="item">H</div>
+        <div class="item">I</div>
+        <div class="item">J</div>
+        <div class="item">K</div>
+        <div class="item">L</div>
+        <div class="item">M</div>
+        <div class="item">N</div>
+        <div class="item">O</div>
+        <div class="item">P</div>
+        <div class="item">Q</div>
+        <div class="item">R</div>
+        <div class="item">S</div>
+        <div class="item">T</div>
+        <div class="item">U</div>
+        <div class="item">V</div>
+        <div class="item">W</div>
+        <div class="item">X</div>
+        <div class="item">Y</div>
+        <div class="item">Z</div>
+      </div>
+    </div>
+    <div class="hover"
+         :style="{ top : currentFixedIndicatorTop }"
+         ref="hover"
+         v-if="currentFixedIndicator">
+      <img src="../../assets/img/icon/components/video/water.png" alt="">
+      <span>{{ currentFixedIndicator }}</span>
+    </div>
+  </div>
+</template>
+<script>
+import Search from "../../components/Search";
+import {mapState} from "vuex";
+import axios from "axios";
+import Check from "../../components/Check";
+import {forIn} from "lodash";
+
+export default {
+  name: "Share2Friend",
+  components: {Search, Check},
+  props: {},
+  computed: {
+    // ...mapState(['friends']),
+  },
+  data() {
+    return {
+      isCreateChat: false,
+      searchKey: '',
+      indexOffsetTop: {},
+      currentFixedIndicator: '',
+      currentFixedIndicatorTop: 0,
+      friends: {
+        all: {},
+        recent: [],
+        eachOther: [],
+      },
+      selectFriends: [],
+      friendsSort: {},
+      searchResult: []
+    }
+  },
+  watch: {
+    searchKey(newVal) {
+      let temp = this.$clone(this.friends.all)
+      temp.map(v => {
+        if (this.selectFriends.find(w => w.id === v.id)) v.select = true
+      })
+      this.searchResult = temp.filter(v => {
+        return v.name.includes(newVal) || v.account.includes(newVal);
+      })
+    }
+  },
+  created() {
+    this.getFriends()
+  },
+  mounted() {
+    let indexs = document.querySelectorAll('.index')
+    indexs.forEach(v => {
+      this.indexOffsetTop[v.children[0].innerText] = v.offsetTop
+    })
+    let items = document.querySelectorAll('.item')
+    let item = document.querySelector(`.item:nth-child(2)`)
+    let itemHeight = item.clientHeight
+    let ul = document.querySelector('.indicator')
+    let ulOffsetTop = ul.offsetTop
+    let resetColor = 'rgb(143, 143, 158)'
+    ul.addEventListener('touchstart', e => {
+      let pageY = e.touches[0].pageY - ulOffsetTop
+      let currentIndex = pageY / itemHeight
+      currentIndex = Math.floor(currentIndex)
+      render(currentIndex)
+      this.currentFixedIndicatorTop = e.touches[0].pageY - 28 + 'px'
+    })
+    ul.addEventListener('touchmove', e => {
+      let pageY = e.touches[0].pageY - ulOffsetTop
+      this.currentFixedIndicatorTop = e.touches[0].pageY - 28 + 'px'
+
+      let currentIndex = pageY / itemHeight
+      currentIndex = Math.floor(currentIndex)
+      if (currentIndex >= 0 && currentIndex < 27) {
+        render(currentIndex)
+      }
+    })
+    ul.addEventListener('touchend', e => {
+      return this.currentFixedIndicator = ''
+    })
+    let render = (currentIndex) => {
+      items.forEach((el, index) => {
+        el.style.color = resetColor
+      })
+      items[currentIndex].style.color = '#fff'
+      this.currentFixedIndicator = items[currentIndex].innerText
+      this.goto(items[currentIndex])
+    }
+  },
+  methods: {
+    clear() {
+      console.log('clear')
+      this.searchKey = ''
+    },
+    toggleSelect(item) {
+      //减少判断次数，找到了就跳出循环
+      for (let i = 0; i < this.friends.recent.length; i++) {
+        let v = this.friends.recent[i]
+        if (v.name === item.name) {
+          v.select = !v.select
+          break
+        }
+      }
+
+      for (let i = 0; i < this.friends.eachOther.length; i++) {
+        let v = this.friends.eachOther[i]
+        if (v.name === item.name) {
+          v.select = !v.select
+          break
+        }
+      }
+
+      let find = false
+      let keys = Object.keys(this.friendsSort)
+      for (let i = 0; i < keys.length; i++) {
+        let k = keys[i]
+        for (let j = 0; j < this.friendsSort[k].length; j++) {
+          let value = this.friendsSort[k][j]
+          if (value.name === item.name) {
+            value.select = !value.select
+            find = true
+            break
+          }
+        }
+        if (find) break
+      }
+
+      let resIndex = this.selectFriends.findIndex(v => v.name === item.name)
+      if (resIndex !== -1) {
+        item.select = false
+        this.selectFriends.splice(resIndex, 1)
+      } else {
+        item.select = true
+        this.selectFriends.push(item)
+      }
+    },
+    async getFriends() {
+      let res = await this.$api.user.friends()
+      if (res.code === this.SUCCESS) {
+        this.friends = res.data
+        this.friends.all = this.friends.all.sort((a, b) => {
+          if (a.pinyin < b.pinyin) return -1;
+          if (a.pinyin > b.pinyin) return 1;
+          return 0;
+        })
+        this.friends.all.map(v => {
+          if (this.friendsSort[v.pinyin]) {
+            this.friendsSort[v.pinyin].push(v)
+          } else {
+            this.friendsSort[v.pinyin] = [v]
+          }
+        })
+      }
+    },
+    goto(el) {
+      let list = this.$refs.list
+      let py
+      if (el.dataset['index']) {
+        py = 'top'
+      } else {
+        py = el.innerText
+      }
+      if (document.querySelector(`.${py}`)) {
+        list.scrollTop = document.querySelector(`.${py}`).offsetTop - 100
+      }
+    },
+    scroll(e) {
+      // let isFixed = document.querySelector(`.fixed`)
+      // console.log(isFixed)
+      // let listScrollTop = e.target.scrollTop + (isFixed ? 110 : 110)
+      let listScrollTop = e.target.scrollTop + 110
+      // console.log('listScrollTop', listScrollTop)
+      let currentKey = null
+      for (const key in this.indexOffsetTop) {
+        // if (currentKey) break
+        let offsetTop = this.indexOffsetTop[key]
+        // console.log('offsetTop',offsetTop)
+        if (offsetTop < listScrollTop) {
+          currentKey = key
+        }
+      }
+      this.currentFixedIndicator = currentKey
+      // console.log('currentKey', currentKey)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/scss/index";
+
+.Share2Friend {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .search {
+    border-bottom: 1px solid #cccccc11;
+    font-size: 1.4rem;
+    padding: 0;
+    height: 5rem;
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+
+    .search-select-friends {
+      .wrapper {
+        display: flex;
+        max-width: 70vw;
+        overflow-x: auto;
+
+        img {
+          height: 3rem;
+          width: 3rem;
+          margin-right: 1rem;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .search-icon {
+      height: 2rem;
+      width: 2rem;
+      margin: 0 1rem;
+    }
+
+    input {
+      //margin-top: .4rem;
+      color: white;
+      height: 50%;
+      width: 100%;
+      outline: none;
+      border: none;
+      padding: 0;
+      background: transparent;
+
+      &::-webkit-input-placeholder {
+        color: @second-text-color;
+      }
+    }
+
+    .clear {
+      height: 1.8rem;
+      width: 1.8rem;
+      margin-left: 1rem;
+      margin-right: 1rem;
+    }
+  }
+
+  .indicator-ctn {
+    width: 2.5rem;
+    height: 100vh;
+    top: 0;
+    position: fixed;
+    z-index: 3;
+    right: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .indicator {
+      width: 2.5rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+
+      div {
+        color: @second-text-color;
+        //transition: all .3s;
+        font-size: 1rem;
+        padding: .1rem;
+      }
+
+      .arrow {
+        padding: 0 0 .3rem 0;
+        width: 0;
+        height: 0;
+        border: .5rem solid transparent;
+        border-bottom: 1rem solid @second-text-color;
+      }
+    }
+  }
+
+  .fixed {
+    position: fixed;
+    top: 11rem;
+    left: 2rem;
+    right: 2rem;
+  }
+
+  .content {
+    height: calc(100% - 11.2rem);
+    margin-top: 11.2rem;
+    box-sizing: border-box;
+    width: 100%;
+    overflow-y: scroll;
+
+    .share2friend {
+      position: fixed;
+      z-index: 4;
+      bottom: 0;
+      box-sizing: border-box;
+      width: 100vw;
+      height: 16rem;
+      background: @main-bg;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .comment {
+        padding: 2rem;
+        display: flex;
+        flex: 1;
+
+        textarea {
+          flex: 1;
+          outline: none;
+          border: none;
+          background: transparent;
+          color: #fff;
+        }
+
+        .poster {
+          margin-left: 2rem;
+          height: 4rem;
+          width: 4rem;
+        }
+      }
+
+      .create-chat {
+        margin: 1rem;
+        display: flex;
+        align-items: center;
+        color: @second-text-color;
+
+        .check {
+          margin-right: 1rem;
+          width: 1.6rem;
+          height: 1.6rem;
+          //transform: scale(1.2);
+        }
+      }
+
+      .button {
+
+      }
+    }
+  }
+
+  .hover {
+    position: absolute;
+    right: 4rem;
+    top: 20rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    span {
+      position: absolute;
+      margin-right: 1rem;
+      font-size: 1.8rem;
+    }
+
+    img {
+      height: 5rem;
+    }
+  }
+
+  .is-search {
+    background: @main-bg;
+    position: fixed;
+    z-index: 5;
+    left: 0;
+    height: calc(100% - 11.2rem);
+    top: 11.2rem;
+    box-sizing: border-box;
+    width: 100%;
+    overflow-y: scroll;
+
+    .no-result {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      img {
+        margin-top: 15rem;
+        height: 15rem;
+      }
+
+      .n1 {
+        margin-top: 4rem;
+        font-size: 1.6rem;
+      }
+
+      .n2 {
+        margin-top: 2rem;
+        font-size: 1.2rem;
+        color: @second-text-color;
+      }
+    }
+  }
+
+  .list {
+    //padding-right: 2.5rem;
+
+    .title {
+      font-size: 1.2rem;
+      color: @second-text-color;
+      padding: 1rem 2rem;
+    }
+
+
+    .local-row {
+      display: flex;
+      align-items: center;
+      padding: 1rem 2rem;
+
+      &:active {
+        background: rgb(35, 41, 58);
+      }
+
+      .check {
+        height: 2.2rem;
+        width: 2.2rem;
+        margin-right: 1.5rem;
+      }
+
+      img {
+        height: 4.5rem;
+        width: 4.5rem;
+        border-radius: 50%;
+        margin-right: 1.5rem;
+      }
+
+      .desc {
+        display: flex;
+        flex-direction: column;
+
+        .name {
+
+        }
+
+        .account {
+          margin-top: .5rem;
+          font-size: 1.2rem;
+          color: @second-text-color;
+        }
+      }
+    }
+  }
+
+}
+</style>
diff --git a/src/pages/people/FindAcquaintance.vue b/src/pages/people/FindAcquaintance.vue
index 5503ca8..219c546 100644
--- a/src/pages/people/FindAcquaintance.vue
+++ b/src/pages/people/FindAcquaintance.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="FindAcquaintance">
     <div class="header">
-      <back scale="1.8" mode="white" @click="back"></back>
+      <back scale="1.8" mode="light" @click="back"></back>
       <Indicator
           style="width: 50%;"
           tabStyleWidth="40%"
diff --git a/src/router/index.js b/src/router/index.js
index 8f060b7..35f6f86 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -43,7 +43,8 @@ import Help from "../pages/login/Help";
 import Test from "../pages/Test";
 import Test2 from "../pages/Test2";
 import Test3 from "../pages/Test3";
-import Share2Friend from "../pages/home/Share2Friend";
+import Share2Friend from "../pages/message/Share2Friend";
+import JoinedGroupChat from "../pages/message/JoinedGroupChat";
 
 const routes = [
   // {path: '', component: Music},
@@ -53,10 +54,11 @@ const routes = [
   {path: '/test2', component: Test2},
   {path: '/test3', component: Test3},
   {path: '/home', component: Index},
-  {path: '/home/share-to-friend', component: Share2Friend},
   {path: '/attention', component: Attention},
   {path: '/publish', component: Publish},
   {path: '/message', component: Message},
+  {path: '/message/share-to-friend', component: Share2Friend},
+  {path: '/message/joined-group-chat', component: JoinedGroupChat},
   {path: '/me', component: Me},
   {path: '/edit-userinfo', component: EditUserInfo},
   {path: '/edit-userinfo-item', component: EditUserInfoItem},
diff --git a/src/store/index.js b/src/store/index.js
index 4d72be9..c607a9b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -26,7 +26,7 @@ const store = Vuex.createStore({
         displayType: enums.DISPLAY_TYPE.ALL,
       }
     },
-    friends: []
+    friends: {}
   },
   mutations: {
     setUserinfo(store, val) {