hytc-customer/pages/knowledge_base/index.vue

<template>
	<view class="warpbox">
		
		
		<view class="know_warp">
			<view class="know_left">
				<scroll-view scroll-y class="leftscroll">
					<view class="listwarp">
						<view class="list_item" :class="parentid == item.id ? 'list_item_active' : ''" v-for="(item,index) in parentList" :key="index" @click="changeParent(item)">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="know_right">
				<view class="right_title">类目分类</view>
				<scroll-view scroll-y class="rightscroll">
					<view class="tabwarp">
						<view class="tab_item" :class="typeIndex == index ? 'tab_item_active' : ''" v-for="(item,index) in typeList" :key="index" @click="changeType(index)">{{item.name}}</view>
						<van-empty v-if="typeList.length == 0" description="暂无更多"></van-empty>
					</view>
				</scroll-view>
				<view class="right_btn" @click="sureList">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { netKnowledgeList } from '@/api/api.js'
	
	export default{
		data() {
			return{
				pid:0,
				parentList:[],
				parentid:'',
				parentname:'',
				typeList:[],
				typeIndex:0
			}
		},
		onLoad() {
			this.getList()
		},
		methods:{
			getList() {
				netKnowledgeList({pid:this.pid}).then(res=>{
					this.parentList = res.data
					this.parentid = res.data[0].id
					this.parentname = res.data[0].name
					this.getChild()
				})
			},
			changeParent(item) {
				this.parentid = item.id
				this.parentname = item.name
				this.typeIndex = null
				this.getChild()
			},
			getChild() {
				netKnowledgeList({pid:this.parentid}).then(res=>{
					this.typeList = res.data
				})
			},
			changeType(index) {
				this.typeIndex = index
			},
			sureList() {
				if(!this.typeList[this.typeIndex]){
					uni.showToast({
						title:'请选择类目分类',
						icon:'none'
					})
					return
				}
				let id = this.typeList[this.typeIndex].id
				let pname = this.parentname
				let name = this.typeList[this.typeIndex].name
				uni.navigateTo({
					url:'/pages/knowledge_base/list?id='+id+'&pname='+pname+'&name='+name
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.know_warp{
		width:750rpx;
		height:100vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.know_left{
			width:250rpx;
			height:100vh;
			.leftscroll{
				width:100%;
				height:100%;
				background:#f5f5f5;
				.listwarp{
					.list_item{
						font-size:32rpx;
						color:#999999;
						padding:30rpx 40rpx;
						background:#f5f5f5;
						border-bottom:1rpx solid rgba(153, 153, 153, 0.5);
						border-right:1rpx solid rgba(153, 153, 153, 0.5);
					}
					.list_item_active{
						background:#fff;
						color:#0287FF;
						border-right:0;
						position: relative;
						&::before{
							width:20rpx;
							height:100%;
							content:'';
							position: absolute;
							left:0;
							top:0;
							background:#0287FF;
						}
					}
				}
			}
		}
		.know_right{
			width:500rpx;
			height:100%;
			.right_title{
				font-size:30rpx;
				color:#666666;
				text-align: center;
				padding:30rpx 0;
			}
			.right_btn{
				width:415rpx;
				height:88rpx;
				border-radius: 10rpx;
				background:#0287FF;
				font-size:32rpx;
				color:#fff;
				text-align: center;
				line-height: 88rpx;
				margin:0 auto;
			}
			.rightscroll{
				width:100%;
				height:calc(100vh - 230rpx);
				.tabwarp{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					.tab_item{
						font-size:30rpx;
						padding:10rpx 34rpx;
						border-radius: 10rpx;
						border:1rpx solid #0287FF;
						color:#0287FF;
						margin-right:15rpx;
						margin-left:15rpx;
						margin-bottom:24rpx;
						flex-shrink: 0;
					}
					.tab_item_active{
						background:#0287FF;
						color:#fff;
					}
				}
			}
		}
	}
</style>