346 lines
9.1 KiB
Vue
346 lines
9.1 KiB
Vue
<template>
|
||
<uni-popup
|
||
ref="popup"
|
||
type="bottom"
|
||
borderRadius="10px 10px 0 0"
|
||
background-color="#FFFFFF"
|
||
@maskClick="maskClickFn"
|
||
:mask-click="maskClick"
|
||
class="popup-fix"
|
||
>
|
||
<view class="popup-content">
|
||
<view class="popup-header">
|
||
<view class="btn-cancel" @click="cancel">取消</view>
|
||
<view class="title">
|
||
<text>{{ title }}</text>
|
||
</view>
|
||
<view class="btn-confirm"></view>
|
||
</view>
|
||
<view class="popup-list">
|
||
<view class="content-wrapper">
|
||
<scroll-view class="filter-nav" scroll-y>
|
||
<view
|
||
v-for="(item, index) in filterOptions"
|
||
:key="index"
|
||
class="nav-item button-click"
|
||
:class="{ active: activeTab === item.key }"
|
||
@click="scrollTo(item.key)"
|
||
>
|
||
{{ item.label }}
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<scroll-view class="filter-content" :scroll-into-view="activeTab" scroll-y>
|
||
<template v-for="(item, index) in filterOptions" :key="index">
|
||
<view class="content-item">
|
||
<view class="item-title" :id="item.key">{{ item.label }}</view>
|
||
<view class="check-content">
|
||
<view
|
||
v-for="option in item.options"
|
||
:key="option.value"
|
||
class="checkbox-item button-click"
|
||
:class="{
|
||
checkedstyle: activeValue === option.value,
|
||
}"
|
||
@click="handleItemClick(option)"
|
||
>
|
||
<text class="option-label">{{ option.label }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, nextTick, onBeforeMount } from 'vue';
|
||
import useDictStore from '@/stores/useDictStore';
|
||
const { getTransformChildren } = useDictStore();
|
||
|
||
const area = ref(true);
|
||
const maskClick = ref(false);
|
||
const maskClickFn = ref(null);
|
||
|
||
const title = ref('标题');
|
||
const confirmCallback = ref(null);
|
||
const cancelCallback = ref(null);
|
||
const changeCallback = ref(null);
|
||
const popup = ref(null);
|
||
// MODIFIED: 新增 ref，用于存储当前激活的选项值
|
||
const activeValue = ref(null);
|
||
|
||
const activeTab = ref('');
|
||
const filterOptions = ref([]);
|
||
const listData = ref([]);
|
||
|
||
// MODIFIED: open 方法增加一个 currentValue 参数
|
||
const open = (newConfig = {}) => {
|
||
const {
|
||
title: configTitle,
|
||
success,
|
||
cancel,
|
||
change,
|
||
data,
|
||
maskClick: configMaskClick = false,
|
||
currentValue, // MODIFIED: 接收父组件传入的当前值
|
||
} = newConfig;
|
||
|
||
// reset();
|
||
|
||
if (configTitle) title.value = configTitle;
|
||
if (typeof success === 'function') confirmCallback.value = success;
|
||
if (typeof cancel === 'function') cancelCallback.value = cancel;
|
||
if (typeof change === 'function') changeCallback.value = change;
|
||
if (Array.isArray(data)) listData.value = data;
|
||
|
||
// MODIFIED: 将父组件传入的值
|
||
activeValue.value = currentValue;
|
||
|
||
if (configMaskClick) {
|
||
maskClick.value = configMaskClick;
|
||
maskClickFn.value = cancel;
|
||
}
|
||
|
||
getoptions();
|
||
|
||
nextTick(() => {
|
||
popup.value?.open();
|
||
});
|
||
};
|
||
|
||
const close = () => {
|
||
popup.value?.close();
|
||
};
|
||
|
||
const cancel = () => {
|
||
handleClick(cancelCallback.value, null);
|
||
};
|
||
|
||
const handleClick = async (callback, selectedItem) => {
|
||
if (typeof callback !== 'function') {
|
||
close();
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const result = await callback(selectedItem);
|
||
if (result !== false) close();
|
||
} catch (error) {
|
||
console.error('Callback execution error:', error);
|
||
}
|
||
};
|
||
|
||
const handleItemClick = (option) => {
|
||
// MODIFIED: 点击时，更新本地的 activeValue
|
||
activeValue.value = option.value;
|
||
// 立即调用回调并传递所选的完整 option
|
||
handleClick(confirmCallback.value, option);
|
||
};
|
||
|
||
const scrollTo = (key) => {
|
||
activeTab.value = key;
|
||
};
|
||
|
||
function getoptions() {
|
||
filterOptions.value = transformRegionalData(listData.value);
|
||
activeTab.value = listData.value[0].key;
|
||
}
|
||
|
||
const reset = () => {
|
||
maskClick.value = false;
|
||
confirmCallback.value = null;
|
||
cancelCallback.value = null;
|
||
changeCallback.value = null;
|
||
// MODIFIED: 重置时也清空 activeValue
|
||
activeValue.value = null;
|
||
};
|
||
|
||
function transformRegionalData(sourceData) {
|
||
const options = sourceData.map((region, index) => {
|
||
const ls = region.areaList.map((commercial) => ({
|
||
...commercial,
|
||
text: commercial.commercialAreaName,
|
||
label: commercial.commercialAreaName,
|
||
value: commercial.commercialAreaId,
|
||
key: commercial.commercialAreaId,
|
||
listClass: 'default',
|
||
status: 'default',
|
||
}));
|
||
return {
|
||
label: region.regionalName,
|
||
key: 'lx' + region.regionalId,
|
||
options: ls,
|
||
};
|
||
});
|
||
|
||
return options;
|
||
}
|
||
|
||
// 暴露方法给父组件
|
||
defineExpose({
|
||
open,
|
||
close,
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 样式表无变化，保持原样即可 */
|
||
.popup-fix {
|
||
position: fixed !important;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
top: 0;
|
||
height: 100vh;
|
||
z-index: 9999;
|
||
}
|
||
.popup-content {
|
||
color: #000000;
|
||
height: 80vh;
|
||
}
|
||
.popup-bottom {
|
||
display: none;
|
||
}
|
||
.popup-list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
height: calc(80vh - 100rpx);
|
||
overflow: hidden;
|
||
.picker-view {
|
||
width: 100%;
|
||
height: 500rpx;
|
||
margin-top: 20rpx;
|
||
.uni-picker-view-mask {
|
||
background: rgba(0, 0, 0, 0);
|
||
}
|
||
.item {
|
||
line-height: 84rpx;
|
||
height: 84rpx;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #cccccc;
|
||
}
|
||
.item-active {
|
||
color: #333333;
|
||
}
|
||
.uni-picker-view-indicator:after {
|
||
border-color: #e3e3e3;
|
||
}
|
||
.uni-picker-view-indicator:before {
|
||
border-color: #e3e3e3;
|
||
}
|
||
}
|
||
}
|
||
.popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 40rpx 40rpx 10rpx 40rpx;
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
}
|
||
.btn-cancel {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #666d7f;
|
||
line-height: 38rpx;
|
||
}
|
||
.btn-confirm {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #256bfa;
|
||
min-width: 60rpx;
|
||
}
|
||
}
|
||
.content-wrapper {
|
||
flex: 1;
|
||
display: flex;
|
||
overflow: hidden;
|
||
height: 100%;
|
||
}
|
||
|
||
.filter-nav {
|
||
width: 200rpx;
|
||
background-color: #ffffff;
|
||
|
||
.nav-item {
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #666d7f;
|
||
&.active {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #256bfa;
|
||
}
|
||
}
|
||
}
|
||
|
||
.filter-content {
|
||
flex: 1;
|
||
padding: 20rpx;
|
||
background-color: #f6f6f6;
|
||
|
||
.content-item {
|
||
margin-top: 30rpx;
|
||
.item-title {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
}
|
||
.content-item:first-child {
|
||
margin-top: 0rpx;
|
||
}
|
||
|
||
.check-content {
|
||
display: grid;
|
||
gap: 16rpx;
|
||
grid-template-columns: repeat(auto-fill, minmax(180rpx, 1fr));
|
||
place-items: stretch;
|
||
|
||
.checkbox-item {
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
background-color: #d9d9d9;
|
||
|
||
min-width: 0;
|
||
padding: 0 10rpx;
|
||
height: 80rpx;
|
||
background: #e8eaee;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
|
||
.option-label {
|
||
font-size: 28rpx;
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
/* 这个样式现在会根据 activeValue 动态应用 */
|
||
.checkedstyle {
|
||
height: 76rpx;
|
||
background: rgba(37, 107, 250, 0.06);
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
border: 2rpx solid #256bfa;
|
||
color: #256bfa;
|
||
}
|
||
}
|
||
}
|
||
</style>
|