开发ing

src/App.vue

@@ -115,6 +115,15 @@ export default {
    width: 100%;
    overflow: hidden;
  }
+ .desc{
+   p{
+     margin: 0;
+   }
+   img{
+     width: 100%;
+   }
+ }
+
  textarea{
    font-family: inherit;
  }

src/views/components/expoHead.vue

@@ -54,8 +54,7 @@ export default Vue.extend({
           </div>
         </div>
       </div>
-      <div :class="['desc',popover_data.content!==undefined?'':'loading']">
-        {{ popover_data.content }}
+      <div v-html="popover_data.content" :class="['desc',popover_data.content!==undefined?'':'loading']">
       </div>
       <div v-if="popover_data.social_links" class="social_links">
         <div class="social-title">社交媒体</div>
@@ -89,6 +88,9 @@ export default Vue.extend({
     padding: 16px;
     .social_links{
       margin-top: 12px;
+      @media (max-width:768px)  {
+        font-size: 14px;
+      }
       .social-title{
         font-weight: bold;
       }
@@ -99,6 +101,7 @@ export default Vue.extend({
       }
     }
     .desc{
+      white-space: pre-wrap;
       margin-top: 12px;
       &.loading{
         height: 60px;
@@ -131,6 +134,9 @@ export default Vue.extend({
           flex-wrap: wrap;
           display: flex;
           grid-gap: 0 12px;
+          @media (max-width:768px)  {
+            font-size: 14px;
+          }
           .phone,.email,.date{
             display: flex;
             align-items: center;

src/views/components/expoPopover.vue

@@ -68,8 +68,7 @@ export default Vue.extend({
             </div>
           </div>
         </div>
-        <div :class="['desc',popover_data.content!==undefined?'':'loading']">
-          {{ popover_data.content }}
+        <div v-html="popover_data.content" :class="['desc',popover_data.content!==undefined?'':'loading']">
         </div>
         <div v-if="popover_data.social_links" class="social_links">
           <div class="social-title">社交媒体</div>
@@ -114,7 +113,14 @@ export default Vue.extend({
         }
       }
       .desc{
+        max-height: 36vh;
+        overflow: hidden;
+        overflow-y: auto;
+        white-space: pre-wrap;
         margin-top: 12px;
+        p{
+          margin: 0;
+        }
         &.loading{
           height: 60px;
           width: 100%;

src/views/exhibitorManage/exhibitorSetting.vue

@@ -1,5 +1,15 @@
 <script>
 import Vue from 'vue'
+
+import hugerte from 'hugerte'
+import 'hugerte/models/dom'
+import 'hugerte/icons/default'
+import 'hugerte/themes/silver'
+import 'hugerte/skins/ui/oxide/skin.js'
+import 'hugerte/skins/ui/oxide/content.js'
+import 'hugerte/skins/content/default/content.js'
+import 'hugerte/plugins/autoresize'
+
 import { saveExpo, getMyExpoInfo } from '@/api/expo'
 import { getFormList } from '@/api/form'
 import { upload } from '@/api/system'
@@ -27,7 +37,7 @@ export default Vue.extend({
         seo_title: '',
         seo_description: '',
         seo_keywords: '',
-        show_official_footer: '1'
+        show_official_footer: 1
       },
       isShowMore: false,
       formList: [],
@@ -47,6 +57,7 @@ export default Vue.extend({
           this.exhibitorSetting = res.data
           this.exhibitorSetting.images = JSON.parse(this.exhibitorSetting.images)
           this.exhibitorSetting.social_links = JSON.parse(this.exhibitorSetting.social_links)
+          this.initEditor()
           this.loading = false
         }).catch(err => {
           this.$notify({
@@ -64,6 +75,7 @@ export default Vue.extend({
           this.exhibitorSetting.images = JSON.parse(this.exhibitorSetting.images)
           this.exhibitorSetting.social_links = JSON.parse(this.exhibitorSetting.social_links)
           this.exhibitorSetting.id = ''
+          this.initEditor()
           this.loading = false
         }).catch(err => {
           this.$notify({
@@ -84,6 +96,50 @@ export default Vue.extend({
         })
       })
     },
+    initEditor() {
+      hugerte.PluginManager.add('insertImage', (editor) => {
+        editor.ui.registry.addButton('insertImage', {
+          icon: 'image',
+          onAction: () => {
+            const input = document.createElement('input')
+            input.setAttribute('type', 'file')
+            input.setAttribute('accept', 'image/*')
+            input.onchange = () => {
+              upload(input.files[0]).then(res => {
+                let image = this.ossUrl + res.data.file
+                editor.insertContent(`<img src="${image}" />`)
+              })
+            }
+            input.click()
+          }
+        })
+      })
+      hugerte.remove()
+      hugerte.init({
+        selector: '#expoManangeEditor',
+        skin_url: 'default',
+        content_css: 'default',
+        inline: true,
+        statusbar: false,
+        plugins: 'insertImage',
+        toolbar: [
+          'undo redo | bold italic underline | fontsize',
+          'forecolor backcolor | alignleft aligncenter alignright | insertImage'
+        ],
+        menubar: false,
+        height: '100%',
+        width: '100%',
+        setup: editor => {
+          console.log(editor)
+          editor.on('init', () => {
+            editor.setContent(this.exhibitorSetting.content)
+          })
+          editor.on('change', () => {
+            this.exhibitorSetting.content = editor.getContent()
+          })
+        }
+      })
+    },
     uploadImage(event, type) {
       this.loading = true
       upload(event.target.files[0]).then(res => {
@@ -144,6 +200,7 @@ export default Vue.extend({
         this.exhibitorSetting.form_template_id,
         this.exhibitorSetting.page_template_id,
         this.exhibitorSetting.urla,
+        this.exhibitorSetting.show_official_footer,
         this.exhibitorSetting.seo_title,
         this.exhibitorSetting.seo_description,
         this.exhibitorSetting.seo_keywords
@@ -278,7 +335,7 @@ export default Vue.extend({
         </div>
         <div v-permission="'exhibitor.copyright'" class="form-item required">
           <div class="label">表单底部显示系统信息</div>
-          <el-switch v-model="exhibitorSetting.show_official_footer" active-value="1" inactive-value="0" class="input" />
+          <el-switch v-model="exhibitorSetting.show_official_footer" :active-value="1" :inactive-value="0" class="input" />
         </div>
         <div class="form-item">
           <div class="label">高级设置</div>
@@ -334,12 +391,13 @@ export default Vue.extend({
             <input type="file" class="uploader" @change="uploadImage($event,'cover')">
           </div>
         </div>
-        <el-input v-model="exhibitorSetting.content" rows="12" type="textarea" class="text-area" placeholder="请输入展会介绍" />
+        <div class="text-area">
+          <div id="expoManangeEditor" />
+        </div>
       </div>
     </div>
   </div>
 </template>
-
 <style scoped lang="scss">
   .main-box{
     height: 100%;
@@ -420,6 +478,8 @@ export default Vue.extend({
         overflow-y: auto;
       }
       .text-area{
+        padding:  0 16px;
+        width: 100%;
         margin-top: 24px;
       }
       .vision-cont{

src/views/preRegManage/list.vue

@@ -139,6 +139,8 @@ export default Vue.extend({
         .then(res => {
           expoData = res.data
           expoData.form_template_id = this.waitToBind.id
+          expoData.images = JSON.parse(expoData.images)
+          expoData.social_links = JSON.parse(expoData.social_links)
           return saveExpo(expoData.id, expoData.expo_name, expoData.start_date, expoData.end_date, expoData.location, expoData.organizer, expoData.contact_phone, expoData.contact_email, expoData.content, expoData.logo, expoData.images, expoData.social_links, expoData.form_template_id, expoData.page_template_id, expoData.urla, expoData.show_official_footer, expoData.seo_title, expoData.seo_description, expoData.seo_keywords)
         })
         .then(res2 => {

src/views/user/form.vue

@@ -396,6 +396,8 @@ export default Vue.extend({
     max-width: 800px;
     padding: 0 12px 36px;
     display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
     justify-content: space-between;
     align-items: center;
     .power-by,a{
@@ -445,6 +447,7 @@ export default Vue.extend({
     box-shadow: 0 0 8px 0 #00000008;
     background: white;
     .power-by{
+      margin-top: 16px;
       font-size: 16px;
       color: grey;
     }
@@ -452,10 +455,20 @@ export default Vue.extend({
       margin-top: 12px;
       display: flex;
       justify-content: flex-end;
+      @media (max-width:768px)  {
+         .el-button{
+           width: 100%;
+           font-size: 18px;
+         }
+      }
     }
     .desc{
+      white-space: pre-wrap;
       color: gray;
       margin-bottom: 32px;
+      p{
+        margin: 0;
+      }
     }
     .form-body{
       display: grid;