zuel-itsm-3.0.2/src/views/knowList.vue

<template>
  <div class="bgColor">
    <div class="header">常见问题</div>
    <div class="search">
      <input type="text" placeholder="搜索" v-model="search" @input="searchFn()">
    </div>
    <div slot="content" class="scroll-wrapper nav">
      <div class="demo">
        <div class="scroll-list-wrap">
          <cube-scroll
            ref="scroll"
            :data="items"
            :options="options"
            @pulling-down="onPullingDown"
            @pulling-up="onPullingUp"
          >
            <ul class="foods-wrapper">
              <li v-for="data in items" class="food-item border-1px" @click="toKnowDetails(data)">
                <div class="food-content">
                  <div class="title">
                    <div>
                      <i class="iconfont icon-changjianwenti1"></i>
                    </div>
                    <div>主题:{{data.title}}</div>
                  </div>
                  <div
                    class="content"
                    v-html="data.content"
                    style="-webkit-box-orient: vertical !important;"
                  ></div>
                  <div class="timeBox">
                    <div class="time">{{data.createtime.substring(0,data.createtime.length-3)}}</div>
                    <div class="good">
                      <i class="iconfont icon-dianzan"></i>&nbsp;&nbsp;
                      <span>{{data.star}}</span>
                      点赞
                    </div>
                  </div>
                </div>
              </li>
              <div class="wushuju" v-show="wushuju">
                <img src="./../../static/images/wushuju.svg" alt>
                <p>暂无常见问题</p>
              </div>
            </ul>
            <template v-if="customPullDown" slot="pulldown" slot-scope="props">
              <div
                v-if="props.pullDownRefresh"
                class="cube-pulldown-wrapper"
                :style="props.pullDownStyle"
              >
                <div
                  v-show="props.beforePullDown"
                  class="before-trigger"
                  :style="{paddingTop: props.bubbleY + 'px'}"
                >
                  <span :class="{rotate: props.bubbleY > pullDownRefreshThreshold - 40}">↓</span>
                </div>
                <div class="after-trigger" v-show="!props.beforePullDown">
                  <div v-show="props.isPullingDown" class="loading">
                    <cube-loading></cube-loading>
                  </div>
                  <div v-show="!props.isPullingDown" class="text">
                    <span class="refresh-text">更新成功</span>
                  </div>
                </div>
              </div>
            </template>
          </cube-scroll>
        </div>
      </div>
    </div>
    <load-ing v-show="!items.length&&!wushuju"></load-ing>
  </div>
