fix:满意度优化

src/pages/FormVolume/Layout1/index.vue

@@ -27,12 +27,16 @@
               @input="item.val = (item.content[item.sliderVal] || {}).title || ''" />
             <div class="ruler-layout">
               <div class="ruler-item">
-                <span>+</span>
+                <span></span>
               </div>
               <div class="ruler-item"
                 v-for="(it, itIndex) in item.content"
                 :key="itIndex">
-                <span v-if="!it.sliderHide">{{ it.title }}</span>
+                <span v-if="!it.sliderHide">
+                  {{ it.title }}
+                  <br v-if="it.memo" />
+                  {{ it.memo || '' }}
+                </span>
               </div>
             </div>
           </div>

src/pages/FormVolume/Layout1/style.scss

@@ -13,7 +13,7 @@
     .des {
       color: $color-2;
       padding-bottom: $sp-lg;
-      font-size: $size-xs;
+      font-size: $size-sm;
       word-wrap: break-word;
     }
   }
@@ -94,7 +94,7 @@
       justify-content: space-between;
       border-bottom: 1px solid $color-4;
       margin-top: $sp-lg;
-      margin-bottom: $sp-sm;
+      margin-bottom: $sp-md;
 
       .ruler-item {
         position: relative;
@@ -105,10 +105,11 @@
         span {
           position: absolute;
           left: 0;
-          bottom: -($size-xs + $sp-sm);
+          top: ($size-xs + $sp-xs);
           white-space: nowrap;
           color: $color-3;
           transform: translateX(-50%);
+          text-align: center;
         }
       }
     }

src/pages/FormVolume/Layout102/index.vue

