Quellcode durchsuchen

feat:写游记的改版 表单的改动

suwenjiang vor 1 Monat
Ursprung
Commit
fb96e10b2e

+ 4 - 4
.env.development

@@ -3,8 +3,8 @@ VITE_APP_ENV=development
 
 # 测试服
 # VITE_APP_BASE_URL=https://service.xiaoyaotravel.com/api/
-VITE_APP_BASE_URL=http://101.126.146.250:8082/
-VITE_APP_IM_URL=ws://101.126.146.250:8082/system/message
+# VITE_APP_BASE_URL=http://101.126.146.250:8082/
+# VITE_APP_IM_URL=ws://101.126.146.250:8082/system/message
 
 
 
@@ -27,9 +27,9 @@ VITE_APP_IM_URL=ws://101.126.146.250:8082/system/message
 # 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

+ 280 - 4
src/assets/iconfont/demo_index.html

@@ -55,6 +55,78 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe7de;</span>
+                <div class="name">chatgroup</div>
+                <div class="code-name">&amp;#xe7de;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7e0;</span>
+                <div class="name">unlock</div>
+                <div class="code-name">&amp;#xe7e0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7e1;</span>
+                <div class="name">more</div>
+                <div class="code-name">&amp;#xe7e1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7e2;</span>
+                <div class="name">location</div>
+                <div class="code-name">&amp;#xe7e2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7dd;</span>
+                <div class="name">lock</div>
+                <div class="code-name">&amp;#xe7dd;</div>
+              </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>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7d8;</span>
+                <div class="name">logout</div>
+                <div class="code-name">&amp;#xe7d8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7d9;</span>
+                <div class="name">chat-message</div>
+                <div class="code-name">&amp;#xe7d9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7da;</span>
+                <div class="name">chevron-down</div>
+                <div class="code-name">&amp;#xe7da;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7db;</span>
+                <div class="name">caret-down-small</div>
+                <div class="code-name">&amp;#xe7db;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7dc;</span>
+                <div class="name">cart</div>
+                <div class="code-name">&amp;#xe7dc;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe7d5;</span>
                 <div class="name">delete-three</div>
                 <div class="code-name">&amp;#xe7d5;</div>
@@ -336,10 +408,10 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1736319276637') format('woff2'),
-       url('iconfont.woff?t=1736319276637') format('woff'),
-       url('iconfont.ttf?t=1736319276637') format('truetype'),
-       url('iconfont.svg?t=1736319276637#iconfont') format('svg');
+  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');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
@@ -366,6 +438,114 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-chatgroup"></span>
+            <div class="name">
+              chatgroup
+            </div>
+            <div class="code-name">.icon-chatgroup
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-unlock"></span>
+            <div class="name">
+              unlock
+            </div>
+            <div class="code-name">.icon-unlock
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-more"></span>
+            <div class="name">
+              more
+            </div>
+            <div class="code-name">.icon-more
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-location"></span>
+            <div class="name">
+              location
+            </div>
+            <div class="code-name">.icon-location
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-lock"></span>
+            <div class="name">
+              lock
+            </div>
+            <div class="code-name">.icon-lock
+            </div>
+          </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
+            </div>
+            <div class="code-name">.icon-edit-1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-logout"></span>
+            <div class="name">
+              logout
+            </div>
+            <div class="code-name">.icon-logout
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chat-message"></span>
+            <div class="name">
+              chat-message
+            </div>
+            <div class="code-name">.icon-chat-message
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chevron-down"></span>
+            <div class="name">
+              chevron-down
+            </div>
+            <div class="code-name">.icon-chevron-down
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caret-down-small"></span>
+            <div class="name">
+              caret-down-small
+            </div>
+            <div class="code-name">.icon-caret-down-small
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-cart"></span>
+            <div class="name">
+              cart
+            </div>
+            <div class="code-name">.icon-cart
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-delete-three"></span>
             <div class="name">
               delete-three
