ts_aimz_uni/components/ad-popup.vue

<template>
	<view class="poster-ad-popup" v-if="visible">
		<view class="poster-ad-container" :animation="animation"
			:style="{'left':initPosition.left,'top':initPosition.top}">
			<view class="poster-ic-close poster-close-icon" @click="onClose"></view>
			<view class="poster-image-box" :style="{'height':couponsList.length>1 ? '70vh':'50vh'}">
				<image src="https://www.aimzhu.com/miniapp-assets/ad_background.png" mode="scaleToFill" :preview="false"
					class="poster-ad-coupons-box-bg"></image>
				<view class="poster-ad-coupons-container">
					<scroll-view scroll-y :style="{'height': couponsList.length>1 ? '600rpx' :'350rpx'}">
						<view class="poster-ad-coupons-list-box">
							<block v-for="(item,index) in couponsList" :key="index">
								<view class="poster-ad-coupons-item">
									<image :preview="false" src="https://www.aimzhu.com/miniapp-assets/ad_item_bg.png"
										style="width: 100%;height:100%;" mode="scaleToFill"></image>
									<view class="poster-ad-coupons-item-content">
										<view class="poster-ad-coupons-item-price">
											<rich-text :nodes="moneyTxt(14,20,item.amount/100)"></rich-text>
										</view>
										<view class="poster-ad-coupons-item-desc">
											<view class="poster-ad-coupons-item-desc-title">{{item.title}}</view>
											<view class="poster-ad-coupons-item-desc-time">
												{{item.useGmtStart}}至{{item.useGmtEnd}}
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
					</scroll-view>
					<checkbox-group @change="toggleCheck" style="align-self: center;margin-top: 20rpx;">
						<checkbox><text class="checkbox-text">今日不再显示</text></checkbox>
					</checkbox-group>
					<view class="poster-btn" @click="onFurl">收下优惠卷</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		moneyTxt
	} from '@/common/js/conver.js'
	export default {
		name: "ad-popup",
		props: {
			// 是否显示弹窗
			visible: {
				type: Boolean,
				value: false
			},
			coupons: {
				type: Object,
				value: null
			},
			couponsList: {
				type: Array,
				value: null
			}
		},
		data() {
			return {
				localVisible: this.visible,
				checked: false,
				initPosition: {
					left: 50,
					top: 50
				},
				// top: 35%;
				// left: 8%;
				content: {
					left: 20,
					top: 150,
				},
				animation: {},
				screenWidth: 0,
				screenHeight: 0,
				top: 590,
				left: 80
			};
		},
		mounted() {
			// // #ifdef H5 || MP-WEIXIN
			// const windowInfo = uni.getWindowInfo()
			// this.screenHeight = windowInfo.screenHeight
			// this.screenWidth = windowInfo.screenWidth
			// //#endif
			// //#ifdef MP-BAIDU || MP-TOUTIAO || MP-XHS || MP-ALIPAY
			// const sysInfo = uni.getSystemInfoSync()
			// this.screenHeight = sysInfo.screenHeight
			// this.screenWidth = sysInfo.screenWidth
			// //#endif
		},
		methods: {
			moneyTxt,
			toggleCheck() {
				console.log('点击了', this.checked)
				this.checked = !this.checked
				console.log('点击后', this.checked)
			},
			// 关闭弹窗
			onClose() {
				this.$emit('ad-close', this.checked)
			},
			onFurl() {
				this.startAnimation()
				this.$emit('ad-furl', this.checked)
			},
			startAnimation() {
				// 先重置元素状态
				this.showBox = true
				this.animation = {}
				// 短暂延迟确保重置完成
				setTimeout(() => {
					const animation = uni.createAnimation({
						duration: 1000,
						timingFunction: 'ease-in-out'
					});
					const targetLeft = 0;
					const targetTop = 0;
					// 获取元素初始位置
					const initX = this.initPosition.left;
					const initY = this.initPosition.top;
					// 计算右下角目标位置（例如向右下偏移100px）
					const targetX = initX + 120;
					const targetY = initY + 400;
					animation
						.translate(targetX - initX, targetY - initY)
						.scale(0.03)
						.rotate(180)
						.skew(10, 10)
						.opacity(0)
						.step();
					this.animation = animation.export()
					// 动画结束后隐藏元素
					setTimeout(() => {
						this.$emit('ad-close', false)
						this.initPosition = {
							left: 50,
							top: 50
						}
						this.animation = {}
					}, 1000);
				}, 50);
			}
		}
	}
</script>

