123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 |
- <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>
|