@@ -790,6 +970,102 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chatgroup"></use>
+                </svg>
+                <div class="name">chatgroup</div>
+                <div class="code-name">#icon-chatgroup</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-unlock"></use>
+                </svg>
+                <div class="name">unlock</div>
+                <div class="code-name">#icon-unlock</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-more"></use>
+                </svg>
+                <div class="name">more</div>
+                <div class="code-name">#icon-more</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-location"></use>
+                </svg>
+                <div class="name">location</div>
+                <div class="code-name">#icon-location</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-lock"></use>
+                </svg>
+                <div class="name">lock</div>
+                <div class="code-name">#icon-lock</div>
+            </li>
+          
+            <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>
+                <div class="code-name">#icon-edit-1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-logout"></use>
+                </svg>
+                <div class="name">logout</div>
+                <div class="code-name">#icon-logout</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chat-message"></use>
+                </svg>
+                <div class="name">chat-message</div>
+                <div class="code-name">#icon-chat-message</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chevron-down"></use>
+                </svg>
+                <div class="name">chevron-down</div>
+                <div class="code-name">#icon-chevron-down</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caret-down-small"></use>
+                </svg>
+                <div class="name">caret-down-small</div>
+                <div class="code-name">#icon-caret-down-small</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-cart"></use>
+                </svg>
+                <div class="name">cart</div>
+                <div class="code-name">#icon-cart</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-delete-three"></use>
                 </svg>
                 <div class="name">delete-three</div>

