From 83c8ed513caa29f7d4b3094e0beb9558a82e01ad Mon Sep 17 00:00:00 2001
From: Lou <luzhiping@qqyjz.com>
Date: Thu, 21 Dec 2023 18:11:33 +0800
Subject: [PATCH] 更新
---
pages/user/test.vue | 268 ++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 180 insertions(+), 88 deletions(-)
diff --git a/pages/user/test.vue b/pages/user/test.vue
index adef062..decd9b0 100644
--- a/pages/user/test.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3