zhywpt-sp/components/common/TipsInfo.vue

<!--警示信息的公共弹窗-->
<template>
	<u-popup v-model="state.showPopup" mode="center" border-radius="12" @close="close">
		<view class="popup-content">
			<view class="title">
				<!-- <image class="icon_tips" :src="`${$imgUrl}common/icon-tips.png`"></image> -->
				<image class="tips-image" :src="`${$imgUrl}common/tips.png`" mode=""></image>
				<text class="text">{{title}}</text>
			</view>
			<view class="des"><text>{{ des }}</text></view>
			<view class="action">
				<view class="btn" @click="cancel">取消</view>
				<view class="btn confirm" @click="confirm">确认</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup lang="ts">
	import { reactive, watch } from 'vue'
	const emits = defineEmits(['cancel', 'confirm', 'close', 'update:modelValue']);
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: '提示'
		},
		des: {
			type: String,
			default: ''
		}
	})
	
	watch(() => props.modelValue, (newValue) => {
		if (newValue) {
			state.showPopup = true
		} else {
			state.showPopup = false
		}
	})
	
	const state = reactive({
		showPopup: false
	})
	
	const cancel = () => {
		state.showPopup = false
		emits('update:modelValue', false)
		emits('cancel')
	}
	
	const confirm = () => {
		state.showPopup = false
		emits('update:modelValue', false)
		emits('confirm')
	}
	
	const close = () => {
		state.showPopup = false
		emits('update:modelValue', false)
		emits('close')
	}
</script>

<style scoped lang="scss">
	.popup-content{
		width: 560rpx;
		padding: 51rpx 38rpx;
		text-align: center;
		.title{
			display: flex;
			align-items: center;
			justify-content: center;
			.text{
				margin-left: 16rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: #01243A;
			}
			.tips-image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.des{
			color: #222222;
			font-size: 28rpx;
			margin: 35rpx 12rpx;
			min-height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.action{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn{
				width: 230rpx;
				height: 80rpx;
				color: #01243A;
				border-radius: 40px 40px 40px 40px;
				border: 1px solid #004576;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.confirm{
				color: #FFFFFF;
				font-size: 30rpx;
				background: radial-gradient(circle,  #01243A, #004576);
			}
		}
	}
</style>