hytc-customer/pages/knowledge_base/list.vue

<template>
	<view class="warpbox">
		<!-- 搜索 -->
		<view class="searbox">
			<view class="censear">
				<image src="/static/img/search.png" class="searimg" ></image>
				<input type="text" placeholder="请输入关键词搜索" :focus="focus" v-model="name" @input="queryData" class="lself" placeholder-style="color:#999;font-size:24rpx;">
			</view>
		</view>
		
		<view class="topChose">
			<picker @change="changeParent" :value="parentIndex" :range="parentList" :range-key="'name'">
				<view class="left">
					<view>{{parentList[parentIndex] && parentList[parentIndex].name}}</view>
					<image src="/static/img/xia.png" class="xiaimg" ></image>
				</view>
			</picker>
			<picker @change="changeType" :value="typeIndex" :range="typeList" :range-key="'name'">
				<view class="left">
					<view>{{typeList[typeIndex] && typeList[typeIndex].name}}</view>
					<image src="/static/img/xia.png" class="xiaimg" ></image>
				</view>
			</picker>
		</view>
		
		<view class="artic_warp">
			<view class="artic_item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
				<view class="artic_top">
					<view class="artic_name">{{item.title}}</view>
					<view class="artic_info">
					<image :src="item.img" class="artic_img" ></image>
						<view class="artic_con">{{item.desc}}</view>
					</view>
				</view>
				<view class="artic_bot">
					<view class="bot_left">
						<view class="bot_time">{{item.createtime}}</view>
					</view>
				</view>
			</view>
			<view class="noData" v-if="list.length == 0">暂无更多</view>
		</view>
	</view>
</template>

<script>
	import { netArticleList,netKnowledgeList } from '@/api/api.js'
	
	export default{
		data() {
			return{
				type_id:'',
				pid:'',
				pname:'',
				name:'',
				list:[],
				page:1,
				totalPage:1,
				focus:false,
				name:'',
				showSelectL:false,//显示筛选选项
				showSelectR:false,
				parentList:[],
				parentIndex:0,
				parentid:'',
				typeList:[],
				typeIndex:0,
			}
		},
		onLoad(options) {
			
			
		},
		onShow() {
			this.getParentList()
		},
		onReachBottom() {
			if(this.page >= this.totalPage){
				return
			}
			this.page ++
			this.getList()
		},
		methods:{
			//搜索
			queryData(e) {
				this.list = []
				this.getList()
			},
			init() {
				this.page = 1
				this.list = []
				this.getList()
			},
			getList() {
				let params = {
					page:this.page,
					type_ids: this.typeList[this.typeIndex] ? this.typeList[this.typeIndex].id : '',
					name:this.name
				}
				netArticleList(params).then(res=>{
					this.list = this.list.concat(res.data.data)
					this.totalPage = res.data.last_page
				})
			},
			getParentList() {
				netKnowledgeList({pid:this.pid}).then(res=>{
					this.parentList = res.data
					this.getChild()
				})
			},
			getChild() {
				if(this.parentList[this.parentIndex]){
					netKnowledgeList({pid:this.parentList[this.parentIndex].id}).then(res=>{
						this.typeList = res.data
						this.init()
					})
				}
			},
			changeParent(e){
				this.parentIndex = e.detail.value
				this.getChild()
			},
			changeType(e) {
				this.typeIndex = e.detail.value
				this.init()
			},
			toDetail(item) {
				uni.navigateTo({
					url:'/pages/knowledge_base/detail?id='+item.id+'&tid='+this.type_id+'&pid='+this.pid
				})
			},
			handleClickLeft(){
				this.showSelectR = false
				this.showSelectL = true
			},
			handleClickRight(){
				this.showSelectL = false
				this.showSelectR = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topChose{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		.left{
			display: flex;
			justify-content: center;
			align-items: center;
			.xiaimg{
				width:26rpx;
				height:16rpx;
				margin-left:10rpx;
			}
			view{
				font-size: 26rpx;
				color: #333333;
			}
		}
	}
	.searbox{
		padding:10rpx 0 20rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		.censear{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding:0 24rpx;
			border-radius: 34rpx;
			background:#FFFFFF;
			border:1rpx solid #7FC2FF;
			width:487rpx;
			height:60rpx;
			.searimg{
				width:35rpx;
				height:35rpx;
				margin-right: 15rpx;
			}
			.lself{
				font-size:24rpx;
			}
		}
	}
	.artic_title{
		width:690rpx;
		background:#fff;
		border-radius: 10rpx;
		margin:24rpx auto;
		box-shadow: 1rpx 1rpx 8rpx 2rpx rgba(0,0,0,0.1);
		font-size:34rpx;
		color:#0287FF;
		text-align: center;
		line-height: 70rpx;
	}
	.artic_warp{
		.artic_item{
			width:690rpx;
			margin:0 auto 24rpx;
			box-shadow: 1rpx 1rpx 8rpx 2rpx rgba(0,0,0,0.1);
			padding:24rpx 30rpx;
			border-radius: 20rpx;
			.artic_top{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				.artic_img{
					width:140rpx;
					height:140rpx;
					border-radius: 10rpx;
					margin-right:30rpx;
					flex-shrink: 0;
				}
				.artic_name{
					width:390rpx;
					font-size:28rpx;
					color:#666;
					margin-bottom:24rpx;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.artic_info{
					display: flex;
					flex-wrap: nowrap;
					.artic_con{
						font-size:26rpx;
						height:100rpx;
						color:#999;
						line-height: 34rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
					}
				}
			}
			.artic_bot{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top:30rpx;
				.bot_left{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.headerimg{
						width:50rpx;
						height:50rpx;
						border-radius: 50%;
					}
					.bot_name{
						font-size:26rpx;
						color:#999999;
						margin:0 30rpx;
					}
					.bot_time{
						font-size:26rpx;
						color:#999999;
					}
				}
				.bot_right{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.bot_right_box{
						display: flex;
						justify-content: center;
						align-items: center;
						font-size:26rpx;
						color:#999999;
						margin-right:24rpx;
						.openimg{
							width:30rpx;
							height:30rpx;
							margin-right:10rpx;
						}
						.commimg{
							width:25rpx;
							height:25rpx;
							margin-right:10rpx;
						}
					}
				}
			}
		}
	}
	.icon_creat {
		position: fixed;
		z-index: 1;
		bottom: 130rpx;
		right: 100rpx;
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
</style>