我的关注列表

pages/user/follow/index.vue

@@ -0,0 +1,291 @@
+<template>
+  <div :class="{isMobile: mobile}">
+    <div v-if="!mobile">
+      <div class="followAreaShow">
+        <div class="contentArea">
+          <div class="selectArea">
+            <div class="myFollow"
+              :class="{selected: selected === SelectedType.myFollow}"
+              @click="changeSelected(SelectedType.myFollow)"
+            ><p>我的关注</p></div>
+            <div class="myFans"
+              :class="{selected: selected === SelectedType.myFans}"
+              @click="changeSelected(SelectedType.myFans)"
+            ><p>我的粉丝</p></div>
+          </div>
+          <div class="listArea">
+            <div class="list" v-loading="loading">
+              <div class="cell"
+                v-for="item in dataList"
+                :key="item.id"
+                :title="item.name"
+              >
+                <div class="topContent">
+                  <div class="left">
+                    {{item.user_info && item.user_info.nickname || ""}}
+                  </div>
+                  <div class="right">
+                    {{item.updated_at}}
+                  </div>
+                </div>
+                <div class="descContent">
+                  这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍
+                  {{item.user_info && item.user_info.desc || ""}}
+                </div>
+                <div class="bottomContent">
+                  <div class="left" @click.once="deleteItems(item)"></div>
+                  <div class="right" @click="jumpToJishuinHomePageHandler(item)">
+                    <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>
+            </div>
+          </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
+            )"></el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="followAreaShowMobile">
+      <div class="selectArea">
+        <div class="myFollow"
+          :class="{selected: selected === SelectedType.myFollow}"
+          @click="changeSelected(SelectedType.myFollow)"
+        ><p>我的关注</p></div>
+        <div class="myFans"
+          :class="{selected: selected === SelectedType.myFans}"
+          @click="changeSelected(SelectedType.myFans)"
+        ><p>我的粉丝</p></div>
+      </div>
+      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="listArea">
+        <div style="text-align: center" v-if="firstLoading">
+          <van-loading size="24px">加载中...</van-loading>
+        </div>
+        <van-list
+          v-else
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+          :immediate-check="false"
+          class="list"
+        >
+          <van-swipe-cell
+            class="cell"
+            v-for="(item, index) in dataList" :key="'dataList' + index"
+          >
+            <div class="cellContent">
+              <div class="left">
+                <img :src="item.user_info && item.user_info.icon_url" alt="">
+              </div>
+              <div class="right">
+                <div class="topContent">
+                  <div class="leftC">
+                    {{item.user_info && item.user_info.nickname || ""}}
+                  </div>
+                  <div class="rightC">
+                    {{item.updated_at}}
+                  </div>
+                </div>
+                <div class="descContent">
+                  这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍这里是个人介绍
+                  {{item.user_info && item.user_info.desc || ""}}
+                </div>
+              </div>
+            </div>
+            <template #right>
+              <van-button square text="删除" type="danger" class="delete-button" @click="deleteItem(item)"/>
+            </template>
+          </van-swipe-cell>
+        </van-list>
+      </van-pull-refresh>
+    </div>
+  </div>
+</template>
+
+<script>
+  const SelectedType = {
+    myFollow: 1,
+    myFans: 2
+  }
+  export default {
+    name: "FollowListSeoIndex",
+    // layout: "opacity_header",
+    showCommonFooter: false,
+    components: {},
+    head() {
+      let obj = {
+        title: "我的关注-程序员客栈",
+        meta: [
+          {
+            'name': 'keywords',
+            'content': ""
+          }, {
+            'name': 'descrption',
+            'content': ""
+          }, {
+            'name': 'h1',
+            'content': ""
+          }
+        ]
+      }
+      return obj
+    },
+    async asyncData({ app }) {
+      return {
+        mobile: app.$deviceType.isMobile()
+      }
+    },
+    data() {
+      return {
+        selected: SelectedType.myFollow,
+        SelectedType,
+        page: {
+          current: 1,
+          total: 0
+        },
+        dataList: [],
+        loading: false,
+        refreshing: false,
+        firstLoading: false, //移动端加载loading
+        isLoading: false
+      }
+    },
+    watch: {},
+    computed: {
+      canSelectCity() {
+        //远程无法选中地区
+        return this.selected.workType !== 1
+      },
+      calcName() {
+        const { direction, directionSmall, directionName = "", directionSmallName = "", } = this.selected
+        let job = directionSmall || direction
+        let jobName = directionSmallName === "全部" ? directionName : (directionSmallName || directionName)
+
+        return {
+          text: jobName || '全部职业',
+          value: job
+        }
+      }
+    },
+    created() {
+      this.checkLogin()
+      this.getList()
+    },
+    mounted() {
+      // this.getList()
+      if (this.mobile) {
+        document.body.style = "overflow:hidden;"
+      }
+    },
+    methods: {
+      changeSelected(type) {
+        if (this.selected !== type) {
+          this.selected = type
+          this.page.page = 1
+          this.page.total = 0
+          this.getList()
+        }
+      },
+      changeExpansion(key) {
+        this.expansion[ key ] = !this.expansion[ key ]
+      },
+      getList() {
+        const { page } = this
+
+        let url = ""
+        if (this.selected === SelectedType.myFollow) {
+          url = "/api/community/follow/followers"
+        } else {
+          url = "/api/community/follow/fans"
+        }
+
+        if (this.isLoading) {
+          return
+        }
+        this.loading = true
+        this.isLoading = true
+        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
+            // }
+          }
+        }).finally(() => {
+          this.firstLoading = false
+          this.refreshing = false
+          this.isLoading = false
+          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.onLoad();
+      },
+      onLoad() {
+        console.log('onLoad')
+        this.getList()
+      },
+
+      /** 删除项目 **/
+      deleteItem(item) {
+        const { follow_id } = item || {}
+        //todo delete
+        console.log("item:", item)
+      },
+      /** 跳转到技术圈主页 **/
+      jumpToJishuinHomePageHandler() {
+
+      }
+    }
+  }
+</script>
+
+<style scope lang="scss">
+  .delete-button {
+    height: 100%;
+  }
+  @import "../../../assets/css/user/follow.scss";
+</style>