first

components/JSinglePopup/JSinglePopup.vue

@@ -0,0 +1,116 @@
+<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>