Merge branch 'dev' of http://1.94.207.143:3000/xyy/xyy-m into dev

src/assets/img/note-create/delete.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="delete">
+<g id="union">
+<path d="M6 12V6H7V12H6Z" fill="black" fill-opacity="0.9"/>
+<path d="M9 6V12H10V6H9Z" fill="black" fill-opacity="0.9"/>
+<path d="M10.5 3H14V4H13V14C13 14.5523 12.5523 15 12 15H4C3.44772 15 3 14.5523 3 14V4H2V3H5.5L5.5 1.8C5.5 1.35817 5.85817 1 6.3 1H9.7C10.1418 1 10.5 1.35817 10.5 1.8V3ZM6.5 3H9.5L9.5 2L6.5 2V3ZM4 4V14H12V4H4Z" fill="black" fill-opacity="0.9"/>
+</g>
+</g>
+</svg>

src/components/CreateNote/Form.vue

@@ -8,7 +8,6 @@
       <van-field
         v-model="departureTime"
         :label-width="labelWidth"
-       
         name="calendar"
         clearable
         autocomplete="off"
@@ -17,9 +16,12 @@
         :rules="[{ required: true, message: '请选择出发时间' }]"
       >
         <template #label>
-          <div class="w-full flex items-center text-16 h-full font-400 text-[#000]/[0.9]"
-            >出发时间 <span class="ml-3 text-16 text-[#D54941]">*</span></div
+          <div
+            class="w-full box-border flex items-center text-16 h-full font-400 text-[#000]/[0.9]"
           >
+            出发时间
+            <span class="ml-2 text-16 text-[#D54941]">*</span>
+          </div>
         </template>
         <template #right-icon>
           <div class="w-24 h-24">
@@ -48,12 +50,14 @@
       :rules="[{ required: true, message: '请输入您的天数' }]"
     >
       <template #label>
-        <span class="text-16 font-400 text-[#000]/[0.9]"
-          >出发天数 <span class="text-16 text-[#D54941]">*</span></span
-        >
+        <span class="text-16 font-400 text-[#000]/[0.9]">
+          出发天数
+          <span class="text-16 text-[#D54941]">*</span>
+        </span>
       </template>
     </van-field>
     <van-field
+      :label-width="labelWidth"
       v-model="role"
       label="人物关系"
       clearable
@@ -71,10 +75,11 @@
       :rules="[{ required: true, message: '请输入您的天数' }]"
     >
       <template #label>
-        <span class="text-16 font-400 text-[#000]/[0.9]"
-          >目的地<span class="text-white">的</span>
-          <span class="text-16 text-[#D54941]">*</span></span
-        >
+        <span class="text-16 font-400 text-[#000]/[0.9]">
+          目的地
+          <span class="text-white">的</span>
+          <span class="text-16 text-[#D54941]">*</span>
+        </span>
       </template>
     </van-field>
     <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
@@ -85,14 +90,20 @@
         @cancel="showPicker = false"
       />
     </van-popup>
-    <van-field  name="rate" :label-width="labelWidth" label="推荐指数">
+    <van-field name="rate" :label-width="labelWidth" label="推荐指数">
       <template #input>
-        <van-rate color="#ffd21e" v-model="recommendationRate" clearable />
+        <van-rate
+          color="#ffd21e"
+          void-icon="star"
+          void-color="#eee"
+          v-model="recommendationRate"
+          clearable
+        />
       </template>
     </van-field>
 
     <van-field
-    :label-width="labelWidth"
+      :label-width="labelWidth"
       v-model="averageCost"
       name="averageCost"
       autocomplete="off"
@@ -100,11 +111,10 @@
       maxlength="10"
       label="平均费用"
       placeholder="请输入平均费用"
-    >
-    </van-field>
+    ></van-field>
 
     <van-field
-    :label-width="labelWidth"
+      :label-width="labelWidth"
       is-link
       v-model="travelMode"
       clearable
@@ -112,8 +122,7 @@
       label="出行方式"
       placeholder="请选择出行方式"
       @click="showtravelMode = true"
