hlt_app/components/Modal/CustomModal.vue

<template>
	<!-- 自定义提示组件 -->
	<!-- 根据title，配置提示的文字 -->
	<!-- 全局采用ref方式调用打开按钮-->
	<view class="custom-modal">
		<zwy-popup :ishide="isShow" width="660rpx" height="440rpx" radius="12rpx">
			<!-- 自定义展示内容 -->
			<view class="content">
				<view class="icon">
					<image style="width: 100%;height: 100%;" src="/static/images/components/modal/modal.svg" mode="scaleToFill"></image>
				</view>
				<view class="title">
					{{modalInfo.title}}
				</view>
			</view>
			<view class="footer">
				<button style="border-radius: 1998rpx;line-height: 60rpx;" type="default" @tap="handleCancel">取消</button>
				<button style="border-radius: 1998rpx;line-height: 60rpx;" type="primary" @tap="handleOk">确定</button>
			</view>
		</zwy-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	const isShow = ref(false)
	const modalInfo = reactive({
		title: '',
		onOk: ()=>{},
		onCancel: ()=>{
			isShow.value = false
		}
	})
	/**
	 * @description 打开弹窗
	 * @param option 配置项，可以配置标题、确定\取消事件
	 * @param option.title 标题
	 * @param option.onOk 确定事件
	 * @param option.onCancel 取消事件
	 */
	const showModal = (option) => {
		modalInfo.title = option.title;
		modalInfo.onOk = option.onOk;
		option.onCancel && (modalInfo.onCancel = option.onCancel);
		isShow.value = true
	}
	const hideToast = () => {
		isShow.value = false
	}
	const handleCancel = () => {
		modalInfo.onCancel()
		isShow.value = false
	}
	const handleOk = () => {
		modalInfo.onOk()
		isShow.value = false
	}
	defineExpose({
		showModal
	})
</script>

<style lang="scss" scoped>
	.custom-modal{
		
		.content{
			position: relative;
			width: 100%;
			height: calc(100% - 76rpx);
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			
			.icon{
				margin-left: -10rpx;
				width: 210rpx;
				height: 144rpx;
			}
			
			.title{
				margin-top: 8rpx;
				font-family: Source Han Sans;
				font-size: 50rpx;
				font-weight: 500;
				font-feature-settings: "kern" on;
				color: $uni-text-color;
			}
		}
		
		.footer{
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
</style>