book-hi/pages-sell/components/packet-dialog/index.vue

<template>
	<view class="custom-popup" v-if="visible" @touchmove.stop.prevent>
		<view class="popup-mask"></view>
		<view class="packet-dialog-container">
			<view class="dialog-body">
				<image src="/pages-sell/static/search/packet-dialog.png" class="dialog-bg" mode="widthFix"></image>
				<view class="content-overlay">
					<text class="dialog-title">{{ detail.couponName }}</text>
					<view class="amount-wrapper">
						<text class="amount-num">{{ detail.faceMoney }}</text>
						<text class="amount-unit">元</text>
					</view>
					<view class="condition-box">
						<text v-if="detail.thresholdMoney == 0">无门槛可用</text>
						<text v-else>满{{ detail.thresholdMoney }}可用 24小时有效</text>
					</view>
					<view class="btn-accept" @click="close">
						<text>开心收下</text>
					</view>
				</view>
			</view>
			<view class="close-area" @click="close">
				<view class="close-icon-custom">×</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'PacketDialog',
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				visible: false,
				detail: {
					couponName: '',
					faceMoney: 0,
					thresholdMoney: 0,
				}
			}
		},
		methods: {
			open(data) {
				this.visible = true;
				this.detail = data;
			},
			close() {
				this.visible = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease-in-out;

		.popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #000000;
			opacity: 0.7;
		}
	}

	.packet-dialog-container {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 1000;

		.dialog-body {
			position: relative;
			width: 640rpx;
			// height is determined by image aspect ratio

			.dialog-bg {
				width: 100%;
				display: block;
			}

			.content-overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-top: 120rpx;
				padding-left: 50rpx;

				.dialog-title {
					font-size: 38rpx;
					font-weight: bold;
					color: #B31700;
					margin-bottom: 20rpx;
					padding-top: 50rpx;
				}

				.amount-wrapper {
					display: flex;
					align-items: baseline;
					justify-content: center;
					margin-bottom: 20rpx;

					.amount-num {
						font-family: Arial;
						font-weight: bold;
						font-size: 80rpx;
						color: #B31700;
						background: linear-gradient(214deg, rgba(179, 23, 0, 0.69) 0%, rgba(255, 132, 0, 0.69) 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					.amount-unit {
						color: #B31700;
						font-size: 38rpx;
						font-weight: bold;
						margin-left: 4rpx;
					}
				}

				.condition-box {
					padding: 4rpx 20rpx;
					border-radius: 8rpx;

					text {
						font-size: 24rpx;
						color: #B31700;
					}
				}

				.btn-accept {
					width: 300rpx;
					height: 96rpx;
					background: linear-gradient(180deg, #FFF5D6 0%, #FFDFA8 100%);
					border-radius: 48rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 0 4rpx 10rpx rgba(179, 23, 0, 0.3);
					margin-top: 20rpx; // Adjust positioning

					text {
						color: #B31700;
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}
		}

		.close-area {
			position: absolute;
			top: 0rpx;
			right: 0;

			.close-icon-custom {
				width: 60rpx;
				height: 60rpx;
				border: 2rpx solid #fff;
				border-radius: 50%;
				color: #fff;
				font-size: 50rpx;
				line-height: 54rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding-bottom: 6rpx; // Visual adjustment for 'x'
			}
		}
	}
</style>