feiniao-youwei-uniapp/pages/tabBar/tree/components/blessingsPopup.vue

<template>
	<up-popup :show="showPopup" round="8" mode="center" closeable @close="handleCancel">
		<view class="blessings-popup">
			<view class="blessings-title">每日祝福</view>
			<view class="blessings-cont">
				<view class="head">
					<view class="common-title">
						<view class="line"></view>
						<text>随机祝福</text>
					</view>
					<view class="button" @click="getRandomPick">
						<icon name="exchange" />
						<text class="text">换一换</text>
					</view>
				</view>
				<view class="blessings-list">
					<view v-for="(item, index) in list" :key="index" class="blessings-item"
						:class="{ active: activeIndex === index }" @click="handleMsg(index, item)">
						{{ item.clockinText }}
					</view>
				</view>
				<up-textarea class="message-field" v-model="message" placeholder="给 TA 一份暖心的祝福吧~"
					autoHeight></up-textarea>
			</view>
			<view class="blessings-footer">
				<view class="btn" @click="handleCancel">取消</view>
				<view class="send btn" @click="handleSend">发送</view>
			</view>
		</view>
	</up-popup>
	<!-- 祝福成功弹窗 -->
	<up-popup :show="sucessPopup" mode="center" @close="handleCancelSucess" bgColor="transparent" overlayOpacity="0.8">
		<view class="sucess-popup" @click="handleCancelSucess">
			<view class="sucess-bg">
				<image v-if="isFriend" class="img" :src="`${config.BASIC_IMG}img/subTreePage/blessing-sucess.png`">
				</image>
				<image v-else class="img"
					:src="`${config.BASIC_IMG}img/subTreePage/blessing-sucess-${clockinType}.png`"></image>
			</view>
			<view class="button-group">
				<view class="btn">开心收下</view>
				<view class="close">
					<up-icon name="close-circle-fill" size="30" color="rgba(255, 255, 255, 0.7)"></up-icon>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import config from "@/api/config.js"
	import {
		onMounted,
		ref,
		watch
	} from "vue";
	import TREE from '@/api/tree.js'

	const props = defineProps({
		show: {
			type: Boolean,
			defalut: false,
		},
		showSuccess: {
			type: Boolean,
			defalut: false,
		},
		farmBuyId: {
			type: [Number, String],
			defalut: '',
		},
		isFriend: {
			type: Boolean,
			defalut: false,
		},
		clockinType: {
			type: [Number, String],
			defalut: "1",
		},
	});


	const showPopup = ref(false);
	const message = ref("");
	const activeIndex = ref(null);
	const list = ref([]);

	const handleCancel = () => {
		activeIndex.value = null;
		message.value = "";
		showPopup.value = false;
	};

	const handleCancelSucess = () => {
		sucessPopup.value = false;
	};

	const getRandomPick = () => {
		TREE.randomPick({
			count: 6
		}).then(({
			data
		}) => {
			list.value = data || [];
			if (activeIndex.value != null) {
				message.value = data[activeIndex.value].clockinText;
			}
		});
	};

	const handleMsg = (index, item) => {
		activeIndex.value = index;
		message.value = item.clockinText;
	};

	const sucessPopup = ref(false);

	const emit = defineEmits(['clockinCallback'])
	const handleSend = () => {
		const params = {
			farmBuyId: props.farmBuyId,
			clockinType: props.clockinType,
			msg: message.value,
		};
		TREE.clockin(params).then((res) => {
			if (res.code === 0) {
				handleCancel();
				sucessPopup.value = true;
				emit('clockinCallback')
			}
		});
	};

	onMounted(() => {
		getRandomPick();
	});

	watch(
		() => props.show,
		() => {
			showPopup.value = true;
		}
	);

	watch(
		() => props.showSuccess,
		() => {
			handleSend()
		}
	);
</script>

<style scoped lang="scss">
	@import "@/static/style/mixin.scss";

	.blessings-popup {
		width: 90vw;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			bottom: 190rpx;
			right: 0;
			z-index: 2;
			@include ossBg("subTreePage/blessing-bg.png");
			width: 336rpx;
			height: 336rpx;
		}

		.blessings-title {
			font-size: 48rpx;
			text-align: center;
			font-family: "PangMenZhengDao";
		}

		.blessings-cont {
			margin: 40rpx 0 48rpx;

			.head {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.common-title {
					display: flex;
					align-items: center;
					font-weight: 500;

					.line {
						width: 8rpx;
						height: 32rpx;
						border-radius: 10rpx;
						background: #F3C11D;
						margin-right: 14rpx;
					}
				}

				.button {
					font-size: 24rpx;
					color: #f3c11d;
					padding: 8rpx 24rpx;
					border-radius: 40rpx;
					background: rgba(243, 193, 29, 0.1);
					border: 1px solid #f3c11d;
					display: flex;
					align-items: center;
					justify-content: center;

					.text {
						margin-left: 10rpx;
					}
				}
			}

			.blessings-list {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				padding-bottom: 24rpx;
				margin-bottom: 24rpx;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);

				.blessings-item {
					font-size: 24rpx;
					padding: 8rpx 20rpx;
					border-radius: 40rpx;
					background: #f4f6f8;
					margin-top: 20rpx;

					&.active {
						background: #fff2c4;
					}
				}
			}
		}

		.blessings-footer {
			display: flex;

			.btn {
				text-align: center;
				flex: 1;
				color: #666666;
				font-size: 32rpx;
				padding: 16rpx;
				border: 1px solid #999999;
				border-radius: 50rpx;
			}

			.send {
				margin-left: 26rpx;
				color: #fff;
				background-image: linear-gradient(120deg, #ffd887, #ed9e1e);
				border: none;
			}
		}
	}

	.sucess-popup {
		width: 100vw;
		min-height: 100vh;

		.image {
			width: 570rpx;
			height: 480rpx;
		}

		.sucess-bg {
			width: 100%;
			height: 830rpx;
			@include ossBg("subTreePage/light-effect-bg.png");
			display: flex;
			align-items: flex-end;
			justify-content: center;

			.img {
				width: 81%;
				height: 410rpx;
			}
		}

		.button-group {
			margin: 46rpx auto;
			width: 312rpx;

			.btn {
				font-size: 44rpx;
				padding: 20rpx 0;
				border-radius: 50rpx;
				font-family: "PangMenZhengDao";
				color: #954600;
				background: linear-gradient(120deg, #FFE6B2, #FFC339);
				text-align: center;
			}

			.close {
				margin-top: 80rpx;
				display: flex;
				justify-content: center;
			}
		}
	}
</style>