|
|
@@ -1,7 +1,11 @@
|
|
|
<template>
|
|
|
<div v-if="!loading" class="box-border pb-110">
|
|
|
<div v-if="!previewOptions.show">
|
|
|
- <CreateNoteHeaderImage v-model:bannerUrl="noteJson.travelNotesBanner" />
|
|
|
+ <CreateNoteHeaderImage
|
|
|
+ v-model:bannerUrl="noteJson.travelNotesBanner"
|
|
|
+ v-model:imgUrls="noteJson.imgUrls"
|
|
|
+ v-model:show="showExpandTextInput"
|
|
|
+ />
|
|
|
|
|
|
<van-cell-group class="border-b-[1px]" inset>
|
|
|
<van-field
|
|
|
@@ -19,7 +23,7 @@
|
|
|
></van-field>
|
|
|
</van-cell-group>
|
|
|
|
|
|
- <div style="overflow: hidden; overflow-y: scroll" class="h-200 border">
|
|
|
+ <div style="overflow: hidden; overflow-y: scroll" class="h-200">
|
|
|
<VueDraggable
|
|
|
:scroll="true"
|
|
|
:handle="'.drag'"
|
|
|
@@ -118,8 +122,45 @@
|
|
|
</template>
|
|
|
</VueDraggable>
|
|
|
</div>
|
|
|
- <div>
|
|
|
+ <div
|
|
|
+ v-if="(topicList && topicList.length) || (eitList && eitList.length)"
|
|
|
+ class="w-full px-16 box-border max-h-227 overflow-y-auto overflow-hidden"
|
|
|
+ >
|
|
|
+ <!-- 话题 -->
|
|
|
+ <template v-if="showTopicEit == TOPIC_TEXT">
|
|
|
+ <div
|
|
|
+ v-for="item in topicList"
|
|
|
+ :key="item?.userId"
|
|
|
+ class="w-full flex justify-between items-center mb-20"
|
|
|
+ @click="handleTopicAndEit(item, '#')"
|
|
|
+ >
|
|
|
+ <p v-if="item?.topicName" class="w-246 text-sm text-black-6 line-clamp-1">
|
|
|
+ # {{ item?.topicName }}
|
|
|
+ </p>
|
|
|
+ <p class="text-sm text-black-6 line-clamp-1">
|
|
|
+ {{
|
|
|
+ formatNumber(Number(item?.totalViewCount))
|
|
|
+ ? `${formatNumber(Number(item?.totalViewCount))}次浏览`
|
|
|
+ : ''
|
|
|
+ }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
|
|
|
+ <template v-if="showTopicEit == EIT_TEXT">
|
|
|
+ <!-- 艾特的好友 -->
|
|
|
+ <div
|
|
|
+ v-for="item in eitList"
|
|
|
+ :key="item?.userId"
|
|
|
+ class="w-full flex justify-start items-center mb-12"
|
|
|
+ @click="handleTopicAndEit(item, '@')"
|
|
|
+ >
|
|
|
+ <div class="w-30 h-30 rounded-full shrink-0 overflow-hidden mr-8">
|
|
|
+ <img class="w-full h-full object-cover" :src="item?.headImageUrl" alt="" />
|
|
|
+ </div>
|
|
|
+ <p class="text-sm text-black-6 line-clamp-1">{{ item?.showName }}</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
|
|
|
<div class="px-16 flex justify-start mb-12">
|
|
|
@@ -164,22 +205,25 @@
|
|
|
@click=""
|
|
|
class="bg-[#F5F5F5] shrink-0 h-full rounded-full px-8 flex items-center justify-center"
|
|
|
>
|
|
|
- {{ item?.title }}
|
|
|
+ # {{ item?.title }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <CreateNoteForm
|
|
|
- v-model:departureTime="noteJson.departureTime"
|
|
|
- v-model:countTimes="noteJson.countTimes"
|
|
|
- v-model:endPlace="noteJson.endPlace"
|
|
|
- v-model:endPlaceId="noteJson.endPlaceId"
|
|
|
- v-model:role="noteJson.role"
|
|
|
- v-model:travelMode="noteJson.travelMode"
|
|
|
- v-model:averageCost="noteJson.averageCost"
|
|
|
- v-model:recommendationRate="noteJson.recommendationRate"
|
|
|
- v-model:travelNumber="noteJson.travelNumber"
|
|
|
- />
|
|
|
+ <template v-if="!showExpandTextInput">
|
|
|
+ <CreateNoteForm
|
|
|
+ v-model:departureTime="noteJson.departureTime"
|
|
|
+ v-model:countTimes="noteJson.countTimes"
|
|
|
+ v-model:endPlace="noteJson.endPlace"
|
|
|
+ v-model:endPlaceId="noteJson.endPlaceId"
|
|
|
+ v-model:role="noteJson.role"
|
|
|
+ v-model:travelMode="noteJson.travelMode"
|
|
|
+ v-model:averageCost="noteJson.averageCost"
|
|
|
+ v-model:recommendationRate="noteJson.recommendationRate"
|
|
|
+ v-model:travelNumber="noteJson.travelNumber"
|
|
|
+ v-model:chau="noteJson.chau"
|
|
|
+ v-model:chauId="noteJson.chauId"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
|
|
|
<div
|
|
|
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"
|
|
|
@@ -214,31 +258,47 @@
|
|
|
</div>
|
|
|
|
|
|
<div v-else class="w-full h-full">
|
|
|
- <div class="p-16">
|
|
|
- <img
|
|
|
- v-if="defaultNoteJson?.travelNotesBanner"
|
|
|
- :src="defaultNoteJson?.travelNotesBanner"
|
|
|
- class="aspect-[316/204] w-full object-cover rounded-lg"
|
|
|
- />
|
|
|
- <img
|
|
|
- v-else
|
|
|
- src="~/assets/img/note-create/note_create_banner_bg.png"
|
|
|
- class="aspect-[316/204] w-full object-cover rounded-lg"
|
|
|
- />
|
|
|
-
|
|
|
- <div class="flex mt-10">
|
|
|
- <img src="~/assets/img/article_title.png" class="w-[32px] h-[32px] shrink-0" alt="" />
|
|
|
-
|
|
|
- <div
|
|
|
- class="w-321 line-clamp-2 overflow-hidden truncate max-w-xs ml-10 text-xl whitespace-normal font-bold text-black-3"
|
|
|
- >
|
|
|
- {{ defaultNoteJson?.projectTitle ?? '游记标题' }}
|
|
|
+ <van-cell center size="large" :title="userInfo.showName">
|
|
|
+ <template #icon>
|
|
|
+ <div class="w-30 h-30 rounded-full mr-8 overflow-hidden">
|
|
|
+ <img class="w-full h-full object-cover" :src="userInfo.headImageUrl" alt="" />
|
|
|
</div>
|
|
|
+ </template>
|
|
|
+ <template #label>
|
|
|
+ <span class="mr-8">{{ noteJson?.chau }}</span>
|
|
|
+ <span>{{ noteJson?.endPlace }}</span>
|
|
|
+ </template>
|
|
|
+ <template #right-icon>
|
|
|
+ <span class="iconfont icon-share text-black-9" style="font-size: 26px"></span>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <van-swipe>
|
|
|
+ <template v-if="noteJson?.imgUrls && noteJson?.imgUrls.length">
|
|
|
+ <van-swipe-item v-for="image in noteJson?.imgUrls" :key="image">
|
|
|
+ <img :src="image" />
|
|
|
+ </van-swipe-item>
|
|
|
+ </template>
|
|
|
+ <van-swipe-item v-else>
|
|
|
+ <img
|
|
|
+ src="~/assets/img/note-create/note_create_banner_bg.png"
|
|
|
+ class="aspect-[316/204] w-full object-cover"
|
|
|
+ />
|
|
|
+ </van-swipe-item>
|
|
|
+
|
|
|
+ <!-- <template #indicator="{ active, total }">
|
|
|
+ <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
|
|
|
+ </template> -->
|
|
|
+ </van-swipe>
|
|
|
+ <div class="px-16 pb-16">
|
|
|
+ <div
|
|
|
+ class="w-321 mt-12 line-clamp-2 overflow-hidden truncate max-w-xs text-xl whitespace-normal font-bold text-black-3"
|
|
|
+ >
|
|
|
+ {{ defaultNoteJson?.projectTitle ?? '游记标题' }}
|
|
|
</div>
|
|
|
<div class="flex justify-end text-[#999] text-[12px]">
|
|
|
{{ defaultNoteJson.createTime }}
|
|
|
</div>
|
|
|
- <div
|
|
|
+ <!-- <div
|
|
|
class="relative border-2 border-dashed border-[#E3E3E3] pt-15 pb-15 mt-12 rounded-lg pl-20 text-[#4B99EA] text-[12px]"
|
|
|
:style="{ background: `url(${dashBorder2})`, backgroundSize: '100% 100%' }"
|
|
|
>
|
|
|
@@ -326,7 +386,7 @@
|
|
|
</van-col>
|
|
|
</van-row>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </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="" />
|
|
|
@@ -336,6 +396,34 @@
|
|
|
<div class="text-sm text-black-3" v-html="con.content"></div>
|
|
|
</template>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="text-sm text-black-6 py-12 mb-12 box-border border-b-[1px]">
|
|
|
+ <span class="mr-8">出发时间/{{ defaultNoteJson?.departureTime || '' }}</span>
|
|
|
+ <span class="mr-8">出行方式/{{ defaultNoteJson?.travelMode || '' }}</span>
|
|
|
+ <span class="mr-8">出发天数/{{ defaultNoteJson?.countTimes || '' }}</span>
|
|
|
+ <span class="mr-8">游玩人数/{{ defaultNoteJson?.travelNumber || '' }}</span>
|
|
|
+ <span class="mr-8">人物关系/{{ defaultNoteJson?.role || '' }}</span>
|
|
|
+ <span class="mr-8">人均费用/{{ defaultNoteJson?.averageCost || '' }}</span>
|
|
|
+ <span class="mr-8">推荐指数/{{ defaultNoteJson?.recommendationRate || '' }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex justify-end text-black-3 text-base">
|
|
|
+ <div class="ml-24 flex items-center">
|
|
|
+ <span class="iconfont icon-Thumbs-up text-black-3 mr-4" style="font-size: 24px"></span>
|
|
|
+ 点赞
|
|
|
+ </div>
|
|
|
+ <div class="ml-24 flex items-center">
|
|
|
+ <span class="iconfont icon-star text-black-3 mr-4" style="font-size: 24px"></span>
|
|
|
+ 收藏
|
|
|
+ </div>
|
|
|
+ <div class="ml-24 flex items-center">
|
|
|
+ <span
|
|
|
+ class="iconfont icon-chat-message text-black-3 mr-4"
|
|
|
+ style="font-size: 24px"
|
|
|
+ ></span>
|
|
|
+ 评论
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div
|
|
|
style="justify-content: space-between"
|
|
|
@@ -389,6 +477,8 @@ import draft from '~/assets/img/note-create/draft.svg'
|
|
|
import { VueDraggable } from 'vue-draggable-plus'
|
|
|
|
|
|
import { nanoid } from 'nanoid'
|
|
|
+const userInfoStore = useUserInfoStore()
|
|
|
+const { userInfo } = storeToRefs(userInfoStore)
|
|
|
|
|
|
const dragOptions = {
|
|
|
disabled: false, // 是否禁用拖拽
|
|
|
@@ -405,13 +495,13 @@ const userControlsList = ref([
|
|
|
title: '# 话题',
|
|
|
fn: TOPIC_TEXT,
|
|
|
empty: '暂无话题',
|
|
|
- apiUrl: '/website/tourism/fans/getFriends'
|
|
|
+ apiUrl: '/website/tourism/publishTravelNotes/getTopicListByName'
|
|
|
},
|
|
|
{
|
|
|
title: '@ 用户',
|
|
|
fn: EIT_TEXT,
|
|
|
empty: '暂无用户',
|
|
|
- apiUrl: '/website/tourism/fans/getFriends'
|
|
|
+ apiUrl: '/website/tourism/publishTravelNotes/getFouceEachFriendsByName'
|
|
|
},
|
|
|
{
|
|
|
title: 'H 段落标题',
|
|
|
@@ -455,7 +545,12 @@ const defaultNoteJson = {
|
|
|
averageCost: null,
|
|
|
recommendationRate: null,
|
|
|
travelNumber: null,
|
|
|
- travelNotesContent: []
|
|
|
+ travelNotesContent: [],
|
|
|
+ chau: null, // 洲
|
|
|
+ chauId: null, // 洲
|
|
|
+ imgUrls: [], // 头部的图片数组
|
|
|
+ topics: [], // 话题
|
|
|
+ mentions: [] // 艾特的用户 {userName:"",userId:123}
|
|
|
}
|
|
|
const noteJson = reactive(defaultNoteJson)
|
|
|
|
|
|
@@ -506,6 +601,9 @@ 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.travelNotesContent = data.travelNotesContent ?? []
|
|
|
if (noteJson.travelNotesContent.length === 0) {
|
|
|
noteJson.travelNotesContent.push({
|
|
|
@@ -516,14 +614,13 @@ async function getNoteDetail() {
|
|
|
}
|
|
|
})
|
|
|
|
|
|
- // placeOptions.value.find(item=>item.id)
|
|
|
if (data?.endPlaceDictMap?.id) {
|
|
|
noteJson.endPlaceId = data?.endPlaceDictMap?.id
|
|
|
noteJson.endPlace = data?.endPlaceDictMap?.name
|
|
|
}
|
|
|
if (data?.endPlaceDictMap?.name) {
|
|
|
- noteJson.endPlace = data?.endPlaceDictMap?.name
|
|
|
noteJson.endPlaceId = data?.endPlaceDictMap?.id
|
|
|
+ noteJson.endPlace = data?.endPlaceDictMap?.name
|
|
|
}
|
|
|
|
|
|
setLoading(false)
|
|
|
@@ -755,13 +852,19 @@ async function requestPublish() {
|
|
|
const topicList = ref([])
|
|
|
// 艾特用户的数组
|
|
|
const eitList = ref([])
|
|
|
+const showTopicEit = ref(null)
|
|
|
+
|
|
|
+// 记录点击话题和@ 后的几个数字。
|
|
|
+const topicEitName = ref('')
|
|
|
|
|
|
const topicLoading = ref(false)
|
|
|
async function getTopicList(parmas) {
|
|
|
try {
|
|
|
- if (!topicLoading.value) return
|
|
|
+ // if (!topicLoading.value) return
|
|
|
topicLoading.value = true
|
|
|
- const { data } = await request(parmas.apiUrl, {}).finally(() => (topicLoading.value = false))
|
|
|
+ const { data } = await request(parmas.apiUrl, {
|
|
|
+ query: { name: '' }
|
|
|
+ }).finally(() => (topicLoading.value = false))
|
|
|
|
|
|
if (parmas.fn == TOPIC_TEXT) {
|
|
|
topicList.value = data
|
|
|
@@ -769,7 +872,6 @@ async function getTopicList(parmas) {
|
|
|
if (parmas.fn == EIT_TEXT) {
|
|
|
eitList.value = data
|
|
|
}
|
|
|
- let _list = []
|
|
|
} catch (e) {}
|
|
|
}
|
|
|
|
|
|
@@ -788,15 +890,45 @@ function expandTextInput() {
|
|
|
showExpandTextInput.value = !showExpandTextInput.value
|
|
|
}
|
|
|
|
|
|
+const getInputPosition = (content) => {
|
|
|
+ try {
|
|
|
+ if (!content) return 0
|
|
|
+ const el = $el.querySelector('input, textarea')
|
|
|
+ if (!el) return content.length - 1
|
|
|
+ return el.selectionStart
|
|
|
+ } catch (e) {
|
|
|
+ // console.log(e, '??')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// 对应的操作
|
|
|
const handleOperate = (operate) => {
|
|
|
try {
|
|
|
switch (operate.fn) {
|
|
|
case TOPIC_TEXT:
|
|
|
- getTopicList(operate)
|
|
|
+ if (showTopicEit.value == TOPIC_TEXT) {
|
|
|
+ showTopicEit.value = null
|
|
|
+ } else {
|
|
|
+ noteJson.travelNotesContent[editIndex.value].content += '#'
|
|
|
+ showTopicEit.value = operate.fn
|
|
|
+ getTopicList(operate)
|
|
|
+ }
|
|
|
+
|
|
|
+ // const position = getInputPosition(noteJson.travelNotesContent[editIndex.value].content)
|
|
|
+
|
|
|
+ // const str = noteJson.travelNotesContent[editIndex.value].content
|
|
|
+ // inputValue.value = `${str.slice(0, position)}${'#'}${str.slice(position)}`
|
|
|
+
|
|
|
break
|
|
|
case EIT_TEXT:
|
|
|
- getTopicList(operate)
|
|
|
+ if (showTopicEit.value == EIT_TEXT) {
|
|
|
+ showTopicEit.value = null
|
|
|
+ } else {
|
|
|
+ showTopicEit.value = operate.fn
|
|
|
+ noteJson.travelNotesContent[editIndex.value].content += '@'
|
|
|
+ getTopicList(operate)
|
|
|
+ }
|
|
|
+
|
|
|
break
|
|
|
case PTITLE_TEXT:
|
|
|
handleInsertOrEditTitleOk(defaultSectionTitle)
|
|
|
@@ -808,12 +940,17 @@ const handleOperate = (operate) => {
|
|
|
} catch (e) {}
|
|
|
}
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- // 获取话题
|
|
|
- getTopicList(userControlsList[0])
|
|
|
- // 获取艾特用户
|
|
|
- getTopicList(userControlsList[1])
|
|
|
-})
|
|
|
+// 点击话题的事件
|
|
|
+function handleTopicAndEit(parmas, pType) {
|
|
|
+ if ((pType = '#')) {
|
|
|
+ noteJson.travelNotesContent[editIndex.value].content += `${pType} ${parmas.topicName}`
|
|
|
+ }
|
|
|
+ if ((pType = '@')) {
|
|
|
+ noteJson.travelNotesContent[editIndex.value].content += `${pType} ${parmas.showName}`
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
