feat:写游记的改版 详情

.env.development

@@ -19,17 +19,17 @@ VITE_APP_ENV=development
 # VITE_APP_BASE_URL=http://cilicli.qicp.vip
 
 # 黄雯本地
-# VITE_APP_BASE_URL=http://192.168.1.44:8082/
+VITE_APP_BASE_URL=http://192.168.1.44:8082/
 # 本地socoket
-# VITE_APP_IM_URL=ws://192.168.1.44:8082/system/message
+VITE_APP_IM_URL=ws://192.168.1.44:8082/system/message
 # 花生壳
 # VITE_APP_BASE_URL=http://q9943037p3.goho.co
 # VITE_APP_IM_URL=ws://q9943037p3.goho.co/system/message
 
 # 张维本地
-VITE_APP_BASE_URL=http://192.168.1.73:8082/
+# VITE_APP_BASE_URL=http://192.168.1.73:8082/
 # 本地socoket
-VITE_APP_IM_URL=ws://192.168.1.73:8082/system/message
+# VITE_APP_IM_URL=ws://192.168.1.73:8082/system/message
 # 花生壳
 # VITE_APP_BASE_URL=http://4eqxwr.natappfree.cc
 # VITE_APP_IM_URL=ws://4eqxwr.natappfree.cc/system/message

src/assets/iconfont/demo_index.html

@@ -55,6 +55,18 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe7d6;</span>
+                <div class="name">share</div>
+                <div class="code-name">&amp;#xe7d6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7e3;</span>
+                <div class="name">Thumbs-up</div>
+                <div class="code-name">&amp;#xe7e3;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe7de;</span>
                 <div class="name">chatgroup</div>
                 <div class="code-name">&amp;#xe7de;</div>
@@ -85,12 +97,6 @@
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7d6;</span>
-                <div class="name">star</div>
-                <div class="code-name">&amp;#xe7d6;</div>
-              </li>
-          
-            <li class="dib">
               <span class="icon iconfont">&#xe7d7;</span>
                 <div class="name">edit-1</div>
                 <div class="code-name">&amp;#xe7d7;</div>
@@ -408,10 +414,10 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1737529833663') format('woff2'),
-       url('iconfont.woff?t=1737529833663') format('woff'),
-       url('iconfont.ttf?t=1737529833663') format('truetype'),
-       url('iconfont.svg?t=1737529833663#iconfont') format('svg');
+  src: url('iconfont.woff2?t=1737624547968') format('woff2'),
+       url('iconfont.woff?t=1737624547968') format('woff'),
+       url('iconfont.ttf?t=1737624547968') format('truetype'),
+       url('iconfont.svg?t=1737624547968#iconfont') format('svg');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -438,6 +444,24 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-share"></span>
+            <div class="name">
+              share
+            </div>
+            <div class="code-name">.icon-share
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-Thumbs-up"></span>
+            <div class="name">
+              Thumbs-up
+            </div>
+            <div class="code-name">.icon-Thumbs-up
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-chatgroup"></span>
             <div class="name">
               chatgroup
@@ -483,15 +507,6 @@
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-star1"></span>
-            <div class="name">
-              star
-            </div>
-            <div class="code-name">.icon-star1
-            </div>
-          </li>
-          
-          <li class="dib">
             <span class="icon iconfont icon-edit-1"></span>
             <div class="name">
               edit-1
@@ -970,6 +985,22 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-share"></use>
+                </svg>
+                <div class="name">share</div>
+                <div class="code-name">#icon-share</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-Thumbs-up"></use>
+                </svg>
+                <div class="name">Thumbs-up</div>
+                <div class="code-name">#icon-Thumbs-up</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-chatgroup"></use>
                 </svg>
                 <div class="name">chatgroup</div>
@@ -1010,14 +1041,6 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-star1"></use>
-                </svg>
-                <div class="name">star</div>
-                <div class="code-name">#icon-star1</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-edit-1"></use>
                 </svg>
                 <div class="name">edit-1</div>

