horzi_rai_wxa/pages-purchaser/writeNote/writeNote.vue

<template>
  <view class="container write-note">
    <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
      <view class="content-box" :style="{ color: '#333' }">
        <text>发布新内容</text>
        <view class="arrow-left-icon">
          <van-icon name="arrow-left" size="20px" @click="goHandler" />
        </view>
      </view>
    </view>
    <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 v-model="articleTitle" placeholder="请输入标题" /></view>
      <view class="content-note">
        <editor id="editor" @ready="onEditorReady" v-model="advice_content" placeholder="请输入正文（更轻松的创作，上传文档，请先登录查研观向网页版）" @input="contentChange" />
        <view class="new-lable" @click="showPopup = true">
          <view style="flex-shrink: 0">+ 标签（至少添加一个）</view>
          <view v-for="item in industryCompanyLable" :key="item" class="lable-li active">
            {{ item }}
            <van-icon name="cross" style="margin-left: 8rpx" />
          </view>
        </view>
      </view>
    </view>
    <view class="write-note-img">
      <robbyImageUpload ref="robbyImageUpload" class="image-add-upload" v-model="fileList" :server-url="uploadUrl" :header="header" :limit="6" />
    </view>
    <view class="write-note-button">
      <view class="draft" @click="draftBtnHandler"> 草稿箱</view>
      <view class="release" @click="releaseBtnHandler"> 发布</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 @click="addCompleteHandler"> 完成 </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="专栏名称" @confirm="searchHandle" />
          <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', 'active']" v-for="item in selectedLableList" :key="item">
              {{ item }}
              <van-icon name="cross" style="margin-left: 8rpx" @click="selectedLableHandle(item)" />
            </view>
          </block>
          <block v-else>
            <view :class="['lable-li', 'active']" v-for="item in companySelectedLable" :key="item">
              {{ item }}
              <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']" @click="industryLabelHandler(item)" v-for="item in industryLabel" :key="item">{{ item }}</view>
          </block>
          <block v-else>
            <block v-for="item in companyLable" :key="item">
              <view :class="['lable-li']" @click="industryLabelHandler(item)" v-if="!item.search">
                {{ item }}
              </view>
            </block>
          </block>
        </view>
      </viwe>
    </van-popup>
  </view>
</template>

