horzi_rai_wxa/pages-purchaser/myColumnDetail/myColumnDetail.vue

<template>
  <view class="container my-column-detail">
    <view class="set-up-info">
      <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" />
          <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="page_no > 1" />
        </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>
  </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,
      page_no: 1,
      pageSize: 10,
      status: "loadmore",
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
    };
  },
  methods: {
    // 添加标签的确认事件
    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 getAuthorDetail() {
      const res = await purchaserApi.yanxuanSpecialAuthorDetail();
      if (res.Ret === 200) {
        this.authorDetail = res.Data || {};
        this.getYanxuanSpecialList();
      }
    },
    async getYanxuanSpecialList() {
      const res = await purchaserApi.yanxuanSpecialList({
        UserId: this.authorDetail.UserId,
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
      });
      if (res.Ret === 200) {
        this.status = res.Data.Paging.IsEnd ? "nomore" : "loadmore";
        this.isAuthor = res.Data.IsAuthor;
        this.isImproveInformation = res.Data.IsImproveInformation;
        this.mySpecialList = this.page_no == 1 ? res.Data.List || [] : this.mySpecialList.concat(res.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;
        }
      });
    },
  },
  /** 用户点击分享 */
  //   onShareAppMessage: function (res) {
  //     return {
  //       title: "研选专栏",
  //       path: "",
  //     };
  //   },
  /* 下拉刷新 */
  onPullDownRefresh() {},
  onShow() {
    this.getAuthorDetail();
  },
  // 下滑触底
  onReachBottom() {
    if (this.status == "nomore") return;
    this.page_no++;
    this.getYanxuanSpecialList();
    this.status = "loading";
  },
};
</script>

<style lang="scss" scope>
.my-column-detail {
  background-color: $uni-bg-color;
  input {
    height: 72rpx;
    background-color: #f0f1f3;
    padding-left: 24rpx;
    border-radius: 12rpx;
  }

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