src/assets/iconfont/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4723464 */
-  src: url('iconfont.woff2?t=1737529833663') format('woff2'),
-       url('iconfont.woff?t=1737529833663') format('woff'),
-       url('iconfont.ttf?t=1737529833663') format('truetype'),
-       url('iconfont.svg?t=1737529833663#iconfont') format('svg');
+  src: url('iconfont.woff2?t=1737624547968') format('woff2'),
+       url('iconfont.woff?t=1737624547968') format('woff'),
+       url('iconfont.ttf?t=1737624547968') format('truetype'),
+       url('iconfont.svg?t=1737624547968#iconfont') format('svg');
 }
 
 .iconfont {
@@ -14,6 +14,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-share:before {
+  content: "\e7d6";
+}
+
+.icon-Thumbs-up:before {
+  content: "\e7e3";
+}
+
 .icon-chatgroup:before {
   content: "\e7de";
 }
@@ -34,10 +42,6 @@
   content: "\e7dd";
 }
 
-.icon-star1:before {
-  content: "\e7d6";
-}
-
 .icon-edit-1:before {
   content: "\e7d7";
 }

src/assets/iconfont/iconfont.json

@@ -6,6 +6,20 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "43223178",
+      "name": "share",
+      "font_class": "share",
+      "unicode": "e7d6",
+      "unicode_decimal": 59350
+    },
+    {
+      "icon_id": "43223177",
+      "name": "Thumbs-up",
+      "font_class": "Thumbs-up",
+      "unicode": "e7e3",
+      "unicode_decimal": 59363
+    },
+    {
       "icon_id": "43210372",
       "name": "chatgroup",
       "font_class": "chatgroup",
@@ -41,13 +55,6 @@
       "unicode_decimal": 59357
     },
     {
-      "icon_id": "43103288",
-      "name": "star",
-      "font_class": "star1",
-      "unicode": "e7d6",
-      "unicode_decimal": 59350
-    },
-    {
       "icon_id": "43103287",
       "name": "edit-1",
       "font_class": "edit-1",

src/assets/iconfont/iconfont.svg

@@ -14,6 +14,10 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="share" unicode="&#59350;" d="M635.628308 553.078154a148.322462 148.322462 0 1 1-32.295385 55.256615l-214.961231-125.44a148.322462 148.322462 0 1 1 0-201.176615l215.04-125.282462a148.322462 148.322462 0 1 1 32.33477 55.217231l-215.11877 125.361231a148.204308 148.204308 0 0 1 0 90.584615l215.000616 125.479385z m108.97723 184.910769a84.283077 84.283077 0 1 0 0-168.605538 84.283077 84.283077 0 0 0 0 168.605538z m-393.373538-311.532308a32.216615 32.216615 0 0 1 1.969231-3.387077c6.695385-12.091077 10.476308-25.993846 10.476307-40.763076a83.889231 83.889231 0 0 0-12.445538-44.11077 84.283077 84.283077 0 0 0-156.16 44.11077 84.283077 84.283077 0 0 0 156.16 44.110769z m309.051077-315.510153c0 13.902769 3.387077 27.057231 9.373538 38.596923a32.610462 32.610462 0 0 1 4.529231 7.758769 84.283077 84.283077 0 1 0-13.902769-46.395077z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="Thumbs-up" unicode="&#59363;" d="M446.293333 780.117333a29.866667 29.866667 0 0 0 27.306667 17.749334 145.066667 145.066667 0 0 0 145.066667-145.066667v-123.733333h200.362666a106.666667 106.666667 0 0 0 106.496-122.666667l-52.992-345.6a106.666667 106.666667 0 0 0-106.453333-90.666667H320a29.866667 29.866667 0 0 0-29.866667 29.866667v422.4a29.866667 29.866667 0 0 0 2.56 12.117333l153.6 345.6z m45.824-43.989333L349.866667 416.085333V29.866667h416.682666a46.933333 46.933333 0 0 1 46.933334 39.893333l52.992 345.6a46.976 46.976 0 0 1-46.933334 53.973333H588.8a29.866667 29.866667 0 0 0-29.866667 29.866667V652.8a85.333333 85.333333 0 0 1-66.816 83.328zM217.728 456.533333H320a29.866667 29.866667 0 0 0 29.866667-29.866666v-426.666667a29.866667 29.866667 0 0 0-29.866667-29.866667H217.728a118.613333 118.613333 0 0 0-119.338667 102.656 29.866667 29.866667 0 0 0-0.256 4.010667v268.8a29.866667 29.866667 0 0 0 0.256 4.010667c7.808 57.514667 57.386667 107.861333 119.338667 106.922666zM157.866667 343.424v-264.405333c4.778667-28.672 29.866667-49.664 59.093333-49.152H290.133333v366.933333H216.96c-27.392 0.469333-54.058667-22.698667-59.093333-53.376z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="chatgroup" unicode="&#59358;" d="M224 618.688a181.312 181.312 0 1 0 362.688 0 181.312 181.312 0 0 0-362.688 0zM405.312 736a117.312 117.312 0 1 1 0-234.688 117.312 117.312 0 0 1 0 234.688zM668.224 763.136a32 32 0 0 0 43.904 10.88 181.248 181.248 0 0 0 0-310.784 32 32 0 1 0-33.024 54.848 117.248 117.248 0 0 1 0 201.152 32 32 0 0 0-10.88 43.904zM288 256A160 160 0 0 1 128 96v-64h544v64A160 160 0 0 1 512 256H288zM64 96A224 224 0 0 0 288 320H512a224 224 0 0 0 224-224v-128H64v128zM741.376 305.728a32 32 0 0 0 44.352 8.896c50.56-33.728 88.96-70.464 108.352-123.712 19.008-52.224 24-83.84 7.552-165.76a32 32 0 1 0-62.72 12.48c15.552 78.016 8 95.68-4.992 131.456-12.608 34.752-38.208 62.016-83.648 92.288a32 32 0 0 0-8.896 44.352z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="unlock" unicode="&#59360;" d="M170.688 394.688A10.688 10.688 0 0 1 160 384v-384c0-5.888 4.8-10.688 10.688-10.688h682.624A10.688 10.688 0 0 1 864 0V384a10.688 10.688 0 0 1-10.688 10.688H170.688zM96 384c0 41.216 33.408 74.688 74.688 74.688h682.624c41.28 0 74.688-33.472 74.688-74.688v-384c0-41.28-33.408-74.688-74.688-74.688H170.688A74.688 74.688 0 0 0 96 0V384zM512 778.688a181.312 181.312 0 0 1-181.312-181.376v-170.688h-64V597.312a245.312 245.312 0 0 0 490.624 0h-64A181.312 181.312 0 0 1 512 778.624zM480 128v128h64v-128h-64z"  horiz-adv-x="1024" />
@@ -24,8 +28,6 @@
       
       <glyph glyph-name="lock" unicode="&#59357;" d="M170.688 394.688A10.688 10.688 0 0 1 160 384v-384c0-5.888 4.8-10.688 10.688-10.688h682.624A10.688 10.688 0 0 1 864 0V384a10.688 10.688 0 0 1-10.688 10.688H170.688zM96 384c0 41.216 33.408 74.688 74.688 74.688h682.624c41.28 0 74.688-33.472 74.688-74.688v-384c0-41.28-33.408-74.688-74.688-74.688H170.688A74.688 74.688 0 0 0 96 0V384zM512 778.688a181.312 181.312 0 0 1-181.312-181.376v-170.688h-64V597.312a245.312 245.312 0 0 0 490.624 0v-170.688h-64V597.312A181.312 181.312 0 0 1 512 778.624zM480 128v128h64v-128h-64z"  horiz-adv-x="1024" />
       
-      <glyph glyph-name="star1" unicode="&#59350;" d="M610.688 487.68l-98.56 199.68-98.56-199.68-220.48-32L352.64 300.16l-37.632-219.52 197.12 103.68 197.12-103.68-37.632 219.52 159.488 155.52-220.352 32z m319.36 18.24a19.2 19.2 0 0 0 10.688-32.768l-200.384-195.328 47.36-275.84a19.2 19.2 0 0 0-27.904-20.224l-247.68 130.24-247.68-130.24a19.2 19.2 0 0 0-27.904 20.224l47.296 275.84-200.384 195.328a19.2 19.2 0 0 0 10.624 32.768l276.928 40.256 123.84 250.88a19.2 19.2 0 0 0 34.432 0l123.904-250.88 276.928-40.256z"  horiz-adv-x="1024" />
-      
       <glyph glyph-name="edit-1" unicode="&#59351;" d="M904.448 579.2L696.96 786.752 742.144 832l207.552-207.552-45.248-45.248zM382.208 56.96l-231.232-46.272a19.2 19.2 0 0 0-22.592 22.592l46.272 231.232 467.008 467.008 207.616-207.552-467.072-467.072z m376.512 467.008l-117.056 117.056L233.6 232.96l-29.312-146.368 146.368 29.248 408.064 408.128zM960 192v-64h-256v64h256zM960 64v-64H544v64H960z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="logout" unicode="&#59352;" d="M904.832 383.808l-252.352-252.352-60.352 60.352 149.376 149.312h-408.96V426.432h408.96L592.128 575.808l60.352 60.352 252.352-252.352z m-487.04 320H204.48v-640h213.312v-85.376H119.168V789.12h298.624v-85.312z"  horiz-adv-x="1024" />

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

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="check">
+<path id="union" d="M6.43348 9.92188L12.6561 3.69922L13.5754 4.61846L6.43348 11.7604L1.97412 7.301L2.89336 6.38176L6.43348 9.92188Z" fill="#FF9300"/>
+</g>
+</svg>

src/components/CreateNote/Form.vue

@@ -9,22 +9,6 @@
         {{ endPlace ? endPlace : '地区选择' }}
       </template>
     </van-cell>
-    <!-- <van-field
-      is-link
-      v-model="endPlace"
-      :label-width="labelWidth"
-      clearable
-      size="large"
-      readonly
-      autocomplete="off"
-      placeholder="目的地"
-      @click="showPicker = true"
-      :rules="[{ required: true }]"
-    >
-      <template #label>
-        <span class="text-16 font-400 text-[#000]/[0.9]">地区选择</span>
-      </template>
-    </van-field> -->
     <van-popup round v-model:show="showPicker" position="bottom">
       <van-picker
         :columns="placeOptions"
@@ -62,7 +46,8 @@
             <span class="iconfont icon-unlock text-black-3 mr-12" style="font-size: 16px"></span>
           </template>
           <template v-if="isPublic == 0" #right-icon>
-            <van-icon color="#FF9300" name="arrow-down" :size="16" />
+            <!-- <van-icon color="#FF9300" name="arrow-down" :size="16" /> -->
+            <img class="w-16 h-16" :src="check" alt="" />
           </template>
         </van-cell>
         <van-cell @click="isPublic = 1" title="仅自己可见" center>
@@ -70,7 +55,8 @@
             <span class="iconfont icon-lock text-black-3 mr-12" style="font-size: 16px"></span>
           </template>
           <template v-if="isPublic == 1" #right-icon>
-            <van-icon color="#FF9300" name="arrow-down" :size="16" />
+            <!-- <van-icon color="#FF9300" name="arrow-down" :size="16" /> -->
+            <img class="w-16 h-16" :src="check" alt="" />
           </template>
         </van-cell>
       </van-cell-group>
@@ -214,24 +200,8 @@
         label="出发天数"
         clearable
         placeholder="请输入您的天数 例：4天"
-      >
-        <!-- :rules="[{ required: true, message: '请输入您的天数' }]" -->
-        <!-- <template #label>
-          <span class="text-16 font-400 text-[#000]/[0.9]">出发天数</span>
-        </template> -->
-      </van-field>
-
-      <!-- <van-cascader
-        v-model="endPlace"
-        title="请选择所在地区"
-        :options="placeOptions"
-        :field-names="placeOptionProps"
-        @confirm="onConfirmAddr"
-        @cancel="showPicker = false"
-      /> -->
+      ></van-field>
 
-      <!--  @finish="onConfirmAddr"  -->
-      <!--  field-names=""  :options="placeOptions" -->
       <van-field
         :label-width="labelWidth"
         v-model="travelNumber"
@@ -279,7 +249,8 @@
 </template>
 
 <script setup>
-import calendar from '~/assets//img/note-create/calendar.png'
+// import calendar from '~/assets//img/note-create/calendar.png'
+import check from '~/assets//img/note-create/check.svg'
 import rate from '~/assets//img/note-create/rate.svg'
 
 const departureTime = defineModel('departureTime')
@@ -291,6 +262,8 @@ const averageCost = defineModel('averageCost')
 const recommendationRate = defineModel('recommendationRate')
 const travelModeId = defineModel('travelMode')
 const travelNumber = defineModel('travelNumber')
+const chau = defineModel('chau')
+const chauId = defineModel('chauId')
 
 onMounted(() => {
   getPlaceOptions()
@@ -305,12 +278,13 @@ const maxDate = new Date()
 const showCalendar = ref(false)
 const showFrom = ref(false) //是否显示整个表单
 const showPublic = ref(false) //是否显示公开
-const isPublic = ref(null) //是否公开
+const isPublic = ref(0) //是否公开
 
 const showChatGroup = ref(false) //是否显示群聊
 const checked = ref('') //是否显示群聊
 const chatGroup = ref({}) //选择群聊的结果
 const chatGroupName = ref('') //选择群聊的名称
+const endPlaceValue = ref('') //选择目的的名称
 
 // 展示时间的格式
 const onConfirm = (date) => {
@@ -347,8 +321,13 @@ const showPickerTest = ref('')
 const showPicker = ref(false)
 const onConfirmAddr = ({ selectedValues, selectedOptions }) => {
   showPicker.value = false
+
   endPlace.value = selectedOptions[selectedValues.length - 1].menuName
   endPlaceId.value = selectedOptions[selectedValues.length - 1].id
+  chau.value = selectedOptions[0].menuName
+  chauId.value = selectedOptions[0].id
+
+  // endPlaceId.value = selectedOptions[selectedValues.length - 1].menuName
 }
 
 // 出行方式
@@ -378,6 +357,14 @@ async function getChatGroupList() {
   try {
     showChatGroup.value = true
     const { data } = await request('/website/tourGroup/getOwnGroup')
+    // const { data } = await request(
+    //   '/website/tourism/publishTravelNotes/getTakePartImGroupListByName',
+    //   {
+    //     query: {
+    //       name: ''
+    //     }
+    //   }
+    // )
     if (data) {
       chatGroupList.value = data
     }

src/components/CreateNote/HeaderImage.vue

@@ -1,13 +1,13 @@
 <template>
   <div
     style="overflow: hidden; overflow-x: scroll"
-    class="w-full imageList box-border px-12 pr-12 pt-8"
+    class="w-full imgUrls box-border px-12 pr-12 pt-8"
   >
-    <div class="h-74 flex justify-start items-center box-border pr-12">
+    <div :class="`${show ? 'h-40 ' : 'h-74 '} flex justify-start items-center box-border pr-12`">
       <div
-        v-for="(item, index) in imageList"
+        v-for="(item, index) in imgUrls"
         :key="index"
-        class="w-74 h-74 shrink-0 box-border rounded-lg overflow-hidden mr-8 relative"
+        :class="`${show ? 'w-40 ' : 'w-74 '} h-full shrink-0 box-border rounded-lg overflow-hidden mr-8 relative`"
         @click="lookImage(index)"
       >
         <img class="w-full h-full object-cover" :src="item" alt="" />
@@ -17,33 +17,34 @@
           {{ index + 1 }}
         </div>
       </div>
+
       <div
-        class="w-74 h-74 shrink-0 bg-[#F3F3F3] box-border rounded-lg flex justify-center items-center"
+        :class="`${show ? 'w-40' : 'w-74 '} h-full shrink-0 bg-[#F3F3F3] box-border rounded-lg flex justify-center items-center`"
         @click.stop="handleSelectImage"
       >
-        <span class="iconfont icon-plus text-black/[0.4] font-[800]" style="font-size: 35px"></span>
+        <span class="iconfont icon-plus text-black/[0.4] font-[800]" style="font-size: 28px"></span>
       </div>
     </div>
 
     <van-image-preview
       v-model:show="showPreview"
       :startPosition="imageIndex"
-      :images="imageList"
+      :images="imgUrls"
       @change="onChangeNewIndex"
     >
-      <template v-slot:index>{{ imageIndex + 1 }}/{{ imageList.length }}</template>
+      <template v-slot:index>{{ imageIndex + 1 }}/{{ imgUrls.length }}</template>
       <template v-slot:cover>
         <div class="fixed bottom-32 right-12 flex justify-start items-center text-sm text-white">
           <div
-            class="h-24 shrink-0 rounded-[24px] bg-white/[0.3] px-8 py-4 mr-8"
+            class="h-24 shrink-0 rounded-full bg-white/[0.3] px-8 py-4 mr-8"
             @click.stop="setHeadImage"
           >
             <span class="border border-white px-5 py-2 rounded-[2px] text-[10px] mr-4">1</span>
-            设为封面
+            设为首图
           </div>
           <div
             @click.stop="deleteImage"
-            class="h-24 shrink-0 rounded-[24px] bg-white/[0.3] px-8 py-2 flex items-center"
+            class="h-24 shrink-0 rounded-full bg-white/[0.3] px-8 py-2 flex items-center"
           >
             <span class="iconfont icon-delete-one text-white mr-4" style="font-size: 16px"></span>
             <span>删除</span>
@@ -56,16 +57,16 @@
 
 <script setup>
 const bannerUrl = defineModel('bannerUrl')
+const imgUrls = defineModel('imgUrls')
+const show = defineModel('show')
+
 const { open, onChange } = useFileDialog({
   accept: '.png,.png,.jpeg,.JPG,Png '
 })
 
 const showPreview = ref(false)
 const imageIndex = ref(0)
-const imageList = ref([
-  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
-  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'
-])
+
 function handleSelectImage() {
   open()
 }
@@ -92,7 +93,8 @@ async function handleCropperOk(data) {
       body: formData
     })
 
-    imageList.value.push(res.data.fileUrl)
+    imgUrls.value.push(res.data.fileUrl)
+
     closeToast()
   } catch (error) {
     closeToast()
@@ -115,11 +117,11 @@ function lookImage(imgIndex) {
 
 //设置头图
 function setHeadImage() {
-  let url = imageList.value[imageIndex.value]
-  imageList.value.splice(imageIndex.value, 1)
+  let url = imgUrls.value[imageIndex.value]
+  imgUrls.value.splice(imageIndex.value, 1)
   bannerUrl.value = url
 
-  imageList.value.unshift(url)
+  imgUrls.value.unshift(url)
   imageIndex.value = 0
 
   showPreview.value = false
@@ -135,7 +137,7 @@ function deleteImage() {
     showCancelButton: true
   })
     .then(() => {
-      imageList.value.splice(imageIndex.value, 1)
+      imgUrls.value.splice(imageIndex.value, 1)
       showPreview.value = false
     })
     .catch(() => {})
@@ -143,12 +145,7 @@ function deleteImage() {
 </script>
 
 <style lang="scss" scoped>
-// ::v-deep .van-image-preview__cover {
-//   bottom: 32px;
-//   right: 12px;
-// }
-
-.imageList::-webkit-scrollbar {
+.imgUrls::-webkit-scrollbar {
   width: 0; /* 竖向滚动条的宽度 */
 }
 </style>

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

@@ -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>