|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="edit-content">
|
|
|
<div class="edit-form">
|
|
|
- <div class="edit-form-item">
|
|
|
+ <!-- <div class="edit-form-item">
|
|
|
<p class="edit-label">正文</p>
|
|
|
<div class="charpt-list form-content">
|
|
|
<template v-for="(item, idx) in charptList" :key="idx">
|
|
@@ -39,6 +39,42 @@
|
|
|
添加新章节+
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div> -->
|
|
|
+ <div class="edit-form-item">
|
|
|
+ <p class="edit-label">推广书籍</p>
|
|
|
+ <div class="edit-form-select">
|
|
|
+ <a-select
|
|
|
+ v-model:value="bookId"
|
|
|
+ placeholder="请选择推广书籍支持搜索"
|
|
|
+ style="width: 200px"
|
|
|
+ :filter-option="false"
|
|
|
+ :not-found-content="fetching ? undefined : null"
|
|
|
+ @search="fetchBook"
|
|
|
+ @change="selectBook"
|
|
|
+ show-search
|
|
|
+ >
|
|
|
+ <template v-if="fetching" #notFoundContent>
|
|
|
+ <a-spin size="small" />
|
|
|
+ </template>
|
|
|
+ <a-select-option v-for="d in bookList" :key="d.bid">
|
|
|
+ {{ d.book_name }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="edit-form-item">
|
|
|
+ <p class="edit-label">选择章节</p>
|
|
|
+ <div class="edit-form-select">
|
|
|
+ <a-select
|
|
|
+ v-model:value="charptId"
|
|
|
+ placeholder="选择章节"
|
|
|
+ style="width: 200px"
|
|
|
+ >
|
|
|
+ <a-select-option v-for="d in charptList" :key="d.sequence">
|
|
|
+ {{ d.name }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="edit-form-item">
|
|
|
<p class="edit-label">顶部图片</p>
|
|
@@ -66,10 +102,13 @@
|
|
|
></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div></div>
|
|
|
<div>
|
|
|
- <Tinymce v-model="mycontent" :height="600">
|
|
|
-
|
|
|
- </Tinymce>
|
|
|
+ <Tinymce v-model="mycontent" :height="600">
|
|
|
+ <a-button @click="importTemp" class="btns" type="primary"
|
|
|
+ >导入模板</a-button
|
|
|
+ >
|
|
|
+ </Tinymce>
|
|
|
</div>
|
|
|
<div class="button-form">
|
|
|
<a-button style="margin-right:20px" @click="goPrev">上一步</a-button>
|
|
@@ -86,8 +125,9 @@
|
|
|
<a-tab-pane key="10" tab="女频"></a-tab-pane>
|
|
|
<a-tab-pane key="11" tab="男频"></a-tab-pane>
|
|
|
<a-tab-pane key="12" tab="活动"></a-tab-pane>
|
|
|
+ <a-tab-pane key="14" tab="我的"></a-tab-pane>
|
|
|
</a-tabs>
|
|
|
- <div class="radio-grouped">
|
|
|
+ <div class="radio-grouped" v-show="activeKey != 12 && activeKey != 14">
|
|
|
<a-radio-group
|
|
|
v-model:value="chooseType"
|
|
|
style="margin: 0 auto"
|
|
@@ -97,6 +137,17 @@
|
|
|
<a-radio-button value="2">古代</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
</div>
|
|
|
+ <div class="upload-my" v-show="activeKey == 14">
|
|
|
+ <a-upload
|
|
|
+ v-model:file-list="fileList"
|
|
|
+ :show-upload-list="false"
|
|
|
+ :custom-request="onFileChange"
|
|
|
+ >
|
|
|
+ <a-button type="primary">
|
|
|
+ 点击上传
|
|
|
+ </a-button>
|
|
|
+ </a-upload>
|
|
|
+ </div>
|
|
|
<a-list
|
|
|
class="loadmore-list"
|
|
|
:loading="listLoading"
|
|
@@ -125,9 +176,13 @@
|
|
|
<div :class="['img-item', index == temChecked ? 'current' : '']">
|
|
|
<a-popover title="预览" trigger="click">
|
|
|
<template #content>
|
|
|
- <img :src="item.link"/>
|
|
|
+ <img :src="item.link" />
|
|
|
</template>
|
|
|
- <img :src="item.link" @click="chooseImg(item, index)" width="144"/>
|
|
|
+ <img
|
|
|
+ :src="item.link"
|
|
|
+ @click="chooseImg(item, index)"
|
|
|
+ width="144"
|
|
|
+ />
|
|
|
</a-popover>
|
|
|
</div>
|
|
|
</a-list-item>
|
|
@@ -138,15 +193,33 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { defineComponent, reactive, ref, toRefs, onMounted } from "vue";
|
|
|
-import { getLandingPic, getLandingTempalte } from "@/api";
|
|
|
-import {Tinymce} from "@/components/Tinymce/index";
|
|
|
+import {
|
|
|
+ defineComponent,
|
|
|
+ reactive,
|
|
|
+ ref,
|
|
|
+ toRefs,
|
|
|
+ onMounted,
|
|
|
+ computed,
|
|
|
+} from "vue";
|
|
|
+import {
|
|
|
+ getLandingPic,
|
|
|
+ getLandingTempalte,
|
|
|
+ landingBook,
|
|
|
+ landingCharpter,
|
|
|
+ setLandingBook,
|
|
|
+ landingMypic,
|
|
|
+ landingSaveMypic,
|
|
|
+ onUpload,
|
|
|
+} from "@/api";
|
|
|
+import store from "@/store";
|
|
|
+import { Tinymce } from "@/components/Tinymce/index";
|
|
|
import { message } from "ant-design-vue";
|
|
|
import useApp from "@/hooks/useApp";
|
|
|
+import useDebounceFn from "@/hooks/useDebounceFn";
|
|
|
const StepTwo = defineComponent({
|
|
|
name: "StepTwo",
|
|
|
- components:{
|
|
|
- Tinymce
|
|
|
+ components: {
|
|
|
+ Tinymce,
|
|
|
},
|
|
|
props: {
|
|
|
content: Object,
|
|
@@ -157,13 +230,13 @@ const StepTwo = defineComponent({
|
|
|
setup(props, { emit }) {
|
|
|
const { route, router } = useApp();
|
|
|
const state = reactive({
|
|
|
- charptList: ref<Array<{ content: string; title: string }>>([
|
|
|
- {
|
|
|
- title: "",
|
|
|
- content: "",
|
|
|
- },
|
|
|
- ]),
|
|
|
- mycontent:'',
|
|
|
+ fileList: ref<any>([]),
|
|
|
+ bookId: "",
|
|
|
+ charptId: "",
|
|
|
+ fetching: false,
|
|
|
+ bookList: ref<any>([]),
|
|
|
+ charptList: ref<any>([]),
|
|
|
+ mycontent: "",
|
|
|
modelShow: false,
|
|
|
selectImg: false,
|
|
|
activeKey: "10",
|
|
@@ -178,6 +251,7 @@ const StepTwo = defineComponent({
|
|
|
templateItemChecked: ref<any>({}),
|
|
|
templateChecked: ref<any>(null),
|
|
|
templateList: ref<any[]>([]),
|
|
|
+ stepOneTem: computed(() => store.getters.getOneTemp),
|
|
|
});
|
|
|
const addNewCharpt = () => {
|
|
|
let data = {
|
|
@@ -194,6 +268,71 @@ const StepTwo = defineComponent({
|
|
|
state.modelShow = true;
|
|
|
loadMore();
|
|
|
};
|
|
|
+ //搜索书籍
|
|
|
+ const fetchBook = useDebounceFn((val: string) => {
|
|
|
+ if (val) {
|
|
|
+ state.fetching = true;
|
|
|
+ landingBook({ book_name: val }).then((res) => {
|
|
|
+ let bookList = res.data.list;
|
|
|
+ state.bookList = bookList;
|
|
|
+ state.fetching = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, 800);
|
|
|
+ const onFileChange = async (file: { file: File }) => {
|
|
|
+ if (file.file.size / 1024 > 600)
|
|
|
+ return message.error("图片大小超过600KB,请重新选择");
|
|
|
+ try {
|
|
|
+ let tempFile = file.file;
|
|
|
+ const { data } = await onUpload(tempFile, "customTop");
|
|
|
+ let url = data.url;
|
|
|
+ await landingSaveMypic(url);
|
|
|
+ message.success("上传我的图片成功!");
|
|
|
+ } catch (error) {
|
|
|
+ message.error(error.msg ?? "系统错误");
|
|
|
+ }
|
|
|
+ };
|
|
|
+ //落地页
|
|
|
+ const importTemp = () => {
|
|
|
+ console.log(state.bookId);
|
|
|
+ let errors = 0;
|
|
|
+ let content: Array<any> = [];
|
|
|
+ if (!state.bookId || !state.charptId) {
|
|
|
+ message.error("请选择书籍或者章节");
|
|
|
+ errors++;
|
|
|
+ }
|
|
|
+ if (!state.chooseImgUrl) {
|
|
|
+ message.error("头像不能为空");
|
|
|
+ errors++;
|
|
|
+ }
|
|
|
+ if (state.templateItemChecked && !state.templateItemChecked.id) {
|
|
|
+ message.error("模板不能为空");
|
|
|
+ errors++;
|
|
|
+ }
|
|
|
+ if (errors > 0) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const data = {
|
|
|
+ head_img: state.chooseImgUrl,
|
|
|
+ body_template_id: state.templateItemChecked.id,
|
|
|
+ bid: state.bookId,
|
|
|
+ sequence: state.charptId,
|
|
|
+ };
|
|
|
+ let landData = { ...state.stepOneTem, ...data };
|
|
|
+ setLandingBook(landData).then((res) => {
|
|
|
+ let html = res.data.html_raw;
|
|
|
+ state.mycontent = html;
|
|
|
+ });
|
|
|
+ };
|
|
|
+ const uploadMyPic = () => {};
|
|
|
+ //选择章节
|
|
|
+ const selectBook = useDebounceFn((val: string) => {
|
|
|
+ if (val) {
|
|
|
+ landingCharpter({ bid: val }).then((res) => {
|
|
|
+ state.charptList = res.data;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, 500);
|
|
|
//选择图片
|
|
|
const chooseImg = (item: any, idx: number) => {
|
|
|
state.temItem = item;
|
|
@@ -209,16 +348,29 @@ const StepTwo = defineComponent({
|
|
|
const {
|
|
|
content,
|
|
|
body_template_id,
|
|
|
+ bid,
|
|
|
+ book_name,
|
|
|
head_img,
|
|
|
+ html_raw,
|
|
|
+ sequence,
|
|
|
} = (props as any).content;
|
|
|
try {
|
|
|
- state.charptList = content ? JSON.parse(content) : [{ title: "", content: ""}];
|
|
|
- state.chooseImgUrl = head_img ?? '';
|
|
|
+ state.charptList = content
|
|
|
+ ? JSON.parse(content)
|
|
|
+ : [{ title: "", content: "" }];
|
|
|
+ state.chooseImgUrl = head_img ?? "";
|
|
|
state.selectImg = head_img ? true : false;
|
|
|
- if(!body_template_id) return
|
|
|
+ if (!body_template_id) return;
|
|
|
state.templateChecked = state.templateList.findIndex(
|
|
|
(item) => item.id == body_template_id
|
|
|
);
|
|
|
+ state.bookId = bid;
|
|
|
+ state.bookList = [{ bid: bid, book_name: book_name }];
|
|
|
+ state.charptId = sequence;
|
|
|
+ state.mycontent = html_raw;
|
|
|
+ landingCharpter({ bid }).then((res) => {
|
|
|
+ state.charptList = res.data;
|
|
|
+ });
|
|
|
state.templateItemChecked =
|
|
|
state.templateList[state.templateChecked];
|
|
|
} catch (e) {
|
|
@@ -241,15 +393,25 @@ const StepTwo = defineComponent({
|
|
|
state.temChecked = null;
|
|
|
state.dataList = [];
|
|
|
}
|
|
|
- getLandingPic(
|
|
|
- state.activeKey,
|
|
|
- state.chooseType,
|
|
|
- page ?? state.currentPage
|
|
|
- ).then((res: any) => {
|
|
|
- state.dataList = state.dataList.concat(res.data.list);
|
|
|
- state.currentPage = res.data.meta.current_page + 1;
|
|
|
- if (res.data.meta.is_end) state.showLoaderMore = false;
|
|
|
- });
|
|
|
+ if (state.activeKey != "14") {
|
|
|
+ getLandingPic(
|
|
|
+ state.activeKey,
|
|
|
+ state.chooseType,
|
|
|
+ page ?? state.currentPage
|
|
|
+ ).then((res: any) => {
|
|
|
+ state.dataList = state.dataList.concat(res.data.list);
|
|
|
+ state.currentPage = res.data.meta.current_page + 1;
|
|
|
+ if (res.data.meta.is_end) state.showLoaderMore = false;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ landingMypic({ page: page ? page : state.currentPage }).then(
|
|
|
+ (res: any) => {
|
|
|
+ state.dataList = state.dataList.concat(res.data.list);
|
|
|
+ state.currentPage = res.data.meta.current_page + 1;
|
|
|
+ if (res.data.meta.is_end) state.showLoaderMore = false;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
};
|
|
|
//选择顶部图
|
|
|
const handleSumbit = () => {
|
|
@@ -273,24 +435,16 @@ const StepTwo = defineComponent({
|
|
|
body_template_id: state.templateItemChecked.id,
|
|
|
content: JSON.stringify(content),
|
|
|
};
|
|
|
- emit("prev",data);
|
|
|
+ emit("prev", data);
|
|
|
};
|
|
|
//保存表单
|
|
|
const submitForm = () => {
|
|
|
let errors = 0;
|
|
|
let content: Array<any> = [];
|
|
|
- state.charptList.map((r: any) => {
|
|
|
- let item = {
|
|
|
- title: r.title,
|
|
|
- content: r.content,
|
|
|
- };
|
|
|
- if (!r.title || !r.content) {
|
|
|
- message.error("标题或者内容不能为空");
|
|
|
- errors++;
|
|
|
- }
|
|
|
- content.push(item);
|
|
|
- return r;
|
|
|
- });
|
|
|
+ if (!state.bookId || !state.charptId) {
|
|
|
+ message.error("请选择书籍或者章节");
|
|
|
+ errors++;
|
|
|
+ }
|
|
|
if (!state.chooseImgUrl) {
|
|
|
message.error("头像不能为空");
|
|
|
errors++;
|
|
@@ -299,15 +453,22 @@ const StepTwo = defineComponent({
|
|
|
message.error("模板不能为空");
|
|
|
errors++;
|
|
|
}
|
|
|
+ if (!state.mycontent) {
|
|
|
+ message.error("请先导入生成落地页模板");
|
|
|
+ errors++;
|
|
|
+ }
|
|
|
if (errors > 0) {
|
|
|
return false;
|
|
|
}
|
|
|
const data = {
|
|
|
head_img: state.chooseImgUrl,
|
|
|
body_template_id: state.templateItemChecked.id,
|
|
|
- content: JSON.stringify(content),
|
|
|
+ bid: state.bookId,
|
|
|
+ sequence: state.charptId,
|
|
|
+ html_raw: state.mycontent,
|
|
|
};
|
|
|
- emit("next", data);
|
|
|
+ let landData = { ...state.stepOneTem, ...data };
|
|
|
+ emit("next", landData);
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
@@ -324,6 +485,11 @@ const StepTwo = defineComponent({
|
|
|
chooseTemplate,
|
|
|
goPrev,
|
|
|
submitForm,
|
|
|
+ fetchBook,
|
|
|
+ selectBook,
|
|
|
+ importTemp,
|
|
|
+ uploadMyPic,
|
|
|
+ onFileChange,
|
|
|
};
|
|
|
},
|
|
|
});
|
|
@@ -343,7 +509,7 @@ export default StepTwo;
|
|
|
border-radius: 6px;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
-
|
|
|
+
|
|
|
&.current {
|
|
|
border: 2px solid #006eff;
|
|
|
&::after {
|