+ 52 - 4
src/assets/iconfont/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4723464 */
-  src: url('iconfont.woff2?t=1736319276637') format('woff2'),
-       url('iconfont.woff?t=1736319276637') format('woff'),
-       url('iconfont.ttf?t=1736319276637') format('truetype'),
-       url('iconfont.svg?t=1736319276637#iconfont') format('svg');
+  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');
 }
 
 .iconfont {
@@ -14,6 +14,54 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-chatgroup:before {
+  content: "\e7de";
+}
+
+.icon-unlock:before {
+  content: "\e7e0";
+}
+
+.icon-more:before {
+  content: "\e7e1";
+}
+
+.icon-location:before {
+  content: "\e7e2";
+}
+
+.icon-lock:before {
+  content: "\e7dd";
+}
+
+.icon-star1:before {
+  content: "\e7d6";
+}
+
+.icon-edit-1:before {
+  content: "\e7d7";
+}
+
+.icon-logout:before {
+  content: "\e7d8";
+}
+
+.icon-chat-message:before {
+  content: "\e7d9";
+}
+
+.icon-chevron-down:before {
+  content: "\e7da";
+}
+
+.icon-caret-down-small:before {
+  content: "\e7db";
+}
+
+.icon-cart:before {
+  content: "\e7dc";
+}
+
 .icon-delete-three:before {
   content: "\e7d5";
 }

Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 0
src/assets/iconfont/iconfont.js


+ 84 - 0
src/assets/iconfont/iconfont.json

@@ -6,6 +6,90 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "43210372",
+      "name": "chatgroup",
+      "font_class": "chatgroup",
+      "unicode": "e7de",
+      "unicode_decimal": 59358
+    },
+    {
+      "icon_id": "43209870",
+      "name": "unlock",
+      "font_class": "unlock",
+      "unicode": "e7e0",
+      "unicode_decimal": 59360
+    },
+    {
+      "icon_id": "43209869",
+      "name": "more",
+      "font_class": "more",
+      "unicode": "e7e1",
+      "unicode_decimal": 59361
+    },
+    {
+      "icon_id": "43209868",
+      "name": "location",
+      "font_class": "location",
+      "unicode": "e7e2",
+      "unicode_decimal": 59362
+    },
+    {
+      "icon_id": "43209895",
+      "name": "lock",
+      "font_class": "lock",
+      "unicode": "e7dd",
+      "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",
+      "unicode": "e7d7",
+      "unicode_decimal": 59351
+    },
+    {
+      "icon_id": "43103286",
+      "name": "logout",
+      "font_class": "logout",
+      "unicode": "e7d8",
+      "unicode_decimal": 59352
+    },
+    {
+      "icon_id": "43103284",
+      "name": "chat-message",
+      "font_class": "chat-message",
+      "unicode": "e7d9",
+      "unicode_decimal": 59353
+    },
+    {
+      "icon_id": "43103285",
+      "name": "chevron-down",
+      "font_class": "chevron-down",
+      "unicode": "e7da",
+      "unicode_decimal": 59354
+    },
+    {
+      "icon_id": "43103282",
+      "name": "caret-down-small",
+      "font_class": "caret-down-small",
+      "unicode": "e7db",
+      "unicode_decimal": 59355
+    },
+    {
+      "icon_id": "43103283",
+      "name": "cart",
+      "font_class": "cart",
+      "unicode": "e7dc",
+      "unicode_decimal": 59356
+    },
+    {
       "icon_id": "43078637",
       "name": "delete-three",
       "font_class": "delete-three",

+ 24 - 0
src/assets/iconfont/iconfont.svg

@@ -14,6 +14,30 @@
     />
       <missing-glyph />
       
+      <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" />
+      
+      <glyph glyph-name="more" unicode="&#59361;" d="M96 725.312c0 41.28 33.408 74.688 74.688 74.688H384c41.216 0 74.688-33.408 74.688-74.688V512c0-41.216-33.472-74.688-74.688-74.688H170.688A74.688 74.688 0 0 0 96 512V725.312zM170.688 736a10.688 10.688 0 0 1-10.688-10.688V512c0-5.888 4.8-10.688 10.688-10.688H384A10.688 10.688 0 0 1 394.688 512V725.312A10.688 10.688 0 0 1 384 736H170.688zM96 256c0 41.216 33.408 74.624 74.688 74.624H384c41.216 0 74.688-33.408 74.688-74.624v-213.376c0-41.216-33.472-74.624-74.688-74.624H170.688A74.688 74.688 0 0 0 96 42.624V256z m74.688 10.624A10.688 10.688 0 0 1 160 256v-213.376c0-5.824 4.8-10.624 10.688-10.624H384a10.688 10.688 0 0 1 10.688 10.624V256A10.688 10.688 0 0 1 384 266.624H170.688zM565.312 725.312c0 41.28 33.472 74.688 74.688 74.688h213.312c41.28 0 74.688-33.408 74.688-74.688V512c0-41.216-33.408-74.688-74.688-74.688H640A74.688 74.688 0 0 0 565.312 512V725.312zM640 736a10.688 10.688 0 0 1-10.688-10.688V512c0-5.888 4.8-10.688 10.688-10.688h213.312A10.688 10.688 0 0 1 864 512V725.312a10.688 10.688 0 0 1-10.688 10.688H640zM565.312 256c0 41.216 33.472 74.624 74.688 74.624h213.312c41.28 0 74.688-33.408 74.688-74.624v-213.376c0-41.216-33.408-74.624-74.688-74.624H640a74.688 74.688 0 0 0-74.688 74.624V256zM640 266.624a10.688 10.688 0 0 1-10.688-10.624v-213.376c0-5.888 4.8-10.624 10.688-10.624h213.312a10.688 10.688 0 0 1 10.688 10.624V256a10.688 10.688 0 0 1-10.688 10.624H640z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="location" unicode="&#59362;" d="M672 512a160 160 0 1 0-320 0 160 160 0 0 0 320 0z m-64 0a96 96 0 1 1-192 0 96 96 0 0 1 192 0zM535.168-29.952a28.032 28.032 0 0 0-46.336 0L246.784 325.632a320.896 320.896 0 1 0 530.496 0l-242.112-355.584z m189.184 391.616a256.896 256.896 0 1 1-424.704 0L512 49.728l212.352 311.936z"  horiz-adv-x="1024" />
+      
+      <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" />
+      
+      <glyph glyph-name="chat-message" unicode="&#59353;" d="M64-72.704V810.752h896V128H293.376L64-72.704z m85.312 188.096l112 97.92h613.376v512H149.312v-609.92zM554.88 426.688H469.312V512.192H554.88v-85.504z m-213.312 0H256V512.192h85.504v-85.504z m426.688 0h-85.504V512.192h85.504v-85.504z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="chevron-down" unicode="&#59354;" d="M277.312 216.96L512 451.712l234.688-234.624 60.288 60.288L512 572.352 216.96 277.312l60.352-60.288z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="caret-down-small" unicode="&#59355;" d="M512 576L213.312 277.312h597.376L512 576z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="cart" unicode="&#59356;" d="M0 853.312h203.264L226.496 768h771.392l-156.48-469.376h-509.44l-21.312-85.312h628.032V128H201.408l53.12 212.864L138.112 768H0V853.312zM331.264 384h448.64l99.584 298.624H249.792L331.264 384z m-160.64-384a85.312 85.312 0 1 0 170.688 0 85.312 85.312 0 0 0-170.624 0zM768 0a85.312 85.312 0 1 0 170.688 0A85.312 85.312 0 0 0 768 0z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="delete-three" unicode="&#59349;" d="M399.018667 817.493333l-66.133334-120.618666H85.333333a14.208 14.208 0 1 1 0-28.416h92.458667V-42.666667c0-7.850667 6.357333-14.208 14.208-14.208h640c7.850667 0 14.208 6.4 14.208 14.208V668.458667H938.666667a14.208 14.208 0 0 1 0 28.458666h-247.466667l-64.768 120.490667a14.208 14.208 0 0 1-12.501333 7.466667H411.434667a14.208 14.208 0 0 1-12.458667-7.381334zM426.666667 490.666667a21.333333 21.333333 0 0 0 21.333333-21.333334v-277.333333a21.333333 21.333333 0 0 0-42.666667 0V469.333333a21.333333 21.333333 0 0 0 21.333334 21.333334z m170.666666 0a21.333333 21.333333 0 0 0 21.333334-21.333334v-277.333333a21.333333 21.333333 0 0 0-42.666667 0V469.333333a21.333333 21.333333 0 0 0 21.333333 21.333334z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="copy" unicode="&#59347;" d="M259.797333 618.666667A21.248 21.248 0 0 0 256 630.784v98.56C256 774.272 292.394667 810.666667 337.322667 810.666667h520.021333C902.229333 810.666667 938.666667 774.272 938.666667 729.344v-520.021333A81.322667 81.322667 0 0 0 857.344 128h-99.669333a21.248 21.248 0 0 0-11.008 3.072v-92.416c0-33.109333-26.88-59.989333-59.989334-59.989333H166.656c-33.109333 0-59.989333 26.88-59.989333 59.989333V558.677333c0 33.109333 26.88 59.989333 59.989333 59.989334H259.84zM298.666667 729.344v-98.56a21.248 21.248 0 0 0-3.797334-12.117333h391.808c33.109333 0 59.989333-26.88 59.989334-59.989334v-391.082666a21.248 21.248 0 0 0 11.008 3.072h99.669333c21.333333 0 38.656 17.322667 38.656 38.656V729.344c0 21.333333-17.322667 38.656-38.656 38.656H337.322667c-21.333333 0-38.656-17.322667-38.656-38.656z"  horiz-adv-x="1024" />

BIN
src/assets/iconfont/iconfont.ttf


BIN
src/assets/iconfont/iconfont.woff


BIN
src/assets/iconfont/iconfont.woff2


+ 6 - 0
src/assets/img/note-create/expand-text-input.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Expand-text-input (&#229;&#177;&#149;&#229;&#188;&#128;&#230;&#150;&#135;&#230;&#156;&#172;&#229;&#159;&#159;)">
+<path id="Vector" d="M3.99967 9.33358L3.99967 4.00024L9.33301 4.00024" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M12 6.66675L12 12.0001L6.66667 12.0001" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

+ 8 - 0
src/assets/img/note-create/location.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="location">
+<g id="union">
+<path d="M10.5001 6.00042C10.5001 7.38113 9.3808 8.50042 8.00009 8.50042C6.61938 8.50042 5.50009 7.38113 5.50009 6.00042C5.50009 4.6197 6.61938 3.50042 8.00009 3.50042C9.3808 3.50042 10.5001 4.6197 10.5001 6.00042ZM9.50009 6.00042C9.50009 5.17199 8.82852 4.50042 8.00009 4.50042C7.17166 4.50042 6.50009 5.17199 6.50009 6.00042C6.50009 6.82884 7.17166 7.50042 8.00009 7.50042C8.82852 7.50042 9.50009 6.82884 9.50009 6.00042Z" fill="#333333"/>
+<path d="M8.36196 14.4688C8.18821 14.7241 7.81196 14.7241 7.63822 14.4688L3.85557 8.91217C2.50041 6.92146 2.75204 4.24847 4.45488 2.54562C6.41284 0.587658 9.58733 0.587657 11.5453 2.54562C13.2481 4.24847 13.4998 6.92146 12.1446 8.91217L8.36196 14.4688ZM11.318 8.34944C12.4028 6.75579 12.2014 4.61593 10.8382 3.25273C9.27075 1.68529 6.72943 1.68529 5.16199 3.25273C3.79878 4.61593 3.59735 6.75579 4.68221 8.34944L8.00009 13.2234L11.318 8.34944Z" fill="#333333"/>
+</g>
+</g>
+</svg>

+ 6 - 0
src/assets/img/note-create/orange-expand-text-input.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Expand-text-input (&#229;&#177;&#149;&#229;&#188;&#128;&#230;&#150;&#135;&#230;&#156;&#172;&#229;&#159;&#159;)">
+<path id="Vector" d="M7.33333 1.41729L7.33333 7.19507L2 7.19507" stroke="#FF9300" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8.66699 15.5L8.66699 9.72222L14.0003 9.72222" stroke="#FF9300" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

+ 268 - 125
src/components/CreateNote/Form.vue

@@ -1,71 +1,20 @@
 <template>
   <div class="box-border">
-    <div class="flex items-center pl-16 w-full h-44 pt-12">
-      <div class="w-2 h-14 bg-[#FF9300] mr-8"></div>
-      <h1 class="text-sm font-bold">填写游记信息</h1>
-    </div>
-    <div class="flex items-center justify-center">
-      <van-field
-        v-model="departureTime"
-        :label-width="labelWidth"
-        name="calendar"
-        clearable
-        autocomplete="off"
-        placeholder="请选择出发时间"
-        @click="showCalendar = true"
-      >
-        <!--  :rules="[{ required: true, message: '请选择出发时间' }]" -->
-        <template #label>
-          <div
-            class="w-full box-border flex items-center text-16 h-full font-400 text-[#000]/[0.9]"
-          >
-            出发时间
-          </div>
-        </template>
-        <template #right-icon>
-          <div class="w-24 h-24">
-            <van-image width="100%" height="100%" :src="calendar" />
-          </div>
-        </template>
-      </van-field>
-      <van-calendar
-        color="#FE8E2C"
-        :min-date="minDate"
-        :max-date="maxDate"
-        title="请选择出发时间"
-        type="single"
-        v-model:show="showCalendar"
-        @confirm="onConfirm"
-      />
-    </div>
-
-    <van-field
-      :label-width="labelWidth"
-      v-model="countTimes"
-      name="countTimes"
-      autocomplete="off"
-      clearable
-      placeholder="请输入您的天数 例:4天"
-    >
-      <!-- :rules="[{ required: true, message: '请输入您的天数' }]" -->
-      <template #label>
-        <span class="text-16 font-400 text-[#000]/[0.9]">出发天数</span>
+    <van-cell @click="showPicker = true" size="large" center is-link>
+      <template #icon>
+        <img class="w-16 h-16" src="~/assets/img/note-create/location.svg" alt="" />
       </template>
-    </van-field>
-    <van-field
-      :label-width="labelWidth"
-      v-model="role"
-      label="人物关系"
-      clearable
-      autocomplete="off"
-      placeholder="例:情侣"
-    ></van-field>
-
-    <van-field
+      <template #title>
+        <span class="text-16 text-[#D54941]">*</span>
+        {{ endPlace ? endPlace : '地区选择' }}
+      </template>
+    </van-cell>
+    <!-- <van-field
       is-link
       v-model="endPlace"
       :label-width="labelWidth"
       clearable
+      size="large"
       readonly
       autocomplete="off"
       placeholder="目的地"
@@ -73,14 +22,10 @@
       :rules="[{ required: true }]"
     >
       <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>
       </template>
-    </van-field>
-    <van-popup v-model:show="showPicker" position="bottom">
+    </van-field> -->
+    <van-popup round v-model:show="showPicker" position="bottom">
       <van-picker
         :columns="placeOptions"
         :columns-field-names="placeOptionProps"
@@ -88,7 +33,195 @@
         @cancel="showPicker = false"
       />
     </van-popup>
-    <!-- <van-cascader
+
+    <van-cell @click="showPublic = true" size="large" center is-link>
+      <template v-if="isPublic == 1" #icon>
+        <span class="iconfont icon-lock text-[#FF9300] mr-12" style="font-size: 16px"></span>
+      </template>
+      <template v-else #icon>
+        <span class="iconfont icon-unlock text-black-3 mr-12" style="font-size: 16px"></span>
+      </template>
+      <template v-if="isPublic == 1" #title>
+        <span class="text-[#FF9300]">仅自己可见</span>
+      </template>
+      <template v-else #title>
+        <span>公开可见</span>
+      </template>
+    </van-cell>
+    <van-popup
+      style="--van-popup-background: #eeeeee"
+      class="py-16"
+      round
+      v-model:show="showPublic"
+      destroy-on-close
+      position="bottom"
+    >
+      <van-cell-group inset>
+        <van-cell @click="isPublic = 0" title="公开可见" center>
+          <template #icon>
+            <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" />
+          </template>
+        </van-cell>
+        <van-cell @click="isPublic = 1" title="仅自己可见" center>
+          <template #icon>
+            <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" />
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </van-popup>
+
+    <van-cell @click="getChatGroupList" size="large" title="关联群聊" center is-link>
+      <template #icon>
+        <span class="iconfont icon-chatgroup text-black-3 mr-12" style="font-size: 16px"></span>
+      </template>
+      <template #value>
+        <p class="line-clamp-1 border border-transparent text-[#FF9300]">{{ chatGroupName }}</p>
+      </template>
+    </van-cell>
+    <van-popup
+      round
+      v-model:show="showChatGroup"
+      safe-area-inset-top
+      destroy-on-close
+      position="bottom"
+    >
+      <div class="h-322 w-full box-border py-16">
+        <div
+          class="w-full flex box-border mb-16 px-12 justify-between items-center text-xl font-semibold"
+        >
+          <span @click="showChatGroup = false">取消</span>
+          <span class="text-[#FF9300]" @click="showChatGroup = false">确认</span>
+        </div>
+        <van-radio-group v-model="checked" shape="round">
+          <van-cell
+            v-for="(item, i) in chatGroupList"
+            :key="item?.id"
+            :title="item?.groupName"
+            :label="item?.numCount ? item?.numCount + '人' : ''"
+            clickable
+            center
+            @click="
+              () => {
+                checked = item?.id
+                chatGroupName = item?.groupName
+              }
+            "
+          >
+            <template v-if="item?.heardImage" #icon>
+              <div class="mr-8">
+                <MultiHeader :size="44" :imgUrls="item?.heardImage" />
+              </div>
+            </template>
+            <template #right-icon>
+              <van-radio checked-color="#FF9300" :name="item?.id" />
+            </template>
+          </van-cell>
+        </van-radio-group>
+      </div>
+    </van-popup>
+
+    <van-cell
+      @click="showFrom = !showFrom"
+      icon="shop-o"
+      size="large"
+      center
+      is-link
+      arrow-direction="down"
+    >
+      <template #icon>
+        <span class="iconfont icon-more text-black-3 mr-12" style="font-size: 16px"></span>
+      </template>
+      <template #title>
+        <span class="font-medium text-lg">更多参数</span>
+      </template>
+      <template #value>
+        <span v-if="!showFrom" class="text-black-3 text-base">展开</span>
+        <span v-else class="text-[#FF9300] text-base">收起</span>
+      </template>
+      <template #right-icon>
+        <van-icon v-if="!showFrom" name="arrow-down" :size="16" />
+        <span
+          v-else
+          class="iconfont icon-chevron-down text-[#FF9300]"
+          style="font-size: 16px"
+        ></span>
+      </template>
+    </van-cell>
+
+    <template v-if="showFrom">
+      <div class="flex items-center justify-center">
+        <van-field
+          v-model="departureTime"
+          :label-width="labelWidth"
+          name="calendar"
+          clearable
+          size="large"
+          label="出发时间"
+          autocomplete="off"
+          is-link
+          placeholder="请选择出发时间"
+          @click="showCalendar = true"
+        >
+          <!-- <template #right-icon>
+            <div class="w-24 h-24">
+              <van-image width="100%" height="100%" :src="calendar" />
+            </div>
+          </template> -->
+        </van-field>
+        <van-calendar
+          color="#FE8E2C"
+          :min-date="minDate"
+          :max-date="maxDate"
+          title="请选择出发时间"
+          type="single"
+          v-model:show="showCalendar"
+          @confirm="onConfirm"
+        />
+      </div>
+      <van-field
+        :label-width="labelWidth"
+        is-link
+        v-model="travelMode"
+        clearable
+        readonly
+        size="large"
+        autocomplete="off"
+        label="出行方式"
+        placeholder="请选择出行方式"
+        @click="showtravelMode = true"
+      ></van-field>
+      <van-popup round v-model:show="showtravelMode" destroy-on-close position="bottom">
+        <van-picker
+          :columns="travelModeOptions"
+          :columns-field-names="travelModeOptionsProps"
+          @confirm="onConfirmTravelMode"
+          @cancel="showtravelMode = false"
+        />
+      </van-popup>
+
+      <van-field
+        :label-width="labelWidth"
+        v-model="countTimes"
+        name="countTimes"
+        autocomplete="off"
+        size="large"
+        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"
@@ -97,61 +230,51 @@
         @cancel="showPicker = false"
       /> -->
 
-    <!--  @finish="onConfirmAddr"  -->
-    <!--  field-names=""  :options="placeOptions" -->
-
-    <van-field name="rate" :label-width="labelWidth" label="推荐指数">
-      <template #input>
-        <van-rate
-          color="#ffd21e"
-          :icon="rate"
-          void-icon="star"
-          void-color="#eee"
-          v-model="recommendationRate"
-          clearable
-        />
-      </template>
-    </van-field>
-
-    <van-field
-      :label-width="labelWidth"
-      v-model="averageCost"
-      name="averageCost"
-      autocomplete="off"
-      clearable
-      maxlength="10"
-      label="平均费用"
-      placeholder="请输入平均费用"
-    ></van-field>
-
-    <van-field
-      :label-width="labelWidth"
-      is-link
-      v-model="travelMode"
-      clearable
-      readonly
-      autocomplete="off"
-      label="出行方式"
-      placeholder="请选择出行方式"
-      @click="showtravelMode = true"
-    ></van-field>
-    <van-popup v-model:show="showtravelMode" destroy-on-close position="bottom">
-      <van-picker
-        :columns="travelModeOptions"
-        :columns-field-names="travelModeOptionsProps"
-        @confirm="onConfirmTravelMode"
-        @cancel="showtravelMode = false"
-      />
-    </van-popup>
-
-    <van-field
-      :label-width="labelWidth"
-      v-model="travelNumber"
-      label="游玩人数"
-      clearable
-      autocomplete="off"
-      placeholder="请输入游玩人数"
-    ></van-field>
+      <!--  @finish="onConfirmAddr"  -->
+      <!--  field-names=""  :options="placeOptions" -->
+      <van-field
+        :label-width="labelWidth"
+        v-model="travelNumber"
+        size="large"
+        label="游玩人数"
+        clearable
+        autocomplete="off"
+        placeholder="请输入游玩人数"
+      ></van-field>
+      <van-field
+        :label-width="labelWidth"
+        v-model="role"
+        label="人物关系"
+        clearable
+        size="large"
+        autocomplete="off"
+        placeholder="例:情侣"
+      ></van-field>
+      <van-field
+        :label-width="labelWidth"
+        v-model="averageCost"
+        name="averageCost"
+        autocomplete="off"
+        clearable
+        size="large"
+        maxlength="10"
+        label="平均费用"
+        placeholder="请输入平均费用"
+      ></van-field>
+      <van-field name="rate" size="large" :label-width="labelWidth" label="推荐指数">
+        <template #input>
+          <van-rate
+            color="#ffd21e"
+            :icon="rate"
+            void-icon="star"
+            void-color="#eee"
+            v-model="recommendationRate"
+            clearable
+          />
+        </template>
+      </van-field>
+    </template>
+    <template v-else></template>
   </div>
 </template>
 
@@ -174,12 +297,20 @@ onMounted(() => {
   getTravelModeOptions()
 })
 
-const labelWidth = '68px'
+const labelWidth = '81px'
 // 出发时间
 const minDate = new Date(2010, 0, 1)
 const maxDate = new Date()
 
 const showCalendar = ref(false)
+const showFrom = ref(false) //是否显示整个表单
+const showPublic = ref(false) //是否显示公开
+const isPublic = ref(null) //是否公开
+
+const showChatGroup = ref(false) //是否显示群聊
+const checked = ref('') //是否显示群聊
+const chatGroup = ref({}) //选择群聊的结果
+const chatGroupName = ref('') //选择群聊的名称
 
 // 展示时间的格式
 const onConfirm = (date) => {
@@ -240,6 +371,18 @@ async function getTravelModeOptions() {
   const { data } = await request('/admin/app/extra/listDict?dictCode=TourTravelMode')
   travelModeOptions.value = data
 }
+
+// 获取自己的群聊
+const chatGroupList = ref([])
+async function getChatGroupList() {
+  try {
+    showChatGroup.value = true
+    const { data } = await request('/website/tourGroup/getOwnGroup')
+    if (data) {
+      chatGroupList.value = data
+    }
+  } catch (error) {}
+}
 </script>
 
 <style lang="scss" scoped>

+ 217 - 186
src/pages/note-create2/index.client.vue

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

Einige Dateien werden nicht angezeigt, da zu viele Dateien in diesem Diff geändert wurden.