问卷表单

src/sass/AppAskForm/Statistical.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="statistical">
+    <div class="statistical-tab">
+      <span :class="[currIndex === 0 ? 'active' : '']" @click="currIndex = 0">问卷统计</span>
+      <span :class="[currIndex === 1 ? 'active' : '']" @click="currIndex = 1">人员统计</span>
+    </div>
+    <div class="statistical-content">
+      <div class="list-wrapper" v-show="currIndex === 0">
+        <div class="top">
+          <span>共</span>
+          <i>9</i>
+          <span>题，其中多选</span>
+          <i>9</i>
+          <span>题，其中多选</span>
+          <i>9</i>
+          <span>道</span>
+        </div>
+        <div class="topic-list">
+          <div class="topic-item" v-for="(item, i) in 10" :key="i">
+            <h2>一、您是否了解社会治理？(单选）</h2>
+            <div class="topic-item__wrapper">
+              <div class="option-item" v-for="(item, index) in 4" :key="index">
+                <div class="option-item__left">
+                  <h2>A：</h2>
+                  <span>每周监测</span>
+                </div>
+                <div class="option-item__right">
+                  <span>10票</span>
+                  <span>40%</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="user-list" v-show="currIndex === 1">
+        <div class="user-item" v-for="(item, index) in 10" :key="index">
+          <div class="user-item__left">
+            <image src="https://p26-passport.byteacctimg.com/img/user-avatar/6401428bcd3b2b9bfed4f31cca07b798~300x300.image" />
+            <div class="right">
+              <div class="right-top">
+                <h2>且听风吟</h2>
+                <span>微信用户</span>
+              </div>
+              <p>2021-10-10 10:30:00</p>
+            </div>
+          </div>
+          <div class="user-item__right">
+            <p>分值: 10</p>
+            <div>查看表单</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    appName: '调查结果',
+
+    name: 'Statistical',
+
+    data () {
+      return {
+        currIndex: 0
+      }
+    },
+
+    onLoad () {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .statistical {
+    padding-top: 112px;
+    padding-bottom: 60px;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    i {
+      font-style: normal;
+    }
+
+    .list-wrapper {
+      padding-bottom: 40px;
+
+      .top {
+        display: flex;
+        align-items: center;
+        height: 116px;
+        padding: 0 32px;
+        font-size: 34px;
+        color: #333;
+        border-bottom: 4px solid #f3f6f9;
+
+        i {
+          color: #347FFF;
+        }
+      }
+
+      .topic-item {
+        padding: 40px 32px 0;
+
+        & > h2 {
+          line-height: 44px;
+          color: #333333;
+          font-size: 32px;
+        }
+
+        .option-item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-top: 24px;
+          padding: 34px 32px;
+          border-radius: 16px;
+          border: 1px solid #CCCCCC;
+          background: #F5F5F5;
+
+          & > div {
+            display: flex;
+          }
+
+          h2 {
+            font-weight: 600;
+            font-size: 32px;
+          }
+
+          .option-item__left {
+            flex: 1;
+            margin-right: 18px;
+            font-weight: 600;
+            font-size: 32px;
+            color: #333333;
+
+            span {
+              flex: 1;
+              text-align: justify;
+            }
+          }
+
+          .option-item__right {
+            align-items: center;
+            span {
+              color: #666666;
+              font-size: 28px;
+
+              &:first-child {
+                margin-right: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .statistical-content {
+      background: #fff;
+    }
+
+    .statistical-tab {
+      display: flex;
+      position: fixed;
+      align-items: center;
+      top: 0;
+      left: 0;
+      z-index: 11;
+      width: 100%;
+      height: 96px;
+      padding: 0 32px;
+      background: #fff;
+
+      span {
+        position: relative;
+        flex: 1;
+        height: 100%;
+        line-height: 96px;
+        text-align: center;
+        color: #000;
+        font-size: 32px;
+        font-weight: 600;
+
+        &::after {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          z-index: 1;
+          width: 192px;
+          height: 6px;
+          background: transparent;
+          transform: translateX(-50%);
+          content: ' ';
+        }
+
+        &.active {
+          color: #1365DD;
+
+          &::after {
+            background: #1365DD;
+          }
+        }
+      }
+    }
+  }
+</style>

src/sass/AppAskForm/components/List.vue

@@ -76,6 +76,12 @@
             </div>
             <h3>删除</h3>
           </div>
+          <div class="operate-item" @click="toResult(id)">
+            <div>
+              <image :src="`${$cdn}askform/total.png`"/>
+            </div>
+            <h3>调查结果</h3>
+          </div>
         </div>
         <div class="popup-btn" @click="isShow = false">关闭</div>
       </div>
@@ -125,7 +131,7 @@ export default {
 
     showPopup(item) {
       if (item.status === '2') {
-        this.$confirm('表单已停止发布，请在后台管理系统中查看调查结果', '', {
+        this.$confirm('该调查已结束，谢谢您的参与！', '', {
           showCancel: false
         })
 
@@ -208,6 +214,11 @@ export default {
       this.linkTo(`./FormSetting?id=${this.info.id}&type=edit`)
       this.isShow = false
     },
+
+    toResult () {
+      this.linkTo(`./Statistical?id=${this.info.id}`)
+    },
+
     toEdit() {
       if (this.info.dataCount !== 0) {
         return this.$u.toast('该表单已有数据，无法编辑!')