|
|
@@ -19,194 +19,153 @@
|
|
|
></van-field>
|
|
|
</van-cell-group>
|
|
|
|
|
|
- <VueDraggable
|
|
|
- :scroll="true"
|
|
|
- :handle="'.drag'"
|
|
|
- v-model="noteJson.travelNotesContent"
|
|
|
- :options="dragOptions"
|
|
|
- >
|
|
|
- <template v-for="(item, index) in noteJson.travelNotesContent" :key="item.tmpId">
|
|
|
- <div v-if="item.type === defaultSectionTitle.type" class="mb-12 box-border">
|
|
|
- <van-cell-group
|
|
|
- class="min-h-50 flex h-full focus:border-[#FF9300] active:shadow-[_0px_6px_4px_0px_rgba(0,0,0,0.25)]"
|
|
|
- inset
|
|
|
- >
|
|
|
- <van-field
|
|
|
- v-model="item.content"
|
|
|
- rows="1"
|
|
|
- autosize
|
|
|
- class="text-base h-full"
|
|
|
- type="textarea"
|
|
|
- trigger="onChange"
|
|
|
- maxlength="30"
|
|
|
- validate-trigger="onChange"
|
|
|
- placeholder="请输入段落标题..."
|
|
|
- @click-input="handleInsertOrEditTitleIndex(index)"
|
|
|
- @update:model-value="handleInsertOrEditTitle"
|
|
|
+ <div style="overflow: hidden; overflow-y: scroll" class="h-200 border">
|
|
|
+ <VueDraggable
|
|
|
+ :scroll="true"
|
|
|
+ :handle="'.drag'"
|
|
|
+ v-model="noteJson.travelNotesContent"
|
|
|
+ :options="dragOptions"
|
|
|
+ >
|
|
|
+ <template v-for="(item, index) in noteJson.travelNotesContent" :key="item.tmpId">
|
|
|
+ <div v-if="item.type === defaultSectionTitle.type" class="mb-12 box-border">
|
|
|
+ <van-cell-group
|
|
|
+ class="min-h-50 flex h-full focus:border-[#FF9300] active:shadow-[_0px_6px_4px_0px_rgba(0,0,0,0.25)]"
|
|
|
+ inset
|
|
|
>
|
|
|
- <template v-if="noteJson.travelNotesContent.length > 1" #extra>
|
|
|
- <div class="flex">
|
|
|
- <div class="h-16 drag flex mr-10 items-center">
|
|
|
- <img class="w-16 h-16" src="~/assets/img/note-create/drag.svg" alt="" />
|
|
|
- <span class="text-sm text-black-3">拖拽</span>
|
|
|
- </div>
|
|
|
- <div class="w-16 h-16 z-0">
|
|
|
- <img
|
|
|
- @click="handleDeleteTitle(index)"
|
|
|
- class="w-full h-full"
|
|
|
- src="~/assets/img/note-create/delete.svg"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <van-field
|
|
|
+ v-model="item.content"
|
|
|
+ rows="1"
|
|
|
+ autosize
|
|
|
+ class="text-base h-full"
|
|
|
+ type="textarea"
|
|
|
+ trigger="onChange"
|
|
|
+ maxlength="30"
|
|
|
+ validate-trigger="onChange"
|
|
|
+ placeholder="请输入段落标题..."
|
|
|
+ @click-input="handleInsertOrEditTitleIndex(index)"
|
|
|
+ @update:model-value="handleInsertOrEditTitle"
|
|
|
+ >
|
|
|
+ <template v-if="noteJson.travelNotesContent.length > 1" #extra>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="h-16 drag flex mr-10 items-center">
|
|
|
+ <img class="w-16 h-16" src="~/assets/img/note-create/drag.svg" alt="" />
|
|
|
+ <span class="text-sm text-black-3">拖拽</span>
|
|
|
+ </div>
|
|
|
+ <div class="w-16 h-16 z-0">
|
|
|
+ <img
|
|
|
+ @click="handleDeleteTitle(index)"
|
|
|
+ class="w-full h-full"
|
|
|
+ src="~/assets/img/note-create/delete.svg"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
- </van-cell-group>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- v-else-if="item.type === defaultSectionContent.type"
|
|
|
- class="mb-12 relative box-border"
|
|
|
- >
|
|
|
- <van-cell-group
|
|
|
- class="min-h-100 active:shadow-[_0px_6px_4px_0px_rgba(0,0,0,0.25)]"
|
|
|
- inset
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-else-if="item.type === defaultSectionContent.type"
|
|
|
+ class="mb-12 relative box-border"
|
|
|
>
|
|
|
- <van-field
|
|
|
- autofocus
|
|
|
- v-model="item.content"
|
|
|
- rows="3"
|
|
|
- autosize
|
|
|
- maxlength="5000"
|
|
|
- class="text-base"
|
|
|
- type="textarea"
|
|
|
- trigger="onChange"
|
|
|
- validate-trigger="onChange"
|
|
|
- placeholder="请在这里输入游记正文..."
|
|
|
- @click-input="handleInsertOrEditTitleIndex(index)"
|
|
|
- @update:model-value="handleInsertOrEditTitle"
|
|
|
+ <van-cell-group
|
|
|
+ class="min-h-100 active:shadow-[_0px_6px_4px_0px_rgba(0,0,0,0.25)]"
|
|
|
+ inset
|
|
|
>
|
|
|
- <template v-if="noteJson.travelNotesContent.length > 1" #extra>
|
|
|
- <div class="flex">
|
|
|
- <div class="h-16 drag flex mr-10 items-center">
|
|
|
- <img class="w-16 h-16" src="~/assets/img/note-create/drag.svg" alt="" />
|
|
|
- <span class="text-sm text-black-3">拖拽</span>
|
|
|
- </div>
|
|
|
- <div class="w-16 h-16 z-0">
|
|
|
- <img
|
|
|
- @click="handleDeleteTitle(index)"
|
|
|
- class="w-full h-full"
|
|
|
- src="../../assets/img/note-create/delete.svg"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
- </van-cell-group>
|
|
|
- </div>
|
|
|
- <!-- 有图片的样式 -->
|
|
|
- <!-- <div v-else-if="item.type === defaultSectionImage.type" class="relative box-border mb-12">
|
|
|
- <template v-if="item.content">
|
|
|
- <div>
|
|
|
- <van-cell-group
|
|
|
- class="border h-full active:shadow-[_0px_6px_4px_0px_rgba(0,0,0,0.25)]"
|
|
|
- inset
|
|
|
+ <!-- <div
|
|
|
+ class="w-full h-200"
|
|
|
+ @click="handleInsertOrEditTitleIndex(index)"
|
|
|
+ @change="handleInsertOrEditTitle"
|
|
|
+ @update="handleInsertOrEditTitle"
|
|
|
+ contenteditable
|
|
|
+ @input="handleInsertOrEditTitle"
|
|
|
+ v-html="item.content ? item.content : '请在这里输入游记正文...'"
|
|
|
+ ></div> -->
|
|
|
+ <van-field
|
|
|
+ autofocus
|
|
|
+ v-model="item.content"
|
|
|
+ rows="3"
|
|
|
+ autosize
|
|
|
+ maxlength="5000"
|
|
|
+ class="text-base"
|
|
|
+ type="textarea"
|
|
|
+ trigger="onChange"
|
|
|
+ validate-trigger="onChange"
|
|
|
+ placeholder="请在这里输入游记正文..."
|
|
|
+ @click-input="handleInsertOrEditTitleIndex(index)"
|
|
|
+ @update:model-value="handleInsertOrEditTitle"
|
|
|
>
|
|
|
- <div v-if="item.content">
|
|
|
- <img :src="item.content" alt="Uploaded Image" />
|
|
|
- </div>
|
|
|
- </van-cell-group>
|
|
|
- <div
|
|
|
- class="w-150 rounded-xl box-border px-10 h-20 flex justify-between items-center h-16 absolute top-12 right-26 z-100 bg-[#fff]/[0.5]"
|
|
|
- >
|
|
|
- <span @click="handleSaveCover(item)" class="text-sm text-black-3">
|
|
|
- 设为封面图
|
|
|
- </span>
|
|
|
- <div class="drag flex items-center border-r-[1px] border-[#F3F3F3] pr-7">
|
|
|
- <img class="w-16 h-16" src="~/assets/img/note-create/drag.svg" alt="" />
|
|
|
- <span class="text-sm text-black-3">拖拽</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="w-16 h-16 inline-block">
|
|
|
- <img
|
|
|
- @click="handleDeleteImage(index)"
|
|
|
- class="w-full h-full"
|
|
|
- src="../../assets/img/note-create/delete.svg"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- 没有图片的样式
|
|
|
- <template v-else>
|
|
|
- <div class="h-200">
|
|
|
- <van-cell-group
|
|
|
- class="border h-full active:shadow-[_0px_6px_4px_0px_rgba(0,0,0,0.25)]"
|
|
|
- inset
|
|
|
- >
|
|
|
- <div class="w-full h-full flex justify-center items-center">
|
|
|
- <button
|
|
|
- @click="handleSelectImage(index)"
|
|
|
- class="box-border active:bg-[#000]/[0.1] text-base flex justify-center items-center px-28 py-10 rounded-full border"
|
|
|
- >
|
|
|
- <div class="h-16 w-16 mr-8">
|
|
|
- <img class="w-full h-full" src="~/assets/img/note-create/img.svg" alt="" />
|
|
|
+ <template v-if="noteJson.travelNotesContent.length > 1" #extra>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="h-16 drag flex mr-10 items-center">
|
|
|
+ <img class="w-16 h-16" src="~/assets/img/note-create/drag.svg" alt="" />
|
|
|
+ <span class="text-sm text-black-3">拖拽</span>
|
|
|
</div>
|
|
|
+ <div class="w-16 h-16 z-0">
|
|
|
+ <img
|
|
|
+ @click="handleDeleteTitle(index)"
|
|
|
+ class="w-full h-full"
|
|
|
+ src="../../assets/img/note-create/delete.svg"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </VueDraggable>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
|
|
|
- 插入图片
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </van-cell-group>
|
|
|
-
|
|
|
- <div
|
|
|
- class="w-136 flex justify-between items-center h-16 absolute top-10 right-26 z-100"
|
|
|
- >
|
|
|
- <span @click="showToast('请上传图片')" class="text-sm text-black-3">
|
|
|
- 设为封面图
|
|
|
- </span>
|
|
|
- <div class="drag flex pr-7 items-center">
|
|
|
- <img class="w-16 h-16" src="~/assets/img/note-create/drag.svg" alt="" />
|
|
|
- <span class="text-sm text-black-3">拖拽</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="w-16 h-16 inline-block">
|
|
|
- <img
|
|
|
- @click="handleDeleteImage(index)"
|
|
|
- class="w-full h-full drag"
|
|
|
- src="~/assets/img/note-create/delete.svg"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div> -->
|
|
|
- </template>
|
|
|
- </VueDraggable>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="px-16 flex justify-start">
|
|
|
+ <div class="px-16 flex justify-start mb-12">
|
|
|
<button
|
|
|
- @click="handleInsertOrEditTitleOk(defaultSectionTitle)"
|
|
|
- class="w-110 active:bg-[#000]/[0.1] h-44 box-border text-base text-black-3 flex justify-center rounded-md items-center bg-[#F3F3F3]"
|
|
|
+ v-for="(operate, i) in userControlsList"
|
|
|
+ :key="operate.title + i"
|
|
|
+ @click="handleOperate(operate)"
|
|
|
+ class="h-26 shrink-0 active:bg-[#000]/[0.1] box-border text-[10px] px-8 mr-8 text-black-3 flex justify-center rounded-full items-center bg-[#F3F3F3]"
|
|
|
>
|
|
|
- <van-icon name="plus" class="mr-5" color="#FF9300" />
|
|
|
- 插入小标题
|
|
|
+ {{ operate.title }}
|
|
|
</button>
|
|
|
+
|
|
|
<button
|
|
|
- @click="handleInsertOrEditTitleOk(defaultSectionContent)"
|
|
|
- class="w-110 h-44 active:bg-[#000]/[0.1] box-border text-base text-black-3 flex justify-center rounded-md items-center bg-[#F3F3F3]"
|
|
|
+ @click="expandTextInput"
|
|
|
+ class="h-26 ml-auto shrink-0 active:bg-[#000]/[0.1] box-border text-[10px] px-8 text-black-3 flex justify-center rounded-full items-center bg-[#F3F3F3]"
|
|
|
>
|
|
|
- <van-icon name="plus" class="mr-5" color="#FF9300" />
|
|
|
- 插入内容
|
|
|
+ <img
|
|
|
+ v-if="showExpandTextInput"
|
|
|
+ class="w-16 h-16"
|
|
|
+ src="../../assets/img/note-create/orange-expand-text-input.svg"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ class="w-16 h-16"
|
|
|
+ src="~/assets/img/note-create/expand-text-input.svg"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</button>
|
|
|
</div>
|
|
|
- <div style="overflow: hidden; overflow-x: scroll" class="px-16 flex justify-start border">
|
|
|
+
|
|
|
+ <!-- 热门的话题 -->
|
|
|
+ <div
|
|
|
+ v-if="hotTopicList && hotTopicList.length"
|
|
|
+ style="overflow: hidden; overflow-x: scroll"
|
|
|
+ class="px-16 flex justify-start"
|
|
|
+ >
|
|
|
<div class="h-26 flex items-center justify-center">
|
|
|
<div
|
|
|
- class="bg-[#F5F5F5] shrink-0 h-full rounded-[26px] px-8 flex items-center justify-center"
|
|
|
- ></div>
|
|
|
+ v-for="item in hotTopicList"
|
|
|
+ :key="item?.id"
|
|
|
+ @click=""
|
|
|
+ class="bg-[#F5F5F5] shrink-0 h-full rounded-full px-8 flex items-center justify-center"
|
|
|
+ >
|
|
|
+ {{ item?.title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -424,7 +383,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { get, useFileDialog } from '@vueuse/core'
|
|
|
+import { useFileDialog } from '@vueuse/core'
|
|
|
import upload from '~/assets/img/note-create/upload.svg'
|
|
|
import draft from '~/assets/img/note-create/draft.svg'
|
|
|
import { VueDraggable } from 'vue-draggable-plus'
|
|
|
@@ -436,6 +395,34 @@ const dragOptions = {
|
|
|
animation: 150 // 拖拽时的动画效果持续时间
|
|
|
}
|
|
|
|
|
|
+const TOPIC_TEXT = 'topic'
|
|
|
+const EIT_TEXT = 'eit'
|
|
|
+const PTITLE_TEXT = 'paragraphTitle'
|
|
|
+const PCONTENT_TEXT = 'paragraphContent'
|
|
|
+
|
|
|
+const userControlsList = ref([
|
|
|
+ {
|
|
|
+ title: '# 话题',
|
|
|
+ fn: TOPIC_TEXT,
|
|
|
+ empty: '暂无话题',
|
|
|
+ apiUrl: '/website/tourism/fans/getFriends'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '@ 用户',
|
|
|
+ fn: EIT_TEXT,
|
|
|
+ empty: '暂无用户',
|
|
|
+ apiUrl: '/website/tourism/fans/getFriends'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'H 段落标题',
|
|
|
+ fn: PTITLE_TEXT
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'P 段落内容',
|
|
|
+ fn: PCONTENT_TEXT
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
const { open, onChange } = useFileDialog({
|
|
|
accept: '.png,.png,.jpeg,.JPG,Png '
|
|
|
})
|
|
|
@@ -476,9 +463,6 @@ watch(noteJson, () => {}, { deep: true, immediate: true })
|
|
|
|
|
|
const id = useRouteQuery('id')
|
|
|
|
|
|
-// onMounted(() => {
|
|
|
-// getPlaceOptions()
|
|
|
-// }),
|
|
|
watch(
|
|
|
id,
|
|
|
() => {
|
|
|
@@ -512,13 +496,6 @@ const showDialog = (parmas) => {
|
|
|
.catch(() => {})
|
|
|
}
|
|
|
|
|
|
-// // 获取目的地
|
|
|
-// const placeOptions = ref([])
|
|
|
-// async function getPlaceOptions() {
|
|
|
-// const { data } = await request('/website/tourism/publishTravelNotes/getWriteBelongTab')
|
|
|
-// placeOptions.value = data
|
|
|
-// }
|
|
|
-
|
|
|
// 获取草稿详情
|
|
|
async function getNoteDetail() {
|
|
|
try {
|
|
|
@@ -776,13 +753,67 @@ async function requestPublish() {
|
|
|
|
|
|
// 获取话题的数组
|
|
|
const topicList = ref([])
|
|
|
+// 艾特用户的数组
|
|
|
+const eitList = ref([])
|
|
|
|
|
|
-async function getTopicList() {
|
|
|
- // if (condition) {
|
|
|
+const topicLoading = ref(false)
|
|
|
+async function getTopicList(parmas) {
|
|
|
+ try {
|
|
|
+ if (!topicLoading.value) return
|
|
|
+ topicLoading.value = true
|
|
|
+ const { data } = await request(parmas.apiUrl, {}).finally(() => (topicLoading.value = false))
|
|
|
|
|
|
- // }
|
|
|
- const { data } = await request('/')
|
|
|
+ if (parmas.fn == TOPIC_TEXT) {
|
|
|
+ topicList.value = data
|
|
|
+ }
|
|
|
+ if (parmas.fn == EIT_TEXT) {
|
|
|
+ eitList.value = data
|
|
|
+ }
|
|
|
+ let _list = []
|
|
|
+ } catch (e) {}
|
|
|
}
|
|
|
+
|
|
|
+// 计算出热门话题
|
|
|
+const hotTopicList = computed(() => {
|
|
|
+ let _hotTopicList = []
|
|
|
+ if (topicList.value && topicList.value.length) {
|
|
|
+ _hotTopicList = topicList.value.filter((el) => el.isHot == 1)
|
|
|
+ }
|
|
|
+ return _hotTopicList
|
|
|
+})
|
|
|
+
|
|
|
+const showExpandTextInput = ref(false)
|
|
|
+// 扩展内容的插件 同时图片放大和缩小
|
|
|
+function expandTextInput() {
|
|
|
+ showExpandTextInput.value = !showExpandTextInput.value
|
|
|
+}
|
|
|
+
|
|
|
+// 对应的操作
|
|
|
+const handleOperate = (operate) => {
|
|
|
+ try {
|
|
|
+ switch (operate.fn) {
|
|
|
+ case TOPIC_TEXT:
|
|
|
+ getTopicList(operate)
|
|
|
+ break
|
|
|
+ case EIT_TEXT:
|
|
|
+ getTopicList(operate)
|
|
|
+ break
|
|
|
+ case PTITLE_TEXT:
|
|
|
+ handleInsertOrEditTitleOk(defaultSectionTitle)
|
|
|
+ break
|
|
|
+ case PCONTENT_TEXT:
|
|
|
+ handleInsertOrEditTitleOk(defaultSectionContent)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ } catch (e) {}
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ // 获取话题
|
|
|
+ getTopicList(userControlsList[0])
|
|
|
+ // 获取艾特用户
|
|
|
+ getTopicList(userControlsList[1])
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
