便民

src/apps/AppMailList/components/add.vue

@@ -71,6 +71,7 @@ export default {
   mounted() {    
     this.$dict.load('yesOrNo').then(() => {
       if(this.params.id) {
+        console.log(122)
         this.userInfo.id = this.params.id
         this.getDetail()
       }

src/apps/AppMailList/components/list.vue

@@ -1,21 +1,28 @@
 <template>
   <div class="list">
     <div class="list-content">
-      <div class="item" :id="'id'+item.label"  v-for="(item, index) in list" :key="index">
-        <div class="title">{{item.label}}</div>
-        <div class="phone-list">
-          <div class="item-info" v-for="(e, indexs) in item.dataList" :key="indexs">
-            <p>{{e.name}}</p>
-            <div class="phone">
-              <span>{{e.type}}</span>{{e.phone}}
+      <u-index-list :scrollTop="scrollTop" :index-list="indexList">
+        <div v-for="(letter, index) in indexList" :key="index">
+          <u-index-anchor :index="letter"/>
+          <div class="item" v-for="(item, index) in list.filter(e=>e.nameInitials==letter)">
+            <div class="title">{{item.label}}</div>
+            <div class="phone-list">
+              <div class="item-info">
+                <p>{{item.name}}</p>
+                <div class="phone">
+                  <span>{{item.type}}</span>{{item.phone}}
+                </div>
+              </div>
             </div>
           </div>
         </div>
+      </u-index-list>
+    </div>
+    <!-- <div class="id-list">
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <u-index-anchor :index="item.label" />
       </div>
-    </div>
-    <div class="id-list">
-      <a class="item" :href="'#id'+item.label" v-for="(item, index) in list" :key="index">{{item.label}}</a>
-    </div>
+    </div> -->
     <div class="footer-btn" @click="toAddList">我添加的</div>
   </div>
 </template>
@@ -26,7 +33,9 @@ export default {
 
   data() {
     return {
+      scrollTop: 0,
       list: [],
+      indexList: []
     }
   },
   computed: { ...mapState(['user']) },
@@ -35,6 +44,9 @@ export default {
   },
 
   methods: {
+    idClick(id) {
+      document.getElementById('#id'+id).scrollIntoView();
+    },
     getList() {
       this.$http.post(`/app/appconvenientaddressbook/list`, null, {
         params: {
@@ -42,28 +54,8 @@ export default {
         }
       }).then(res => {
         if (res.code == 0) {
-          var list = []
-          var data = []
-          res.data.records.map((item) => {
-            if(list.indexOf(item.nameInitials)) {
-              list.push(item.nameInitials)
-            }
-          })
-          list.map((item) => {
-            var obj = {
-              label: item,
-              dataList: []
-            }
-            data.push(obj)
-          })
-          data.map((item, index) => {
-            res.data.records.map((items) => {
-              if(item.label == items.nameInitials) {
-                data[index].dataList.push(items)
-              }
-            })
-          })
-          this.list = data
+          this.indexList = [...new Set(res.data.records.map(e=>e.nameInitials))];
+          this.list = res.data.records;
         }
       })
     },
@@ -81,14 +73,14 @@ export default {
   background-color: #F3F6F9;
   .list-content{
     padding-bottom: 112px;
-    .title{
-      padding-left: 48px;
-      line-height: 64px;
-      font-size: 26px;
-      font-family: PingFangSC-Semibold, PingFang SC;
-      font-weight: 600;
-      color: #999;
-    }
+    // .title{
+    //   padding-left: 48px;
+    //   line-height: 64px;
+    //   font-size: 26px;
+    //   font-family: PingFangSC-Semibold, PingFang SC;
+    //   font-weight: 600;
+    //   color: #999;
+    // }
     .phone-list{
       background-color: #fff;
       width: 100%;
@@ -120,22 +112,6 @@ export default {
       }
     }
   }
-  .id-list{
-    width: 50px;
-    text-align: center;
-    position: fixed;
-    top: 160px;
-    right: 32px;
-    z-index: 99;
-    .item{
-      display: block;
-      font-size: 24px;
-      font-family: PingFangSC-Semibold, PingFang SC;
-      font-weight: 600;
-      color: #CCC;
-      line-height: 40px;
-    }
-  }
   .footer-btn{
     width: 100%;
     text-align: center;
@@ -152,8 +128,8 @@ export default {
     color: #FFF;
     z-index: 999;
   }
-  a {
-    text-decoration: none;
+  ::v-deep .u-index-anchor  {
+    top: 0!important;
   }
 }
 </style>

src/apps/AppMailList/components/myAddList.vue

@@ -9,7 +9,7 @@
           </div>
         </div>
         <div class="right">
-          <img src="./img/edit-icon.png" alt="" @click="edit(item)">
+          <img src="./img/edit-icon.png" alt="" @click="edit(item.id)">
           <img src="./img/del-icon.png" alt="" @click="del(item)">
         </div>
       </div>