zd_wechatApp/components/mypopup/mypopup.vue

<template>
	<view class="popup" v-show="show">
		<view class="popup-info">
			<view class="popup-title"> {{titleText}}</view>
			<view class="popup-text">{{popupText}}</view>
			<view class="popup-btn">
				<view class="btn-left" @click="cancel">{{cancelText}}</view>
				<view class="btn-right" @click="confirm">{{confirmText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-popup",
		props: {
			show: {
				type: Boolean
			},
			popupText: {
				type: String
			},
			titleText: {
				type: String
			},
			cancelText: {
				type: String
			},
			confirmText: {
				type: String
			}
		},
		watch: {
			oldshow: function(newVal, oldVal) {
				// console.log(newVal);
				this.show = newVal;
				console.log(newVal)
			}
		},
		data() {
			return {};
		},
		methods: {
			cancel() {
				this.$emit('close')
			},

			confirm() {
				this.$emit('confirm')
			}
		}
	}
</script>

<style lang="scss">
	.popup {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.4) !important;
		z-index: 9998;
	}

	.popup-info {
		position: fixed;
		width: 320px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30upx;
		box-shadow: 0px 1px 13px -6px rgba(0, 0, 0, 0.25);
		background-color: #fff;
		z-index: 9999;
		border-radius: 8px;

		display: flex;
		flex-direction: column;
		align-items: center;

		.popup-title {
			width: 320px;
			height: 56px;
			background: linear-gradient(95.13deg, #5DA4F7 3.75%, #3285E4 95.95%);
			border-radius: 8px 8px 0px 0px;
			display: flex;
			justify-content: center;
			align-items: center;

			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 17px;
			line-height: 24px;
			/* identical to box height, or 140% */
			color: #FFFFFF;

		}

		.popup-text {
			width: 262px;
			display: flex;
			justify-content: center;
			margin-top: 23px;
			text-align: center;

			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 17px;
			line-height: 24px;
		}

		.popup-btn {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 250px;
			height: 42px;
			border-top-color: #f5f5f5;
			margin: 0 auto;
			margin-top: 22px;
			margin-bottom: 20px;

			.btn-left {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				width: 107px;
				height: 42px;
				border: 0.5px solid #569FF4;
				border-radius: 35px;

				justify-content: center;
				align-items: center;

				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 16px;
				line-height: 22px;
				letter-spacing: -0.2176px;
				color: #569FF4;
			}

			.btn-right {
				display: flex;
				align-items: center;


				width: 107px;
				height: 42px;

				background: linear-gradient(95.13deg, #5DA4F7 3.75%, #3285E4 95.95%);
				border-radius: 35px;

				justify-content: center;
				align-items: center;
				font-color: #FFFFFF;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 16px;
				line-height: 22px;
				letter-spacing: -0.2176px;
				color: #FFFFFF;
			}
		}
	}
</style>