更新

Lou

2023-12-21 83c8ed513caa29f7d4b3094e0beb9558a82e01ad

 pages/user/test.vue

@@ -1,97 +1,149 @@
<template>
   <view class="">
      <view class="cell  flex j-c-s-b a-i-c  bgc-ff"   @click="isShow = true">
      <view class="cell  flex j-c-s-b a-i-c  bgc-ff" @click="isShow = true">
         <text class="f-28">选择标签</text>
         <u-icon name="arrow-right"></u-icon>
      </view>
		
		
      <u-popup :show="isShow" @close="isShow = false"   :safeAreaInsetTop="true"  mode="bottom"  :closeable="true"  round="12">
          <view class="popup-title fw f-30">标签选择</view>
			
      <view class="mt-20 p-20 bgc-ff" v-if="selectedItem.length">
         <view class="f-28">已选标签</view>
         <view class="p-20 flex flex-wrap">
            <view v-for="(item,index) in selectedItem" :key="index" class="mr-20">
               <u-tag :closable="true"  size="mini" @close="delTag(index)"
                  :text="item.categoryName"></u-tag>
            </view>
         </view>
      </view>





      <u-popup :show="isShow" @close="closePopup" :safeAreaInsetTop="true" mode="bottom" :closeable="true"
         round="12">
         <view class="popup-title fw f-30">标签选择</view>

         <view class="popup-list flex a-i-c">
            <scroll-view scroll-y="true"  class="scroll">
            <view class="popup-box bgc-f4">
               <view :class="['box-item','f-28',index == fIndex?'bgc-ff':'']"  v-for="(item,index)  in  categoryList"   :key="index"  @click="handleSelect(item,index)">
                  {{item.categoryName}}
            <scroll-view scroll-y="true" class="scroll">
               <view class="popup-box">
                  <view :class="['box-item','f-28',index == fIndex?'c-main fw':'']"
                     v-for="(item,index)  in  categoryList" :key="index" @click="handleSelect(item,index)">
                     {{item.categoryName}}
                  </view>
               </view>
            </view>
            </scroll-view>
            <scroll-view scroll-y="true"  class="scroll">
            <view class="popup-box">
               <view :class="['box-item','f-28',item.isSelect?'c-main fw':'']"  v-for="(item,index)  in  childList"   :key="index"  @click="handleSelectChild(item,index)">
                  {{item.categoryName}}
            <u-line direction="col" length="300rpx" v-if="childList.length"></u-line>
            <scroll-view scroll-y="true" class="scroll" v-if="childList.length">
               <view class="popup-box">
                  <view :class="['box-item','f-28',item.isSelect?'c-main fw':'']"
                     v-for="(item,index)  in  childList" :key="index" @click="handleSelectChild(item,index)">
                     {{item.categoryName}}
                  </view>
               </view>
            </view>
            </scroll-view>
         </view>
			
       </u-popup>
		
      <!--    <view class="popup-footer flex j-c-s-b a-i-c">
            <view class="popup-btn c-main"   @click="closePopup">
               取消
            </view>
            <view class="popup-btn bgc-main c-ff">
               确定
            </view>
         </view> -->
      </u-popup>

   </view>
</template>

