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>换一换</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 @click="handleCancel">取消</view>
				<view class="send" @click="handleSend">发送</view>
			</view>
		</view>
	</up-popup>
	<!-- 祝福成功弹窗 -->
	<up-popup :show="sucessPopup" mode="center" @close="handleCancelSucess" bgColor="transparent">
		<view class="sucess-popup" @click="handleCancelSucess">
			<view class="sucess-bg">
				<image class="img" :src="`${config.BASIC_IMG}img/subTreePage/blessing-sucess.png`"></image>
			</view>
			<view class="button-group" @click="handlePage">
				<view class="btn">开心收下</view>
				<up-icon class="close" name="close-circle-fill" size="30" color="rgba(255, 255, 255, 0.7)"></up-icon>
			</view>
		</view>
	</up-popup>
</template>

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

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

	const handlePage = () => {
		// if (userInfo.value.tel) {
		// 	router.push('/guard_tree')
		// } else {
		// 	router.push('/lj_home')
		// }
	}


	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 = () => {
		list.value = [{
				id: 1,
				clockinText: '晨曦微露，阳光洒满大地'
			},
			{
				id: 2,
				clockinText: '新的一天，新的挑战，新的机会'
			},
			{
				id: 3,
				clockinText: '记住，每一次挫折都是成功的垫脚石'
			},
			{
				id: 4,
				clockinText: '道阻且长，行则将至，行而不辍，未来可期。'
			},
			{
				id: 5,
				clockinText: '每日数据的更替，是日积月累的结果'
			},
			{
				id: 6,
				clockinText: '不必在意他人目光与期待'
			}
		]
		// VE_API.guard_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 handleSend = () => {
		const params = {
			farmBuyId: props.farmBuyId,
			clockinType: 3,
			msg: message.value,
		};
		handleCancel();
		sucessPopup.value = true;
		// VE_API.guard_tree.clockin(params).then((res) => {
		// 	if (res.code === 0) {
		// 		handleCancel();
		// 		sucessPopup.value = true;
		// 	}
		// });
	};

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

	watch(
		() => props.show,
		() => {
			showPopup.value = true;
		}
	);
</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;

			view {
				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;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);

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

			.img {
				width: 82%;
				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;
				justify-content: center;
			}
		}
	}
	
</style>