horzi_rai_wxa/pages-purchaser/specialColumn/specialColumn.vue

<template>
  <view class="container special-column">
    <view class="tab-content" v-if="isAuthor">
      <view class="item" v-for="item in tabList" :key="item.value" @click="tabClickHandler(item)">
        {{ item.name }}
        <view class="line-active" v-if="tabActive == item.value"> </view>
      </view>
    </view>
    <view class="item-ul" v-if="tabActive == 1">
      <view class="item-li" v-for="item in specialList" :key="item.Id" @click="goDetailPages(item)">
        <view class="item-title"> {{ item.SpecialName }}</view>
        <view class="item-name-time">
          <view class="name">
            <image :src="item.HeadImg"></image>
            <text> {{ item.NickName }}</text>
          </view>
          <view class="time"> {{ item.LatestPublishDate }}</view>
        </view>
        <view class="item-content"> 专栏介绍： {{ item.Introduction }} </view>
      </view>
    </view>
    <view class="set-up-info" v-if="tabActive == 2">
      <block v-if="(authorDetail.NickName || authorDetail.SpecialName) && isEditInfo">
        <info-card :authorDetail="authorDetail" pagesType="专栏详情" @editColumnHandler="editColumnHandler" />
        <view class="column-list-content">
          <column-list-content :authorDetail="authorDetail" :mySpecialList="mySpecialList" @upDateCollectHandler="upDateCollectHandler" />
        </view>
        <view class="write-note-button">
          <view class="draft" @click="goContentPage"> 内容中心</view>
          <view class="release" @click="goReleaseContent"> 发布新内容</view>
        </view>
      </block>
      <block v-else>
        <view class="info-name info-box">
          <block v-if="isEditInfo">
            <text class="seting-txt">首次进入我的专栏</text>
            <text class="seting-txt">请设置您的专栏信息</text>
          </block>
          <text class="seting-txt" v-else>编辑专栏</text>
          <input v-model="columnName" placeholder="请输入专栏名称（最多12个字）" />
          <input v-model="columnNickname" placeholder="请输入昵称（最多12个字）" />
        </view>
        <view class="set-up-lable info-box">
          <view class="top-box">
            <view class="lable-txt">
              专栏标签
              <text>（选填）</text>
            </view>
            <view v-if="columnLableList.length < 6" class="new-lable" @click="addlableShow = true">+ 新建标签</view>
          </view>
          <view class="column-lable">
            <view class="lable-item" v-for="(item, index) in columnLableList" :key="index">
              <text>{{ item }}</text>
              <van-icon name="cross" @click="deleteLablehandle(index)" />
            </view>
          </view>
        </view>
        <view class="set-up-info info-box" style="height: 480rpx">
          <view class="lable-txt"> 专栏介绍 </view>
          <u-input :maxlength="30" v-model="columnIntroduce" type="textarea" :clearable="false" placeholder="请输入专栏介绍 " height="300" class="ipt" />
        </view>
        <view class="my-btn" @click="infoDetermineHandler"> {{ isEditInfo ? "进入我的专栏" : "保存" }} </view>
      </block>
    </view>
    <u-modal
      v-model="addlableShow"
      :show-title="false"
      show-cancel-button
      confirm-text="确定"
      cancel-text="取消"
      :content-style="{ fontSize: '32rpx' }"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
      :confirm-style="{ fontWeight: '700' }"
      @confirm="confirmModal"
      @cancel="cancelModal"
    >
      <view class="slot-content slot-content-text">
        <text class="add-lable-txt">新建标签</text>
        <input v-model="addLableName" placeholder="请输入标签名称（最多8个字）" />
      </view>
    </u-modal>
    <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 {
      tabList: [
        { name: "专栏列表", value: "1" },
        { name: "我的专栏", value: "2" },
      ],
      specialList: [], // 专栏列表
      mySpecialList: [], // 专栏列表
      isAuthor: false, // 是否是作者
      authorDetail: {}, // 作者的详情信息
      tabActive: "1",
      addlableShow: false,
      columnName: "",
      columnNickname: "",
      columnIntroduce: "",
      columnLableList: [],
      addLableName: "",
      isEditInfo: true,
      refresh:false
    };
  },
  methods: {
    // top标签点击事件
    tabClickHandler(item) {
      this.tabActive = item.value;
    },
    // 添加标签的确认事件
    confirmModal() {
      if (!this.addLableName) return this.$util.toast("未添加标签");
      this.columnLableList.push(this.addLableName.slice(0, 8));
      this.addLableName = "";
    },
    // 添加标签的取消事件
    cancelModal() {
      this.addLableName = "";
    },
    // 信息填写完成 进入我的专栏
    async infoDetermineHandler() {
      if (this.columnName && this.columnNickname && this.columnIntroduce) {
        const res = await purchaserApi.yanxuanSpecialAuthorSave({
          SpecialName: this.columnName.slice(0, 12),
          NickName: this.columnNickname.slice(0, 12),
          Introduction: this.columnIntroduce,
          Label: this.columnLableList.join(","),
          UserId: this.authorDetail.UserId,
        });
        if (res.Ret === 200) {
          this.getAuthorDetail();
          this.isEditInfo = true;
        }
      } else {
        let str = !this.columnName ? "专栏名称" : !this.columnNickname ? "专栏昵称" : !this.columnIntroduce ? "专栏介绍" : "";
        this.$util.toast("请输入" + str);
      }
    },
    // 删除新建标签
    deleteLablehandle(index) {
      this.columnLableList.splice(index, 1);
    },
    async getColumnList() {
      const res = await purchaserApi.yanxuanSpecialAuthorList();
      if (res.Ret === 200) {
        this.specialList = res.Data.List || [];
        this.isAuthor = res.Data.IsAuthor;
        this.isAuthor && this.getAuthorDetail();
        if (this.refresh) {
          uni.stopPullDownRefresh();
          this.refresh = false;
        }
      }
    },
    async getAuthorDetail() {
      const res = await purchaserApi.yanxuanSpecialAuthorDetail();
      if (res.Ret === 200) {
        this.authorDetail = res.Data || {};
        const myRes = await purchaserApi.yanxuanSpecialList({
          UserId: this.authorDetail.UserId,
        });
        if (myRes.Ret === 200) {
          this.mySpecialList = myRes.Data.List || [];
        }
      }
    },
    // 去往专栏详情
    goDetailPages(item) {
      uni.navigateTo({ url: "/pages-purchaser/columnDetail/columnDetail?id=" + item.UserId });
    },
    // 去往内容中心
    goContentPage() {
      uni.navigateTo({ url: "/pages-purchaser/contentAllPage/contentAllPage" });
    },
    // 去发布新内容
    goReleaseContent() {
      uni.navigateTo({ url: "/pages-purchaser/writeNote/writeNote" });
    },
    // 编辑专栏
    editColumnHandler() {
      this.columnName = this.authorDetail.SpecialName;
      this.columnNickname = this.authorDetail.NickName;
      this.columnIntroduce = this.authorDetail.Introduction;
      this.columnLableList = this.authorDetail.Label ? this.authorDetail.Label.split(",") : [];
      this.isEditInfo = false;
    },
    // 更新收藏
    upDateCollectHandler(item) {
      this.mySpecialList.forEach((key) => {
        if (key.Id === item.Id) {
          key.CollectNum = item.IsCollect == 1 ? item.CollectNum - 1 : item.CollectNum + 1;
          key.IsCollect = item.IsCollect == 1 ? 0 : 1;
        }
      });
    },
  },
  onShow() {
    this.getColumnList();
  },
  /** 用户点击分享 */
  onShareAppMessage: function (res) {
    return {
      title: "研选专栏",
      path: "/pages-purchaser/specialColumn/specialColumn",
    };
  },
  /* 下拉刷新 */
  onPullDownRefresh() {
    this.refresh = true;
    this.getColumnList();
  },
};
</script>

