horzi_rai_wxa/pages-purchaser/columnDetail/columnDetail.vue

<template>
  <view class="container column-detail">
    <view :class="['position-regular', scrollTopNumber != 0 && 'position-content-bg']" :style="{ 'background-image': scrollTopNumber == 0 ? `url(${authorDetail.BgImg})` : '' }">
      <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
        <view class="content-box" :style="{ color: scrollTopNumber == 0 ? '#fff' : '#333' }">
          <text v-if="scrollTopNumber != 0">专栏详情</text>
          <view class="arrow-left-icon">
            <van-icon name="arrow-left" size="20px" @click="goHandler" />
          </view>
        </view>
      </view>
      <view class="name-author">
        <view class="author-img">
          <view class="img-box">
            <image :src="authorDetail.HeadImg"></image>
          </view>
          <view class="set-btn" @click="followAuthor">{{ authorDetail.IsFollow == 1 ? "取消关注" : "+ 关注" }}</view>
        </view>
        <view class="name-box" :style="{ color: scrollTopNumber == 0 ? '#fff' : '#333' }">
          <text>{{ authorDetail.SpecialName }}</text>
          <text>{{ authorDetail.NickName }}</text>
        </view>
      </view>
    </view>
    <view class="info-lable-card" :style="{ 'background-image': `url(${authorDetail.BgImgDown})` }">
      <view class="info-card-lable">
        <text v-for="item in dataProcessing(authorDetail.Label)" :key="item">{{ item }}</text>
      </view>
      <view class="info-card-fans">
        <text>{{ authorDetail.SpecialArticleNum }}</text>
        <text>文章</text>
        <text>{{ authorDetail.CollectNum }}</text>
        <text>被收藏</text>
        <text>{{ authorDetail.FollowNum }}</text>
        <text>粉丝</text>
      </view>
      <view style="color: #fff; margin-top: 20rpx"> {{ authorDetail.Introduction }}</view>
    </view>
    <view class="column-list-content" v-if="specialList && specialList.length > 0">
      <column-list-content :authorDetail="authorDetail" :mySpecialList="specialList" @upDateCollectHandler="upDateCollectHandler" />
    </view>
    <Loading />
  </view>
</template>

<script>
import ColumnListContent from "../components/columnListContent.vue";
import infoCard from "../components/infoCard.vue";
import { purchaserApi } from "@/config/api";
export default {
  components: { infoCard, ColumnListContent },
  data() {
    return {
      navBarStyle: {
        height: 60 + "px",
        paddingTop: 40 + "px",
        paddingBottom: "4px",
      },
      scrollTopNumber: 0,
      authorDetail: {},
      specialList: [],
      detailUserId: 0,
    };
  },
  methods: {
    initNavBar() {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.navBarStyle = {
        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
        paddingTop: menuButtonInfo.top - 4 + "px",
        paddingBottom: "4px",
      };
    },
    // 获取作者详情
    async getAuthorDetail() {
      const res = await purchaserApi.yanxuanSpecialAuthorDetail({ UserId: this.detailUserId });
      if (res.Ret === 200) {
        this.authorDetail = res.Data || {};
        this.getColumnList();
      }
    },
    // 获取专栏列表
    async getColumnList() {
      const res = await purchaserApi.yanxuanSpecialList({ UserId: this.authorDetail.UserId });
      if (res.Ret === 200) {
        this.specialList = res.Data.List || [];
      }
    },
    // 数据处理
    dataProcessing(item) {
      return item ? item.split(",") : [];
    },
    // 点击关注作者
    async followAuthor() {
      await this.$store.dispatch("checkHandle");
      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
        //已授权已绑定
        let Status = this.authorDetail.IsFollow == 1 ? 2 : 1;
        const res = await purchaserApi.yanxuanSpecialFollow({
          FollowUserId: this.authorDetail.UserId,
          Status,
        });
        if (res.Ret === 200) {
          this.authorDetail.IsFollow = Status;
          Status == 1 &&
            uni.showModal({
              title: "已关注专栏",
              content: "请关注【查研观向小助手】 公众号，及时获取专栏下内容更新提醒",
              confirmText: "知道了",
              showCancel: false,
              confirmColor: "#3385FF",
            });
        }
      }
    },
    // 左上角的返回按钮
    goHandler() {
      uni.navigateBack({
        fail() {
          uni.switchTab({
            url: "/pages/index/index",
          });
        },
      });
    },
    // 更新收藏
    upDateCollectHandler(item) {
      this.specialList.forEach((key) => {
        if (key.Id === item.Id) {
          console.log(key);
          key.CollectNum = item.IsCollect == 1 ? item.CollectNum - 1 : item.CollectNum + 1;
          key.IsCollect = item.IsCollect == 1 ? 0 : 1;
        }
      });
    },
  },
  onLoad(opacity) {
    this.detailUserId = Number(opacity.id) || 0;
    this.initNavBar();
    this.getAuthorDetail();
  },
  onPageScroll(e) {
    this.scrollTopNumber = e.scrollTop;
  },
};
</script>

<style lang="scss" scope>
.column-detail {
  position: relative;
  background-color: #f3f5f9;
  .scroll-top-content,
  .position-content-bg {
    background-color: #fff;
  }

  .position-regular {
    position: sticky;
    height: 350rpx;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .name-author {
      z-index: 99;
      display: flex;
      height: 178rpx;
      padding: 20rpx 40rpx;
      .author-img {
        position: relative;
        display: flex;
        justify-content: center;
        width: 126rpx;
        height: 138rpx;
        text-align: center;
        .img-box {
          width: 110rpx;
          height: 110rpx;
          border-radius: 50%;
          overflow: hidden;
          image {
            width: 110rpx;
            height: 110rpx;
          }
        }
        .set-btn {
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          left: 0;
          bottom: 0;
          width: 126rpx;
          height: 48rpx;
          border-radius: 150rpx;
          background-color: #376cbb;
          color: #fff;
        }
      }
      .name-box {
        color: #fff;
        margin-left: 20rpx;
        text:nth-child(1) {
          font-size: 36rpx;
          font-weight: 500;
          line-height: 50rpx;
          padding: 20rpx 0;
        }
        text:nth-child(2) {
          font-size: 28rpx;
          font-weight: 400;
          line-height: 39rpx;
        }
      }
    }
  }
  .nav-bar-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 99;
    .content-box {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: center;
      color: #fff;
      font-size: 34rpx;
      .arrow-left-icon {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40rpx;
        height: 40rpx;
        left: 39rpx;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
      }
    }
  }
  .column-list-content {
    // position: absolute;
    width: 682rpx;
    margin: 30rpx auto 0;
    border-radius: 12rpx 12rpx 0 0;
    // top: 580rpx;
    // right: 50%;
    // transform: translateX(50%);
    // z-index: 9;
    overflow: hidden;
  }
  .info-lable-card {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0 30rpx 35rpx;
    .info-card-lable {
      display: flex;
      flex-wrap: wrap;
      text {
        display: flex;
        align-items: center;
        height: 45rpx;
        padding: 0 12rpx;
        border-radius: 150rpx;
        background-color: rgba(255, 255, 255, 0.4);
        margin: 20rpx 20rpx 0rpx 0;
        color: #fff;
        font-size: 28rpx;
      }
    }
    .info-card-fans {
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      text:nth-child(2n + 1) {
        color: #ffe8a8;
        font-size: 38rpx;
        font-weight: 500;
      }
      text:nth-child(2n) {
        margin: 0 40rpx 0 5rpx;
        color: #fff;
      }
    }
  }
}
</style>