25245

2021-12-07 15:17:19 +08:00
parent 4dccf2816c
commit 137f7ff0e2
5 changed files with 147 additions and 117 deletions
--- a/src/apps/AppAskForm/AppAskForm.vue
+++ b/src/apps/AppAskForm/AppAskForm.vue
@@ -31,13 +31,6 @@
    },

    onLoad () {
-      uni.$on('reload', () => {
-        if (this.currIndex === 0) {
-          this.$refs.list.reload()
-        } else {
-          this.$refs.addList.getList()
-        }
-      })
    },

    methods: {
@@ -45,12 +38,6 @@
        this.params = e.params
        this.component = e.type
      },
-    },
-
-    onReachBottom() {
-      if (this.currIndex === 0) {
-        this.$refs.list.getList()
-      }
    }
  }
 </script>
--- a/src/apps/AppAskForm/components/AddList.vue
+++ b/src/apps/AppAskForm/components/AddList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="form">
+  <div class="template-wrapper">
    <div class="form-list">
      <div
        class="form-list__item"
@@ -19,6 +19,41 @@
          <h2>{{ item.title }}</h2>
          <u-icon name="arrow-right" color="#E1E2E3" />
        </div>
+        <div class="template-item" v-for="(item, index) in list" :key="index" hover-class="bg-hover" @click="quote(item.id)">
+          <image :src="`${$cdn}askform/6.png`" />
+          <h2>{{ item.title }}</h2>
+          <u-icon name="arrow-right" color="#E1E2E3" />
+        </div>
+        <div class="template-item" v-for="(item, index) in list" :key="index" hover-class="bg-hover" @click="quote(item.id)">
+          <image :src="`${$cdn}askform/6.png`" />
+          <h2>{{ item.title }}</h2>
+          <u-icon name="arrow-right" color="#E1E2E3" />
+        </div>
+        <div class="template-item" v-for="(item, index) in list" :key="index" hover-class="bg-hover" @click="quote(item.id)">
+          <image :src="`${$cdn}askform/6.png`" />
+          <h2>{{ item.title }}</h2>
+          <u-icon name="arrow-right" color="#E1E2E3" />
+        </div>
+        <div class="template-item" v-for="(item, index) in list" :key="index" hover-class="bg-hover" @click="quote(item.id)">
+          <image :src="`${$cdn}askform/6.png`" />
+          <h2>{{ item.title }}</h2>
+          <u-icon name="arrow-right" color="#E1E2E3" />
+        </div>
+        <div class="template-item" v-for="(item, index) in list" :key="index" hover-class="bg-hover" @click="quote(item.id)">
+          <image :src="`${$cdn}askform/6.png`" />
+          <h2>{{ item.title }}</h2>
+          <u-icon name="arrow-right" color="#E1E2E3" />
+        </div>
+        <div class="template-item" v-for="(item, index) in list" :key="index" hover-class="bg-hover" @click="quote(item.id)">
+          <image :src="`${$cdn}askform/6.png`" />
+          <h2>{{ item.title }}</h2>
+          <u-icon name="arrow-right" color="#E1E2E3" />
+        </div>
+        <div class="template-item" v-for="(item, index) in list" :key="index" hover-class="bg-hover" @click="quote(item.id)">
+          <image :src="`${$cdn}askform/6.png`" />
+          <h2>{{ item.title }}</h2>
+          <u-icon name="arrow-right" color="#E1E2E3" />
+        </div>
      </div>
    </div>
  </div>