<style lang="scss" scope>
.special-column {
  background-color: $uni-bg-color;
  input {
    height: 72rpx;
    background-color: #f0f1f3;
    padding-left: 24rpx;
    border-radius: 12rpx;
  }
  .tab-content {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    margin-top: 1rpx;
    background-color: #fff;
    height: 96rpx;
    display: flex;
    view {
      flex: 1;
      text-align: center;
      line-height: 96rpx;
      border-bottom: 2rpx solid #e7e7e7;
    }
    .item {
      position: relative;
      .line-active {
        position: absolute;
        left: 50%;
        bottom: 0rpx;
        width: 32rpx;
        height: 6rpx;
        border-radius: 6rpx;
        background-color: #376cbb;
        transform: translateX(-50%);
      }
    }
  }
  .item-ul {
    padding: 30rpx;
    .item-li {
      padding: 0 30rpx 30rpx;
      background-color: white;
      border-radius: 16rpx;
      border-top: 10rpx solid #8fa4c4;
      margin-bottom: 20rpx;
      .item-title {
        margin-top: 20rpx;
        font-size: 34rpx;
        font-weight: 500;
      }
      .item-name-time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80rpx;
        font-size: 28rpx;
        color: #999;
        .name {
          display: flex;
          align-items: center;
          image {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            margin-right: 10rpx;
          }
        }
      }
      .item-content {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
      }
    }
  }
  .set-up-info {
    padding: 30rpx;
    overflow: hidden;
    .info-name {
      width: 100%;
      padding: 40rpx;
      border-radius: 16rpx;
      color: #333;
      background-color: #fff;
      .seting-txt {
        text-align: center;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
      }
      .item-txt {
        margin-top: 40rpx;
        margin-bottom: 5rpx;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 40rpx;
      }
      input {
        margin-top: 40rpx;
      }
    }
    .set-up-lable {
      .top-box {
        display: flex;
        background-color: #fff;
        justify-content: space-between;

        .new-lable {
          color: #376cbb;
        }
      }
    }
    .lable-txt {
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
      display: flex;
      text {
        color: #999;
        flex-wrap: 400;
      }
    }
    .info-box {
      padding: 40rpx;
      border-radius: 16rpx;
      color: #333;
      background-color: #fff;
      margin-bottom: 30rpx;
    }
    .ipt {
      height: 300rpx;
    }
  }
  .u-input {
    margin-top: 10rpx;
    background-color: #f0f1f3;
  }
  .u-input__textarea {
    padding: 20rpx !important;
  }
  .my-btn {
    margin: 50rpx 0;
    width: 100%;
    height: 72rpx;
    padding: 18rpx 30rpx 18rpx 30rpx;
    border-radius: 9rpx;
    background: #376cbb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .add-lable-txt {
    color: #000;
    font-size: 36rpx;
    flex-wrap: 600;
    margin-bottom: 20rpx;

    width: 100%;
    text-align: center;
  }
  .column-lable {
    display: flex;
    flex-wrap: wrap;
    .lable-item {
      display: flex;
      color: #fff;
      font-size: 28rpx;
      padding: 10rpx 24rpx;
      background-color: #376cbb;
      border-radius: 153px;
      margin: 20rpx 20rpx 0 0;
      text {
        margin-right: 12rpx;
      }
    }
  }
  .slot-content-text {
    text-align: left;
  }
  .write-note-button {
    position: fixed;
    width: 100%;
    bottom: 10rpx;
    left: 0rpx;
    z-index: 99;
    display: flex;
    padding: 0 35rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .draft {
      margin-right: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 216rpx;
      height: 72rpx;
      color: #376cbb;
      background-color: #e5efff;
      border-radius: 9rpx;
    }
    .release {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 72rpx;
      border-radius: 9rpx;
      color: #ffff;
      background-color: #376cbb;
    }
  }
  .column-list-content {
    margin-top: 20rpx;
  }
}
</style>