-    >
-    </van-field>
+    ></van-field>
     <van-popup v-model:show="showtravelMode" destroy-on-close position="bottom">
       <van-picker
         :columns="travelModeOptions"
@@ -135,78 +144,76 @@
 </template>
 
 <script setup>
-import calendar from "~/assets//img/note-create/calendar.png";
-const  labelWidth ='68px'
+import calendar from '~/assets//img/note-create/calendar.png'
+const labelWidth = '68px'
 // 出发时间
-const minDate = new Date(2010, 0, 1);
-const maxDate = new Date();
+const minDate = new Date(2010, 0, 1)
+const maxDate = new Date()
 
-const showCalendar = ref(false);
+const showCalendar = ref(false)
 
 // 展示时间的格式
 const onConfirm = (date) => {
-  departureTime.value = date ? `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日` : "";
-  showCalendar.value = false;
-};
+  departureTime.value = date
+    ? `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
+    : ''
+  showCalendar.value = false
+}
 
 // 目的地
-const showPicker = ref(false);
+const showPicker = ref(false)
 const onConfirmAddr = ({ selectedValues, selectedOptions }) => {
-  showPicker.value = false;
-  endPlace.value = selectedOptions[selectedValues.length - 1].menuName;
-};
+  showPicker.value = false
+  endPlace.value = selectedOptions[selectedValues.length - 1].menuName
+}
 
 // 出行方式
-const showtravelMode = ref(false);
+const showtravelMode = ref(false)
 const onConfirmTravelMode = ({ selectedValues, selectedOptions }) => {
-  showtravelMode.value = false;
-  travelMode.value = selectedOptions[selectedValues.length - 1].name;
-};
-
-const departureTime = defineModel("departureTime");
-const countTimes = defineModel("countTimes");
-const endPlace = defineModel("endPlace");
-const role = defineModel("role");
-const averageCost = defineModel("averageCost");
-const recommendationRate = defineModel("recommendationRate");
-const travelMode = defineModel("travelMode");
-const travelNumber = defineModel("travelNumber");
+  showtravelMode.value = false
+  travelMode.value = selectedOptions[selectedValues.length - 1].name
+}
+
+const departureTime = defineModel('departureTime')
+const countTimes = defineModel('countTimes')
+const endPlace = defineModel('endPlace')
+const role = defineModel('role')
+const averageCost = defineModel('averageCost')
+const recommendationRate = defineModel('recommendationRate')
+const travelMode = defineModel('travelMode')
+const travelNumber = defineModel('travelNumber')
 
 onMounted(() => {
-  getPlaceOptions();
-  getTravelModeOptions();
-});
+  getPlaceOptions()
+  getTravelModeOptions()
+})
 
 const placeOptionProps = {
-  text: "menuName",
-  value: "id",
-  children: "tourWriteBelongTabVoList",
-};
+  text: 'menuName',
+  value: 'id',
+  children: 'tourWriteBelongTabVoList'
+}
 const travelModeOptionsProps = {
-  text: "name",
-  value: "id",
-};
+  text: 'name',
+  value: 'id'
+}
 
 // 获取目的地
-const placeOptions = ref([]);
+const placeOptions = ref([])
 async function getPlaceOptions() {
-  const { data } = await request(
-    "/website/tourism/publishTravelNotes/getWriteBelongTab"
-  );
-  console.log(data, "placeOptions");
+  const { data } = await request('/website/tourism/publishTravelNotes/getWriteBelongTab')
+  console.log(data, 'placeOptions')
 
-  placeOptions.value = data;
+  placeOptions.value = data
 }
 
 // 获取出行方式
-const travelModeOptions = ref([]);
+const travelModeOptions = ref([])
 async function getTravelModeOptions() {
-  const { data } = await request(
-    "/admin/app/extra/listDict?dictCode=TourTravelMode"
-  );
-  console.log(data, "115");
+  const { data } = await request('/admin/app/extra/listDict?dictCode=TourTravelMode')
+  console.log(data, '115')
 
-  travelModeOptions.value = data;
+  travelModeOptions.value = data
 }
 </script>
 

src/components/CreateNote/HeaderBanner.vue

@@ -2,34 +2,25 @@
   <div style="height: calc(100vw * 0.59)" class="w-full">
     <!-- v-if="!bannerUrl" -->
     <div
-      
       class="flex h-full w-full items-center justify-center bg-[url('~/assets/img/note-create/note_create_banner_bg.png')]"
     >
-
-    <!-- <van-uploader    reupload  v-model="fileList" max-count="1" :preview-size="['100%', 221]">
+      <!-- <van-uploader    reupload  v-model="fileList" max-count="1" :preview-size="['100%', 221]">
     </van-uploader> -->
       <!-- <van-button icon="plus" type="primary">上传文件</van-button> -->
 
       <!-- <input type="file" class="van-uploader__input" value="1213" accept="image/*"> -->
       <div
         @click="handleSelectImage"
-        class="flex h-40 w-150  items-center justify-center space-x-10 rounded-full border-2 border-white"
+        class="flex h-40 w-150 active:bg-[#000]/[0.1] bg-[#FFFFFF]/[0.2] items-center justify-center space-x-10 rounded-full border-2 border-white"
       >
-        
-          <div class="w-16 h-16">
-            <van-image
-            width="100%"
-            height="100%"
-            :src="icon_image_fill"
-          />
-          </div>
-          <!-- <van-uploader v-model="fileList" multiple :max-count="1" /> -->
-        
-        <span  class="text-sm font-normal pt-4  text-white">设置游记头图</span>
+        <div class="w-16 h-16">
+          <van-image width="100%" height="100%" :src="icon_image_fill" />
+        </div>
+        <!-- <van-uploader v-model="fileList" multiple :max-count="1" /> -->
+
+        <span class="text-sm font-normal pt-4 text-[#FF9300]">设置游记头图</span>
       </div>
     </div>
-   
-   
 
     <!-- <div v-else class="relative h-full w-full">
       <img :src="bannerUrl" class="h-full w-full" alt="" />
@@ -72,7 +63,7 @@
 
 <script setup>
 import { useFileDialog } from '@vueuse/core'
-import icon_image_fill from "~/assets/img/note-create/icon-image-fill.png";
+import icon_image_fill from '~/assets/img/note-create/icon-image-fill.png'
 // import { VueCropper } from 'vue-cropper'
 // import 'vue-cropper/dist/index.css'
 
@@ -112,13 +103,10 @@ async function handleCropperOk() {
       formData.append('uploadFile', data)
       formData.append('asImage', true)
       formData.append('fieldName', 'travelNotesBanner')
-      const res = await request(
-        '/admin/app/tourismProjectTravelNotesWrite/upload',
-        {
-          method: 'post',
-          body: formData
-        }
-      )
+      const res = await request('/admin/app/tourismProjectTravelNotesWrite/upload', {
+        method: 'post',
+        body: formData
+      })
       const url = res.data.fileUrl
       bannerUrl.value = url
       cropperDialogVisible.value = false

src/components/CreateNote/InsertTitleSection.vue

@@ -3,6 +3,18 @@
     class="relative box-border flex min-h-60 items-center justify-between space-x-10 rounded-lg border border-dashed border-primary bg-white px-10 py-10"
     ref="target"
   >
+    <van-cell-group class="border" inset>
+      <van-field
+        v-model="title"
+        rows="1"
+        autosize
+        label-width="5"
+        type="textarea"
+        placeholder="请输入段落标题..."
+        maxlength="50"
+        show-word-limit
+      ></van-field>
+    </van-cell-group>
     <span class="text-3xl text-black-3">{{ title }}</span>
     <div
       v-show="!isOutside"

src/pages/note-create-start/index.client.vue

@@ -1,56 +1,44 @@
 <template>
-
-    <div
-    class="relative h-full  pt-180 h-screen w-full  bg-[url('~/assets/img/note-create/note_create_bg.png')] bg-cover  bg-cover"
+  <!--  -->
+  <div
+    class="relative pt-180 h-screen w-full bg-[url('~/assets/img/note-create/note_create_bg.png')] bg-cover bg-cover"
   >
-  <!-- absolute  left-1/2 -translate-x-1/2-->
- 
     <NuxtLink
       to="/note-create"
-      class=" block mx-auto  pt-25 px-10  flex h-174 w-274  cursor-pointer flex-col items-center justify-center rounded-[30px] bg-[#fff1db] transition-all hover:opacity-90"
+      class="block mx-auto pt-25 px-10 flex h-174 w-274 cursor-pointer flex-col items-center justify-center rounded-[30px] bg-[#fff1db] transition-all hover:opacity-90"
     >
-      <img
-        src="~/assets/img/note-create/note_create_entry.png"
-        class="h-auto w-full" 
-      />
-      <!-- <span class="text-[8px] text-black-9"> 
-        夕阳下的金色狂野，是我心中最美的风景，也是我旅行的意义。
-      </span> -->
-      <div class="  -mt-5 text-2xl font-semibold text-primary">旅行日记</div>
+      <img src="~/assets/img/note-create/note_create_entry.png" class="h-auto w-full" />
+
+      <div class="-mt-5 text-2xl font-semibold text-primary">旅行日记</div>
     </NuxtLink>
-  
-   <!-- absolute top-460  left-1/2  -translate-x-1/2-->
+
     <NuxtLink
       to="/profile/notes?tab=draft"
-      class=" w-165 box-border mx-auto  mt-90 flex h-60 cursor-pointer   items-center space-x-5 rounded-xl bg-[#fff1c7] px-20 hover:opacity-80"
+      class="w-165 box-border mx-auto mt-90 flex h-60 cursor-pointer items-center space-x-5 rounded-xl bg-[#fff1c7] px-20 hover:opacity-80"
     >
-    <img
-        src="~/assets/img/note-create/note_create_book.png"
-        class="h-29 w-23"
-        alt=""
-        srcset=""
-      />
-      <span class="text-sm pl-5  text-black-6">我的草稿箱（{{ draftTotal }}）</span>
-     
+      <img src="~/assets/img/note-create/note_create_book.png" class="h-29 w-23" alt="" srcset="" />
+      <span class="text-sm pl-5 text-black-6">我的草稿箱（{{ draftTotal }}）</span>
     </NuxtLink>
-    <!-- bottom-60 left-1/2 -translate-x-1/2 -->
-    <div
-      class="mx-auto  mt-30  flex w-280 items-center justify-center"
-    >
+
+    <div class="mx-auto mt-30 flex w-280 items-center justify-center">
       <img
         src="~/assets/img/note-create/note_create_start_icon.png"
         class="h-45 w-45"
         alt=""
         srcset=""
       />
-      
-      <span class="text-sm text-white opacity-60"
-        >世界年轻一代更喜欢用的旅游网站 年轻旅行者共同打造的"旅行神器”</span
-      >
+
+      <span class="text-sm text-white opacity-60">
+        世界年轻一代更喜欢用的旅游网站 年轻旅行者共同打造的"旅行神器”
+      </span>
     </div>
+    <!-- absolute  left-1/2 -translate-x-1/2-->
+    <!-- absolute top-460  left-1/2  -translate-x-1/2-->
+    <!-- bottom-60 left-1/2 -translate-x-1/2 -->
+    <!-- <span class="text-[8px] text-black-9"> 
+        夕阳下的金色狂野，是我心中最美的风景，也是我旅行的意义。
+      </span> -->
   </div>
-
-  
 </template>
 
 <script setup>
@@ -61,16 +49,13 @@ onMounted(() => {
 const draftTotal = ref(0)
 
 async function getDraftList() {
-  const { data } = await request(
-    '/website/tourism/publishTravelNotes/getDraftList',
-    {
-      query: {
-        pageNum: 1,
-        pageSize: 10000,
-        type: 0
-      }
+  const { data } = await request('/website/tourism/publishTravelNotes/getDraftList', {
+    query: {
+      pageNum: 1,
+      pageSize: 10000,
+      type: 0
     }
-  )
+  })
   draftTotal.value = data.totalCount
 }
 </script>

src/pages/note-create/index.client.vue

@@ -1,8 +1,7 @@
 <template>
-  <div v-if="!loading"  class="box-border pb-80">
+  <div v-if="!loading" class="box-border pb-80">
     <CreateNoteHeaderBanner v-model:bannerUrl="noteJson.travelNotesBanner" />
-   
-  
+
     <CreateNoteForm
       v-model:departureTime="noteJson.departureTime"
       v-model:countTimes="noteJson.countTimes"
@@ -14,60 +13,205 @@
       v-model:travelNumber="noteJson.travelNumber"
     />
 
-    
-    <div class="flex items-center pl-16 w-full h-40 ">
+    <div class="flex items-center pl-16 pt-16 w-full h-40">
       <div class="w-2 h-14 bg-[#FF9300] mr-16"></div>
       <h1 class="text-sm font-bold">编辑游记文章</h1>
     </div>
-  
-    <van-cell-group class="border"  inset>
-      <van-field
-        v-model="noteJson.projectTitle"
-        rows="1"
-        autosize
-        label-width="5"
-        type="textarea"
-        placeholder="从这里开始游记大标题..."
-        maxlength="50"
-        show-word-limit
+    <div class="mb-12">
+      <van-cell-group class="border" inset>
+        <van-field
+          v-model="noteJson.projectTitle"
+          rows="1"
+          autosize
+          type="textarea"
+          placeholder="从这里开始游记大标题..."
+          maxlength="50"
+          show-word-limit
+        ></van-field>
+      </van-cell-group>
+    </div>
+
+    <template v-for="(item, index) in noteJson.travelNotesContent" :key="item.tmpId">
+      <div v-if="item.type === defaultSectionTitle.type" class="h-50 mb-12 relative box-border">
+        <van-cell-group class="border h-full" inset>
+          <van-field
+            v-model="item.content"
+            rows="1"
+            autosize
+            class="text-base"
+            type="textarea"
+            trigger="onChange"
+            validate-trigger="onChange"
+            placeholder="请输入段落标题..."
+            @click-input="handleInsertOrEditTitleIndex(index)"
+            @update:model-value="handleInsertOrEditTitle"
+          >
+            <template #extra>
+              <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>
+            </template>
+          </van-field>
+        </van-cell-group>
+      </div>
+
+      <div
+        v-else-if="item.type === defaultSectionContent.type"
+        class="h-100 mb-12 relative box-border"
+      >
+        <van-cell-group class="border h-full" inset>
+          <van-field
+            v-model="item.content"
+            rows="1"
+            autosize
+            class="text-base border"
+            type="textarea"
+            trigger="onChange"
+            validate-trigger="onChange"
+            placeholder="请在这里输入游记正文..."
+            @click-input="handleInsertOrEditTitleIndex(index)"
+            @update:model-value="handleInsertOrEditTitle"
+          >
+            <template #extra>
+              <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>
+            </template>
+          </van-field>
+        </van-cell-group>
+      </div>
+
+      <div
+        v-else-if="item.type === defaultSectionImage.type"
+        class="relative box-border h-203 mb-12"
       >
-     </van-field>
-    </van-cell-group>
+        <van-cell-group class="border h-full" inset>
+          <!-- <van-field>
+            <template #input>
+              <van-uploader v-model="value">
+                <template #default>
+                  <div class="w-full h-full flex justify-center items-center">
+                    <button
+                      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=""
+                        />
+                      </div>
+
+                      插入图片
+                    </button>
+                  </div>
+                </template>
+              </van-uploader>
+            </template>
+          </van-field> -->
+
+          <div class="w-full h-full flex justify-center items-center">
+            <van-uploader v-model="fileList" :after-read="afterRead" :multiple="false" >
+              <button
+                @click="handleInsertOrEditTitleIndex(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="" />
+                </div>
+
+                插入图片
+              </button>
+            </van-uploader>
+            
+          </div>
+        </van-cell-group>
+        <div v-if="item.content ">
+              <img :src="item.content" alt="Uploaded Image" />
+        </div>
 
+        <div class="w-86 flex justify-between items-center h-16 absolute top-[10px] right-26 z-1">
+          <span @click="handleSaveCover(item)" class="text-sm text-black-3">设为封面图</span>
+          <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>
+
+    <div class="px-16 flex justify-between">
+      <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]"
+      >
+        <van-icon name="plus" class="mr-5" color="#FF9300" />
+        插入小标题
+      </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]"
+      >
+        <van-icon name="plus" class="mr-5" color="#FF9300" />
+        插入内容
+      </button>
+      <!-- @click="handleInsertOrEditTitleOk(defaultSectionImage)" -->
+      <button
+        @click="handleInsertOrEditTitleOk(defaultSectionImage)"
+        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]"
+      >
+        <van-icon name="plus" class="mr-5" color="#FF9300" />
+        插入图片
+      </button>
+    </div>
 
-    <div  class="fixed box-border p-16 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="fixed box-border p-16 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">
-        <div class="w-50  text-center">
+        <div class="w-50 text-center"  @click="handleSaveDraft">
           <van-icon name="notes-o" size="24px" />
           <p class="text-sm text-black-3">草稿</p>
         </div>
-        <div class="w-50  text-center">
+        <div class="w-50 text-center">
           <van-icon name="eye-o" size="24px" />
           <p class="text-sm text-black-3">预览</p>
         </div>
-       
       </div>
 
-      
-        <van-button  class="w-full h-full flex  items-center"  size="large" type="primary" round color="#FD9A00"  block> 
-         <div class=" inline-block w-22 h-22 ">
-          <van-image
-        width="100%"
-        height="100%"
-        :src="upload"
-      />
-      </div> 发布
-         </van-button>
-
-  
+      <van-button
+        class="w-full h-full flex items-center"
+        size="large"
+        type="primary"
+        round
+        color="#FD9A00"
+        block
+      >
+        <template #icon>
+          <van-image width="22" height="22" :src="upload" />
+        </template>
+        发布
+      </van-button>
     </div>
-    <div
-      class="flex justify-center "
-    >
+
+    <div class="flex justify-center">
       <div class="mx-auto mt-30 flex w-wrap space-x-50">
-        <!-- <div class="min-h-360 w-[860px] pb-80"> -->
-          <div>
-            <!-- <VueDraggable v-model="noteJson.travelNotesContent">
+        <div>
+          <!-- <VueDraggable v-model="noteJson.travelNotesContent">
               <template
                 v-for="(item, index) in noteJson.travelNotesContent"
                 :key="item.tmpId"
@@ -93,23 +237,13 @@
                 </template>
               </template>
             </VueDraggable> -->
-            <!-- <CreateNoteBottomActions
+          <!-- <CreateNoteBottomActions
               class="mt-50"
               :publishLoading="publishLoading"
               @on-preview="handlePreview"
               @on-publish="handlePublish"
             /> -->
-          </div>
-        <!-- </div> -->
-        <!-- <el-affix :offset="20">
-          <CreateNoteLeftActions
-            @on-insert-title="handleInsertOrEditTitle"
-            @on-insert-content="handleInsertContent"
-            @on-insert-img="handleInsertImage"
-           
-          />
-           @on-save-draft="handleSaveDraft"
-        </el-affix> -->
+        </div>
       </div>
     </div>
 
@@ -133,17 +267,15 @@
     <!-- <CreateNotePublishResultModal
       v-model:visible="publishResultModalOptions.show"
     /> -->
-  
   </div>
 </template>
 
 <script setup>
-import upload  from '../../assets/img/note-create/upload.svg'
+import upload from '~/assets/img/note-create/upload.svg'
 import { cloneDeep } from 'lodash-es'
 // import { VueDraggable } from 'vue-draggable-plus'
 import { nanoid } from 'nanoid'
 
-
 const { loading, setLoading } = useLoading()
 loading.value = false
 
@@ -188,30 +320,30 @@ watch(noteJson, () => {}, { deep: true })
 // )
 
 // 获取草稿详情
-// async function getNoteDetail() {
-//   try {
-//     setLoading(true)
-//     const res = await request(
-//       `/website/tourism/publishTravelNotes/getDraftDetail?writeId=${id.value}`
-//     )
-//     const data = res.data ?? {}
-//     Object.keys(noteJson).forEach((key) => {
-//       noteJson[key] = data[key]
-//       noteJson.travelNotesContent = data.travelNotesContent ?? []
-//       if (noteJson.travelNotesContent.length === 0) {
-//         noteJson.travelNotesContent.push({
-//           type: defaultSectionContent.type,
-//           content: '',
-//           tmpId: nanoid()
-//         })
-//       }
-//     })
+async function getNoteDetail() {
+  try {
+    setLoading(true)
+    const res = await request(
+      `/website/tourism/publishTravelNotes/getDraftDetail?writeId=${id.value}`
+    )
+    const data = res.data ?? {}
+    Object.keys(noteJson).forEach((key) => {
+      noteJson[key] = data[key]
+      noteJson.travelNotesContent = data.travelNotesContent ?? []
+      if (noteJson.travelNotesContent.length === 0) {
+        noteJson.travelNotesContent.push({
+          type: defaultSectionContent.type,
+          content: '',
+          tmpId: nanoid()
+        })
+      }
+    })
 
-//     setLoading(false)
-//   } catch (error) {
-//     setLoading(false)
-//   }
-// }
+    setLoading(false)
+  } catch (error) {
+    setLoading(false)
+  }
+}
 
 /************ 插入段落标题逻辑 ********** */
 
@@ -220,32 +352,25 @@ const insertTilteOptions = reactive({
   content: null,
   editIndex: null
 })
+const editIndex = ref(null)
 
 // 点击编辑或者新增段落标题，弹出dialog
-function handleInsertOrEditTitle(index) {
-  if (index === null || index === undefined) {
-    // 新增
-    insertTilteOptions.editIndex = null
-    insertTilteOptions.content = null
-  } else {
-    // 编辑
-    insertTilteOptions.editIndex = index
-    insertTilteOptions.content = noteJson.travelNotesContent[index].content
-  }
-  insertTilteOptions.show = true
+function handleInsertOrEditTitleIndex(index) {
+  editIndex.value = index
+}
+
+// 点击编辑或者新增段落标题，弹出dialog
+function handleInsertOrEditTitle(value) {
+  noteJson.travelNotesContent[editIndex.value].content = value
 }
 
 // 确认编辑或者新增段落标题
 function handleInsertOrEditTitleOk(newTitle) {
-  if (insertTilteOptions.editIndex === null) {
-    noteJson.travelNotesContent.push({
-      type: defaultSectionTitle.type,
-      content: newTitle,
-      tmpId: nanoid()
-    })
-  } else {
-    noteJson.travelNotesContent[insertTilteOptions.editIndex].content = newTitle
-  }
+  // if (insertTilteOptions.editIndex === null) {
+  noteJson.travelNotesContent.push({
+    ...newTitle,
+    tmpId: nanoid()
+  })
 }
 
 // 删除段落标题
@@ -264,28 +389,27 @@ function handleInsertContent() {
   )
 }
 
-function handleDeleteContent(index) {
-  noteJson.travelNotesContent.splice(index, 1)
-}
+// function handleDeleteContent(index) {
+//   noteJson.travelNotesContent.splice(index, 1)
+// }
 
 /******************插入图片逻辑*******************/
 const insertImageOptions = reactive({
   show: false
 })
+
 function handleInsertImage() {
   insertImageOptions.show = true
 }
 
-function handleInsertImageOk(fileUrlList) {
-  const imageList = fileUrlList.map((e) => ({
-    type: defaultSectionImage.type,
-    content: e.fileUrl,
-    tmpId: nanoid()
-  }))
-  noteJson.travelNotesContent = (noteJson.travelNotesContent ?? []).concat(
-    imageList
-  )
-}
+// function handleInsertImageOk(fileUrlList) {
+//   const imageList = fileUrlList.map((e) => ({
+//     type: defaultSectionImage.type,
+//     content: e.fileUrl,
+//     tmpId: nanoid()
+//   }))
+//   noteJson.travelNotesContent = (noteJson.travelNotesContent ?? []).concat(imageList)
+// }
 
 function handleDeleteImage(index) {
   if (noteJson.travelNotesContent[index].type === 'image') {
@@ -301,23 +425,66 @@ function handleSaveCover(item) {
     }
     item.cover = 1
   })
-  ElMessage.success('设置封面成功')
+  showToast('设置封面成功')
 }
 
-//保存为草稿
-// async function handleSaveDraft() {
-//   try {
-//     await request('/website/tourism/publishTravelNotes/saveDraft', {
-//       method: 'post',
-//       body: {
-//         ...noteJson,
-//         id: id.value
-//       }
-//     })
-//     ElMessage.success('草稿保存成功')
-//   } finally {
-//   }
-// }
+const fileList = ref([])
+// 图片上传
+const afterRead = (file) => {
+      // 此时可以自行将文件上传至服务器
+      uploadFile(file)
+      
+
+};
+
+const useAuth = useAuthStore()
+const { token } = storeToRefs(useAuth)
+
+const uploadUrl = `${import.meta.env.VITE_APP_BASE_URL}/admin/app/tourismProjectTravelNotesWrite/upload`
+
+const uploadFile = (file) => {
+  // 使用 FormData 来包装文件，模拟表单提交
+  const formData = new FormData();
+  formData.append('file', file);
+  // 这里假设使用 axios 进行文件上传
+  request(uploadUrl, formData, {
+    headers: {
+      Authorization:token,
+      'Content-Type': 'multipart/form-data'
+    }
+  }).then(res => {
+    console.log(res,'img1111');
+    // noteJson.travelNotesContent.map(el=>{
+    //   if (el.type==='image') {
+    //     noteJson.travelNotesContent[editIndex.value].content=''
+    //   }
+    // })
+    
+    
+    // 处理上传成功的逻辑
+    // Toast('上传成功');
+  }).catch(err=> {
+    console.log(err,'img');
+    
+    // 处理上传失败的逻辑
+    // Toast('上传失败，请重试');
+  });
+};
+
+// 保存为草稿
+async function handleSaveDraft() {
+  try {
+    await request('/website/tourism/publishTravelNotes/saveDraft', {
+      method: 'post',
+      body: {
+        ...noteJson,
+        // id: id?.value
+      }
+    })
+    showToast('草稿保存成功')
+  } finally {
+  }
+}
 
 // 预览
 const previewOptions = reactive({
@@ -342,39 +509,36 @@ const publishResultModalOptions = reactive({
 
 // 发布
 async function handlePublish() {
-
   if (!noteJson.travelNotesBanner) {
     showNotify({
-    message: '请设置游记头图',
-    duration: 3000,
-    });
+      message: '请设置游记头图',
+      duration: 3000
+    })
     return
   }
   if (!noteJson.projectTitle) {
     showNotify({
-    message: '请输入游记标题',
-    duration: 3000,
-    });
+      message: '请输入游记标题',
+      duration: 3000
+    })
     return
   }
   if (!noteJson.endPlace) {
     showNotify({
-    message: '请选择目的地',
-    duration: 3000,
-    });
+      message: '请选择目的地',
+      duration: 3000
+    })
     return
   }
   if (noteJson.travelNotesContent.length === 0) {
     showNotify({
-    message: '游记内容不能为空',
-    duration: 3000,
-    });
+      message: '游记内容不能为空',
+      duration: 3000
+    })
     return
   }
 
-  const { data: isPerfect } = await request(
-    '/website/tourism/publishTravelNotes/isPerfect'
-  )
+  const { data: isPerfect } = await request('/website/tourism/publishTravelNotes/isPerfect')
   if (isPerfect === 0) {
     // 需要收集个人信息
     userInfoOptions.show = true