@@ -88,101 +123,105 @@ export default {
 </script>

 <style lang="scss" scoped>
-  .template {
-    margin: 32px 32px 0;
-    background: #fff;
-    border-radius: 8px;
-    overflow: hidden;
+  .template-wrapper {
+    padding-bottom: 120rpx;

-    & > h2 {
-      height: 88px;
-      line-height: 88px;
-      padding: 0 24px;
-      color: #333333;
-      font-size: 30px;
-    }
-
-    .template-item {
-      display: flex;
-      align-items: center;
-      height: 104px;
-      padding: 0 24px;
-      border-bottom: 1px solid #D8DDE6;
-
-      &:active {
-        background-color: #eee;
-      }
-
-      &:last-child {
-        border: none;
-      }
-
-      image {
-        width: 36px;
-        height: 42px;
-      }
-
-      i {
-        font-size: 30px;
-        color: #E1E2E3;
-      }
-
-      h2 {
-        flex: 1;
-        padding: 0 18px;
-        color: #333333;
-        font-size: 28px;
-        font-weight: normal;
-        overflow: hidden;
-        text-overflow:ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  .form-list {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0 32px 0;
-
-    div {
-      box-sizing: border-box;
-    }
-
-    .form-list__item {
-      width: calc(50% - 13px);
-      height: 216px;
-      margin: 32px 24px 0 0;
-      padding: 40px 20px 52px;
-      background-color: #FFFFFF;
+    .template {
+      margin: 32px 32px 0;
+      background: #fff;
      border-radius: 8px;
-      background-size: 100% 100%;
+      overflow: hidden;

-      &:active {
-        background-color: #eee;
+      & > h2 {
+        height: 88px;
+        line-height: 88px;
+        padding: 0 24px;
+        color: #333333;
+        font-size: 30px;
      }

-      &:nth-of-type(2n) {
-        margin-right: 0;
+      .template-item {
+        display: flex;
+        align-items: center;
+        height: 104px;
+        padding: 0 24px;
+        border-bottom: 1px solid #D8DDE6;
+
+        &:active {
+          background-color: #eee;
+        }
+
+        &:last-child {
+          border: none;
+        }
+
+        image {
+          width: 36px;
+          height: 42px;
+        }
+
+        i {
+          font-size: 30px;
+          color: #E1E2E3;
+        }
+
+        h2 {
+          flex: 1;
+          padding: 0 18px;
+          color: #333333;
+          font-size: 28px;
+          font-weight: normal;
+          overflow: hidden;
+          text-overflow:ellipsis;
+          white-space: nowrap;
+        }
      }
+    }
+
+    .form-list {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0 32px 0;

      div {
-        width: 148px;
-        height: 48px;
-        line-height: 48px;
-        text-align: center;
-        color: #fff;
-        font-size: 28px;
-        background: #6BA1F9;
-        border-radius: 24px;
+        box-sizing: border-box;
      }

-      h2 {
-        margin-bottom: 32px;
-        padding-left: 10px;
-        color: #333333;
-        font-weight: 700;
-        font-size: 32px;
+      .form-list__item {
+        width: calc(50% - 13px);
+        height: 216px;
+        margin: 32px 24px 0 0;
+        padding: 40px 20px 52px;
+        background-color: #FFFFFF;
+        border-radius: 8px;
+        background-size: 100% 100%;
+
+        &:active {
+          background-color: #eee;
+        }
+
+        &:nth-of-type(2n) {
+          margin-right: 0;
+        }
+
+        div {
+          width: 148px;
+          height: 48px;
+          line-height: 48px;
+          text-align: center;
+          color: #fff;
+          font-size: 28px;
+          background: #6BA1F9;
+          border-radius: 24px;
+        }
+
+        h2 {
+          margin-bottom: 32px;
+          padding-left: 10px;
+          color: #333333;
+          font-weight: 700;
+          font-size: 32px;
+        }
      }
    }
  }
--- a/src/apps/AppAskForm/components/List.vue
+++ b/src/apps/AppAskForm/components/List.vue
@@ -4,7 +4,7 @@
      <u-search placeholder="请输入标题" :show-action="false" search-icon-color="#ccc" v-model="search.title"
                @search="isMore = false, search.current = 1, getList()"/>
    </ai-top-fixed>
-    <div class="form-list">
+    <scroll-view show-scrollbar scroll-y @scrolltolower="getList" class="form-list">
      <div class="form-item" v-for="(item, index) in list" :key="index"
           @click="showPopup(item)">
        <div class="form-item__top">
@@ -27,8 +27,9 @@
          <span>{{ $dict.getLabel('questionnaireStatus', item.status) }}</span>
        </div>
      </div>
+      <div style="height: 30rpx"></div>
      <ai-empty v-if="!list.length && isMore"></ai-empty>
-    </div>
+    </scroll-view>
    <u-popup v-model="isShow" :closeable="false" mode="bottom" :z-index="11">
      <div class="popup">
        <h2>{{ info.title }}</h2>
@@ -269,7 +270,6 @@ export default {

    getList() {
      if (this.isMore) return
-
      this.$http.post(`/app/appquestionnairetemplate/list`, null, {
        params: {
          ...this.search,
@@ -305,6 +305,8 @@ export default {

 <style lang="scss" scoped>
 .form {
+  height: 100vh;
+  overflow: hidden;
  ::v-deep .u-search {
    margin-bottom: 0 !important;

@@ -313,6 +315,12 @@ export default {
    }
  }

+  .form-list {
+    height: calc(100vh - 98rpx - 100rpx);
+    background: #f5f5f5;
+    overflow: hidden;
+  }
+
  .popup {
    background: #F7F7F7;

--- a/src/apps/AppAskForm/components/Tabbar.vue
+++ b/src/apps/AppAskForm/components/Tabbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="form">
+  <div class="form-wrapper">
    <div class="form-content">
      <add-list ref="addList" v-if="currIndex === 1" @change="onChange"></add-list>
      <list ref="list" v-if="currIndex === 0" @change="onChange"></list>
@@ -43,16 +43,6 @@ export default {
    }
  },

-  onLoad() {
-    uni.$on('reload', () => {
-      if (this.currIndex === 0) {
-        this.$refs.list.reload()
-      } else {
-        this.$refs.addList.getList()
-      }
-    })
-  },
-
  methods: {
    onChange(e) {
      this.$emit('change', e)
@@ -61,14 +51,13 @@ export default {

  onReachBottom() {
    if (this.currIndex === 0) {
-      this.$refs.list.getList()
    }
  }
 }
 </script>

 <style lang="scss" scoped>
-.form {
-  padding-bottom: 98px;
+.form-wrapper {
+  // padding-bottom: 98px;
 }
 </style>
--- a/src/components/AiTopFixed.vue
+++ b/src/components/AiTopFixed.vue
@@ -39,7 +39,10 @@ export default {
  }

  .fixed {
+    display: flex;
+    align-items: center;
    width: 100%;
+    height: 100rpx;
    top: 0;
    position: fixed;
    z-index: 9;
@@ -51,7 +54,11 @@ export default {
  }

  .content {
-    padding: 20px 32px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100rpx;
+    padding: 0 32px;
    box-sizing: border-box;
  }