117 lines
2.9 KiB
Vue
117 lines
2.9 KiB
Vue
<template>
|
|
<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" @change="change" :safe-area="false">
|
|
<view class="tips-wrapper">
|
|
<view class="tips-text flex-center" v-if="title">{{ title }}</view>
|
|
<scroll-view scroll-y class="list-wrap">
|
|
<block v-for="v in list" :key="v[value]">
|
|
<view
|
|
class="single-text flex-center"
|
|
hover-class="u-cell-hover"
|
|
hover-stay-time="150"
|
|
:style="{ color: v[value] == selected ? activeColor : v.color }"
|
|
@tap="confirm(v)"
|
|
>
|
|
{{ v[label] }}
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
<view class="line"></view>
|
|
<view class="tips-text tips-cancel flex-center" hover-class="u-cell-hover" hover-stay-time="150" @tap="popup.close()">取消</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<JeepayPopupConfirm ref="jeepayPopupConfirm" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, inject } from 'vue';
|
|
const emits = defineEmits(['confirm']);
|
|
const props = defineProps({
|
|
title: { type: String }, //标题 传入展示 不传则隐藏
|
|
activeColor: { type: String, default: '#2980FD' }, //选中后文字颜色
|
|
textColor: { type: String }, //列表文字颜色
|
|
textSize: { type: String }, //列表文字大小
|
|
titleColor: { type: String }, //标题文字颜色
|
|
titleSize: { type: String }, //标题文字大小
|
|
list: { type: Array }, //渲染单选列表集合
|
|
label: { type: String, default: 'label' }, //展示文字的键名 可传值复写
|
|
value: { type: String, default: 'value' } //展示文字的key 可传值复写
|
|
});
|
|
const selected = ref(undefined);
|
|
const popup = ref(null);
|
|
|
|
const jeepayPopupConfirm = ref();
|
|
|
|
// 打开弹窗 val 选中数据的key
|
|
const open = (val) => {
|
|
selected.value = val;
|
|
popup.value.open();
|
|
};
|
|
const confirm = (listItem) => {
|
|
popup.value.close();
|
|
|
|
// 包含回调函数
|
|
if (listItem.fun) {
|
|
// 包含确认弹层。
|
|
if (listItem.confirmText) {
|
|
jeepayPopupConfirm.value
|
|
.open(listItem.confirmText)
|
|
.then(() => {
|
|
listItem.fun();
|
|
})
|
|
.catch(() => {
|
|
popup.value.open();
|
|
});
|
|
} else {
|
|
listItem.fun();
|
|
}
|
|
} else {
|
|
1;
|
|
emits('confirm', listItem);
|
|
}
|
|
};
|
|
let changePageMetaOverflowFunc = inject('changePageMetaOverflowFunc');
|
|
const change = (e) => {
|
|
if (changePageMetaOverflowFunc) {
|
|
changePageMetaOverflowFunc(!e.show);
|
|
}
|
|
};
|
|
const close = () => popup.value.close();
|
|
defineExpose({ open, close });
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.list-wrap {
|
|
max-height: 60vh;
|
|
}
|
|
.tips-wrapper {
|
|
// overflow: hidden;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
padding-top: 20rpx;
|
|
padding-bottom: 60rpx;
|
|
background-color: #fff;
|
|
.tips-text {
|
|
text-align: center;
|
|
height: 90rpx;
|
|
font-size: 30rpx;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.07);
|
|
}
|
|
.single-text {
|
|
height: 120rpx;
|
|
}
|
|
.line {
|
|
height: 20rpx;
|
|
background-color: rgba(0, 0, 0, 0.07);
|
|
}
|
|
.tips-cancel {
|
|
height: 110rpx;
|
|
color: $J-color-t80;
|
|
font-size: 33rpx;
|
|
border: none;
|
|
}
|
|
.u-cell-hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
}
|
|
</style>
|