ys-app/src/components/pollingShowModal.vue

<template>
<view class="model" v-if="visibleF">
	<view class="model-con">
		<view class="model-top" v-if="title">{{title}}</view>
		<view class="img-title" :class="{'m-height':!title}" v-if="!isGreen">
			<img :src="'static/images/polling/icon-Alert.png'"/>
		</view>
		<view class="img-title" :class="{'m-height':!title}" v-else>
			<img :src="'static/images/polling/icon-success.png'"/>
		</view>
		<view class="model-middle">
			<view :class="{'font-green':true,'font-orange':!isGreen}">{{contents}}</view>
			<view>{{subContents}}</view>
			<view v-if="subTimes">{{parseTime(subTimes,'{y}年{m}月{d}日 星期{a} {h}:{i}')}}</view>
		</view>
		<view class="model-bottom">
			<button type="default" class="btn-green" @click="handleConfirm" 
				v-if="btnFlags" :loading="!isGreens?false:loading" 
				:disabled="!isGreens?false:loading"
			>{{btnTxts}}</button>
			<button type="primary" class="btn-cancel" @click="handleCancel" v-if="btnFlags2">{{btnCancelTxts}}</button>
		</view>
	</view>
</view>
</template>

<script setup>
import { ref,watch } from 'vue'
import { parseTime } from '@/utils/datetime.js';
const props = defineProps({
	visible:{
		type:Boolean
	},
	title:{//标题
		type: String,
	},
	content: {//显示的内容
		type: String
	},
	subContent:{//确认内容
		type:String,
		default:'是否确认提交?'
	},
	subTime:{//提交的时间

	},
	btnFlag:{//提交按钮是否显示
		type:Boolean,
		default:true
	},
	btnFlag2:{//暂不提交按钮是否显示
		type:Boolean,
		default:true
	},
	btnTxt:{//提交按钮文字
		type:String,
		default:'提交'
	},
	btnCancelTxt:{//暂不提交按钮文字
		type:String,
		default:'暂不提交'
	},
	isGreen:{//是否显示绿色
		type:Boolean,
		default:false
	}
})

let visibleF = ref(props.visible)
let titles = ref(props.title)
let contents = ref(props.content);
let subContents = ref(props.subContent);
let subTimes = ref(props.subTime);
let btnFlags = ref(props.btnFlag);
let btnFlags2 = ref(props.btnFlag2)
let btnTxts = ref(props.btnTxt);
let btnCancelTxts = ref(props.btnCancelTxt);
let isGreens = ref(props.isGreen);
let loading = ref(false);

// 显示隐藏
watch(() => props.visible, (newVal, oldVal) => {
    loading.value = false;
	visibleF = newVal
},{
    deep:true, // 深度监听
    immediate:true // 立即执行
});

// 标题
watch(() => props.title, (newVal, oldVal) => {
	titles.value = newVal
},{
    deep:true,
    immediate:true
});
// 内容
watch(() => props.content, (newVal, oldVal) => {
	contents.value = newVal
},{
    deep:true,
    immediate:true
});

watch(() => props.subContent, (newVal, oldVal) => {
	subContents.value = newVal
},{
    deep:true,
    immediate:true
});
watch(() => props.subTime, (newVal, oldVal) => {
	subTimes.value = newVal
},{
    deep:true,
    immediate:true
});

// 按钮
watch(() => props.btnFlag, (newVal, oldVal) => {
	btnFlags.value = newVal
},{
    deep:true,
    immediate:true
});

// 按钮
watch(() => props.btnFlag2, (newVal, oldVal) => {
	btnFlags2.value = newVal
},{
    deep:true,
    immediate:true
});

watch(() => props.btnTxt, (newVal, oldVal) => {
	btnTxts.value = newVal
},{
    deep:true,
    immediate:true
});

watch(() => props.btnCancelTxt, (newVal, oldVal) => {
	btnCancelTxts.value = newVal
},{
    deep:true,
    immediate:true
});

// 调用父组件的方法
const emit = defineEmits(['close','confirm'])
const handleCancel = ()=>{
	emit('close');
}

const handleConfirm = ()=>{
	if(isGreens.value){
		loading.value=false;
	}else{
		loading.value=true;
	}
	emit('confirm')
}

</script>

<style lang="scss" scoped>
.model {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9999;
	.model-con{
		background: #fff;
		position: fixed;
		top:40%;
		left:50%;
		// width:620rpx;
		width:580rpx;
		min-height: 278rpx;
		margin-left:-310rpx;
		margin-top:-139rpx;
		border-radius: 24rpx;
		padding:20rpx 20rpx 30rpx;
	}
	.model-top{
		text-align: center;
		padding:20rpx 0;
		font-size:36rpx;
	}
	.img-title{
		text-align: center;
		img{
			width:120rpx;
			height: 120rpx;
		}
	}
	.model-middle{
		text-align: center;
		font-size:30rpx;
		color:#333333;
		margin-bottom:10rpx;
		.font-green{
			color:#00BF5A;
			font-size: 36rpx;
			font-weight: bold;
			padding:20rpx 0;
		}
		.font-orange{
			color:#FF9638;
			font-size: 36rpx;
			font-weight: bold;
			padding:0rpx 0 20rpx;
		}
	}
	.m-height{
		padding:40rpx 0 20rpx;
	}
	.model-bottom{
		width:380rpx;
		margin-top:40rpx;
		margin:40rpx auto;
		.btn-green,.btn-cancel{
			background-color: #fff;
			color:#05A3F4;
			border-radius: 48rpx;
			font-size:36rpx;
			text-align: center;
			line-height: 2.2;
			margin:10rpx 0 0 0 !important;
			&::after{
				border:none;
				border-radius: 37rpx;
			}
		}
		.btn-green{
			border: 1px solid #05A3F4;
			background-color:#05A3F4;
			color:#fff;
			margin:0rpx 0 0 20rpx !important;
		}
	}
}
</style>