From 82171fa48907798afe0d7b0bd227ce3d55430891 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Tue, 23 Nov 2021 17:19:02 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppAskForm/components/PreviewForm.vue     | 705 +++++++++---------
 1 file changed, 352 insertions(+), 353 deletions(-)

diff --git a/src/apps/AppAskForm/components/PreviewForm.vue b/src/apps/AppAskForm/components/PreviewForm.vue
index 556bea73..275da4fc 100644
--- a/src/apps/AppAskForm/components/PreviewForm.vue
+++ b/src/apps/AppAskForm/components/PreviewForm.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="add-form">
     <div class="header-pic">
-      <image v-if="form.headPicture" :src="form.headPicture" />
+      <image v-if="form.headPicture" :src="form.headPicture"/>
     </div>
     <div class="form-info">
       <div class="form-info__wrapper">
         <textarea class="title" :auto-height="true" disabled placeholder="请输入标题 (必填）" v-model="form.title"></textarea>
-        <u-input class="content" disabled :clearable="false" type="textarea" v-model="form.tableExplain" placeholder="请输入表单描述 (选填）" :height="80" :auto-height="true" :maxlength="255"></u-input>
+        <u-input class="content" disabled :clearable="false" type="textarea" v-model="form.tableExplain"
+                 placeholder="请输入表单描述 (选填）" :height="80" :auto-height="true" :maxlength="255"></u-input>
       </div>
     </div>
     <div class="components-list">
@@ -38,12 +39,12 @@
           <template v-if="(item.type === 'select')">
             <div class="components-item__select">
               <span>{{ item.placeholder }}</span>
-              <u-icon name="arrow-down" color="#DEDFDF" />
+              <u-icon name="arrow-down" color="#DEDFDF"/>
             </div>
           </template>
           <template v-if="(item.type === 'upload')">
             <div class="components-item__select components-item__textarea components-item__upload">
-              <image :src="`${$cdn}askform/upload.png`" />
+              <image :src="`${$cdn}askform/upload.png`"/>
               <span>选择图片（2M以内）</span>
             </div>
           </template>
@@ -60,401 +61,399 @@
         </div>
       </div>
     </div>
-    <AiBack custom @back="$emit('back')"></AiBack>
+    <AiBack custom @back="$emit('back')"/>
   </div>
 </template>
 
 <script>