</template>
<script>
import Vue from "vue";
import LoadIng from "./../views/loading.vue";
export default {
  data() {
    return {
      //   items: _foods,
      items: [],
      pullDownRefresh: true,
      pullDownRefreshThreshold: 60,
      pullDownRefreshStop: 40,
      pullDownRefreshTxt: "Refresh success",
      pullUpLoad: true,
      pullUpLoadThreshold: 0,
      pullUpLoadMoreTxt: "加载更多",
      pullUpLoadNoMoreTxt: "没有更多数据",
      wushuju: false,
      customPullDown: true,
      search: "",
      sum: 10,
      idx: 0,
      loadShow: true
    };
  },
  components: {
    // CubePage,
    // SwitchOption,
    // InputOption,
    // SelectOption,
    LoadIng
  },
  computed: {
    options() {
      return {
        pullDownRefresh: this.pullDownRefreshObj,
        pullUpLoad: this.pullUpLoadObj,
        scrollbar: true
      };
    },
    pullDownRefreshObj: function() {
      return this.pullDownRefresh
        ? {
            threshold: parseInt(this.pullDownRefreshThreshold),
            txt: this.pullDownRefreshTxt
          }
        : false;
    },
    pullUpLoadObj: function() {
      return this.pullUpLoad
        ? {
            threshold: parseInt(this.pullUpLoadThreshold),
            txt: {
              more: this.pullUpLoadMoreTxt,
              noMore: this.pullUpLoadNoMoreTxt
            }
          }
        : false;
    }
  },
  methods: {
    getParams() {
      if (this.$route.params.keword) {
        this.search = this.$route.params.keword;
      }
    },
    searchFn() {
      var that = this;
      that.loadShow = true;
      var that = this;
      that.idx = 0;
      that.sum = 10;
      that.items=[];
      that.getData();
    },
    toKnowDetails(data) {
      // this.$router.push({path:'/knowDetails'})
      this.$router.push({
        name: "KnowDetails",
        params: {
          data: JSON.stringify(data)
        }
      });
    },
    getData() {
      var that = this;
      this.$http
        .post("service/solution/fetchDataList/solution", {
          idx: that.idx,
          solution: {
            keywords: that.search,
            solutionType: { id: "" },
            status: { id: 72 },
            createUser: { name: "" }
          },
          sum: that.sum
        })
        .then(function(res) {
          if (res.data.list.length > 0) {
            // that.items = res.data.list;
            that.items = that.items.concat(res.data.list);
            that.wushuju = false;
          } else {
            that.wushuju = true;
            that.$refs.scroll.forceUpdate()
          }
          that.loadShow = false;
        });
    },
    onPullingDown() {
      var that = this;
      that.idx = 0;
      that.sum = 10;
      that.items = [];
      setTimeout(() => {
        that.getData();
      }, 1000);
    },
    onPullingUp() {
      var that = this;
      that.idx += 1;
      that.getData();
    },
    updatePullDownRefresh(val) {
      this.pullDownRefresh = val;
    },
    updatePullDownRefreshThreshold(val) {
      this.pullDownRefreshThreshold = val;
    },
    updatePullDownRefreshTxt(val) {
      this.pullDownRefreshTxt = val;
    },
    updatePullUpLoad(val) {
      this.pullUpLoad = val;
    },
    updatePullUpLoadThreshold(val) {
      this.pullUpLoadThreshold = val;
    },
    updatePullUpLoadMoreTxt(val) {
      this.pullUpLoadMoreTxt = val;
    },
    updatePullUpLoadNoMoreTxt(val) {
      this.pullUpLoadNoMoreTxt = val;
    },
    updateCustomPullDown(val) {
      this.customPullDown = val;
    },
    rebuildScroll() {
      Vue.nextTick(() => {
        this.$refs.scroll.destroy();
        this.$refs.scroll.initScroll();
      });
    }
  },
  created() {
    this.getParams();
    this.getData();
  }
};
</script>
    <style lang="stylus" rel="stylesheet/stylus" scoped>
    .scroll-list-wrap {
      /* height: 350px */
      height: 90vh;
      /* border: 1px solid rgba(0, 0, 0, 0.1) */
      border-radius: 5px;
      transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
      overflow: hidden;
    }

    .foods-wrapper {
      .food-item {
        display: flex;

        /* min-width: 0 */
        /* padding: 18px
        border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
        &:last-child {
          border-none();
          margin-bottom: 0;
        }

        .food-content {
          flex: 1;
          min-width: 0;

          .cartcontrol-wrapper {
            position: absolute;
            right: 0;
            bottom: 12px;

            .scroll-wrapper {
              .cube-pulldown-wrapper {
                .before-trigger {
                  font-size: 30px;
                  line-height: 30px;
                  align-self: flex-end;

                  span {
                    display: inline-block;
                    transition: all 0.3s;
                    color: #666;

                    &.rotate {
                      transform: rotate(180deg);
                    }
                  }
                }

                .after-trigger {
                  .refresh-text {
                    color: grey;
                  }
                }
              }
            }
          }
        }
      }
    }
</style>
<style scoped lang='less'>
.bgColor {
  background-color: white;
  .header {
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: center;
    color: #fff;
    font-size: 0.37rem;
    background: linear-gradient(#2e2f32, #414246);
    position: fixed;
    top: 0;
    z-index: 6;
  }
  .search {
    width: 100%;
    padding: 0.16rem 0.24rem;
    box-sizing: border-box;
    background-color: #eeeeee;
    border-bottom: 0.01rem #b7b7b7 solid;
    position: fixed;
    top: 0.88rem;
    z-index: 6;
    input {
      width: 100%;
      height: 0.56rem;
      border-radius: 4px;
      text-align: center;
      font-size: 0.28rem;
    }
    &:focus {
      outline: none;
    }
  }
}
.nav {
  margin-top: 1.76rem;
}
.food-item {
  border-top: 0.16rem rgb(238, 238, 238) solid;
}
.food-content {
  border-top: 0.01rem rgb(223, 222, 222) solid;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.title {
  display: flex;
  min-width: 0;
  padding: 0.2rem 0.24rem;
  line-height: 0.45rem;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.title div:nth-child(1) {
  width: 6%;
}
.title div:nth-child(1) i {
  font-size: 0.32rem;
  color: #005395;
  line-height: 0.49rem;
}
.title div:nth-child(2) {
  width: 94%;
  font-size: 0.32rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.content {
  font-size: 0.28rem;
  /* margin-top: .3rem; */
  line-height: 0.39rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  padding: 0 0.64rem;
  width: 83%;
  margin: 0.24rem 0;
  max-height: 0.8rem;
}
.timeBox {
  display: flex;
  justify-content: space-between;
  /* margin-top: .3rem; */
  border-top: 0.01rem rgb(223, 222, 222) solid;
  padding: 0.2rem 0.64rem;
}
.timeBox .time {
  color: #999999;
  font-size: 0.24rem;
}
.timeBox .good {
  font-size: 0.3rem;
  color: #999;
}
.timeBox .good span {
  color: #a37200;
  font-size: 0.24rem;
}
.wushuju {
  margin-top: 2.4rem;
  text-align: center;
  color: #999;
}
.wushuju img {
  width: 5.12rem;
  height: 2.84rem;
}
</style>