horzi_rai_wxa/pages-purchaser/writeNote/writeNote.vue

<template>
  <view class="container write-note">
    <view class="write-note-top">
      <view @click="topLableHandler(item)" :class="['write-text', topLableActive == item.value && 'act-top-lable']" v-for="item in topLableList" :key="item.value"> {{ item.name }}</view>
    </view>
    <view class="write-note-content">
      <view class="title-note"> <input placeholder="请输入标题" /></view>
      <view class="content-note">
        <editor v-model="advice_content" placeholder="请输入正文（更轻松的创作，上传文档，请先登录查研观向网页版）" @input="contentChange" />
        <view class="new-lable" @click="showPopup = true">+ 标签（至少添加一个）</view>
      </view>
    </view>
    <view class="write-note-img">
      <robbyImageUpload class="image-add-upload" :value="fileList" :limit="6" />
    </view>
    <view class="write-note-button">
      <view class="write-note"> 草稿箱</view>
      <view class="write-note"> 发布</view>
    </view>
    <van-popup :show="showPopup" position="bottom" custom-style="height: 85%;" round custom-class="lable-class-popup">
      <viwe class="add-lable-box">
        <view class="add-txt"> 添加标签 <view> 完成 </view></view>
        <view class="select-item">
          <view @click="industryOfCompanyHanler(item)" v-for="item in lableList" :key="item.value" :class="['item', lableActive == item.value && 'act-item']"> {{ item.name }}</view>
        </view>
        <view class="input-box">
          <icon type="search" size="15" class="sea_ico" />
          <input v-model="columnName" placeholder="专栏名称" />
          <view v-if="lableActive == 2" style="color: #376cbb" @click="addCompanyLableHandler">+ &nbsp;创建</view>
        </view>
        <view class="text-box"> 已选标签 <view class="one-lable-text"> 至少添加一个标签 </view></view>
        <view class="lable-ul">
          <block v-if="lableActive == 1">
            <view :class="['lable-li', item.isActive && 'active']" v-for="item in selectedLableList" :key="item.name">
              {{ item.name }}
              <van-icon name="cross" style="margin-left: 8rpx" @click="selectedLableHandle(item)" />
            </view>
          </block>
          <block v-else>
            <view :class="['lable-li', item.isActive && 'active']" v-for="item in companySelectedLable" :key="item.name">
              {{ item.name }}
              <van-icon name="cross" style="margin-left: 8rpx" @click="selectedLableHandle(item)" />
            </view>
          </block>
        </view>
        <view class="text-box"> 标签</view>
        <view class="lable-ul">
          <!-- 这里就不用计算属性了 不知道会不会有隐藏的问题 -->
          <block v-if="lableActive == 1">
            <view :class="['lable-li', item.isActive && 'active']" @click="industryLabelHandler(item)" v-for="item in industryLabel" :key="item.name">{{ item.name }}</view>
          </block>
          <block v-else>
            <block v-for="item in companyLable" :key="item.name">
              <view :class="['lable-li', item.isActive && 'active']" @click="industryLabelHandler(item)" v-if="!item.search">
                {{ item.name }}
              </view>
            </block>
          </block>
        </view>
      </viwe>
    </van-popup>
  </view>
</template>