-  import AiBack from "@/components/AiBack";
-  export default {
-    props: ['formData', 'targetListData'],
+import AiBack from "../../../components/AiBack";
 
-    data () {
-      return {
-        form: {
-          tableExplain: '详细描述',
-          title: '问卷调查',
-          isShowheadPicture: true,
-          isShowTableExplain: true,
-          isShowBtn: true,
-          headPicture: '',
-          commitType: '1',
-          periodValidityType: '0',
-          actionNotice: '1',
-          dynamicNotice: '1',
-          periodValidityEndTime: '',
-          shareStatus: '0',
-          count: 0,
-          wechatId: '0',
-          type: 0,
-          buttonExplain: '提交',
-          tips: true
-        },
-        templateType: 0,
-        targetList: [],
-        isShow: false,
+export default {
+  components: {AiBack},
+  props: ['formData', 'targetListData'],
+  data() {
+    return {
+      form: {
+        tableExplain: '详细描述',
+        title: '问卷调查',
+        isShowheadPicture: true,
+        isShowTableExplain: true,
+        isShowBtn: true,
+        headPicture: '',
+        commitType: '1',
+        periodValidityType: '0',
+        actionNotice: '1',
+        dynamicNotice: '1',
+        periodValidityEndTime: '',
+        shareStatus: '0',
+        count: 0,
+        wechatId: '0',
         type: 0,
-        id: '',
-        touchStart: 0
-      }
-    },
+        buttonExplain: '提交',
+        tips: true
+      },
+      templateType: 0,
+      targetList: [],
+      isShow: false,
+      type: 0,
+      id: '',
+      touchStart: 0
+    }
+  },
 
-    mounted () {
-      this.form = this.formData
-      this.targetList = this.targetListData
-    },
+  mounted() {
+    this.form = this.formData
+    this.targetList = this.targetListData
+  },
 
-    components: {
-      AiBack
-    },
-
-    methods: {
-      getInfo (id) {
-        uni.showLoading()
-        this.$http.post(`/app/appquestionnairetemplate/queryDetailById?id=${id}`).then(res => {
-          if (res.code == 0) {
-            this.form = {
-              ...res.data,
-              headPicture: res.data.headPicture
-            }
-
-            this.type = res.data.type
-
-            this.targetList = res.data.fields.map(item => {
-              return JSON.parse(item.fieldInfo)
-            })
-
-            this.pageShow = true
-          } else {
-            this.$u.toast(res.msg)
+  methods: {
+    getInfo(id) {
+      uni.showLoading()
+      this.$http.post(`/app/appquestionnairetemplate/queryDetailById?id=${id}`).then(res => {
+        if (res.code == 0) {
+          this.form = {
+            ...res.data,
+            headPicture: res.data.headPicture
           }
 
-          uni.hideLoading()
-        }).catch(() => {
-          uni.hideLoading()
-        })
-      }
+          this.type = res.data.type
+
+          this.targetList = res.data.fields.map(item => {
+            return JSON.parse(item.fieldInfo)
+          })
+
+          this.pageShow = true
+        } else {
+          this.$u.toast(res.msg)
+        }
+
+        uni.hideLoading()
+      }).catch(() => {
+        uni.hideLoading()
+      })
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .add-form {
-    min-height: 100vh;
-    padding-bottom: 60px;
+.add-form {
+  min-height: 100vh;
+  padding-bottom: 60px;
+  box-sizing: border-box;
+  background: #F3F6F9;
+
+  * {
     box-sizing: border-box;
-    background: #F3F6F9;
+  }
 
-    * {
-      box-sizing: border-box;
-    }
+  ::v-deep .u-drawer-bottom {
+    background-color: transparent;
+  }
 
-    ::v-deep .u-drawer-bottom {
-      background-color: transparent;
-    }
+  .components-list {
+    padding: 0 20px;
 
-    .components-list {
-      padding: 0 20px;
+    .components-item {
+      margin-top: 24px;
+      padding: 32px;
+      box-shadow: 0 4px 8px 4px rgba(233, 233, 233, 0.39);
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid #EEEFF0;
+      background: #fff;
 
-      .components-item {
-        margin-top: 24px;
-        padding: 32px;
-        box-shadow: 0 4px 8px 4px rgba(233, 233, 233, 0.39);
-        border-radius: 8px;
-        overflow: hidden;
-        border: 1px solid #EEEFF0;
-        background: #fff;
+      ::v-deep .u-radio, ::v-deep .u-checkbox {
+        position: relative;
+        margin-bottom: 20px;
 
-        ::v-deep .u-radio, ::v-deep .u-checkbox {
-          position: relative;
-          margin-bottom: 20px;
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-
-          .u-checkbox__icon-wrap, .u-radio__icon-wrap {
-            position: absolute;
-            top: 4px;
-          }
-
-          .u-radio__label, .u-checkbox__label {
-            display: flex;
-            align-items: center;
-            margin-right: 0;
-            margin-left: 40px;
-            line-height: 1.5;
-            text-align: justify;
-
-            image {
-              width: 100px;
-              height: 100px;
-              margin: 0 10px;
-            }
-          }
-        }
-        span {
-          flex: 1;
-          color: #666;
-          font-size: 26px;
+        &:last-child {
+          margin-bottom: 0;
         }
 
-        .components-item__select {
+        .u-checkbox__icon-wrap, .u-radio__icon-wrap {
+          position: absolute;
+          top: 4px;
+        }
+
+        .u-radio__label, .u-checkbox__label {
           display: flex;
           align-items: center;
-          justify-content: space-between;
-          width: 100%;
-          height: 80px;
-          margin-bottom: 8px;
-          padding: 0 26px;
-          border: 1px solid #DEDFDF;
-
-          &.components-item__textarea {
-            align-items: flex-start;
-            height: 160px;
-            padding-top: 20px;
-
-            image {
-              width: 46px;
-              height: 34px;
-              margin-right: 16px;
-            }
-
-            span {
-              color: #666;
-              font-size: 26px;
-            }
-          }
-
-          &.components-item__upload {
-            justify-content: center;
-            align-items: center;
-          }
-        }
-
-        .components-item__title {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 32px;
-
-          em {
-            margin-right: 4px;
-            font-style: normal;
-            color: rgb(226, 33, 32);;
-          }
+          margin-right: 0;
+          margin-left: 40px;
+          line-height: 1.5;
+          text-align: justify;
 
           image {
-            width: 32px;
-            height: 32px;
-            box-sizing: content-box;
-            padding: 20px 0 20px 20px;
-          }
-
-          div {
-            display: flex;
-            align-items: baseline;
-            color: #333333;
-            font-size: 32px;
-
-            i {
-              font-style: normal;
-            }
-
-            h2 {
-              font-weight: 600;
-              font-size: 32px;
-            }
+            width: 100px;
+            height: 100px;
+            margin: 0 10px;
           }
         }
       }
-    }
 
-    .add-popup {
-      height: 440px;
-      border-radius: 20px 20px 0 0;
-      background: #fff;
+      span {
+        flex: 1;
+        color: #666;
+        font-size: 26px;
+      }
 
-      .add-popup__title {
+      .components-item__select {
         display: flex;
-        position: relative;
         align-items: center;
-        justify-content: center;
-        height: 96px;
-        border-bottom: 1px solid #E4E5E6;
+        justify-content: space-between;
+        width: 100%;
+        height: 80px;
+        margin-bottom: 8px;
+        padding: 0 26px;
+        border: 1px solid #DEDFDF;
 
-        h2 {
-          color: #333333;
-          font-size: 32px;
-          font-weight: 600;
+        &.components-item__textarea {
+          align-items: flex-start;
+          height: 160px;
+          padding-top: 20px;
+
+          image {
+            width: 46px;
+            height: 34px;
+            margin-right: 16px;
+          }
+
+          span {
+            color: #666;
+            font-size: 26px;
+          }
+        }
+
+        &.components-item__upload {
+          justify-content: center;
+          align-items: center;
+        }
+      }
+
+      .components-item__title {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 32px;
+
+        em {
+          margin-right: 4px;
+          font-style: normal;
+          color: rgb(226, 33, 32);;
         }
 
         image {
-          position: absolute;
-          right: 32px;
-          top: 50%;
-          width: 30px;
-          height: 20px;
-          transform: translateY(-50%);
-        }
-      }
-
-      .add-popup__list {
-        display: flex;
-        flex-wrap: wrap;
-        padding: 0 34px;
-
-        span {
-          width: calc((100% - 64px) / 3);
-          height: 78px;
-          line-height: 78px;
-          margin-top: 32px;
-          margin-right: 32px;
-          text-align: center;
-          color: #333333;
-          font-size: 28px;
-          border-radius: 8px;
-          border: 1px solid #E4E5E6;
-
-          &:nth-of-type(3n) {
-            margin-right: 0;
-          }
-        }
-      }
-    }
-
-    .add-form__footer {
-      display: flex;
-      align-items: center;
-      position: fixed;
-      left: 0;
-      bottom: 0;
-      z-index: 1;
-      width: 100%;
-      height: 112px;
-      text-align: center;
-
-      div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 1;
-        height: 100%;
-        text-align: center;
-        background: #fff;
-
-        &:last-child {
-          color: #fff;
-          font-size: 36px;
-          background: #3192F4;
-
-          &:active {
-            opacity: 0.8;
-          }
+          width: 32px;
+          height: 32px;
+          box-sizing: content-box;
+          padding: 20px 0 20px 20px;
         }
 
-        span {
-          flex: 1;
-          height: 100%;
-          line-height: 112px;
+        div {
+          display: flex;
+          align-items: baseline;
           color: #333333;
           font-size: 32px;
 
-          &:active {
-            background: #eee;
+          i {
+            font-style: normal;
+          }
+
+          h2 {
+            font-weight: 600;
+            font-size: 32px;
           }
         }
       }
     }
-
-    .add-form__btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 214px;
-      height: 66px;
-      line-height: 66px;
-      margin: 64px auto 0;
-      background: #FFFFFF;
-      border-radius: 34px;
-
-      &:active {
-        opacity: 0.8;
-      }
-
-      image {
-        width: 28px;
-        height: 28px;
-      }
-
-      span {
-        margin-left: 16px;
-        color: #4392E6;
-        font-size: 28px;
-      }
-    }
-
-    * {
-      box-sizing: border-box;
-    }
-
-    .form-info {
-      margin-top: 26px;
-      padding: 0 20px;
-
-      & > h2 {
-        height: 76px;
-        line-height: 76px;
-        color: #999999;
-        font-weight: normal;
-        font-size: 28px;
-      }
-
-      .form-info__wrapper {
-        padding: 0 18px;
-        background: #fff;
-
-        .title {
-          width: 100%;
-          padding: 22px 0;
-          font-size: 36px;
-          border-bottom: 1px solid #F1F2F3;
-        }
-
-        .content {
-          padding: 30px 0!important;
-          font-size: 28px;
-
-          ::v-deep textarea {
-            color: #333;
-            font-size: 28px!important;
-          }
-        }
-      }
-    }
-
-    .header-pic {
-      position: relative;
-      font-size: 0;
-
-      span {
-        position: absolute;
-        bottom: 16px;
-        right: 16px;
-        z-index: 1;
-        width: 148px;
-        height: 56px;
-        line-height: 56px;
-        text-align: center;
-        color: #fff;
-        font-size: 26px;
-        background: rgba(0, 0, 0, 0.16);
-        border-radius: 28px;
-      }
-
-      image {
-        width: 100%;
-        height: 320px;
-      }
-    }
   }
+
+  .add-popup {
+    height: 440px;
+    border-radius: 20px 20px 0 0;
+    background: #fff;
+
+    .add-popup__title {
+      display: flex;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      height: 96px;
+      border-bottom: 1px solid #E4E5E6;
+
+      h2 {
+        color: #333333;
+        font-size: 32px;
+        font-weight: 600;
+      }
+
+      image {
+        position: absolute;
+        right: 32px;
+        top: 50%;
+        width: 30px;
+        height: 20px;
+        transform: translateY(-50%);
+      }
+    }
+
+    .add-popup__list {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0 34px;
+
+      span {
+        width: calc((100% - 64px) / 3);
+        height: 78px;
+        line-height: 78px;
+        margin-top: 32px;
+        margin-right: 32px;
+        text-align: center;
+        color: #333333;
+        font-size: 28px;
+        border-radius: 8px;
+        border: 1px solid #E4E5E6;
+
+        &:nth-of-type(3n) {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  .add-form__footer {
+    display: flex;
+    align-items: center;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+    width: 100%;
+    height: 112px;
+    text-align: center;
+
+    div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+      height: 100%;
+      text-align: center;
+      background: #fff;
+
+      &:last-child {
+        color: #fff;
+        font-size: 36px;
+        background: #3192F4;
+
+        &:active {
+          opacity: 0.8;
+        }
+      }
+
+      span {
+        flex: 1;
+        height: 100%;
+        line-height: 112px;
+        color: #333333;
+        font-size: 32px;
+
+        &:active {
+          background: #eee;
+        }
+      }
+    }
+  }
+
+  .add-form__btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 214px;
+    height: 66px;
+    line-height: 66px;
+    margin: 64px auto 0;
+    background: #FFFFFF;
+    border-radius: 34px;
+
+    &:active {
+      opacity: 0.8;
+    }
+
+    image {
+      width: 28px;
+      height: 28px;
+    }
+
+    span {
+      margin-left: 16px;
+      color: #4392E6;
+      font-size: 28px;
+    }
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .form-info {
+    margin-top: 26px;
+    padding: 0 20px;
+
+    & > h2 {
+      height: 76px;
+      line-height: 76px;
+      color: #999999;
+      font-weight: normal;
+      font-size: 28px;
+    }
+
+    .form-info__wrapper {
+      padding: 0 18px;
+      background: #fff;
+
+      .title {
+        width: 100%;
+        padding: 22px 0;
+        font-size: 36px;
+        border-bottom: 1px solid #F1F2F3;
+      }
+
+      .content {
+        padding: 30px 0 !important;
+        font-size: 28px;
+
+        ::v-deep textarea {
+          color: #333;
+          font-size: 28px !important;
+        }
+      }
+    }
+  }
+
+  .header-pic {
+    position: relative;
+    font-size: 0;
+
+    span {
+      position: absolute;
+      bottom: 16px;
+      right: 16px;
+      z-index: 1;
+      width: 148px;
+      height: 56px;
+      line-height: 56px;
+      text-align: center;
+      color: #fff;
+      font-size: 26px;
+      background: rgba(0, 0, 0, 0.16);
+      border-radius: 28px;
+    }
+
+    image {
+      width: 100%;
+      height: 320px;
+    }
+  }
+}
 </style>