108 lines
2.9 KiB
Vue
108 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>
|
|
<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>
|
|
<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 可传值复写
|
|
})
|
|
// 引入依赖 解决滚动穿透问题 配合JeepayWrapper 使用
|
|
const wrapperHidden = inject('wrapperHidden')
|
|
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)
|
|
}
|
|
}
|
|
const change = (e) => {
|
|
if (wrapperHidden) {
|
|
wrapperHidden(e.show)
|
|
}
|
|
}
|
|
const close = () => popup.value.close()
|
|
defineExpose({ open, close })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.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;
|
|
color: #4d4d4d;
|
|
}
|
|
.line {
|
|
height: 20rpx;
|
|
background-color: rgba(0, 0, 0, 0.07);
|
|
}
|
|
.tips-cancel {
|
|
height: 110rpx;
|
|
color: #808080;
|
|
font-size: 33rpx;
|
|
border: none;
|
|
}
|
|
.u-cell-hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
}
|
|
</style>
|