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.Title }}</view>
        <view class="item-name-time">
          <view class="name"> {{ item.RealName }}</view>
          <view class="time"> {{ item.PublishTime.slice(0, 10) }}更新</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">
        <info-card :authorDetail="authorDetail" pagesType="专栏详情" />
        <column-list-content :authorDetail="authorDetail" :mySpecialList="mySpecialList" />
      </block>
      <block v-else>
        <view class="info-name info-box">
          <text class="seting-txt">首次进入我的专栏</text>
          <text class="seting-txt">请设置您的专栏信息</text>
          <input v-model="columnName" placeholder="请输入专栏名称" />
          <input v-model="columnNickname" placeholder="请输入昵称" />
        </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">
          <view class="lable-txt"> 专栏介绍 </view>
          <u-input v-model="columnIntroduce" type="textarea" :clearable="false" placeholder="请输入专栏介绍 " height="300" class="ipt" />
        </view>
        <view class="my-btn" @click="infoDetermineHandler"> 进入我的专栏 </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个字）" :maxlength="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: "",
    };
  },
  methods: {
    // top标签点击事件
    tabClickHandler(item) {
      this.tabActive = item.value;
    },
    // 添加标签的确认事件
    confirmModal() {
      if (!this.addLableName) return this.$util.toast("未添加标签");
      this.columnLableList.push(this.addLableName);
      this.addLableName = "";
      console.log("confirm");
    },
    // 添加标签的取消事件
    cancelModal() {
      this.addLableName = "";
      console.log("cancel");
    },
    // 信息填写完成 进入我的专栏
    async infoDetermineHandler() {
      if (this.columnName && this.columnNickname && this.columnIntroduce) {
        const res = await purchaserApi.yanxuanSpecialAuthorSave({
          SpecialName: this.columnNickname,
          NickName: this.columnName,
          Introduction: this.columnIntroduce,
          Label: this.columnLableList.join(","),
          UserId: this.authorDetail.UserId,
        });
        if (res.Ret === 200) {
          this.getAuthorDetail();
        }
      } 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.yanxuanSpecialList();
      if (res.Ret === 200) {
        this.specialList = res.Data.List || [];
        this.isAuthor = res.Data.IsAuthor;
        this.isAuthor && this.getAuthorDetail();
      }
    },
    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 = res.Data.List || [];
          console.log(myRes, "myRes");
        }
      }
    },
    // 去往专栏详情
    goDetailPages(item) {
      uni.navigateTo({ url: "/pages-purchaser/columnDetail/columnDetail?id=" + item.Id });
    },
  },
  onLoad() {
    this.getColumnList();
  },
};
</script>

<style lang="scss" scope>
.special-column {
  background-color: #f3f5f9;
  input {
    height: 72rpx;
    background-color: #f0f1f3;
    padding-left: 24rpx;
    border-radius: 12rpx;
  }
  .tab-content {
    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 {
        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;
      }
      .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;
    .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;
    }
  }
  .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;
  }
}
</style>