|
|
@@ -0,0 +1,484 @@
|
|
|
+<template>
|
|
|
+ <view class="container write-note">
|
|
|
+ <view class="write-note-top">
|
|
|
+ <view style="display: flex">
|
|
|
+ <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-button" @click="releaseBtnHandler"> 修改并发布 </view>
|
|
|
+ </view>
|
|
|
+ <view class="write-note-content">
|
|
|
+ <view class="title-note global_title"> <input v-model="articleTitle" placeholder="请输入标题" /></view>
|
|
|
+ <view class="content-note" :style="{ height: editorHeight + 'rpx' }">
|
|
|
+ <editor @focus="editorFocus" :adjust-position="false" id="editor" 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 v-model="fileList" :addImage="addImage" :delImage="delImage"></robbyImageUpload>
|
|
|
+ </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="lableActive == 2 ? '搜索公司标签' : '搜索行业标签'" @input="searchHandle" />
|
|
|
+ <view v-if="lableActive == 2" style="color: #376cbb" @click="addCompanyLableHandler">+ 创建</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 lable-ul-two">
|
|
|
+ <!-- 这里就不用计算属性了 不知道会不会有隐藏的问题 -->
|
|
|
+ <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>
|
|
|
+ <Loading />
|
|
|
+ </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,
|
|
|
+ editorHeight: 800,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ // 添加标签完成事件
|
|
|
+ addCompleteHandler() {
|
|
|
+ this.columnName = "";
|
|
|
+ this.industryCompanyLable = [...this.selectedLableList, ...this.companySelectedLable];
|
|
|
+ this.showPopup = false;
|
|
|
+ },
|
|
|
+ // 创建标签公司Lable
|
|
|
+ addCompanyLableHandler() {
|
|
|
+ if (!this.columnName) return;
|
|
|
+ if (this.companySelectedLable.includes(this.columnName.replace(/\s+/g, ""))) return this.$util.toast("标签已存在");
|
|
|
+ this.companySelectedLable.push(this.columnName.replace(/\s+/g, ""));
|
|
|
+ },
|
|
|
+ // 行业公司标签的点击事件
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 发布
|
|
|
+ releaseBtnHandler() {
|
|
|
+ if (!this.articleTitle || !this.advice_content || !this.industryCompanyLable.length > 0) {
|
|
|
+ let str = !this.articleTitle ? "请输入标题" : !this.advice_content ? "请输入内容" : "请至少添加一个标签";
|
|
|
+ return this.$util.toast(str);
|
|
|
+ }
|
|
|
+ uni.showModal({
|
|
|
+ content: "确定修改并通过此内容的审核吗？",
|
|
|
+ confirmColor: "#376cbb",
|
|
|
+ cancelColor: "#606266",
|
|
|
+ success: async (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ const resCheck = await purchaserApi.yanxuanSpecialCheck({
|
|
|
+ Content: this.advice_content,
|
|
|
+ ImgUrl: this.fileList,
|
|
|
+ });
|
|
|
+ if (resCheck.Ret === 200) {
|
|
|
+ const resSave = await purchaserApi.yanxuanSpecialSave({
|
|
|
+ Content: this.advice_content,
|
|
|
+ Title: this.articleTitle,
|
|
|
+ Type: this.topLableActive,
|
|
|
+ IndustryTags: this.selectedLableList.join(","),
|
|
|
+ CompanyTags: this.companySelectedLable.join(","),
|
|
|
+ ImgUrl: this.fileList.join(","),
|
|
|
+ DoType: 2,
|
|
|
+ Id: this.detailId,
|
|
|
+ });
|
|
|
+ if (resSave.Ret === 200) {
|
|
|
+ this.$util.toast("已发布");
|
|
|
+ uni.navigateBack();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ searchHandle() {
|
|
|
+ this.lableActive == 1 ? this.getIndustryList() : this.getCompanySearch();
|
|
|
+ },
|
|
|
+ // 获取行业标签
|
|
|
+ async () {
|
|
|
+ const res = await purchaserApi.yanxuanSpecialIndustrySearch({
|
|
|
+ Keyword: this.columnName.replace(/\s+/g, ""),
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.industryLabel = res.Data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取公司标签
|
|
|
+ async getCompanySearch() {
|
|
|
+ const res = await purchaserApi.yanxuanSpecialCompanySearch({
|
|
|
+ Keyword: this.columnName.replace(/\s+/g, ""),
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.companyLable = res.Data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ delImage(done) {
|
|
|
+ uni.showModal({
|
|
|
+ content: "是否删除?",
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ // 执行 done() 删除
|
|
|
+ done();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addImage(e) {
|
|
|
+ this.$util.upload.Single(
|
|
|
+ uploadurl,
|
|
|
+ (res) => {
|
|
|
+ let data = JSON.parse(res.data);
|
|
|
+ if (data.Ret === 200) {
|
|
|
+ this.fileList.push(data.Data.ResourceUrl);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ "camera"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 获取专栏详情
|
|
|
+ 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;
|
|
|
+ this.selectedLableList = this.detailDataForm.IndustryTags || [];
|
|
|
+ this.companySelectedLable = this.detailDataForm.CompanyTags || [];
|
|
|
+ setTimeout(() => {
|
|
|
+ this.industryCompanyLable = [...this.selectedLableList, ...this.companySelectedLable];
|
|
|
+ this.editorCtx.setContents({
|
|
|
+ html: this.detailDataForm.Content, //this.EditGoodsDetail.content为赋值内容。
|
|
|
+ });
|
|
|
+ }, 200);
|
|
|
+ this.fileList = this.detailDataForm.ImgUrl ? this.detailDataForm.ImgUrl.split(",") : [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ editorFocus() {
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0,
|
|
|
+ duration: 0,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ uni
|
|
|
+ .createSelectorQuery()
|
|
|
+ .in(this)
|
|
|
+ .select("#editor")
|
|
|
+ .context((res2) => {
|
|
|
+ this.editorCtx = res2.context;
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ this.detailId = Number(options.id) || 0;
|
|
|
+ this.detailId > 0 && this.getDetaliData();
|
|
|
+ this.getIndustryList();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scope>
|
|
|
+.write-note {
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: $uni-bg-color;
|
|
|
+ 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 $uni-bg-color;
|
|
|
+ input {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-note {
|
|
|
+ width: 100%;
|
|
|
+ height: 880rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ .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 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .lable-ul-two {
|
|
|
+ height: 500rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .write-note-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 35rpx;
|
|
|
+ .write-text {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 148rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ padding: 10rpx 32rpx 10rpx 32rpx;
|
|
|
+ border: 1rpx solid #e7e7e7;
|
|
|
+ }
|
|
|
+ view:nth-child(1) {
|
|
|
+ border-radius: 6rpx 0rpx 0rpx 6rpx;
|
|
|
+ }
|
|
|
+ view:nth-child(2) {
|
|
|
+ border-radius: 0rpx 6rpx 6rpx 0rpx;
|
|
|
+ }
|
|
|
+ .act-top-lable {
|
|
|
+ background-color: #376cbb;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
bding