关注/粉丝 接口对接

assets/css/user/follow.scss

@@ -65,7 +65,6 @@
 
       .list {
         display: flex;
-        justify-content: center;
         align-items: center;
         flex-wrap: wrap;
         .cell {
@@ -76,10 +75,11 @@
           border:1px solid rgba(0,0,0,0.05);
           padding: 20px 15px 13px 15px;
           margin: 20px 0 0 20px;
+          cursor: pointer;
 
 
           &:nth-child(3n+1) {
-            margin-left: 0;
+            margin-left: 30px;
           }
 
           .topContent {
@@ -129,6 +129,10 @@
               background-size: cover;
               width: 24px;
               height: 24px;
+
+              &.none {
+                visibility: hidden;
+              }
             }
             .right {
               width:32px;
@@ -147,6 +151,7 @@
           display: flex;
           justify-content: center;
           align-items: center;
+          margin: 0 auto;
           p {
             text-align: center;
           }
@@ -217,7 +222,7 @@
   }
 
   .listArea {
-    height: calc(100vh - 50);
+    height: calc(100vh - 12vw);
     width: 100%;
     overflow-x: hidden;
     overflow-y: scroll;
@@ -293,14 +298,14 @@
           }
 
         }
-
-
       }
       .noneData {
         min-height: pxtovw(100);
         display: flex;
         justify-content: center;
         align-items: center;
+        text-align: center;
+        margin: 0 auto;
         p {
           text-align: center;
         }

pages/user/follow/index.vue

@@ -19,6 +19,7 @@
                 v-for="item in dataList"
                 :key="item.id"
                 :title="item.name"
+                @click="jumpToJishuinHomePageHandler(item)"
               >
                 <div class="topContent">
                   <div class="left">
@@ -29,28 +30,17 @@
                   </div>
                 </div>
                 <div class="descContent">
-                  这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍
-                  {{item.user_info && item.user_info.desc || ""}}
+                  {{item.user_info && item.user_info.jishuquan_description || ""}}
                 </div>
                 <div class="bottomContent">
-                  <div class="left" @click.once="deleteItems(item)"></div>
-                  <div class="right" @click="jumpToJishuinHomePageHandler(item)">
+                  <div class="left" :class="{none: selected === SelectedType.myFans}"
+                    @click.stop="deleteItem(item,
+                  index)"></div>
+                  <div class="right">
                     <img :src="item.user_info && item.user_info.icon_url" alt=""/>
                   </div>
                 </div>
               </div>
-              <!--id: "131"-->
-              <!--user_id: "10468"-->
-              <!--follow_id: "10000"-->
-              <!--created_at: "2019-07-11 22:06:05"-->
-              <!--updated_at: "2019-07-11 22:06:05"-->
-              <!--user_info: {nickname: "程序员客栈", icon_url: "icon100001462323732", uid: "10000", seo_type: "1", certTags: [],…}-->
-              <!--nickname: "程序员客栈"-->
-              <!--icon_url: "icon100001462323732"-->
-              <!--uid: "10000"-->
-              <!--seo_type: "1"-->
-              <!--certTags: []-->
-              <!--seo_uri: "/wo/10000"-->
               <div v-if="dataList.length === 0" class="noneData">
                 <p>没有数据</p>
               </div>
@@ -58,7 +48,7 @@
           </div>
           <div class="pagination">
             <el-pagination background layout="prev, pager, next" :total="page.total"
-              :page-size="page.pageSize" @current-change="pageChange" :current-page="Number(page.current
+              :page-size="page.size" @current-change="pageChange" :current-page="Number(page.page
             )"></el-pagination>
           </div>
         </div>
@@ -106,13 +96,12 @@
                   </div>
                 </div>
                 <div class="descContent">
-                  这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍
-                  {{item.user_info && item.user_info.desc || ""}}
+                  {{item.user_info && item.user_info.jishuquan_description || ""}}
                 </div>
               </div>
             </div>
-            <template #right>
-              <van-button square text="删除" type="danger" class="delete-button" @click="deleteItem(item)"/>
+            <template #right v-if="selected !== SelectedType.myFans">
+              <van-button square text="删除" type="danger" class="delete-button" @click="deleteItem(item, inde)"/>
             </template>
           </van-swipe-cell>
         </van-list>
@@ -159,14 +148,16 @@
         selected: SelectedType.myFollow,
         SelectedType,
         page: {
-          current: 1,
-          total: 0
+          page: 1,
+          total: 0,
+          size: 18,
         },
         dataList: [],
+        finished: false, //移动端列表是否完全加载完成
         loading: false,
         refreshing: false,
         firstLoading: false, //移动端加载loading
-        isLoading: false
+        isLoading: false //控制防止一次没响应，重复请求接口
       }
     },
     watch: {},
@@ -189,6 +180,7 @@
     created() {
       this.checkLogin()
       this.getList()
+
     },
     mounted() {
       // this.getList()
@@ -226,18 +218,17 @@
         this.$axios.post(url, page).then(res => {
           if (Number(res.data.status) === 1) {
             let data = res.data.data
-            this.dataList = [ ...data ]
-            // this.page.total = data.total
-            // if (this.page.page === 1 || !this.mobile) {
-            //   this.dataList = [ ...data ]
-            // } else {
-            //   this.dataList = [ ...this.dataList, ...data.list ]
-            // }
-            // this.page.page += 1
-            // this.page.current = Number(data.page)
-            // if (this.page.total <= this.dataList.length) {
-            //   this.finished = true
-            // }
+            let list = data.followers || data.fans || []
+            this.page.total = data.total
+            if (this.page.page === 1 || !this.mobile) {
+              this.dataList = [ ...list ]
+            } else {
+              this.dataList = [ ...this.dataList, ...list]
+            }
+            this.page.page += 1
+            if (this.page.total <= this.dataList.length) {
+              this.finished = true
+            }
           }
         }).finally(() => {
           this.firstLoading = false
@@ -246,22 +237,18 @@
           this.$nextTick(() => {
             this.loading = false
           })
-          console.log("this.finished", this.finished)
         })
       },
       pageChange(i) {
         this.page.page = i
         this.getList()
       },
-      jumpToCompanyInfo(item) {
-        const { companyInfo: { uid } } = item
-        window.open(`/wo/${uid}`, `targetCompany${uid}`)
-      },
       /** 移动端下拉刷新 **/
       onRefresh() {
         // 清空列表数据
         this.finished = false;
-        console.log('onRefresh')
+        this.page.page = 1
+        this.page.total = 0
         this.onLoad();
       },
       onLoad() {
@@ -270,14 +257,25 @@
       },
 
       /** 删除项目 **/
-      deleteItem(item) {
+      deleteItem(item, index) {
         const { follow_id } = item || {}
         //todo delete
         console.log("item:", item)
+       this.$axios.post("/api/user/follow", {
+         follow_id: follow_id
+       }).then(res=>{
+         if (Number(res.data.status) === 1) {
+           this.dataList.splice(index, 1)
+           this.$message.success("操作成功！")
+         }
+       })
       },
       /** 跳转到技术圈主页 **/
-      jumpToJishuinHomePageHandler() {
-
+      jumpToJishuinHomePageHandler(item) {
+        const {follow_id} = item
+        const {jishuinUrl} = this.$store.state.domainConfig
+        window.open(`${jishuinUrl}/user/${follow_id}`, `jishuin${follow_id}`)
+        return false
       }
     }
   }