zhishifufei_uniapp/pages/my/follow_lecturer.vue

<template>
  <BaseContainer :fixedNav="false">
    <NavBarTitle title="我的关注" :height="200"/>
    <view v-cloak  class="my-follow">
      <navigator v-for="item in followList" :key="item.id" class="item"  hover-class="none" :url="`/pages/merchant/teacher_detail?id= ${item.id}`">
          <view class="avatar">
              <image :src="item.lecturer_head" alt=""/>
          </view>
          <view class="text">
              <view class="name">{{ item.lecturer_name }}</view>
              <view class="tags">
                  <view v-for="label in item.label" :key="label" class="tag">{{ label }}</view>
              </view>
              <view class="attr">{{ item.study }}人学习 | {{ item.curriculum }}课时</view>
          </view>
          <button @click.prevent="follow(item)">取消关注</button>
      </navigator>
      <image v-if="!followList.length && finished" class="empty" :src="getImgPath('/wap/first/zsff/images/empty.png')" alt=""/>
  </view>
  </BaseContainer>
</template>

<script>
  import {
    getFollowList,
    follow
  } from "@/api/merchant";


  export default {
    data() {
      return {
        page: 1,
        limit: 16,
        followList: [],
        finished: false
      };
    },
    onLoad() {
      this.getFollowList();
    },
    methods: {
      // 获取关注的讲师
      getFollowList() {
        let vm = this;
        if (this.finished) {
          return;
        }
        uni.showLoading({
          title: '加载中'
        });
        getFollowList({
          page: this.page++,
          limit: 15
        }).then(res => {
          uni.hideLoading();
          var followList = res.data;
          followList.forEach(function (item) {
            item.label = JSON.parse(item.label);
          });
          vm.followList = vm.followList.concat(followList);
          vm.finished = vm.limit > followList.length;
        })
      },
      // 取消关注
      follow: function (item) {
        let vm = this;
        follow({
          mer_id: item.mer_id,
          is_follow: 0
        }).then(res => {
          for (var i = 0; i < vm.followList.length; i++) {
            if (vm.followList[i].id === item.id) {
              vm.followList.splice(i, 1);
              break;
            }
          }
          this.$util.showMsg('取消关注成功')
        })
      }
    },
  };
</script>
<style>
  page {
    background-color: #F5F5F5;
  }
  </style>
<style scoped lang="scss">

  .my-follow{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: calc(128rpx + var(--safe-top));
    width: 686rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    z-index: 999;
  }
  .my-follow .item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-top: 2rpx solid #F5F5F5;
    background-color: #FFFFFF;
    border-radius: 24rpx;

  }

  .my-follow .item:first-child {
    border-top: none;
  }

  .my-follow .avatar {
    width: 130rpx;
    height: 130rpx;
    border-radius: 50%;
    overflow: hidden;
  }
  .my-follow .avatar image{
    width: 100%;
    height: 100%;
  }

  .my-follow .text {
    flex: 1;
    margin-left: 22rpx;
  }

  .my-follow .name {
    font-weight: 500;
    font-size: 30rpx;
    line-height: 42rpx;
    color: #282828;
  }

  .my-follow .tags {
    display: flex;
    margin-top: 10rpx;
  }

  .my-follow .tag {
    height: 32rx;
    padding: 0 12rpx;
    border-radius: 4rpx;
    margin-left: 10rpx;
    background-color: rgba(255, 107, 0, 0.1);
    font-size: 22rpx;
    line-height: 32rpx;
    color: #FF6B00;
  }

  .my-follow .tag:first-child {
    margin-left: 0;
  }

  .my-follow .attr {
    margin-top: 10rpx;
    font-size: 26rpx;
    line-height: 37rpx;
    color: #666666;
  }

  .my-follow button {
    width: 120rpx;
    height: 48rpx;
    border: 2rpx solid #999999;
    border-radius: 24rpx;
    font-size: 22rpx;
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .my-follow button .iconfont {
    margin-right: 5rpx;
    vertical-align: middle;
    font-size: 15rpx;
  }

  .my-follow .followed {
    border-color: #999999;
    color: #999999;
  }

  .my-follow .empty {
    display: block;
    width: 414rpx;
    margin: 100rpx auto 0;
  }
</style>