vue-apps/com.actionsoft.apps.kms.mobile/pages/knwlborrow.vue

<template>
  <div class="knwlborrow">
	  <div style="padding: 3px 10px;width: 100%;background:#f2f3f5;z-index: 999">
		  <i style="font-size: 18px;color:#000" class="awsui-iconfont" @click="backHome">&#xe6fa;</i>
	  </div>
	  <div style="font-size: 13px;padding:10px;border-bottom: 1px solid #e8e8e8;">知识名称：{{name}}</div>
    <ul class="list" v-if="list.length>0" :style="heights">
		<van-list
				v-model="loading"
				:finished="finished"
				@load="downLoad"
				finished-text="没有更多了"
				loading-text="加载中..."
				:offset="offset"
		>
		  <li v-for="(item,index) in list" :key="index">
			<div class="left">
			  <div class="title">{{item.logContent}}</div>
			  <div class="description">
				<label>
				  {{item.accessUsername}}
				</label>
				<label v-if="item.cardContext!=''" class="line">|</label>
				<label>
				  {{item.accessTime}}
				</label>
			  </div>
			</div>
		  </li>
		</van-list>
    </ul>
	  <div class="list" v-else>
		  <div class="con">
			  <div class="img">
				  <img src="../assets/no_content.png" alt="" style="width: 125px;">
			  </div>
			  <div  class="text">暂无内容</div>
		  </div>
	  </div>
  </div>
</template>

<script>
	import awsuiAxios from "../awsuiAxios";
	let searchTimeout;
  export default {
    name: 'knwlborrow',
    data() {
      return {
		  loading:false,
		  finished:false,
		  offset:10,
		  curPage:0,
		  heights:"",
        showDialog: false,
        id: 1,
        name: '',
        list: []

      }
    },
    methods: {
		backHome(){
			window.history.back();
		},
		downLoad(){
			this.getDimensionCard();
		},
	  getDimensionCard(){
			let that = this;
			awsuiAxios.post({
				url: "jd",
				data: {
					cmd: "com.actionsoft.apps.kms_knwl_center_log_list",
					   cardId:this.$route.params.id,
						curPage:this.curPage<=0?1:this.curPage+1,
						rowsPerPage:10,
						sortIndx:"accessTime",
						sortDir:"down"
				},
			}).then(function (r) {
				that.loading = false;
				if (r.result == "error") {
					alert(r.msg);
				} else {
					if(that.curPage==0){
						that.list = r.data.data;
					}else{
						that.list =that.list.concat( r.data.data);
					}
					that.curPage = r.data.curPage;
					let totalRecords = r.data.totalRecords;
					if(that.curPage*10>=totalRecords){
						that.finished = true;
					}
				}
			});
	  }
    },
    created() {
    	this.name=this.$route.params.name;
    	this.heights  ="height:"+(window.innerHeight-52)+"px";
		this.getDimensionCard();
    }
  }
</script>

<style scoped>
	.path_title{
		color:#378DEC;
	}
  .knwlborrow {
    height: 100%;
  }

  .top {
    padding: 9px 12px 7px;
    line-height: 18px;
    border-bottom: 0.33px solid #e9e9e9;
    font-size: 12px;
  }

  .list {
    padding: 0 12px;
    float: left;
    height: calc(100% - 86px);
    overflow-y: auto;
    width: calc(100% - 24px);
  }

  .list span, .list label {
    display: inline-block;
  }

  .list li {
    float: left;
    padding: 11px 0;
    width: 100%;
    position: relative;
    border-bottom: 0.33px solid #e9e9e9;
  }

  .list li:not(:last-child) {
    border-bottom: 0.33px solid #e9e9e9;
  }

  .list li .left {
    width: calc(100% - 1px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    float: left;
  }

  .list li .left .title {
    font-size: 13px;
    color: #333;
    line-height: 18px;
    margin-bottom: 4px;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  overflow: hidden;
  }

  .list li .left .description {
    color: #999999;
    line-height: 15px;
	  font-size: 12px;
  }

  .list li .left .description .line {
    display: inline-block;
    margin: 0 8px;
    color: #E8E8E8;
  }

  .list li .right {
    width: 20px;
    text-align: right;
    float: right;
    margin-top: 18px;
  }

  .list li .right .awsui-iconfont {
    color: #a4a4a4;
  }
	.con {
		position: absolute;
		width: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
	}

	.con .img {
		width: 125px;
		height: 125px;
		margin: 0 auto;
	}

	.con .text {
		color: #999;
		line-height: 20px;
		font-size: 13px;
		width: 100%;
	}
</style>