|
@@ -9,8 +9,9 @@
|
|
<view class="search-warp" v-if="showAction">
|
|
<view class="search-warp" v-if="showAction">
|
|
<scroll-view scroll-y :style="{'height': scrollHeight+'px'}" class="item-container">
|
|
<scroll-view scroll-y :style="{'height': scrollHeight+'px'}" class="item-container">
|
|
<view class="thumb-box" v-for="(item, index) in searchList" :key="index" @click="selval(item)">
|
|
<view class="thumb-box" v-for="(item, index) in searchList" :key="index" @click="selval(item)">
|
|
|
|
+ <!-- {{item}} -->
|
|
<view :class="[value==item[valueName]? 'item-active' : '']">
|
|
<view :class="[value==item[valueName]? 'item-active' : '']">
|
|
- <text>{{item.pname}}-{{item[labelName]}}</text>
|
|
|
|
|
|
+ <text>{{item.secondName}}</text>
|
|
</view>
|
|
</view>
|
|
<u-icon v-if="value==item[valueName]" name="checkbox-mark" :color="iconColor" size="28">
|
|
<u-icon v-if="value==item[valueName]" name="checkbox-mark" :color="iconColor" size="28">
|
|
</u-icon>
|
|
</u-icon>
|
|
@@ -19,18 +20,18 @@
|
|
</view>
|
|
</view>
|
|
<view class="u-menu-wrap">
|
|
<view class="u-menu-wrap">
|
|
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
|
|
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
|
|
- <view v-for="(item,index) in list" :key="index" class="u-tab-item"
|
|
|
|
|
|
+ <view v-for="(item,index) in first" :key="index" class="u-tab-item"
|
|
:class="[current==index ? 'u-tab-item-active' : '']" :data-current="index"
|
|
:class="[current==index ? 'u-tab-item-active' : '']" :data-current="index"
|
|
- @tap.stop="swichMenu(index)">
|
|
|
|
|
|
+ @tap.stop="swichMenu(index,item)">
|
|
<text class="u-line-2">{{item[labelName]}}</text>
|
|
<text class="u-line-2">{{item[labelName]}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</scroll-view>
|
|
- <block v-for="(item,index) in list" :key="index">
|
|
|
|
|
|
+ <block v-for="(item,index) in first" :key="index">
|
|
<scroll-view scroll-y class="right-box" v-if="current==index">
|
|
<scroll-view scroll-y class="right-box" v-if="current==index">
|
|
<view class="page-view">
|
|
<view class="page-view">
|
|
<view class="class-item">
|
|
<view class="class-item">
|
|
<view class="item-container">
|
|
<view class="item-container">
|
|
- <view class="thumb-box" v-for="(item1, index1) in item.children" :key="index1"
|
|
|
|
|
|
+ <view class="thumb-box" v-for="(item1, index1) in second" :key="index1"
|
|
@click="selval(item1)">
|
|
@click="selval(item1)">
|
|
<view :class="[value==item1[valueName] ? 'item-active' : '']"
|
|
<view :class="[value==item1[valueName] ? 'item-active' : '']"
|
|
class="img-content">
|
|
class="img-content">
|
|
@@ -38,7 +39,7 @@
|
|
class="img">
|
|
class="img">
|
|
</image>
|
|
</image>
|
|
<text class="right-text"
|
|
<text class="right-text"
|
|
- style="margin-left: 20rpx;">{{item1[labelName]}}</text>
|
|
|
|
|
|
+ style="margin-left: 20rpx;">{{item1.secondName}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- <u-icon v-if="value==item1[valueName]" name="checkbox-mark" :color="iconColor"
|
|
<!-- <u-icon v-if="value==item1[valueName]" name="checkbox-mark" :color="iconColor"
|
|
size="28">
|
|
size="28">
|
|
@@ -81,10 +82,24 @@
|
|
default: () => {
|
|
default: () => {
|
|
return [];
|
|
return [];
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ typeOneData: {
|
|
|
|
+ type: Array,
|
|
|
|
+ default: () => {
|
|
|
|
+ return [];
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ typeTwoData: {
|
|
|
|
+ type: Array,
|
|
|
|
+ default: () => {
|
|
|
|
+ return [];
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ first: JSON.parse(JSON.stringify(this.typeOneData)),
|
|
|
|
+ second: JSON.parse(JSON.stringify(this.typeTwoData)),
|
|
showModel: true,
|
|
showModel: true,
|
|
list: JSON.parse(JSON.stringify(this.listData)),
|
|
list: JSON.parse(JSON.stringify(this.listData)),
|
|
scrollTop: 0, //tab标题的滚动条位置
|
|
scrollTop: 0, //tab标题的滚动条位置
|
|
@@ -105,6 +120,18 @@
|
|
this.list = JSON.parse(JSON.stringify(newName))
|
|
this.list = JSON.parse(JSON.stringify(newName))
|
|
},
|
|
},
|
|
deep: true,
|
|
deep: true,
|
|
|
|
+ },
|
|
|
|
+ typeOneData: {
|
|
|
|
+ handler(newName, oldName) {
|
|
|
|
+ this.first = JSON.parse(JSON.stringify(newName))
|
|
|
|
+ },
|
|
|
|
+ deep: true,
|
|
|
|
+ },
|
|
|
|
+ typeTwoData: {
|
|
|
|
+ handler(newName, oldName) {
|
|
|
|
+ this.second = JSON.parse(JSON.stringify(newName))
|
|
|
|
+ },
|
|
|
|
+ deep: true,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
@@ -140,16 +167,35 @@
|
|
this.$emit('confirem', item);
|
|
this.$emit('confirem', item);
|
|
},
|
|
},
|
|
// 点击左边的栏目切换
|
|
// 点击左边的栏目切换
|
|
- async swichMenu(index) {
|
|
|
|
- if (index == this.current) return;
|
|
|
|
- this.current = index;
|
|
|
|
- // 如果为0,意味着尚未初始化
|
|
|
|
- if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
|
|
|
- await this.getElRect('menu-scroll-view', 'menuHeight');
|
|
|
|
- await this.getElRect('u-tab-item', 'menuItemHeight');
|
|
|
|
- }
|
|
|
|
- // 将菜单菜单活动item垂直居中
|
|
|
|
- this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
|
|
|
|
|
+ async swichMenu(index, val) {
|
|
|
|
+ this.$request.baseRequest('admin.gubi.gubiTypeSecond', 'list', {
|
|
|
|
+ page: 1,
|
|
|
|
+ limit: 1000,
|
|
|
|
+ typeId: val.id
|
|
|
|
+ },
|
|
|
|
+ failres => {
|
|
|
|
+ console.log('res+++++', failres.errmsg)
|
|
|
|
+ this.$refs.uToast.show({
|
|
|
|
+ type: 'error',
|
|
|
|
+ message: failres.errmsg,
|
|
|
|
+ })
|
|
|
|
+ uni.hideLoading()
|
|
|
|
+ }).then(res => {
|
|
|
|
+
|
|
|
|
+ console.log(res.data.items)
|
|
|
|
+ this.second = res.data.items
|
|
|
|
+ if (index == this.current) return;
|
|
|
|
+ this.current = index;
|
|
|
|
+ // 如果为0,意味着尚未初始化
|
|
|
|
+ if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
|
|
|
+ this.getElRect('menu-scroll-view', 'menuHeight');
|
|
|
|
+ this.getElRect('u-tab-item', 'menuItemHeight');
|
|
|
|
+ }
|
|
|
|
+ // 将菜单菜单活动item垂直居中
|
|
|
|
+ this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight /
|
|
|
|
+ 2;
|
|
|
|
+ })
|
|
|
|
+
|
|
},
|
|
},
|
|
// 获取一个目标元素的高度
|
|
// 获取一个目标元素的高度
|
|
getElRect(elClass, dataVal) {
|
|
getElRect(elClass, dataVal) {
|
|
@@ -178,14 +224,20 @@
|
|
},
|
|
},
|
|
toSearch() {
|
|
toSearch() {
|
|
let arr = [];
|
|
let arr = [];
|
|
- this.list.map((item, index) => {
|
|
|
|
- item.children.map((it, ix) => {
|
|
|
|
- if (it[this.labelName].indexOf(this.keyword) >= 0) {
|
|
|
|
- it['pname'] = item[this.labelName];
|
|
|
|
- arr.push(it);
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ // this.list.map((item, index) => {
|
|
|
|
+ this.second.map((it, ix) => {
|
|
|
|
+ console.log(123)
|
|
|
|
+
|
|
|
|
+ console.log(it, ix)
|
|
|
|
+ console.log(it.secondName.indexOf(this.keyword))
|
|
|
|
+ if (it.secondName.indexOf(this.keyword) > -1 && this.keyword) {
|
|
|
|
+ // it['pname'] = item[this.secondName];
|
|
|
|
+ arr.push(it);
|
|
|
|
+ }
|
|
})
|
|
})
|
|
|
|
+
|
|
|
|
+ // })
|
|
|
|
+ console.log('arr', arr)
|
|
this.searchList = arr;
|
|
this.searchList = arr;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -222,12 +274,13 @@
|
|
background-color: #FFFFFF;
|
|
background-color: #FFFFFF;
|
|
position: absolute;
|
|
position: absolute;
|
|
z-index: 10;
|
|
z-index: 10;
|
|
- top: 200rpx;
|
|
|
|
|
|
+ // top: 200rpx;
|
|
left: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
.u-menu-wrap {
|
|
.u-menu-wrap {
|
|
|
|
+ padding-bottom: 100rpx;
|
|
flex: 1;
|
|
flex: 1;
|
|
display: flex;
|
|
display: flex;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
@@ -275,7 +328,7 @@
|
|
|
|
|
|
.right-box {
|
|
.right-box {
|
|
background-color: white;
|
|
background-color: white;
|
|
- height: 93vh;
|
|
|
|
|
|
+ height: 100vh;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
|