<script>
import robbyImageUpload from "../components/imageUpload.vue";
import { purchaserApi, uploadurl } from "@/config/api";
export default {
  components: { robbyImageUpload },
  data() {
    return {
      navBarStyle: {
        height: 60 + "px",
        paddingTop: 40 + "px",
        paddingBottom: "4px",
      },
      showPopup: false,
      fileList: [],
      articleTitle: "", // 标题
      advice_content: "",
      columnName: "",
      industryCompanyLable: [], //添加的标签
      lableList: [
        { name: "行业标签", value: 1 },
        { name: "公司标签", value: 2 },
      ], // 公司或者行业标签
      lableActive: 1,
      topLableList: [
        { name: "笔记", value: 1 },
        { name: "观点", value: 2 },
      ], // 笔记或者观点的标签
      topLableActive: 1, // 笔记或者观点的选中
      industryLabel: [], // 行业标签
      selectedLableList: [], // 行业标签已选项
      companyLable: [], // 公司标签
      companySelectedLable: [], // 公司标签已选项
      detailId: 0,
      detailDataForm: {},
      editorCtx: null,
    };
  },
  computed: {
    uploadUrl() {
      return uploadurl;
    },
  },
  methods: {
    // 初始获取导航栏
    initNavBar() {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.navBarStyle = {
        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
        paddingTop: menuButtonInfo.top - 4 + "px",
        paddingBottom: "4px",
      };
    },
    // 添加标签完成事件
    addCompleteHandler() {
      this.industryCompanyLable = [...this.selectedLableList, ...this.companySelectedLable];
      this.showPopup = false;
      this.$nextTick(() => {
        this.selectedLableList = [];
        this.companySelectedLable = [];
      });
    },
    // 左上角的返回按钮
    goHandler() {
      let { Title, Content, ImgUrl, Tags } = this.detailDataForm;
      if (Title && Tags && (Title != this.articleTitle || (this.advice_content != Content && this.fileList.join(",") != ImgUrl) || this.industryCompanyLable.join(",") != Tags)) {
        uni.showModal({
          title: "是否保存当前修改",
          content: "保存的草稿可在【内容中心】查看",
          confirmColor: "#3385FF",
          cancelColor: "#606266",
          cancelText: "不保存",
          confirmText: "保存",
          success(res) {
            if (res.confirm) {
              uni.navigateBack();
            } else {
              console.log(11);
            }
          },
        });
        return;
      } else if (Title && Tags) {
        return;
      }
      if (this.articleTitle || this.advice_content || this.fileList > 0 || this.industryCompanyLable.length > 0) {
        uni.showModal({
          title: "是否保存当前修改",
          content: "保存的草稿可在【内容中心】查看",
          confirmColor: "#3385FF",
          cancelColor: "#606266",
          cancelText: "不保存",
          confirmText: "保存",
          success(res) {
            if (res.confirm) {
              uni.navigateBack();
            } else {
              console.log(11);
            }
          },
        });
      } else {
        uni.navigateBack();
      }
    },
    // 创建标签公司Lable
    addCompanyLableHandler() {
      if (!this.columnName) return;
      this.companySelectedLable.push(this.columnName);
    },
    // 行业公司标签的点击事件
    industryOfCompanyHanler(item) {
      this.lableActive = item.value;
    },
    // 内容输入框
    contentChange(e) {
      this.advice_content = e.detail.html;
    },
    // 头部 table 的点击事件
    topLableHandler(item) {
      this.topLableActive = item.value;
    },
    // 行业的标签点击事件
    industryLabelHandler(item) {
      if (this.lableActive == 1) {
        if (this.selectedLableList.includes(item)) {
          let index = this.selectedLableList.findIndex((key) => key == item);
          this.selectedLableList.splice(index, 1);
        } else {
          this.selectedLableList.push(item);
        }
      } else {
        if (this.companySelectedLable.includes(item)) {
          let index = this.companySelectedLable.findIndex((key) => key == item);
          this.companySelectedLable.splice(index, 1);
        } else {
          this.companySelectedLable.push(item);
        }
      }
    },
    // 点击取消标签的事件
    selectedLableHandle(item) {
      if (this.lableActive == 1) {
        let index = this.selectedLableList.findIndex((key) => key == item);
        this.selectedLableList.splice(index, 1);
      } else {
        let index = this.companySelectedLable.findIndex((key) => key == item);
        this.companySelectedLable.splice(index, 1);
      }
    },
    // 草稿箱
    draftBtnHandler() {
      uni.showModal({
        title: "是否保存当前修改",
        content: "保存的草稿可在【内容中心】查看",
        confirmColor: "#3385FF",
        cancelColor: "#606266",
        cancelText: "不保存",
        confirmText: "保存",
        success: async (res) => {
          if (res.confirm) {
            const resSave = await purchaserApi.yanxuanSpecialSave({
              Content: this.advice_content,
              title: this.articleTitle,
              Type: this.topLableActive,
              Tags: this.industryCompanyLable.join(","),
              ImgUrl: this.$refs.robbyImageUpload.imageList.join(","),
              DoType: 1,
              Id: this.detailId,
            });
            if (resSave.Ret === 200) {
              this.$util.toast("已保存至草稿箱");
              uni.navigateBack();
            }
          }
        },
      });
    },
    // 发布
    releaseBtnHandler() {
      uni.showModal({
        title: "确认发布",
        content: "内容将提交给管理员审核后发布，确定要提交审核吗？",
        confirmColor: "#3385FF",
        cancelColor: "#606266",
        success: async (res) => {
          if (res.confirm) {
            const resSave = await purchaserApi.yanxuanSpecialSave({
              Content: this.advice_content,
              title: this.articleTitle,
              Type: this.topLableActive,
              Tags: this.industryCompanyLable.join(","),
              ImgUrl: this.$refs.robbyImageUpload.imageList.join(","),
              DoType: 2,
              Id: this.detailId,
            });
            if (resSave.Ret === 200) {
              this.$util.toast("发布成功");

              uni.navigateBack();
            }
          }
        },
      });
    },
    searchHandle() {
      this.lableActive == 1 ? this.getIndustryList() : this.getCompanySearch();
    },

    // 获取行业标签
    async getIndustryList() {
      const res = await purchaserApi.yanxuanSpecialIndustrySearch({
        Keyword: this.columnName,
      });
      if (res.Ret === 200) {
        this.industryLabel = res.Data;
      }
    },

    // 获取公司标签
    async getCompanySearch() {
      const res = await purchaserApi.yanxuanSpecialCompanySearch({
        Keyword: this.columnName,
      });
      if (res.Ret === 200) {
        this.companyLable = res.Data;
      }
    },
    deleteImage(e) {
      this.fileList = [...e.allImages];
    },
    addImage(e) {
      // console.log(e);
      this.fileList = [...e.allImages];
    },
    // 获取专栏详情
    async getDetaliData() {
      const res = await purchaserApi.yanxuanSpecialDetail({
        Id: this.detailId,
      });
      if (res.Ret === 200) {
        this.detailDataForm = res.Data;
        this.articleTitle = this.detailDataForm.Title;
        this.advice_content = this.detailDataForm.Content;

        setTimeout(() => {
          this.editorCtx.insertText({
            text: this.detailDataForm.Content,
          });
        }, 200);
        this.fileList = this.detailDataForm.ImgUrl ? this.detailDataForm.ImgUrl.split(",") : [];
        this.industryCompanyLable = this.detailDataForm.Tags.split(",");
      }
    },
    onEditorReady() {
      uni
        .createSelectorQuery()
        .select("#editor")
        .context((res) => {
          this.editorCtx = res.context;
        })
        .exec();
    },
  },
  onLoad(options) {
    this.detailId = Number(options.id) || 0;
    this.detailId > 0 && this.getDetaliData();
    this.initNavBar();
    this.getIndustryList();
  },
};
</script>

<style lang="scss" scope>
.write-note {
  .nav-bar-wrap {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 99;
    background-color: #fff;
    .content-box {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: center;
      color: #fff;
      font-size: 34rpx;
      .arrow-left-icon {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40rpx;
        height: 40rpx;
        left: 39rpx;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
      }
    }
  }
  background-color: #f3f5f9;
  padding-bottom: 200rpx;
  .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;
        display: flex;
        width: 100%;
        overflow: hidden;
        overflow-x: auto;

        .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-img {
    margin-top: 20rpx;
    background-color: #fff;
    width: 100%;
    padding: 20rpx;
    .image-add-upload {
      width: 100%;
    }
  }
  .write-note-button {
    position: fixed;
    width: 100%;
    bottom: 50rpx;
    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;
    }
  }
  .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;
      max-height: 500rpx;
      overflow: hidden;
      overflow-y: auto;
      .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>