435 lines
9.4 KiB
Vue
435 lines
9.4 KiB
Vue
<template>
|
|
<view :class="{'h5-pc-page': isH5}">
|
|
<view class="popupAll">
|
|
<view class="tabList dispalyF" v-if="!allCheckShow">
|
|
<scroll-view scroll-x style="white-space: nowrap;width: calc(100% - 144rpx);margin-left: 32rpx">
|
|
<view class="rightView">
|
|
<view
|
|
@click="getTopActive(newCkeckData[0], index, item)"
|
|
:class="
|
|
index == newCkeckData[0].activeIndex
|
|
? 'popupItem-active tabItem rightView'
|
|
: 'popupItem tabItem rightView'
|
|
"
|
|
v-for="(item, index) in newCkeckData[0] && newCkeckData[0].data"
|
|
:key="index"
|
|
style="display: inline-block; margin-right: 15rpx;margin-bottom: 0"
|
|
>
|
|
{{ item.dictLabel }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="tabrightBtnOut" @click="allCheckShowChange">
|
|
<image
|
|
class="tabrightBtn"
|
|
src="https://rc.jinan.gov.cn/qcwjyH5/static/images/getMoreCheck.png"
|
|
mode=""
|
|
></image>
|
|
</view>
|
|
</view>
|
|
<view class="popupListAll" v-if="allCheckShow">
|
|
<view
|
|
class="popupList"
|
|
v-for="(item, index) in newCkeckData"
|
|
:key="index"
|
|
v-show="!item.hidden"
|
|
>
|
|
<view class="tabTitle">
|
|
{{ item.name }}
|
|
</view>
|
|
<view
|
|
class="dispalyF filter-options-container"
|
|
:style="[
|
|
{
|
|
position: 'sticky',
|
|
top: '-2rpx',
|
|
zIndex: 1,
|
|
flexWrap: 'wrap',
|
|
},
|
|
]"
|
|
>
|
|
<template v-for="(itm, idx) in item.data">
|
|
<view :key="idx" v-if="!itm.mode"
|
|
@click="getActive(itm, index, idx)"
|
|
:class="
|
|
idx == item.activeIndex
|
|
? 'popupItem-active'
|
|
: 'popupItem'
|
|
"
|
|
>
|
|
{{ itm.dictLabel }}
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
<view class="bottom-search">
|
|
<view class="search-left" @click="clearAll">
|
|
清空
|
|
</view>
|
|
<view class="search-right" @click="search">查询</view>
|
|
</view>
|
|
<view class="popupPic" @click="close">
|
|
<uni-icons type="arrow-up" color="#c0c4cc" :size="isH5 ? 20 : 16"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="gropo" v-if="allCheckShow"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "popupList",
|
|
props: {
|
|
checkData: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
newCkeckData: this.checkData,
|
|
allCheckShow: false,
|
|
params: "",
|
|
fijItem: "",
|
|
outData: [],
|
|
nickName: '',
|
|
isH5: false
|
|
};
|
|
},
|
|
watch: {
|
|
checkData(newVal) {
|
|
this.newCkeckData = newVal;
|
|
},
|
|
allCheckShow(newVal) {
|
|
this.$parent.zctopShow = newVal;
|
|
},
|
|
},
|
|
mounted() {
|
|
// #ifdef H5
|
|
this.isH5 = true;
|
|
// #endif
|
|
const rawUserInfo = uni.getStorageSync("userInfo");
|
|
if (rawUserInfo) {
|
|
try {
|
|
let userInfo = typeof rawUserInfo === 'string' ? JSON.parse(rawUserInfo) : rawUserInfo;
|
|
this.nickName = userInfo.userName || userInfo.name || "";
|
|
} catch (e) {
|
|
console.error("解析用户信息失败", e);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
allCheckShowChange() {
|
|
this.allCheckShow = !this.allCheckShow;
|
|
},
|
|
search() {
|
|
this.allCheckShow = false;
|
|
let param = [];
|
|
this.$emit('popupSearch', this.newCkeckData)
|
|
},
|
|
clearAll(){
|
|
this.allCheckShow = false;
|
|
this.newCkeckData.forEach((item, index) => {
|
|
item.activeIndex=0
|
|
});
|
|
this.$emit('popupSearch', this.newCkeckData)
|
|
},
|
|
close() {
|
|
this.allCheckShow = false;
|
|
},
|
|
getActive(item, index, idx) {
|
|
if(item.checkLogin&&!this.nickName){
|
|
uni.showToast({
|
|
title: item.noLoginText,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.newCkeckData[index].activeIndex = idx;
|
|
},
|
|
getTopActive(list, index, item) {
|
|
if(item.checkLogin&&!this.nickName){
|
|
uni.showToast({
|
|
title: item.noLoginText,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.$set(this.newCkeckData[0], "activeIndex", index);
|
|
this.search();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.dispalyF {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.popupAll {
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 9;
|
|
}
|
|
|
|
.popupListAll {
|
|
background: #F2F4F7;
|
|
position: relative;
|
|
z-index: 99;
|
|
width: 100%;
|
|
padding-top: 8rpx;
|
|
}
|
|
|
|
.popupList {
|
|
background: #F2F4F7;
|
|
margin: 0 32rpx;
|
|
|
|
.tabTitle {
|
|
font-family: Source Han Sans;
|
|
font-size: 24rpx;
|
|
color: #282828;
|
|
margin: 16rpx 0;
|
|
}
|
|
|
|
.popupItem {
|
|
padding: 0 32rpx;
|
|
text-align: center;
|
|
background: #fff;
|
|
border-radius: 4rpx;
|
|
font-family: Source Han Sans;
|
|
font-size: 24rpx;
|
|
font-feature-settings: "kern" on;
|
|
color: #282828;
|
|
margin-right: 15rpx;
|
|
flex-shrink: 0;
|
|
margin-bottom: 20rpx;
|
|
line-height: 56rpx;
|
|
min-width: 144rpx;
|
|
border: 1rpx solid #CAD4E2;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.popupItem-active {
|
|
padding: 0 32rpx;
|
|
text-align: center;
|
|
background: #1A62CE;
|
|
border-radius: 4rpx;
|
|
font-family: Source Han Sans;
|
|
font-size: 24rpx;
|
|
font-feature-settings: "kern" on;
|
|
color: #fff;
|
|
margin-right: 15rpx;
|
|
flex-shrink: 0;
|
|
margin-bottom: 20rpx;
|
|
line-height: 56rpx;
|
|
min-width: 144rpx;
|
|
border: 1rpx solid #1A62CE;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.popupPic {
|
|
width: 100%;
|
|
padding-top: 16rpx;
|
|
padding-bottom: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.gropo {
|
|
position: fixed;
|
|
left: 0rpx;
|
|
top: 0rpx;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
opacity: 0.6;
|
|
background: rgba(0, 0, 0, 0.23);
|
|
}
|
|
|
|
.tabList {
|
|
padding: 32rpx 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
z-index: 105; /* 增加层级，确保在筛选条上方而不被遮挡 */
|
|
|
|
.tabItem {
|
|
line-height: 56rpx;
|
|
padding: 0 32rpx;
|
|
background: #fff;
|
|
border-radius: 4rpx;
|
|
font-family: Source Han Sans;
|
|
font-size: 24rpx;
|
|
font-feature-settings: "kern" on;
|
|
color: #282828;
|
|
margin-right: 15rpx;
|
|
flex-shrink: 0;
|
|
min-width: 144rpx;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
.tabrightBtnOut {
|
|
position: absolute;
|
|
right: 0;
|
|
width: 87rpx;
|
|
height: 56rpx;
|
|
z-index: 100; /* 确保图标可点击 */
|
|
}
|
|
|
|
.tabrightBtn {
|
|
position: absolute;
|
|
right: 36rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
z-index: 99;
|
|
}
|
|
.popupItem {
|
|
padding: 0 32rpx;
|
|
text-align: center;
|
|
background: #fff;
|
|
border-radius: 4rpx;
|
|
font-family: Source Han Sans;
|
|
font-size: 24rpx;
|
|
font-feature-settings: "kern" on;
|
|
color: #282828;
|
|
margin-right: 15rpx;
|
|
flex-shrink: 0;
|
|
margin-bottom: 20rpx;
|
|
line-height: 56rpx;
|
|
min-width: 144rpx;
|
|
border: 1rpx solid #CAD4E2;
|
|
box-sizing: border-box;
|
|
}
|
|
.popupItem-active {
|
|
padding: 0 32rpx;
|
|
text-align: center;
|
|
background: #1A62CE;
|
|
border-radius: 4rpx;
|
|
font-family: Source Han Sans;
|
|
font-size: 24rpx;
|
|
font-feature-settings: "kern" on;
|
|
color: #fff;
|
|
margin-right: 15rpx;
|
|
flex-shrink: 0;
|
|
margin-bottom: 20rpx;
|
|
line-height: 56rpx;
|
|
min-width: 144rpx;
|
|
border: 1rpx solid #1A62CE;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.bottom-search {
|
|
margin-top:56rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 16rpx 32rpx 0;
|
|
.search-left {
|
|
font-family: Source Han Sans;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
line-height: 70rpx;
|
|
background: #fff;
|
|
color: #3D3D3D;
|
|
border-radius: 4rpx;
|
|
height: 62rpx;
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
}
|
|
.search-right {
|
|
margin-right: 30rpx;
|
|
width: 472rpx;
|
|
line-height: 64rpx;
|
|
border-radius: 4rpx;
|
|
background: linear-gradient(270deg, #53A0EA 10%, #1A62CE 100%);
|
|
font-family: Source Han Sans;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
margin-left: 24rpx;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* #ifdef H5 */
|
|
.h5-pc-page {
|
|
.tabList {
|
|
padding: 12px 0 !important;
|
|
background: #f5f7fa !important;
|
|
border-radius: 12px !important;
|
|
white-space: nowrap !important;
|
|
overflow: hidden !important;
|
|
display: flex !important;
|
|
}
|
|
.tabList .tabItem {
|
|
display: inline-block !important;
|
|
font-size: 20px !important;
|
|
line-height: 48px !important;
|
|
height: 48px !important;
|
|
padding: 0 24px !important;
|
|
border-radius: 24px !important;
|
|
width: auto !important;
|
|
min-width: 100px !important; /* 减小最小宽度，防止溢出 */
|
|
margin-right: 12px !important;
|
|
vertical-align: middle;
|
|
background-color: #ffffff !important;
|
|
flex-shrink: 0 !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
.tabItem.popupItem-active {
|
|
background-color: #1a62ce !important;
|
|
color: #fff !important;
|
|
}
|
|
.tabTitle {
|
|
font-size: 20px !important;
|
|
margin: 16px 0 12px !important;
|
|
font-weight: 600;
|
|
display: block !important;
|
|
}
|
|
.filter-options-container {
|
|
display: flex !important;
|
|
flex-wrap: wrap !important;
|
|
margin-top: 8px !important;
|
|
min-height: 40px !important;
|
|
}
|
|
/* 仅针对展开后的筛选列表应用网格项样式，避免影响顶部 Tab */
|
|
.popupList .popupItem,
|
|
.popupList .popupItem-active {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
font-size: 20px !important;
|
|
line-height: 1.2 !important;
|
|
padding: 10px 24px !important;
|
|
margin: 0 16px 16px 0 !important;
|
|
border-radius: 8px !important;
|
|
border: 1px solid #CAD4E2 !important;
|
|
min-width: 140px !important;
|
|
height: auto !important;
|
|
}
|
|
.popupItem-active {
|
|
background-color: #1a62ce !important;
|
|
color: #fff !important;
|
|
border-color: #1a62ce !important;
|
|
}
|
|
.bottom-search .search-left, .bottom-search .search-right {
|
|
font-size: 20px !important;
|
|
height: 54px !important;
|
|
line-height: 54px !important;
|
|
}
|
|
}
|
|
/* #endif */
|
|
</style>
|