|
@@ -32,6 +32,8 @@
|
|
|
ref="inputDiv"
|
|
|
@click="handleInsertOrEditTitleIndex2"
|
|
|
@input="handleInsertOrEditTitleText"
|
|
|
+ @focus="showExpandTextInput = true"
|
|
|
+ @blur="showExpandTextInput = false"
|
|
|
v-html="noteJson?.tourTourismProjectTravelNotesWriteContentDto?.content"
|
|
|
></div>
|
|
|
<!-- <div class="min-h-100 mx-12 my-16 w-full mb-20 text-sm">
|
|
@@ -80,7 +82,9 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
- <div class="px-16 flex justify-start mb-12">
|
|
|
+ <div
|
|
|
+ :class="`${showExpandTextInput ? 'fixed bottom-0 left-0' : ''} px-16 flex justify-start mb-12`"
|
|
|
+ >
|
|
|
<button
|
|
|
v-for="(operate, i) in userControlsList"
|
|
|
:key="operate?.title + i"
|
|
@@ -145,6 +149,7 @@
|
|
|
</template>
|
|
|
|
|
|
<div
|
|
|
+ v-if="!showExpandTextInput"
|
|
|
class="fixed box-border px-16 pt-16 pb-31 shadow-[0_-4px_4px_0px_rgba(0,0,0,0.1)] bottom-0 left-0 w-full h-80 flex justify-between bg-white items-center"
|
|
|
>
|
|
|
<div class="flex justify-start items-center h-50">
|
|
@@ -249,15 +254,10 @@
|
|
|
<div class="flex justify-end text-[#999] text-[12px]">
|
|
|
{{ defaultNoteJson.createTime }}
|
|
|
</div>
|
|
|
- <div class="mt-10" v-for="con in defaultNoteJson.travelNotesContent" :key="con.id">
|
|
|
- <template v-if="con.type == 'image'">
|
|
|
- <img :src="con.content" class="w-[full] rounded-xl" alt="" />
|
|
|
- </template>
|
|
|
-
|
|
|
- <template v-else>
|
|
|
- <div class="text-sm text-black-3" v-html="con.content"></div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="mt-10 text-sm text-black-3"
|
|
|
+ v-html="defaultNoteJson.tourTourismProjectTravelNotesWriteContentDto.content"
|
|
|
+ ></div>
|
|
|
|
|
|
<div class="text-sm text-black-6 py-12 mb-12 box-border border-b-[1px]">
|
|
|
<span class="mr-8">出发时间{{ contentIsEmpty(defaultNoteJson?.departureTime) }}</span>
|
|
@@ -335,7 +335,6 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-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'
|
|
@@ -403,10 +402,6 @@ const userControlsList = ref([
|
|
|
// }
|
|
|
])
|
|
|
|
|
|
-const { open, onChange } = useFileDialog({
|
|
|
- accept: '.png,.png,.jpeg,.JPG,Png '
|
|
|
-})
|
|
|
-
|
|
|
const { loading, setLoading } = useLoading()
|
|
|
loading.value = false
|
|
|
|
|
@@ -418,10 +413,9 @@ const defaultSectionContent = {
|
|
|
type: 'sectionContent',
|
|
|
content: ''
|
|
|
}
|
|
|
-const defaultSectionImage = {
|
|
|
- type: 'image',
|
|
|
- content: ''
|
|
|
-}
|
|
|
+
|
|
|
+const swipeItemIndex = ref(1)
|
|
|
+const inputDiv = ref(null)
|
|
|
|
|
|
const defaultNoteJson = {
|
|
|
travelNotesBanner: null,
|
|
@@ -452,11 +446,13 @@ const noteJson = reactive(defaultNoteJson)
|
|
|
watch(noteJson, () => {}, { deep: true, immediate: true })
|
|
|
|
|
|
const id = useRouteQuery('id')
|
|
|
+let currentMention2 = '' // 当前正在输入的 # 用户名
|
|
|
|
|
|
watch(
|
|
|
id,
|
|
|
() => {
|
|
|
getNoteDetail()
|
|
|
+ currentMention2 = ''
|
|
|
},
|
|
|
{ immediate: true }
|
|
|
)
|
|
@@ -495,14 +491,11 @@ async function getNoteDetail() {
|
|
|
)
|
|
|
const data = res.data ?? {}
|
|
|
|
|
|
- Object.keys(noteJson).forEach((key) => {
|
|
|
- noteJson[key] = data[key]
|
|
|
- noteJson.imgUrls = data.imgUrls ?? []
|
|
|
- noteJson.topics = data.topics ?? []
|
|
|
- noteJson.mentions = data.mentions ?? []
|
|
|
- noteJson.visibleRange = data.visibleRange ?? 0
|
|
|
- noteJson.projectTitle = data.projectTitle ?? ''
|
|
|
- })
|
|
|
+ for (let i in noteJson) {
|
|
|
+ if (data[i]) {
|
|
|
+ noteJson[i] = data[i]
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
noteJson.tourTourismProjectTravelNotesWriteContentDto.content =
|
|
|
data?.tourTourismProjectTravelNotesWriteContent?.content ?? ''
|
|
@@ -515,9 +508,8 @@ async function getNoteDetail() {
|
|
|
noteJson.endPlaceId = data?.endPlaceDictMap?.id
|
|
|
noteJson.endPlace = data?.endPlaceDictMap?.name
|
|
|
}
|
|
|
- // nextTick(() => {
|
|
|
- // console.log(noteJson, '789')
|
|
|
- // })
|
|
|
+ console.log(noteJson, 'noteJson')
|
|
|
+
|
|
|
setLoading(false)
|
|
|
} catch (error) {
|
|
|
setLoading(false)
|
|
@@ -551,14 +543,8 @@ function handleInsertOrEditProjectTitle(value) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-let currentMention2 = '' // 当前正在输入的 # 用户名
|
|
|
-
|
|
|
let cursorPosition = { offsetX: 0, offsetY: 0 } // 光标位置
|
|
|
-const mentionIndex = ref(0) //记录@光标的位置
|
|
|
-const mentionIndex2 = ref(0) //记录#光标的位置
|
|
|
-// const mentionOptions = ref([]) //艾特及提及
|
|
|
-// const mentionLoading = ref(false)
|
|
|
-// const valueContent = ref('')
|
|
|
+
|
|
|
// 点击编辑或者新增段落标题,
|
|
|
const eidContent = ref('') //记录艾特后输入的内容
|
|
|
|
|
@@ -574,6 +560,7 @@ function handleInsertOrEditTitleText(value) {
|
|
|
lastAtSign = text.indexOf('@')
|
|
|
lastAtSign2 = text.indexOf('#')
|
|
|
} else {
|
|
|
+ currentMention2 = ''
|
|
|
lastAtSign = -1
|
|
|
lastAtSign2 = -1
|
|
|
}
|
|
@@ -593,6 +580,10 @@ function handleInsertOrEditTitleText(value) {
|
|
|
showTopicEit.value = userControlsList.value[0].fn
|
|
|
getTopicList(userControlsList.value[0])
|
|
|
}
|
|
|
+
|
|
|
+ // if (lastAtSign == -1 || lastAtSign2 == -1) {
|
|
|
+ // noteJson.tourTourismProjectTravelNotesWriteContentDto.content = currentMention2
|
|
|
+ // }
|
|
|
}
|
|
|
|
|
|
/******************插入正文相关逻辑*******************/
|
|
@@ -604,6 +595,11 @@ async function handleSaveDraft() {
|
|
|
try {
|
|
|
parmas = { ...noteJson }
|
|
|
parmas.endPlace = noteJson.endPlaceId
|
|
|
+
|
|
|
+ if (inputDiv.value.innerHTML) {
|
|
|
+ parmas.tourTourismProjectTravelNotesWriteContentDto.content = inputDiv.value.innerHTML
|
|
|
+ }
|
|
|
+
|
|
|
await request('/website/tourism/publishTravelNotes/saveDraft', {
|
|
|
method: 'post',
|
|
|
body: {
|
|
@@ -624,6 +620,8 @@ const previewOptions = reactive({
|
|
|
|
|
|
function handlePreview() {
|
|
|
previewOptions.show = !previewOptions.show
|
|
|
+
|
|
|
+ noteJson.tourTourismProjectTravelNotesWriteContentDto.content = inputDiv.value.innerHTML
|
|
|
}
|
|
|
|
|
|
// 收集个人信息
|
|
@@ -701,6 +699,10 @@ async function requestPublish() {
|
|
|
parmas.endPlace = noteJson.endPlaceId
|
|
|
}
|
|
|
|
|
|
+ if (inputDiv.value.innerHTML) {
|
|
|
+ parmas.tourTourismProjectTravelNotesWriteContentDto.content = inputDiv.value.innerHTML
|
|
|
+ }
|
|
|
+
|
|
|
await request('/website/tourism/publishTravelNotes/publishDraft', {
|
|
|
method: 'post',
|
|
|
body: {
|
|
@@ -716,9 +718,6 @@ async function requestPublish() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const swipeItemIndex = ref(1)
|
|
|
-const inputDiv = ref(null)
|
|
|
-
|
|
|
// 获取话题的数组
|
|
|
const topicList = ref([])
|
|
|
// 艾特用户的数组
|
|
@@ -726,8 +725,6 @@ const eitList = ref([])
|
|
|
const showTopicEit = ref(null)
|
|
|
|
|
|
// 记录点击话题和@ 后的几个数字。
|
|
|
-const topicEitName = ref('')
|
|
|
-const checkboxRefs = ref([])
|
|
|
const queryParmas = reactive({
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
@@ -784,9 +781,11 @@ const handleOperate = (operate) => {
|
|
|
if (showTopicEit.value == TOPIC_TEXT) {
|
|
|
showTopicEit.value = null
|
|
|
} else {
|
|
|
- noteJson.tourTourismProjectTravelNotesWriteContentDto.content += '#'
|
|
|
+ noteJson.tourTourismProjectTravelNotesWriteContentDto.content =
|
|
|
+ inputDiv.value.innerHTML + '#'
|
|
|
showTopicEit.value = operate.fn
|
|
|
getTopicList(operate)
|
|
|
+ // handleInsertOrEditTitleText(noteJson.tourTourismProjectTravelNotesWriteContentDto.content)
|
|
|
}
|
|
|
break
|
|
|
case EIT_TEXT:
|
|
@@ -794,8 +793,10 @@ const handleOperate = (operate) => {
|
|
|
showTopicEit.value = null
|
|
|
} else {
|
|
|
showTopicEit.value = operate.fn
|
|
|
- noteJson.tourTourismProjectTravelNotesWriteContentDto.content += '@'
|
|
|
+ noteJson.tourTourismProjectTravelNotesWriteContentDto.content =
|
|
|
+ inputDiv.value.innerHTML + '@'
|
|
|
getTopicList(operate)
|
|
|
+ // handleInsertOrEditTitleText(noteJson.tourTourismProjectTravelNotesWriteContentDto.content)
|
|
|
}
|
|
|
|
|
|
break
|
|
@@ -973,6 +974,7 @@ function contentIsEmpty(content) {
|
|
|
::v-deep .mention {
|
|
|
color: #2c405b;
|
|
|
font-weight: bold;
|
|
|
+ margin-left: 4px;
|
|
|
}
|
|
|
|
|
|
.ql-editor {
|