proginn-frontend/pages/user/follow/index.vue

<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>