新用户引导

src/layout/index.vue

@@ -208,7 +208,7 @@ export default {
     align-items: center;
     justify-content: center;
     transition-duration: 300ms;
-    z-index: 9999;
+    z-index: 1999;
     position: fixed;
     left: 0;
     top: 0;

src/views/components/expoPopover.vue

@@ -1,19 +1,19 @@
-<script lang="ts">
+<script>
 import Vue from 'vue'
 import { getMyExpoInfo } from '@/api/expo'
 export default Vue.extend({
-  name: "expoPopover",
+  name: 'ExpoPopover',
+  props: {
+    expoId: String,
+    placement: String,
+    trigger: String
+  },
   data() {
     return {
       popover_data: {},
       ossUrl: process.env.VUE_APP_OSS_DOMAIN
     }
   },
-  props: {
-    expoId: String,
-    placement: String,
-    trigger: String,
-  },
   methods: {
     goto(url) {
       window.open(url, '_blank')
@@ -23,11 +23,14 @@ export default Vue.extend({
         this.popover_data = res.data
         this.popover_data.images = JSON.parse(res.data.images)
         this.popover_data.social_links = JSON.parse(res.data.social_links)
+        if (this.popover_data.social_links.facebook === '' || this.popover_data.social_links.twitter === '' || this.popover_data.social_links.linkedin === '') {
+          this.popover_data.social_links = false
+        }
       })
     },
     copyUrl() {
-      let rootPath = window.location.origin
-      navigator.clipboard.writeText(rootPath+'/register/'+this.popover_data.urla)
+      const rootPath = window.location.origin
+      navigator.clipboard.writeText(rootPath + '/register/' + this.popover_data.urla)
       this.$message.success('复制成功')
     }
   }
@@ -39,7 +42,7 @@ export default Vue.extend({
     <div class="expo-info">
       <div class="cover loading">
         <img v-if="popover_data.images" :src="ossUrl+popover_data.images[0]">
-        <div v-permission="'exhibitor.copyLink'" v-if="popover_data.form_template_id && popover_data.urla" @click="copyUrl()" class="button">复制表单地址</div>
+        <div v-if="popover_data.form_template_id && popover_data.urla" v-permission="'exhibitor.copyLink'" class="button" @click="copyUrl()">复制表单地址</div>
       </div>
       <div class="info-body">
         <div class="avatar-name">
@@ -83,7 +86,7 @@ export default Vue.extend({
       </div>
     </div>
     <span slot="reference" class="button">
-      <slot></slot>
+      <slot />
     </span>
   </el-popover>
 </template>

src/views/components/guide.vue

@@ -0,0 +1,123 @@
+<script>
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'Guide',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      guideList: {
+        'createExpoStep1': {
+          'title': '创建展会'
+        },
+        'perRegFormItem': {
+          'title': '表单项介绍',
+          'text': '显示在输入框上方的“标签文字”，告诉用户这个框是用来填什么的。比如“姓名”、“手机号”。',
+          'media': '/static/guide/表单项介绍.jpg'
+        },
+        'perRegFormPlaceholder': {
+          'title': '提示文字',
+          'text': '输入框里默认显示的灰色小字，用户一输入内容它就会自动消失。比如“请输入您的姓名”。',
+          'media': '/static/guide/提示文字.jpg'
+        },
+        'perRegTimeStartPlaceholder': {
+          'title': '起始提示文字',
+          'text': '在选择“开始时间”或“开始日期”的框里，默认显示的提示文字。比如“请选择开始日期”。',
+          'media': '/static/guide/起始提示文字.jpg'
+        },
+        'perRegTimeEndPlaceholder': {
+          'title': '结束提示文字',
+          'text': '在选择“结束时间”或“结束日期”的框里，默认显示的提示文字。比如“请选择结束日期”。',
+          'media': '/static/guide/结束提示文字.jpg'
+        },
+        'perRegTimeFencePlaceholder': {
+          'title': '范围分隔符',
+          'text': '当选择一个时间范围时，显示在“开始”和“结束”两个框中间的文字，通常是“至”或“-”。',
+          'media': '/static/guide/范围分隔符.jpg'
+        },
+        'perRegOptionListEdit': {
+          'title': '选项设定',
+          'text': '用于设置下拉框、单选按钮（只能选一个）或多选框（可以选多个）里的具体选项。比如，为“性别”设置“男”、“女”两个选项。',
+          'media': '/static/guide/选项设定.mp4'
+        },
+        'perRegMaxValue': {
+          'title': '最大值',
+          'text': '设置一个数字的上限。用户在填写表单时，输入的数字不能超过这个值。',
+          'media': '/static/guide/最大值.jpg'
+        },
+        'perRegMinValue': {
+          'title': '最小值',
+          'text': '设置一个数字的下限。用户在填写表单时，输入的数字不能低于这个值。',
+          'media': '/static/guide/最小值.jpg'
+        },
+        'perRegStepValue': {
+          'title': '步进值',
+          'text': '设置数字输入框每次增加或减少的幅度。比如设为5，用户点击“+”时，数字会按0、5、10...这样变化。',
+          'media': '/static/guide/步进值.mp4'
+        },
+        'perRegCompWidth': {
+          'title': '组件宽度',
+          'text': '调整这个输入框在页面上占多宽。您可以选择让它占一小半（如1/3、1/2），或者占满一整行。',
+          'media': '/static/guide/组件宽度.mp4'
+        },
+        'perRegIsRequired': {
+          'title': '是否必填',
+          'text': '打开开关后用户必须填写这个输入框才能提交表单，反之用户可以自由选择是否填写'
+        }
+      }
+    }
+  },
+  methods: {
+    getGuide(id) {
+      const guide = this.guideList[id]
+      const ReturnGuide = {}
+      if (guide) {
+        ReturnGuide.title = guide.title
+        ReturnGuide.text = guide.text
+        if (/\.(jpg|jpeg|png|gif)$/.test(guide.media)) {
+          ReturnGuide.image = guide.media
+        } else {
+          ReturnGuide.video = guide.media
+        }
+      } else {
+        ReturnGuide.title = '乎哟！出错了'
+        ReturnGuide.text = '现在无法显示这个教程'
+      }
+      return ReturnGuide
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="guide-cont">
+    <img v-if="getGuide(id).image" :src="getGuide(id).image" class="guide-video">
+    <video v-if="getGuide(id).video" autoplay loop :src="getGuide(id).video" muted class="guide-video"/>
+    <div class="title">{{ getGuide(id).title }}</div>
+    <div class="text">{{ getGuide(id).text }}</div>
+  </div>
+</template>
+
+<style scoped>
+.guide-cont{
+  width: 100%;
+  .title{
+    color: #353535;
+    font-size: 22px;
+    font-weight: bold;
+  }
+  .text{
+    margin-top: 8px;
+  }
+  .guide-video{
+    mix-blend-mode: darken;
+    width: 100%;
+    aspect-ratio: 2/1;
+  }
+}
+</style>

src/views/components/guidePopover.vue

@@ -1,47 +1,34 @@
-<script lang="ts">
+<script>
 import Vue from 'vue'
-
+import guide from '@/views/components/guide.vue'
 export default Vue.extend({
-  name: "index",
+  name: 'Index',
+  components: {
+    guide
+  },
   props: {
-    video: {
-      type: String,
-      default: ''
-    },
-    text: {
-      type: String,
-      default: ''
-    },
-    title: {
+    id: {
       type: String,
       default: ''
-    },
-    placement: {
-      type: String,
-      default: 'left'
     }
   },
-  methods: {
-    isPicture(url) {
-      return /\.(jpg|jpeg|png|gif)$/.test(url)
+  data() {
+    return {
     }
+  },
+  methods: {
   }
 })
 </script>
 
 <template>
   <el-popover
-    popper-class="popover"
-    :placement="placement"
+    popper-class="guide-popover"
     width="400"
-    trigger="hover">
-    <div class="guide-cont">
-      <img :src="video" class="guide-video" v-if="isPicture(video)" />
-      <video v-else class="guide-video" autoplay loop :src="video" muted/>
-      <div class="title">{{title}}</div>
-      <div class="text">{{text}}</div>
-    </div>
-    <div class="guide" slot="reference">?</div>
+    trigger="hover"
+  >
+    <guide :id="id" />
+    <div slot="reference" class="guide">?</div>
   </el-popover>
 </template>
 

src/views/components/interactiveGuide.vue

@@ -0,0 +1,28 @@
+<script>
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'InteractiveGuide',
+  data() {
+    return {
+      createExpoStep: [
+        {
+          guideId: 'createExpoStep1',
+          handel: '#createExpoButton',
+          trigger: 'click',
+          before: () => {
+            this.$router.push({ name: 'preRegManageList' })
+          },
+          after: () => {}
+        }
+      ]
+    }
+  }
+})
+</script>
+
+<template />
+
+<style scoped>
+
+</style>

src/views/components/packetList.vue

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 import Vue from 'vue'
 import { getVerList, getPackList } from '@/api/system'
 export default Vue.extend({

src/views/dashboard/index.vue

@@ -1,32 +1,44 @@
 <template>
   <div class="main-box">
     <div class="scroll-box">
-      <div v-permission="'dashboard.head'" class="main-card">
-        <div class="hello-text">{{ getTimeWord() }}，{{ user.nickname }}！</div>
-        <div class="card-content">
-          <div class="expo-text">
-            <span v-if="currentExpo">距离{{ currentExpo.expo_name }}结束还有{{ getEndDay(currentExpo.end_date) }}天</span>
-            <span v-else>没有进行中的展会</span>
-          </div>
-          <div class="quick-nav">
-            <router-link class="nav-item" to="audience">
-              <span class="icon el-icon-user" />
-              <span class="text">观众管理</span>
-            </router-link>
-            <router-link class="nav-item" to="preRegister">
-              <span class="icon el-icon-tickets" />
-              <span class="text">表单管理</span>
-            </router-link>
-            <router-link class="nav-item" to="exhibitor">
-              <span class="icon el-icon-office-building" />
-              <span class="text">展商管理</span>
-            </router-link>
-            <router-link class="nav-item" to="invitation">
-              <span class="icon el-icon-files" />
-              <span class="text">模板管理</span>
-            </router-link>
+      <div class="grid-box">
+        <div v-permission="'dashboard.head'" class="main-card">
+          <div class="hello-text">{{ getTimeWord() }}，{{ user.nickname }}！</div>
+          <div class="card-content">
+            <div class="expo-text">
+              <span v-if="currentExpo">距离{{ currentExpo.expo_name }}结束还有{{ getEndDay(currentExpo.end_date) }}天</span>
+              <span v-else>没有进行中的展会</span>
+            </div>
+            <div class="quick-nav">
+              <router-link class="nav-item" to="audience">
+                <span class="icon el-icon-user" />
+                <span class="text">观众管理</span>
+              </router-link>
+              <router-link class="nav-item" to="preRegister">
+                <span class="icon el-icon-tickets" />
+                <span class="text">表单管理</span>
+              </router-link>
+              <router-link class="nav-item" to="exhibitor">
+                <span class="icon el-icon-office-building" />
+                <span class="text">展商管理</span>
+              </router-link>
+              <router-link class="nav-item" to="invitation">
+                <span class="icon el-icon-files" />
+                <span class="text">模板管理</span>
+              </router-link>
+            </div>
           </div>
         </div>
+        <div class="starter-box card">
+          <div class="icon el-icon-position"></div>
+          <div class="title">创建展会</div>
+          <div class="desc">十分钟创建一个展会<br/>通过表单系统收集与管理观众信息</div>
+        </div>
+        <div class="invitation-box card">
+          <div class="icon el-icon-notebook-2"></div>
+          <div class="title">创建邀请函</div>
+          <div class="desc">十分钟创建一个邀请函<br/>集成表单系统快速填充信息并发送</div>
+        </div>
       </div>
     </div>
   </div>
@@ -90,6 +102,7 @@ export default {
 .main-box {
   height: 100%;
   width: 100%;
+  //filter: grayscale(1);
   .scroll-box {
     padding: 2px;
     position: absolute;
@@ -97,42 +110,96 @@ export default {
     height: calc(100% - 32px);
     overflow: hidden;
     overflow-y: auto;
-    .main-card{
-      background: $menuActiveBg;
-      padding: 36px 36px 18px;
-      border-radius: 8px;
-      .hello-text{
-        color: $menuActiveText;
-        font-size: 28px;
-        font-weight: bold;
+    .grid-box{
+      display: grid;
+      grid-gap: 16px;
+      grid-template-rows: 200px 200px 200px;
+      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+      .card{
+        cursor: pointer;
+        transition-duration: 300ms;
+        padding: 36px 36px 18px;
+        border-radius: 8px;
+        position: relative;
+        overflow: hidden;
+        .title{
+          font-size: 28px;
+          font-weight: bold;
+          margin-bottom: 16px;
+          position: relative;
+        }
+        .desc{
+          width: 80%;
+          position: relative;
+        }
+        .icon{
+          opacity: 0.1;
+          font-size: 150px;
+          position: absolute;
+          right: 12px;
+          bottom: -60px;
+          transition-duration: 300ms;
+        }
+        &:hover{
+          .icon{
+            transform: scale(1.1) translateY(-20px);
+          }
+        }
       }
-      .card-content{
-        margin-top: 16px;
-        display: grid;
-        grid-template-columns: 1fr 2fr;
-        .expo-text{
-
+      .starter-box{
+        grid-column: span 2;
+        background: #e1f8f8;
+        color: #117878;
+        &:hover{
+          box-shadow: inset 0 0 0 2px #117878;
         }
-        .quick-nav{
-          display: flex;
-          justify-content: flex-end;
-          .nav-item{
-            transition-duration: 300ms;
-            padding: 16px 32px;
-            border-radius: 16px;
-            text-decoration: unset;
-            color: $menuActiveText;
+      }
+      .invitation-box{
+        grid-column: span 2;
+        background: #fbf3e7;
+        color: #88601f;
+        &:hover{
+          box-shadow: inset 0 0 0 2px #88601f;
+        }
+      }
+      .main-card{
+        grid-column: span 6;
+        background: $menuActiveBg;
+        padding: 36px 36px 18px;
+        border-radius: 8px;
+        .hello-text{
+          color: $menuActiveText;
+          font-size: 28px;
+          font-weight: bold;
+        }
+        .card-content{
+          margin-top: 16px;
+          display: grid;
+          grid-template-columns: 1fr 2fr;
+          .expo-text{
+
+          }
+          .quick-nav{
             display: flex;
-            flex-direction: column;
-            .icon{
-              margin-bottom: 4px;
-              font-size: 32px;
-            }
-            .text{
-              font-size: 16px;
-            }
-            &:hover{
-              background: #004DFF11;
+            justify-content: flex-end;
+            .nav-item{
+              transition-duration: 300ms;
+              padding: 16px 32px;
+              border-radius: 16px;
+              text-decoration: unset;
+              color: $menuActiveText;
+              display: flex;
+              flex-direction: column;
+              .icon{
+                margin-bottom: 4px;
+                font-size: 32px;
+              }
+              .text{
+                font-size: 16px;
+              }
+              &:hover{
+                background: #004DFF11;
+              }
             }
           }
         }

src/views/preRegManage/edit.vue

@@ -999,11 +999,7 @@ export default Vue.extend({
 
           <div class="tips">
             表单项介绍
-            <guide
-              video="/static/guide/表单项介绍.jpg"
-              title="表单项介绍"
-              text="展示在输入框上方的大段文本，用于介绍和提示该处应输入的内容。"
-            />
+            <guide id="perRegFormItem"/>
           </div>
           <el-input v-model="currentData.field_label" type="textarea" placeholder="请输入表单项介绍" />
 
@@ -1015,11 +1011,7 @@ export default Vue.extend({
           <template v-if="['input','select','textarea','time','date','region','email','phone'].includes(currentData.field_type)">
             <div class="tips">
               提示文字
-              <guide
-                video="/static/guide/提示文字.jpg"
-                title="提示文字"
-                text="用户输入内容前，展示在输入框中的简短文本，用于提示该处应输入的内容。"
-              />
+              <guide id="perRegFormPlaceholder"/>
             </div>
             <el-input v-model="currentData.field_data.placeholder" placeholder="请输入提示文字" />
           </template>
@@ -1048,29 +1040,17 @@ export default Vue.extend({
           <template v-if="['timeRange','dateRange'].includes(currentData.field_type)">
             <div class="tips">
               起始提示文字
-              <guide
-                video="/static/guide/起始提示文字.jpg"
-                title="起始提示文字"
-                text="时间与日期类型组件输入内容前，显示在开始时间输入框中，用于提示的文字内容"
-              />
+              <guide id="perRegTimeStartPlaceholder"/>
             </div>
             <el-input v-model="currentData.field_data.placeholder" placeholder="请输入起始提示文字" />
             <div class="tips">
               结束提示文字
-              <guide
-                video="/static/guide/结束提示文字.jpg"
-                title="结束提示文字"
-                text="时间与日期类型组件输入内容前，显示在结束时间输入框中，用于提示的文字内容"
-              />
+              <guide id="perRegTimeEndPlaceholder"/>
             </div>
             <el-input v-model="currentData.field_data.endPlaceholder" placeholder="请输入结束提示文字" />
             <div class="tips">
               范围分隔符
-              <guide
-                video="/static/guide/范围分隔符.jpg"
-                title="范围分隔符"
-                text="时间与日期类型组件中，开始与结束提示文字中间的分隔文字。"
-              />
+              <guide id="perRegTimeFencePlaceholder"/>
             </div>
             <el-input v-model="currentData.field_data.rangeSeparator" placeholder="请输入范围分隔符" />
           </template>
@@ -1078,11 +1058,7 @@ export default Vue.extend({
           <template v-if="['select','radio','checkbox'].includes(currentData.field_type)">
             <div class="tips">
               选项设定
-              <guide
-                video="/static/guide/选项设定.mp4"
-                title="选项设定"
-                text="在单选、多选、选择器组件中，编辑可供用户选择的选择项目。"
-              />
+              <guide id="perRegOptionListEdit"/>
             </div>
             <div class="select-list">
               <div class="item">
@@ -1104,40 +1080,24 @@ export default Vue.extend({
           <template v-if="['number','slider'].includes(currentData.field_type)">
             <div class="tips">
               最小值
-              <guide
-                video="/static/guide/最小值.jpg"
-                title="最小值"
-                text="数字输入类型的组件中，限制可以输入的最小数字。"
-              />
+              <guide id="perRegMinValue"/>
             </div>
             <el-input v-model="currentData.field_data.min" @change="currentData.field_data.value=$event-0" />
             <div class="tips">
               最大值
-              <guide
-                video="/static/guide/最大值.jpg"
-                title="最大值"
-                text="数字输入类型的组件中，限制可以输入的最大数字。"
-              />
+              <guide id="perRegMaxValue"/>
             </div>
             <el-input v-model="currentData.field_data.max" />
             <div class="tips">
               步进值
-              <guide
-                video="/static/guide/步进值.mp4"
-                title="步进值"
-                text="数字输入类型的组件中，限制输入的数字为多少的倍数。"
-              />
+              <guide id="perRegStepValue"/>
             </div>
             <el-input v-model="currentData.field_data.step" />
           </template>
 
           <div class="tips">
             组件宽度
-            <guide
-              video="/static/guide/组件宽度.mp4"
-              title="组件宽度"
-              text="设置所选定组件的宽度，有1/3、1/2、2/3、占据全部宽度，总共四种尺寸供选择。"
-            />
+            <guide id="perRegCompWidth"/>
           </div>
           <el-radio-group v-model="currentData.field_data.width" size="small">
             <el-radio-button :label="2">窄</el-radio-button>

src/views/preRegManage/editBack.vue

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 import Vue from 'vue'
 import { saveForm, getFormInfo } from '@/api/form'
 import guide from '@/views/components/guidePopover.vue'

src/views/user/form.vue

@@ -7,6 +7,9 @@ import countryCode from '@/lib/countryCode.json'
 import login from '@/views/login/index.vue'
 export default Vue.extend({
   name: 'Index',
+  components: {
+    expoHead
+  },
   data() {
     return {
       from_data: [],
@@ -27,9 +30,6 @@ export default Vue.extend({
       isOk: false
     }
   },
-  components: {
-    expoHead
-  },
   computed: {
     user() { return this.$store.state.user.user },
     token() { return this.$store.state.user.token }
@@ -49,6 +49,9 @@ export default Vue.extend({
           this.from_data = res.data
           this.from_data.images = JSON.parse(res.data.images)
           this.from_data.social_links = JSON.parse(res.data.social_links)
+          if (this.from_data.social_links.facebook === '' || this.from_data.social_links.twitter === '' || this.from_data.social_links.linkedin === '') {
+            this.from_data.social_links = false
+          }
           this.from_data.form_fields.forEach(item => {
             if (item.field_type === 'checkbox') {
               this.$set(item, 'value', [])
@@ -200,7 +203,7 @@ export default Vue.extend({
     <div class="info">此链接无效，请向管理员咨询。</div>
   </div>
   <div v-else class="body">
-    <expo-head :popover_data="from_data"></expo-head>
+    <expo-head :popover_data="from_data" />
     <div class="form">
       <div v-if="isOk" class="form-body ok">
         <div class="icon el-icon-success" />