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

<template>
	<uv-popup
	:safeAreaInsetBottom="false"
	round="40rpx"
	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')">
					取消
				</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
			}
		},
		methods : {
			open(){
				this.$refs.popup.open();
			},
      close(){
        this.$refs.popup.close();
      }
		}
	}
</script>

<style lang="scss" scoped>
	.toast{
		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>