flat: 暂存
This commit is contained in:
史典卓
233
components/selectPopup/selectPopup.vue
Normal file
233
components/selectPopup/selectPopup.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<uni-popup
|
||||
ref="popup"
|
||||
type="bottom"
|
||||
borderRadius="10px 10px 0 0"
|
||||
background-color="#FFFFFF"
|
||||
:mask-click="maskClick"
|
||||
>
|
||||
<view class="popup-content">
|
||||
<view class="popup-header">
|
||||
<view class="btn-cancel" @click="cancel">取消</view>
|
||||
<view class="title">{{ title }}</view>
|
||||
<view class="btn-confirm" @click="confirm">确认</view>
|
||||
</view>
|
||||
<view class="popup-list">
|
||||
<picker-view
|
||||
indicator-style="height: 84rpx;"
|
||||
:value="selectedIndex"
|
||||
@change="bindChange"
|
||||
class="picker-view"
|
||||
>
|
||||
<template v-for="(list, lsIndex) in processedListData" :key="lsIndex">
|
||||
<picker-view-column>
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
class="item"
|
||||
:class="{ 'item-active': selectedIndex[lsIndex] === index }"
|
||||
>
|
||||
<text>{{ getLabel(item) }}</text>
|
||||
<text>{{ unit }}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</template>
|
||||
</picker-view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'selectPopup',
|
||||
data() {
|
||||
return {
|
||||
maskClick: false,
|
||||
title: '标题',
|
||||
confirmCallback: null,
|
||||
cancelCallback: null,
|
||||
changeCallback: null,
|
||||
listData: [],
|
||||
selectedIndex: [0, 0, 0],
|
||||
rowLabel: 'label',
|
||||
rowKey: 'value',
|
||||
selectedItems: [],
|
||||
unit: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 统一处理二维数组格式
|
||||
processedListData() {
|
||||
return this.listData.map((column) => {
|
||||
if (!Array.isArray(column)) return [];
|
||||
return column.map((item) => {
|
||||
return typeof item === 'object' ? item : { [this.rowLabel]: item, [this.rowKey]: item };
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
open(newConfig = {}) {
|
||||
const {
|
||||
title,
|
||||
success,
|
||||
cancel,
|
||||
change,
|
||||
data,
|
||||
unit = '',
|
||||
rowLabel = 'label',
|
||||
rowKey = 'value',
|
||||
maskClick = false,
|
||||
defaultIndex = [],
|
||||
} = newConfig;
|
||||
this.reset();
|
||||
if (title) this.title = title;
|
||||
if (typeof success === 'function') this.confirmCallback = success;
|
||||
if (typeof cancel === 'function') this.cancelCallback = cancel;
|
||||
if (typeof change === 'function') this.changeCallback = change;
|
||||
if (Array.isArray(data)) this.listData = data;
|
||||
|
||||
this.rowLabel = rowLabel;
|
||||
this.rowKey = rowKey;
|
||||
this.maskClick = maskClick;
|
||||
this.unit = unit;
|
||||
|
||||
this.selectedIndex =
|
||||
defaultIndex.length === this.listData.length ? defaultIndex : new Array(this.listData.length).fill(0);
|
||||
this.selectedItems = this.selectedIndex.map((val, index) => this.processedListData[index][val]);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.popup.open();
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.$refs.popup.close();
|
||||
},
|
||||
bindChange(e) {
|
||||
this.selectedIndex = e.detail.value;
|
||||
this.selectedItems = this.selectedIndex.map((val, index) => this.processedListData[index][val]);
|
||||
this.changeCallback && this.changeCallback(e, this.selectedIndex, this.selectedItems);
|
||||
},
|
||||
cancel() {
|
||||
this.clickCallback(this.cancelCallback);
|
||||
},
|
||||
confirm() {
|
||||
this.clickCallback(this.confirmCallback);
|
||||
},
|
||||
getLabel(item) {
|
||||
return item?.[this.rowLabel] ?? '';
|
||||
},
|
||||
setColunm(index, list) {
|
||||
if (index > this.listData.length) {
|
||||
return console.warn('最长' + this.listData.length);
|
||||
}
|
||||
if (!list.length) {
|
||||
return console.warn(list + '不能为空');
|
||||
}
|
||||
this.listData[index] = list;
|
||||
this.selectedIndex[index] = 0;
|
||||
this.selectedItems = this.selectedIndex.map((val, index) => this.processedListData[index][val]);
|
||||
},
|
||||
async clickCallback(callback) {
|
||||
if (typeof callback !== 'function') {
|
||||
this.$refs.popup.close();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await callback(this.selectedIndex, this.selectedItems); // 无论是 async 还是返回 Promise 的函数都可以 await
|
||||
if (result !== false) {
|
||||
this.$refs.popup.close();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('confirmCallback 执行出错:', error);
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.maskClick = false;
|
||||
this.confirmCallback = null;
|
||||
this.cancelCallback = null;
|
||||
this.changeCallback = null;
|
||||
this.listData = [];
|
||||
this.selectedIndex = [0, 0, 0];
|
||||
this.rowLabel = 'label';
|
||||
this.rowKey = 'value';
|
||||
this.selectedItems = [];
|
||||
this.unit = '';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popup-content {
|
||||
color: #000000;
|
||||
height: 50vh;
|
||||
}
|
||||
.popup-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.picker-view {
|
||||
width: 100%;
|
||||
height: calc(50vh - 100rpx);
|
||||
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;
|
||||
}
|
||||
}
|
||||
// .list {
|
||||
// .row {
|
||||
// font-weight: 400;
|
||||
// font-size: 32rpx;
|
||||
// color: #333333;
|
||||
// line-height: 84rpx;
|
||||
// text-align: center;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user