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

<template>
    <div class="bgColor">
        <div slot="content" class="scroll-wrapper">
            <div class="demo">
                <div class="scroll-list-wrap">
                    <cube-scroll ref="scroll" :data="items" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
                        <div class="search">
                            <input type="text" placeholder="搜索" v-model="search" @input="searchFn()">
                        </div>
                        <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">
                                    </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="">
                                <div class="noDataFont">暂无数据</div>
                            </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="loadShow"></load-ing>
    </div>
</template>
<script>
import Vue from 'vue'
import CubePage from '../components/cube-page.vue'
import SwitchOption from '../components/switch-option'
import InputOption from '../components/input-option'
import SelectOption from '../components/select-option'
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: 'Load more',
        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;
      this.idx=0;
      this.$http.post('service/solution/fetchDataList/solution',{
        'idx':0,
        'sum':10,
        'solution':{
            'title':that.search,
            'status':{'id':72},
            'solutionRange':1
        }
    }).then(function(res){
        if(res.data.list.length>0){
            that.items=res.data.list;
            that.wushuju=false
        }else{
            that.wushuju=true;
            that.items=[]
        }
        that.loadShow=false
    })
    },
    toKnowDetails(data){
        // this.$router.push({path:'/knowDetails'})
        this.$router.push({
            name:'KnowDetails',
            params:{
                data:JSON.stringify(data)
            }
        })
    },
    onPullingDown() {
        // 模拟更新数据
        this.idx=0;
        setTimeout(() => {
        var that=this;
        this.$http.post('service/solution/fetchDataList/solution',{
            'idx':0,
            'sum':10,
            'solution':{
                'title':that.search,
                'status':{'id':72},
                'solutionRange':1
            }
        }).then(function(res){
            if(res.data.list.length>0){
                that.items=res.data.list;
                that.wushuju=false
            }else{
                that.$refs.scroll.forceUpdate();
                that.wushuju=true
            }
        })
        }, 1000)
    },
    getData(idx,sum){
        var that=this;
        this.$http.post('service/solution/fetchDataList/solution',{
            'idx':idx,
            'sum':sum,
            'solution':{
                'title':that.search,
                'status':{'id':72},
                'solutionRange':1
            }
        }).then(function(res){
            if(res.data.list.length>0){
                that.items=res.data.list;
                that.wushuju=false
            }else{
                that.wushuju=true
            }
            that.loadShow=false
        })
    },
    onPullingUp() {
        var that=this;
        that.idx=that.idx+1;
        this.$http.post('service/solution/fetchDataList/solution',{
            'idx':that.idx,
            'sum':that.sum,
            'solution':{
                'title':that.search,
                'status':{'id':72},
                'solutionRange':1
            }
        }).then(function(res){
            setTimeout(() => {
                if(res.data.list.length>0){
                    that.items=that.items.concat(res.data.list);
                }else{
                    that.$refs.scroll.forceUpdate()
                }
            }, 1000)
        })
    },
    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(this.idx,this.sum)
    }
}
</script>
    <style lang="stylus" rel="stylesheet/stylus" scoped>
    .scroll-list-wrap
      /* height: 350px */
      height:100vh
      /* 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>
.bgColor{
    background-color: white
}
.search{
    padding: .16rem .24rem;
    height: .6rem;
    background-color: #eeeeee;
    border-bottom: .01rem #999999 solid
}
.search input{
    width: 100%;
    height: .56rem;
    border-radius: 4px;
    text-align: center;
    font-size: .28rem
}
.search:focus{
    outline:none
}
.food-item{
  border-top: .16rem rgb(238,238,238) solid;
}
.food-content{
  border-top: .01rem rgb(223, 222, 222) solid;
  border-bottom: .01rem rgb(223, 222, 222) solid;
}
.title{
    display: flex;
    min-width: 0;
    padding: .2rem .24rem;
    line-height: .45rem;
    border-bottom: .01rem rgb(223, 222, 222) solid;
}
.title div:nth-child(1){
    width: 6%;
}
.title div:nth-child(1) i{
    font-size: .32rem;
    color: #005395;
    line-height: .49rem
}
.title div:nth-child(2){
    width: 94%;
    font-size: .32rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.content{
    font-size: .28rem;
    /* margin-top: .3rem; */
    line-height: .39rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    padding: 0 .64rem;
    margin: .24rem 0;
    max-height:0.78rem;
}
.timeBox{
    display: flex;
    justify-content:space-between;
    /* margin-top: .3rem; */
    border-top: .01rem rgb(223, 222, 222) solid;
    padding: .2rem .64rem
}
.timeBox .time{
    color:#999999;
    font-size: .24rem
}
.timeBox .good i{
    font-size: .3rem;
    color: #A37200
}
.timeBox .good span{
    color: #A37200;
    font-size: .24rem
}
.wushuju{
    margin-top: 2.4rem;
    text-align: center;
}
.wushuju img{
    width: 5.12rem;
    height: 2.84rem;
}
</style>