<script>
import robbyImageUpload from "../components/imageUpload.vue";
export default {
  components: { robbyImageUpload },
  data() {
    return {
      showPopup: true,
      fileList: [],
      advice_content: "",
      columnName: "",
      lableList: [
        { name: "行业标签", value: 1 },
        { name: "公司标签", value: 2 },
      ], // 公司或者行业标签
      lableActive: 1,
      topLableList: [
        { name: "笔记", value: 1 },
        { name: "观点", value: 2 },
      ], // 笔记或者观点的标签
      topLableActive: 1, // 笔记或者观点的选中
      industryLabel: [
        { name: "笔记1", value: 1 },
        { name: "笔记2", value: 2 },
        { name: "笔记3", value: 3 },
        { name: "笔记4", value: 4 },
        { name: "笔记5", value: 5 },
      ], // 行业标签
      selectedLableList: [], // 行业标签已选项
      companyLable: [
        { name: "笔记11", value: 1 },
        { name: "笔记22", value: 2 },
        { name: "笔记33", value: 3 },
        { name: "笔记44", value: 4 },
        { name: "笔记55", value: 5 },
      ], // 公司标签
      companySelectedLable: [], // 公司标签已选项
    };
  },
  methods: {
    // 创建标签公司Lable
    addCompanyLableHandler() {
      if (!this.columnName) return;
      this.companyLable.push({ name: this.columnName, value: this.companyLable.length + 1, search: true, isActive: true });
      this.companySelectedLable = this.companyLable.filter((key) => key.isActive);
    },
    // 行业公司标签的点击事件
    industryOfCompanyHanler(item) {
      this.lableActive = item.value;
    },
    // 内容输入框
    contentChange(e) {
      this.advice_content = e.detail.html;
    },
    // 头部 table 的点击事件
    topLableHandler(item) {
      this.topLableActive = item.value;
    },
    // 行业的标签点击事件
    industryLabelHandler(item) {
      this.$set(item, "isActive", !item.isActive);
      if (this.lableActive == 1) {
        this.selectedLableList = this.industryLabel.filter((key) => key.isActive);
      } else {
        this.companySelectedLable = this.companyLable.filter((key) => key.isActive);
      }
    },
    // 点击取消标签的事件
    selectedLableHandle(item) {
      if (this.lableActive == 1) {
        this.industryLabel.forEach((key) => {
          if (key.value === item.value) {
            item.isActive = !item.isActive;
          }
        });
        this.selectedLableList = this.industryLabel.filter((key) => key.isActive);
      } else {
        if (item.search) {
          let index = this.companyLable.findIndex((key) => key.value === item.value);
          this.companyLable.splice(index, 1);
        } else {
          this.companyLable.forEach((key) => {
            if (key.value === item.value) {
              item.isActive = !item.isActive;
            }
          });
        }
        this.companySelectedLable = this.companyLable.filter((key) => key.isActive);
      }
    },
  },
};
</script>

<style lang="scss" scope>
.write-note {
  background-color: #f3f5f9;
  .write-note-content {
    background-color: #fff;
    margin-top: 1rpx;
    padding: 30rpx;
    .title-note {
      width: 100%;
      height: 112rpx;
      display: flex;
      align-items: center;
      border-bottom: 2rpx solid #f3f5f9;
    }
    .content-note {
      width: 100%;
      height: 880rpx;
      padding-top: 20rpx;
      .ql-container {
        height: calc(100% - 80rpx);
      }
      .new-lable {
        margin-top: 20px;
        color: #376cbb;
      }
    }
  }
  .write-note-img {
    margin-top: 20rpx;
    background-color: #fff;
    width: 100%;
    padding: 20rpx;
    .image-add-upload {
      width: 100%;
    }
  }
  .write-note-button {
    display: flex;
  }
  .lable-class-popup {
    padding: 30rpx;
  }
  .add-lable-box {
    font-size: 28rpx;
    width: 100%;
    .add-txt {
      position: relative;
      height: 60rpx;
      line-height: 60rpx;
      font-weight: 600;
      font-size: 36rpx;
      color: #000;
      text-align: center;
      view {
        position: absolute;
        top: 0;
        right: 20rpx;
        color: #376cbb;
        font-size: 28rpx;
      }
    }
    .select-item {
      display: flex;
      margin: 20rpx 0;
      .item {
        width: 176rpx;
        height: 64rpx;
        border-radius: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f3f3f3;
        margin-right: 30rpx;
      }
      .act-item {
        color: #376cbb;
        background-color: #e5efff;
      }
    }
    .input-box {
      background-color: #f3f3f3;
      display: flex;
      align-items: center;
      height: 80rpx;
      width: 100%;
      position: relative;
      padding-left: 50rpx;
      padding-right: 20rpx;
      input {
        background-color: #f3f3f3;
        flex: 1;
        height: 80rpx;
      }
      .sea_ico {
        position: absolute;
        width: 31rpx;
        height: 31rpx;
        left: 10rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .text-box {
      color: #333;
      font-size: 28rpx;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      margin: 30rpx 0;
      .one-lable-text {
        color: #999;
        font-size: 24rpx;
        font-weight: 400;
      }
    }
    .lable-ul {
      display: flex;
      flex-wrap: wrap;
      .lable-li {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        margin: 0 20rpx 30rpx 0;
        height: 56rpx;
        padding: 0 24rpx;
        border-radius: 153rpx;
        background-color: #f8f8fa;
      }
      .active {
        background-color: #376cbb;
        color: #fff;
      }
    }
  }
  .write-note-top {
    display: flex;
    background-color: #fff;
    padding: 15rpx 35rpx;
    .write-text {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      width: 148rpx;
      height: 64rpx;
      padding: 10rpx 32rpx 10rpx 32rpx;
      border-radius: 0rpx 6rpx 6rpx 0rpx;
      border: 1rpx solid #e7e7e7;
    }
    .act-top-lable {
      background-color: #376cbb;
      color: #fff;
      border: none;
    }
  }
}
</style>