pay-video-applet-uniapp-24-8-22/components/toast/confirmationPopup.vue

<template>
	<uv-popup :safeAreaInsetBottom="false" :round="round" ref="popup">
		<view class="toast">
			<view class="title">
				{{ title }}
			</view>
			<view class="content">
				<slot></slot>
			</view>
			<view class="btns" v-if="!cancel">
				<view class="btn" @click="$emit('confirm')">
					{{ confirmText }}
				</view>
			</view>
			<view class="btnstwo" v-else>
				<view class="btn c" @click="$emit('cancel')">
					{{ cancelText }}
				</view>
				<view class="btn" @click="$emit('confirm')">
					{{ confirmText }}
				</view>
			</view>
		</view>
	</uv-popup>
</template>

<script>
	export default {
		name: 'toast',
		props: {
			title: {
				default: ''
			},
			confirmText: {
				default: '确认'
			},
			cancel: {
				default: false
			},
			cancelText: {
				default: '取消'
			},
			round: {
				default: '40rpx'
			}
		},
		methods: {
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.toast {
		min-width: 500rpx;

		.title {
			min-height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
		}

		.content {
			// min-height: 300rpx;
		}

		.btns {
			display: flex;
			padding: 30rpx;

			.btn {
				flex: 1;
				background: $uni-linear-gradient-btn-color;
				border-radius: 20rpx;
				color: #fff;
				padding: 20rpx 0;
				text-align: center;
			}
		}

		.btnstwo {
			display: flex;

			.btn {
				flex: 1;
				background: $uni-linear-gradient-btn-color;
				color: #fff;
				padding: 20rpx 0;
				text-align: center;
			}

			.c {
				background: #fff;
				border-top: 1px solid #999;
				color: #333;
			}
		}
	}
</style>