|
|
@@ -12,14 +12,20 @@
|
|
|
<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="title-note"> <input v-model="articleTitle" placeholder="请输入标题" /></view>
|
|
|
<view class="content-note">
|
|
|
- <editor v-model="advice_content" placeholder="请输入正文（更轻松的创作，上传文档，请先登录查研观向网页版）" @input="contentChange" />
|
|
|
- <view class="new-lable" @click="showPopup = true">+ 标签（至少添加一个）</view>
|
|
|
+ <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 class="image-add-upload" :value="fileList" :limit="6" />
|
|
|
+ <robbyImageUpload ref="robbyImageUpload" class="image-add-upload" @delete="deleteImage" @add="addImage" :value="ImgUrl" :server-url="uploadUrl" :header="header" :limit="6" />
|
|
|
</view>
|
|
|
<view class="write-note-button">
|
|
|
<view class="draft" @click="draftBtnHandler"> 草稿箱</view>
|
|
|
@@ -27,26 +33,26 @@
|
|
|
</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="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="专栏名称" />
|
|
|
+ <input v-model="columnName" placeholder="专栏名称" @confirm="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', item.isActive && 'active']" v-for="item in selectedLableList" :key="item.name">
|
|
|
- {{ item.name }}
|
|
|
+ <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', item.isActive && 'active']" v-for="item in companySelectedLable" :key="item.name">
|
|
|
- {{ item.name }}
|
|
|
+ <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>
|
|
|
@@ -55,12 +61,12 @@
|
|
|
<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>
|
|
|
+ <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.name">
|
|
|
- <view :class="['lable-li', item.isActive && 'active']" @click="industryLabelHandler(item)" v-if="!item.search">
|
|
|
- {{ item.name }}
|
|
|
+ <block v-for="item in companyLable" :key="item">
|
|
|
+ <view :class="['lable-li']" @click="industryLabelHandler(item)" v-if="!item.search">
|
|
|
+ {{ item }}
|
|
|
</view>
|
|
|
</block>
|
|
|
</block>
|
|
|
@@ -72,6 +78,7 @@
|
|
|
|
|
|
<script>
|
|
|
import robbyImageUpload from "../components/imageUpload.vue";
|
|
|
+import { purchaserApi, uploadurl } from "@/config/api";
|
|
|
export default {
|
|
|
components: { robbyImageUpload },
|
|
|
data() {
|
|
|
@@ -83,8 +90,10 @@ export default {
|
|
|
},
|
|
|
showPopup: false,
|
|
|
fileList: [],
|
|
|
+ articleTitle: "", // 标题
|
|
|
advice_content: "",
|
|
|
columnName: "",
|
|
|
+ industryCompanyLable: [], //添加的标签
|
|
|
lableList: [
|
|
|
{ name: "行业标签", value: 1 },
|
|
|
{ name: "公司标签", value: 2 },
|
|
|
@@ -95,25 +104,22 @@ export default {
|
|
|
{ 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 },
|
|
|
- ], // 行业标签
|
|
|
+ industryLabel: [], // 行业标签
|
|
|
selectedLableList: [], // 行业标签已选项
|
|
|
- companyLable: [
|
|
|
- { name: "笔记11", value: 1 },
|
|
|
- { name: "笔记22", value: 2 },
|
|
|
- { name: "笔记33", value: 3 },
|
|
|
- { name: "笔记44", value: 4 },
|
|
|
- { name: "笔记55", value: 5 },
|
|
|
- ], // 公司标签
|
|
|
+ companyLable: [], // 公司标签
|
|
|
companySelectedLable: [], // 公司标签已选项
|
|
|
+ detailId: 0,
|
|
|
+ detailDataForm: {},
|
|
|
+ editorCtx: null,
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ uploadUrl() {
|
|
|
+ return uploadurl;
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ // 初始获取导航栏
|
|
|
initNavBar() {
|
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|
|
this.navBarStyle = {
|
|
|
@@ -122,11 +128,60 @@ export default {
|
|
|
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;
|
|
|
+ }
|
|
|
+ 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.companyLable.push({ name: this.columnName, value: this.companyLable.length + 1, search: true, isActive: true });
|
|
|
- this.companySelectedLable = this.companyLable.filter((key) => key.isActive);
|
|
|
+ this.companySelectedLable.push(this.columnName);
|
|
|
},
|
|
|
// 行业公司标签的点击事件
|
|
|
industryOfCompanyHanler(item) {
|
|
|
@@ -142,34 +197,30 @@ export default {
|
|
|
},
|
|
|
// 行业的标签点击事件
|
|
|
industryLabelHandler(item) {
|
|
|
- this.$set(item, "isActive", !item.isActive);
|
|
|
if (this.lableActive == 1) {
|
|
|
- this.selectedLableList = this.industryLabel.filter((key) => key.isActive);
|
|
|
+ if (this.selectedLableList.includes(item)) {
|
|
|
+ let index = this.selectedLableList.findIndex((key) => key == item);
|
|
|
+ this.selectedLableList.splice(index, 1);
|
|
|
+ } else {
|
|
|
+ this.selectedLableList.push(item);
|
|
|
+ }
|
|
|
} else {
|
|
|
- this.companySelectedLable = this.companyLable.filter((key) => key.isActive);
|
|
|
+ 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) {
|
|
|
- this.industryLabel.forEach((key) => {
|
|
|
- if (key.value === item.value) {
|
|
|
- item.isActive = !item.isActive;
|
|
|
- }
|
|
|
- });
|
|
|
- this.selectedLableList = this.industryLabel.filter((key) => key.isActive);
|
|
|
+ let index = this.selectedLableList.findIndex((key) => key == item);
|
|
|
+ this.selectedLableList.splice(index, 1);
|
|
|
} 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);
|
|
|
+ let index = this.companySelectedLable.findIndex((key) => key == item);
|
|
|
+ this.companySelectedLable.splice(index, 1);
|
|
|
}
|
|
|
},
|
|
|
// 草稿箱
|
|
|
@@ -181,9 +232,17 @@ export default {
|
|
|
cancelColor: "#606266",
|
|
|
cancelText: "不保存",
|
|
|
confirmText: "保存",
|
|
|
- success(res) {
|
|
|
+ success: async (res) => {
|
|
|
if (res.confirm) {
|
|
|
- console.log(22);
|
|
|
+ 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: 0,
|
|
|
+ });
|
|
|
} else {
|
|
|
console.log(11);
|
|
|
}
|
|
|
@@ -197,20 +256,90 @@ export default {
|
|
|
content: "内容将提交给管理员审核后发布，确定要提交审核吗？",
|
|
|
confirmColor: "#3385FF",
|
|
|
cancelColor: "#606266",
|
|
|
- // cancelText: "不保存",
|
|
|
- // confirmText: "保存",
|
|
|
- success(res) {
|
|
|
+ success: async (res) => {
|
|
|
if (res.confirm) {
|
|
|
- console.log(22);
|
|
|
+ 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: 0,
|
|
|
+ });
|
|
|
+ if(resSave.Ret===200){
|
|
|
+
|
|
|
+ }
|
|
|
} else {
|
|
|
console.log(11);
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
+ 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;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.editorCtx.insertText({
|
|
|
+ text: this.detailDataForm.Content,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ 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() {
|
|
|
+ onLoad(options) {
|
|
|
+ this.detailId = options.id || 0;
|
|
|
+ console.log(this.detailId);
|
|
|
+ this.detailId > 0 && this.getDetaliData();
|
|
|
this.initNavBar();
|
|
|
+ this.getIndustryList();
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -218,7 +347,7 @@ export default {
|
|
|
<style lang="scss" scope>
|
|
|
.write-note {
|
|
|
.nav-bar-wrap {
|
|
|
- position:sticky;
|
|
|
+ position: sticky;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
@@ -271,6 +400,25 @@ export default {
|
|
|
.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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -394,6 +542,9 @@ export default {
|
|
|
.lable-ul {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
+ max-height: 500rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
.lable-li {
|
|
|
flex-shrink: 0;
|
|
|
display: flex;
|
bding