horzi_rai_wxa/pages-purchaser/specialColumn/specialColumn.vue

<template>
  <view class="container special-column">
    <view class="tab-content">
      <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">
        <view class="item-title"> 专栏名称</view>
        <view class="item-name-time">
          <view class="name"> 作者昵称作者昵称</view>
          <view class="time"> 2023.08.24更新</view>
        </view>
        <view class="item-content">
          专栏介绍：有专栏详情页面，内容详情页面，暂时都不设置行业权限。专栏详情页未登录也可查看，收藏操作需先登录，内容详情页面也需要登录后才查看，登录也可查看，收藏操作需先登录，内容详情页面也需要登录后才查专栏介绍：有专栏详情页面，内容详情页面，暂时都不设置行业权限。专栏详情页未登录也可查看，收藏操作需先登录，内容详情页面也需要登录后才查看，登录也可查看，收藏操作需先登录，内容详情页面也需要登录后才
        </view>
      </view>
    </view>
    <view class="set-up-info" v-if="tabActive == 2">
      <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>
    </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>
    <!-- <info-card /> -->
    <!-- <column-list-content /> -->
  </view>
</template>

<script>
import ColumnListContent from "../components/columnListContent.vue";
import infoCard from "../components/infoCard.vue";
export default {
  components: { infoCard, ColumnListContent },
  data() {
    return {
      tabList: [
        { name: "专栏列表", value: "1" },
        { name: "我的专栏", value: "2" },
      ],
      tabActive: "2",
      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");
    },
    // 信息填写完成 进入我的专栏
    infoDetermineHandler() {
      if (this.columnName && this.columnNickname && this.columnIntroduce) {
      } else {
        let str = !this.columnName ? "专栏名称" : !this.columnNickname ? "专栏昵称" : !this.columnIntroduce ? "专栏介绍" : "";
        this.$util.toast("请输入" + str);
      }
    },
    // 删除新建标签
    deleteLablehandle(index) {
      this.columnLableList.splice(index, 1);
    },
  },
};
</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>