baiyuApp/pages_im/pages/conversation/conversationList/components/Activity.vue

<template>
	<u-popup :show="show" @close="close" mode="center" :round="16" :overlayStyle="{background: 'rgba(0, 0, 0, 0.6)'}">
		<view class="activity-popup-container ">
			<view class="popup-content white-bg">
				<image src="/static/images/enter/activity/img_sanzi.png" class="fan-deco" mode="aspectFit"></image>
				<view class="main-title u-f-ajc">广场舞大赛</view>
				<view class="sub-title es-mt-14 u-f-ajc">丰厚奖品等你来拿</view>

				<view class="awards-box es-mt-28">
					<view class="u-f-ajc awards-title-box">
						<view class="awards-title u-f-ajc">活动奖励</view>
					</view>
					<scroll-view :scroll-y="true" class="awards-boxContent es-mt-20">
						<view class="award-item" :class="{fistOne:index==0}" v-for="(item, index) in activityData.prize"
							:key="index">
							<view class="dot"></view>
							<text>{{item.prizeLevel}}:{{item.prizeName}}</text>
						</view>
					</scroll-view>
				</view>

				<view class="time-info">报名时间：{{activityData.registrationStartTime}}到{{activityData.registrationEndTime}}
				</view>

				<view class="u-f-ajc">
					<view class="join-btn" @click="handleJoin">
						立即参与
					</view>
				</view>
			</view>

			<view class="bottom-controls">
				<view class="dont-remind u-f u-f-ac" @click="updateActivityShowFun()">
					<image v-if="!reminder" src="/static/images/enter/activity/icon_square.png" class="es-icon-28"
						mode="aspectFit"></image>
					<image v-else src="/static/images/enter/activity/icon_select_square.png" class="es-icon-28"
						mode="aspectFit">
					</image>
					<text class="remind-text">下次不再提醒我</text>
				</view>
				<view class="close-btn" @click="close()">
					<u-icon name="close-circle" color="#fff" size="30"></u-icon>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		updateActivityShow
	} from '@/api/activity.js'
	export default {
		name: 'Activity',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			activityData: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				awards: [],
				activityTime: '',
				dontRemindValue: [],
				reminder: false,
			}
		},
		created() {},
		methods: {
			close() {
				this.$emit('close');
			},
			handleJoin() {
				uni.navigateTo({
					url: '/pages_enter/activity/detail'
				});
				this.close();
			},

			async updateActivityShowFun() {
				const res = await updateActivityShow({
					activityId: 1
				})
				if (res.code == 200) {
					this.reminder = !this.eminder
					uni.showToast({
						icon: 'none',
						title: '设置成功!'
					})
					setTimeout(() => {
						this.$emit('close');
					}, 1000)
				} else {
					uni.showToast({
						icon: 'none',
						title: result.msg
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activity-popup-container {
		width: 640rpx;
		background: transparent;
	}

	::v-deep .u-popup__content {
		background-color: transparent !important;
	}

	.popup-content {
		background-color: #FFFFFF;
		background-image: url('/static/images/enter/activity/bg_popup_dance.png');
		background-repeat: no-repeat;
		background-size: 100% 274rpx;
		border-radius: 32rpx;
		padding: 40rpx;
		text-align: center;
		position: relative;
		overflow: visible;

		.fan-deco {
			position: absolute;
			top: -60rpx;
			right: -20rpx;
			width: 180rpx;
			height: 180rpx;
		}

		.main-title {
			font-family: HelloFont WenYiHei, HelloFont WenYiHei;
			font-weight: bold;
			font-size: 64rpx;
			color: #550500;
			text-align: left;
			font-style: normal;
			text-transform: none;
			// background: linear-gradient(270deg, #E82426 0%, #F6886D 100%);
		}

		.sub-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #550500;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.awards-box {
			background: #FFEFEF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 4rpx solid #FFB9C0;
			padding: 0 40rpx 28rpx;
			text-align: left;
			margin-bottom: 30rpx;

			.awards-boxContent {
				height: 300rpx;
				padding-bottom: 20rpx;
			}

			.awards-title-box {
				// position: absolute;
				// top: 0;
				// left: 0;
				// right: 0;
				// padding-top: 74rpx;

				.awards-title {
					// position: absolute;
					// top: 0;

					font-family: Inter, Inter;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: left;
					font-style: normal;
					text-transform: none;
					width: 278rpx;
					height: 54rpx;
					background: linear-gradient(90deg, #FF4640 0%, #FEA56B 100%);
					border-radius: 0 0 65rpx 65rpx;
				}
			}

			.fistOne {
				// margin-top: 74rpx;
			}

			.award-item {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #222222;
				margin-bottom: 20rpx;

				.dot {
					width: 12rpx;
					height: 12rpx;
					background: #FF3245;
					border-radius: 50%;
					margin-right: 16rpx;
				}
			}
		}

		.time-info {
			font-size: 26rpx;
			color: #B22222;
			margin-bottom: 30rpx;
		}

		.join-btn {
			width: 368rpx;
			height: 84rpx;
			line-height: 90rpx;
			background: linear-gradient(90deg, #FF7F50, #FF1493);
			border-radius: 45rpx;
			color: #fff;
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			box-shadow: 0 8rpx 20rpx rgba(255, 20, 147, 0.3);
		}
	}

	.bottom-controls {
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.dont-remind {
			margin-bottom: 40rpx;

			.remind-text {
				color: #fff;
				font-size: 28rpx;
				margin-left: 16rpx;
			}
		}

		.close-btn {
			// No specific styles needed, u-icon is sufficient
		}
	}
</style>