@@ -0,0 +1,127 @@
+<template>
+<div class="volume-container">
+  <div class="body scroll-view">
+    <div class="head">
+      <div class="bg"></div>
+      <div class="cont">
+        <div class="logo">
+          <img :src="SvgLogo" />
+        </div>
+        <!-- <h1 v-if="data.topic.name">{{ data.topic.name }}</h1>
+        <div class="des" v-if="data.topic.memo" v-html="data.topic.memo"></div> -->
+        <h1 v-if="data.topic.name">尊敬的客户：</h1>
+        <div class="des" v-if="data.topic.memo">
+          　　感谢您选择铂林眼科。我们非常期待您对本次服务的满意度反馈，这将对提升我们的服务非常重要。
+        </div>
+      </div>
+    </div>
+    <transition-group name="list" class="volume-content" tag="ul">
+      <li
+        v-for="(item, index) in data.result"
+        :key="index + 1">
+        <p>
+          <i :class="{cur: !!item.val && !!item.val.length}" />
+          <label v-if="item.required">*</label>
+          <span>{{index + 1}}. </span>
+          <span>{{ item.title }}</span>
+          <span v-if="item.type_name">【{{ item.type_name }}】</span>
+        </p>
+        <div :class="{'align-right': item.layout_align === 'right'}">
+
+          <div class="slider-layout" v-if="item.type === 'slider'">
+            <div class="val" v-if="item.val">{{ item.val }}</div>
+            <div class="warn" v-else>拨动滑块选择</div>
+            <van-slider
+              v-model="item.sliderVal"
+              :min="-1" 
+              :max="item.content.length - 1"
+              @input="item.val = (item.content[item.sliderVal] || {}).title || ''" />
+            <div class="ruler-layout">
+              <div class="ruler-item">
+                <span></span>
+              </div>
+              <div class="ruler-item"
+                v-for="(it, itIndex) in item.content"
+                :key="itIndex">
+                <span v-if="!it.sliderHide">
+                  {{ it.title }}
+                  <br v-if="it.memo" />
+                  {{ it.memo || '' }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <van-radio-group 
+            v-model="item.val" 
+            :direction="item.layout_inline === 2 ? 'vertical' : 'horizontal'"
+            v-if="item.type === 'radio'">
+            <van-radio
+              :class="{ vertical: item.layout_inline === 2, horizontal: item.layout_inline === 1 }"
+              :name="it.title" 
+              v-for="(it, itIndex) in item.content" 
+              :key="itIndex">{{ it.title }}</van-radio>
+          </van-radio-group>
+
+          <van-checkbox-group 
+            v-model="item.val" 
+            :direction="item.layout_inline === 2 ? 'vertical' : 'horizontal'"
+            :max="item.max" 
+            v-if="item.type === 'checkbox'">
+            <van-checkbox 
+              :class="{ vertical: item.layout_inline === 2, horizontal: item.layout_inline === 1 }"
+              :name="it.title" 
+              v-for="(it, itIndex) in item.content" 
+              :key="itIndex" 
+              shape="square">{{ it.title }}</van-checkbox>
+          </van-checkbox-group>
+
+          <textarea 
+            v-model="item.val" 
+            :maxlength="item.max || 200" placeholder="请填写" 
+            v-if="item.type === 'textarea'" />
+
+          <input v-model="item.val" 
+            :maxlength="item.max || 200" 
+            placeholder="请填写" 
+            v-if="item.type === 'input'" />
+        </div>
+      </li>
+    </transition-group>
+    <slot name="tel" />
+  </div>
+  
+  <div class="footer" v-if="!!data.result.length">
+    <button class="btn primary" 
+      :disabled="loading.submit || !data.result.length" 
+      @click="$emit('submit')">提交</button>
+  </div>
+
+  <slot />
+</div>
+</template>
+
+<script>
+import SvgLogo from '~/svg/logo.svg'
+export default {
+  props: {
+    data: {
+      required: true,
+      type: Object
+    },
+    loading: {
+      required: true,
+      type: Object
+    }
+  },
+  data () {
+    return {
+      SvgLogo
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>

src/pages/FormVolume/Layout102/style.scss

@@ -0,0 +1,159 @@
+@import '@/common/scss/base.scss';
+.volume-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .head {
+    padding: 0 $sp-lg;
+    padding-bottom: $sp-lg * 4;
+    color: $color-f;
+    position: relative;
+    overflow: hidden;
+    .logo {
+      height: $size-xl;
+      margin-top: $sp-md;      
+      img {
+        height: 100%;
+        width: auto;
+      }
+    }
+    .bg {
+      position: absolute;
+      top: -30%;
+      left: -15%;
+      right: -15%;
+      bottom: 0;
+      border-radius: 50%;
+      background-image: linear-gradient($color-lg, $color);
+    }
+    .cont {
+      position: relative;
+      z-index: 2;
+    }
+    h1 {
+      margin: 0;
+      padding-top: $sp-md;
+      padding-bottom: $sp-md;
+      // text-align: center;
+      font-size: $size-sm * 2;
+      font-family: 'PangMenZhengDao';
+    }
+    .des {
+      padding-bottom: $sp-lg;
+      font-size: $size-sm;
+      word-wrap: break-word;
+    }
+  }
+  .body {
+    flex: 1;
+  }
+  .volume-content {
+    position: relative;
+    z-index: 2;
+    margin-top: -$sp-lg * 4;
+    > li {
+      list-style: none;
+      padding: $sp-lg;
+      background: $color-f;
+      margin: $sp-lg;
+      margin-top: 0;
+      border-radius: $sp-md;
+      box-shadow: 0 2px 4px 1px $color-5;
+
+      > p {
+        margin: 0;
+        font-weight: 500;
+        position: relative;
+        > label {
+          color: $color-error;
+        }
+        > i {
+          position: absolute;
+          left: -$sp-lg;
+          top: 0;
+          height: 100%;
+          width: 4px;
+          background: $color;
+          &.cur {
+            background: $color-success;
+          }
+        }
+      }
+      .vertical {
+        margin-bottom: $sp-sm;
+      }
+      .horizontal {
+        margin-bottom: $sp-sm;
+      }
+      > div {
+        padding-top: $sp-lg;
+        display: flex;
+
+        > textarea, input {
+          border: 0;
+          border-bottom: 1px solid $color-5;
+          width: 100%;
+        }
+        > textarea {
+          min-height: 86px;
+        }
+
+        &.align-right {
+          justify-content: flex-end;
+          textarea,
+          input {
+            text-align: right;
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    position: relative;
+    z-index: 3;
+    padding: $sp-md $sp-lg;
+    background: $color-f;
+    box-shadow: 0 -2px 4px 1px $color-5;
+  }
+  .slider-layout {
+    flex: 1;
+    padding: 0 $sp-lg;
+    padding-bottom: $sp-md;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .val,.warn {
+      padding-bottom: $sp-lg;
+      font-size: $size-lg;
+      color: $color-success;
+    }
+    .warn {
+      color: $color-3;
+    }
+    .ruler-layout {
+      font-size: $size-xs;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid $color-4;
+      margin-top: $sp-lg;
+      margin-bottom: $sp-md;
+      .ruler-item {
+        position: relative;
+        height: $size-xs;
+        background: $color-4;
+        width: 1px;
+        span {
+          position: absolute;
+          left: 0;
+          top: ($size-xs + $sp-xs);
+          white-space: nowrap;
+          color: $color-3;
+          transform: translateX(-50%);
+          text-align: center;
+        }
+      }
+    }
+  }
+}

src/pages/FormVolume/Layout2/index.vue

@@ -34,12 +34,16 @@
               @input="item.val = (item.content[item.sliderVal] || {}).title || ''" />
             <div class="ruler-layout">
               <div class="ruler-item">
-                <span>+</span>
+                <span></span>
               </div>
               <div class="ruler-item"
                 v-for="(it, itIndex) in item.content"
                 :key="itIndex">
-                <span v-if="!it.sliderHide">{{ it.title }}</span>
+                <span v-if="!it.sliderHide">
+                  {{ it.title }}
+                  <br v-if="it.memo" />
+                  {{ it.memo || '' }}
+                </span>
               </div>
             </div>
           </div>

src/pages/FormVolume/Layout2/style.scss

@@ -32,15 +32,15 @@
     }
     h1 {
       margin: 0;
-      padding-top: $sp-xs;
-      padding-bottom: $sp-lg;
+      padding-top: $sp-md;
+      padding-bottom: $sp-md;
       text-align: center;
-      font-size: $size-md * 2;
+      font-size: $size-sm * 2;
       font-family: 'PangMenZhengDao';
     }
     .des {
       padding-bottom: $sp-lg;
-      font-size: $size-xs;
+      font-size: $size-sm;
       word-wrap: break-word;
     }
   }
@@ -58,7 +58,7 @@
       margin: $sp-lg;
       margin-top: 0;
       border-radius: $sp-md;
-      box-shadow: 0 0 4px 1px $color-5;
+      box-shadow: 0 2px 4px 1px $color-5;
 
       > p {
         margin: 0;
@@ -117,7 +117,7 @@
   }
   .slider-layout {
     flex: 1;
-    padding: 0 $sp-md;
+    padding: 0 $sp-lg;
     padding-bottom: $sp-md;
     display: flex;
     flex-direction: column;
@@ -138,7 +138,7 @@
       justify-content: space-between;
       border-bottom: 1px solid $color-4;
       margin-top: $sp-lg;
-      margin-bottom: $sp-sm;
+      margin-bottom: $sp-md;
       .ruler-item {
         position: relative;
         height: $size-xs;
@@ -147,10 +147,11 @@
         span {
           position: absolute;
           left: 0;
-          bottom: -($size-xs + $sp-sm);
+          top: ($size-xs + $sp-xs);
           white-space: nowrap;
           color: $color-3;
           transform: translateX(-50%);
+          text-align: center;
         }
       }
     }

src/pages/FormVolume/index.vue

@@ -34,10 +34,14 @@
 import mixins from './mixins';
 import Layout1 from './Layout1'
 import Layout2 from './Layout2'
+import Layout102 from './Layout102'
+
+// 102 为定制版本，> 100 为定制，02 为 2 的定制
 export default {
   components: {
     Layout1,
-    Layout2
+    Layout2,
+    Layout102
   },
   mixins: [mixins],
   data () {
@@ -45,7 +49,8 @@ export default {
       layoutCurrent: '',
       layoutType: {
         '1': 'Layout1',
-        '2': 'Layout2'
+        '2': 'Layout2',
+        '102': 'Layout102',
       }
     }
   }