<style lang="scss">
	.poster-ad-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}


	.poster-ad-container {
		position: relative;
		border-radius: 10px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.poster-close-icon {
		height: 50rpx;
		width: 50rpx;
		align-self: flex-end;
		margin-right: 10px;
	}

	.poster-custom-checkbox-group {
		color: #FFA900;
		margin-top: 5px;
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.checkbox-text {
		font-size: 28rpx;
		color: #FFA900;
	}

	.poster-custom-checkbox {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 1px solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.poster-custom-checkbox.checked {
		background-color: #FFA900;
		border-color: #FFA900;
		color: white;
		border-radius: 50%;
	}

	.poster-ic-close {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ0MDA3MjkxNjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM1ODkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTg3Mi42MDgxOTkgMTUwLjMyNjE0NUM2NzQuMjM5Njc5LTQ5LjU5MjEzIDM0OC43OTEzMjUtNDkuNTkyMTMgMTUwLjQyMjgwNCAxNTAuMzI2MTQ1Yy0xOTkuOTE4Mjc1IDE5OS45MTgyNzUtMTk5LjkxODI3NSA1MjMuODE2ODc1IDAgNzIzLjczNTE0OSAxOTkuOTE4Mjc1IDE5OS45MTgyNzUgNTIzLjgxNjg3NSAxOTkuOTE4Mjc1IDcyMy43MzUxNDkgMCAxOTguMzY4NTIxLTE5OS45MTgyNzUgMTk4LjM2ODUyMS01MjUuMzY2NjI5LTEuNTQ5NzU0LTcyMy43MzUxNDl6IG0tNDAuMjkzNjA1IDY4MS44OTE3ODljLTE3Ni42NzE5NjQgMTc2LjY3MTk2NC00NjYuNDc1OTc0IDE3Ni42NzE5NjQtNjQzLjE0NzkzOCAwLTE3Ni42NzE5NjQtMTc2LjY3MTk2NC0xNzYuNjcxOTY0LTQ2NC45MjYyMiAwLTY0My4xNDc5MzhDMzY1LjgzODYxOSAxMi4zOTgwMzMgNjU1LjY0MjYzIDEyLjM5ODAzMyA4MzIuMzE0NTk0IDE4OS4wNjk5OTZjMTc4LjIyMTcxOCAxNzguMjIxNzE4IDE3OC4yMjE3MTggNDY2LjQ3NTk3NCAwIDY0My4xNDc5Mzh6TTcxMi45ODM1MyAzMDkuOTUwODEzYy0xMC44NDgyNzgtMTAuODQ4Mjc4LTI5LjQ0NTMyNy0xMC44NDgyNzgtNDAuMjkzNjA1IDBMNTExLjUxNTUwMiA0NzEuMTI1MjM2IDM1MC4zNDEwNzkgMzA5Ljk1MDgxM2MtMTAuODQ4Mjc4LTEwLjg0ODI3OC0yOS40NDUzMjctMTAuODQ4Mjc4LTQwLjI5MzYwNiAwLTEwLjg0ODI3OCAxMC44NDgyNzgtMTAuODQ4Mjc4IDI5LjQ0NTMyNyAwIDQwLjI5MzYwNkw0NzEuMjIxODk2IDUxMS40MTg4NDIgMzEwLjA0NzQ3MyA2NzIuNTkzMjY1Yy0xMC44NDgyNzggMTAuODQ4Mjc4LTEwLjg0ODI3OCAyOS40NDUzMjcgMCA0MC4yOTM2MDYgMTAuODQ4Mjc4IDEwLjg0ODI3OCAyOS40NDUzMjcgMTAuODQ4Mjc4IDQwLjI5MzYwNiAwTDUxMS41MTU1MDIgNTUxLjcxMjQ0OCA2NzIuNjg5OTI1IDcxMi44ODY4NzFjMTAuODQ4Mjc4IDEwLjg0ODI3OCAyOS40NDUzMjcgMTAuODQ4Mjc4IDQwLjI5MzYwNSAwIDEwLjg0ODI3OC0xMC44NDgyNzggMTAuODQ4Mjc4LTI5LjQ0NTMyNyAwLTQwLjI5MzYwNkw1NTEuODA5MTA3IDUxMS40MTg4NDIgNzEyLjk4MzUzIDM1MC4yNDQ0MTljMTAuODQ4Mjc4LTEwLjg0ODI3OCAxMC44NDgyNzgtMjcuODk1NTczIDAtNDAuMjkzNjA2eiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iMzU5MCI+PC9wYXRoPjwvc3ZnPg==');
		background-size: cover;
		background-repeat: no-repeat;
	}




	.poster-ad-content {
		position: absolute;
		height: 200rpx;
		width: 61vw;
		left: 86rpx;
		top: 188rpx;
		transform: rotate(-11.6deg);
		transform-origin: center;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
	}

	.poster-ad-coupons-box {
		position: absolute;
		height: 500rpx;
		width: 83vw;
		top: 80rpx;
		left: 0;
	}

	.poster-ad-coupons-list-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.poster-ad-coupons-item-bg {
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		background-image: url('https://www.aimzhu.com/miniapp-assets/ad_item_bg.png');
		width: 100%;
		height: 100%;
	}

	.poster-ad-coupons-item-content {
		position: absolute;
		display: flex;
		top: 55rpx;
		left: 0;
		flex-direction: row;
		width: 100%;
		height: 77%;
		justify-content: center;
		align-items: center;
	}

	.poster-ad-coupons-item-price-box {
		padding: 5rpx;
		color: #000000;
		font-size: 40rpx;
		font-weight: bold;
		align-items: baseline;
		justify-content: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.poster-ad-coupons-item-desc {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.poster-ad-coupons-item-price {
		flex: 0.5;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 60rpx;
		font-weight: bold;
		color: #000000;
	}

	.poster-ad-coupons-item-price-icon {
		font-size: 20rpx;
	}


	.poster-ad-coupons-item-desc-title {
		font-size: 32rpx;
		margin-left: 5px;
		color: #000000;
		font-weight: bold;
		text-align: center;
		width: 28vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.poster-ad-coupons-item-desc-time {
		font-size: 18rpx;
		margin-left: 5px;
		color: #000000;
		font-weight: bold;
		width: 29vw;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
		overflow: hidden;
	}

	.poster-ad-coupons-item {
		position: relative;
		top: 0;
		left: 0;
		width: 500rpx;
		height: 240rpx;
	}

	.poster-ad-coupons-item:nth-of-type(n+2) {
		margin-top: 20rpx;
	}

	.poster-price-box {
		display: flex;
		flex-direction: row;
		text-align: justify;
		align-items: baseline;
		justify-content: center;
		flex: 2;
		padding: 8rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.poster-p-icon {
		font-size: 28rpx;
		margin-bottom: 5px;
		color: #FFA900;
	}

	.poster-p-content {
		font-size: 45rpx;
		margin-left: 5px;
		color: #FFA900;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.poster-ad-desc-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		color: #cc8a05fb;
		flex: 3;
	}

	.poster-ad-desc {
		font-size: 32rpx;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 300rpx;
	}

	.poster-ad-period {
		font-size: 24rpx;
	}

	.poster-btn {
		border-radius: 50rpx;
		background-color: rgba(255, 169, 0, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		text-align: center;
		margin-top: 30rpx;
		padding: 10rpx;
		width: 55vw;
		align-self: center;
		z-index: 9999;
	}

	.poster-close-btn {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		width: 40rpx;
		height: 40rpx;
		background: #ccc;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #fff;
	}

	.poster-ad-ic-up-circle {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1MzcxODA0NjI3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTY0IDUxMkE0NDggNDQ4IDAgMSAwIDUxMiA2NCA0NDggNDQ4IDAgMCAwIDY0IDUxMnogbTQ5Ny4yOC0yMTAuMjRhNzI5LjYgNzI5LjYgMCAwIDEgMjI0IDIyNCA5NiA5NiAwIDEgMS0xNjQuNDggOTguODggNDk2IDQ5NiAwIDAgMC0xMDguOC0xMjIuNTYgNTY0LjggNTY0LjggMCAwIDAtMTA5LjEyIDEyMy41MiA5NiA5NiAwIDEgMS0xNjQuNDgtOTguODggNzI5LjYgNzI5LjYgMCAwIDEgMjI0LTIyNCA5NiA5NiAwIDAgMSA5OC44OC0wLjk2eiIgZmlsbD0iI0ZFOTk0NCIgcC1pZD0iMjYwMyI+PC9wYXRoPjwvc3ZnPg==');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.poster-ad-ic-down-circle {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1MzcxOTM5MTMzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM2OTciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTk2MCA1MTJhNDQ4IDQ0OCAwIDEgMC00NDggNDQ4IDQ0OCA0NDggMCAwIDAgNDQ4LTQ0OHogbS00OTcuMjggMjEwLjI0YTcyOS42IDcyOS42IDAgMCAxLTIyNC0yMjQgOTYgOTYgMCAxIDEgMTY0LjQ4LTk4Ljg4IDQ5NiA0OTYgMCAwIDAgMTA4LjggMTIyLjU2IDU2NC44IDU2NC44IDAgMCAwIDEwOS4xMi0xMjMuNTIgOTYgOTYgMCAxIDEgMTY0LjQ4IDk4Ljg4IDcyOS42IDcyOS42IDAgMCAxLTIyNCAyMjQgOTYgOTYgMCAwIDEtOTguODggMC45NnoiIGZpbGw9IiNGRTk5NDQiIHAtaWQ9IjM2OTgiPjwvcGF0aD48L3N2Zz4=');
		background-size: cover;
		background-repeat: no-repeat;

	}

	.poster-ad-icon-size {
		width: 32rpx;
		height: 32rpx;
	}

	.poster-ad-icon-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.poster-image-box {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 652rpx;
	}

	/* 图片背景 */
	.poster-ad-coupons-box-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

	/* 内容 */
	.poster-ad-coupons-container {
		display: flex;
		flex-direction: column;
	}
</style>