proginn-frontend/pages/user/follow/_uid.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>{{isSelf ? "我的": ""}}关注</p></div>
            <div class="myFans"
              :class="{selected: selected === SelectedType.myFans}"
              @click="changeSelected(SelectedType.myFans)"
            ><p>{{isSelf ? "我的": ""}}粉丝</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"
                @click="jumpToJishuinHomePageHandler(item)"
              >
                <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.jishuquan_description || ""}}
                </div>
                <div class="bottomContent">
                  <div class="left"
                    v-if="isSelf"
                    :class="{none: selected === SelectedType.myFans }"
                    @click.stop="deleteItem(item, index)"></div>
                  <div class="left none" v-else></div>

                  <div class="right">
                    <img :src="item.user_info && item.user_info.icon_url" alt=""/>
                  </div>
                </div>
              </div>
              <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.size" @current-change="pageChange" :current-page="Number(page.page
            )"></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>{{isSelf ? "我的": ""}}关注</p></div>
        <div class="myFans"
          :class="{selected: selected === SelectedType.myFans}"
          @click="changeSelected(SelectedType.myFans)"
        ><p>{{isSelf ? "我的": ""}}粉丝</p></div>
      </div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="listArea" :class="{noneInWx: !$deviceType.app}">
        <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"
            :disabled="selected === SelectedType.myFans || !isSelf"
            v-for="(item, index) in dataList" :key="'dataList' + index"
          >
            <div class="cellContent"  @click="jumpToJishuinHomePageHandler(item)">
              <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.jishuquan_description || ""}}
                </div>
              </div>
            </div>
            <template #right>
              <van-button square text="删除" type="danger" class="delete-button" @click="deleteItem(item, index)"/>
            </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': 'description',
            'content': ""
          }, {
            'name': 'h1',
            'content': ""
          }
        ]
      }
      return obj
    },
    async asyncData({ app }) {
      return {
        mobile: app.$deviceType.isMobile()
      }
    },
    data() {
      return {
        uid: "", // 当前用户uid
        selected: SelectedType.myFollow,
        SelectedType,
        page: {
          page: 1,
          total: 0,
          size: 18,
        },
        dataList: [],
        finished: false, //移动端列表是否完全加载完成
        loading: false,
        refreshing: false,
        firstLoading: false, //移动端加载loading
        isLoading: false //控制防止一次没响应，重复请求接口
      }
    },
    watch: {},
    computed: {
      loginUser() {
        return this.$store.state.userinfo || {}
      },
      isSelf() {
        return Number(this.loginUser.uid) === Number(this.uid)
      }
    },
    created() {
      const {uid} = this.$route.params || {}
      let {type} = this.$route.query || {}
      type = Number(type)
      if (type === SelectedType.myFollow || type === SelectedType.myFans) {
        this.selected = type
      }
      this.uid = uid
      this.checkLogin()
      this.getList()
    },
    mounted() {
      console.log(this)
      // 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,
          uid: this.uid,
        }).then(res => {
          if (Number(res.data.status) === 1) {
            let data = res.data.data
            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
          this.refreshing = false
          this.isLoading = false
          this.$nextTick(() => {
            this.loading = false
          })
        })
      },
      pageChange(i) {
        this.page.page = i
        this.getList()
      },
      /** 移动端下拉刷新 **/
      onRefresh() {
        // 清空列表数据
        this.finished = false;
        this.page.page = 1
        this.page.total = 0
        this.onLoad();
      },
      onLoad() {
        console.log('onLoad')
        this.getList()
      },

      /** 删除项目 **/
      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(item) {
        const {follow_id, user_id} = item
        const {jishuinUrl} = this.$store.state.domainConfig

        let uid = ''
        if (this.selected === SelectedType.myFollow) {
          uid = follow_id
        } else if (this.selected === SelectedType.myFans) {
          uid = user_id
        }

        window.open(`${jishuinUrl}/u/${uid}`, `jishuin${uid}`)
        return false
      }
    }
  }
</script>

<style scope lang="scss">
  .delete-button {
    height: 100%;
  }
  @import "../../../assets/css/user/follow.scss";
</style>