<script>
   import {
    getLabelCate
      getLabelCate
   } from "@/api/label/categoryLabel.js";
   export default {
      data() {
         return {
           isShow:false,
              categoryList:[],
           childList:[],
           fIndex:0,
           cId:null,
           showLabelList:[]
            isShow: false,
            categoryList: [],
            childList: [],
            fIndex: null,
            cId: null,
            showLabelList: [],
            selectedItem: []
         }
      },
		

      onLoad() {
         this.getCategory(1);
         getLabelCate().then(res=>{
            console.log(res)
         })
      },
	

      methods: {
              getCategory(level,id){
              let params = {
                 level
              }
              if(level == 2){
                 params.parentNo = id;
              }
              getLabelCate(params).then(res=>{
                 if(res.code == 200){
                    if(level == 2){
                       let data = res.data;
                       for(let i of data){
                          i.isSelect = false;
                       }
                       this.childList = data;
                    }else {
							 
                       this.categoryList = res.data;
                    }
                 }
              })
           },
           handleSelect(item,index){
              this.fIndex = index;
              this.getCategory(2,item.categoryNo);
           },
           handleSelectChild(item,index){
              // this.cId = item.id;
				  
				  
              this.childList[index].isSelect = !this.childList[index].isSelect
				  
				 
				  
				  
				  
           }
         getCategory(level, id) {
            let params = {
               level
            }
            if (level == 2) {
               params.parentNo = id;
            }
            getLabelCate(params).then(res => {
               if (res.code == 200) {
                  if (level == 2) {
                     let data = res.data;
                     for (let i of data) {
                        i.isSelect = false;
                     }
                     this.childList = data;
                  } else {

                     this.categoryList = res.data;
                  }
               }
            })
         },
         handleSelect(item, index) {
            if (index == this.fIndex) return;
            this.fIndex = index;
            this.selectedItem = [item];
            this.getCategory(2, item.categoryNo);
            console.table( "选择父级=>",this.selectedItem)
         },
         handleSelectChild(item, index) {
            this.childList[index].isSelect = !this.childList[index].isSelect;
            this.getSelected()

         },

         getSelected() {
            let arr = []
            for (let i of this.childList) {
               if (i.isSelect) {
                  arr.push(i);
               }
            }
            this.selectedItem = arr;
            console.table("选择子级=>",this.selectedItem);
         },

         showSelected() {
            for (let i = 0, ii = this.childList.length; i < ii; i++) {
               for (let k = 0, kk = this.selectedItem.length; k < kk; k++) {
                  if (this.childList[i].id == this.selectedItem[k].id) {
                     this.childList[i].isSelect = true;
                  }
               }
            }
         },
			
			
         closePopup(){
            this.isShow = false;
         },
			
         delTag(index){
            this.selectedItem.splice(index,1);
         }




      }
   }
</script>
@@ -100,36 +152,76 @@
   page {
      background-color: #F5F5F5;
   }
   .cell{
      padding:20rpx;

   .cell {
      padding: 20rpx;
   }
   .popup-title{

   .popup-title {
      padding: 20rpx 0;
      text-align: center;
   }
   .scroll{
      height:700rpx;

   .scroll {
      flex: 1;
      height: 700rpx;
      transition: all .2s;
   }
   .scroll:first-child{
      width:40%;

   // .scroll:first-child {
   //    flex:1;
   //    .box-item{
   //       border-bottom:1px solid #F5F5F5;
   //    }
   // }

   // .scroll:last-child {
   //    flex:2;
   // }
   .p-20{
      padding:20rpx;
   }
   .scroll:last-child{
      width:60%;
   }
   .popup-list{
      width:100%;
      height:700rpx;
      .bgc-f4{
         background-color:#f4f4f4;
	

   .popup-list {
      width: 100%;
      height: 700rpx;
        padding:10rpx 0;
      box-sizing: border-box;
      .bgc-f4 {
         background-color: #f4f4f4;
      }
      .popup-box{

      .popup-box {
         width: 100%;
         height:700rpx;
         .box-item{
            width:100%;
            padding:30rpx;
         height: 700rpx;

         .box-item {
            width: 100%;
            padding: 30rpx;
            box-sizing: border-box;
            text-align: center;
         }
      }
   }

   .popup-footer {
      padding: 20rpx;
      box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);

      .popup-btn {
         width: 45%;
         height: 78rpx;
         line-height: 78rpx;
         border-radius: 10rpx;
         text-align: center;
         font-size: 28rpx;
      }

      .popup-btn:nth-child(1) {
         border: 1px solid currentColor;
      }
   }
	
	
</style>