MoeNovaClient/components/checkIn-popUp-window/checkIn-popUp-window.vue

<template>
	<uv-popup ref="popup" mode="bottom" bgColor="none">
		<view class="content-box">
			<image class="close" @click="close()" src="@/static/me/job/rw_icon_guanbi.png"></image>
			<view class="bottomCompatibility">
				<view class="left-title">
					<image src="@/static/me/job/rw_wenzi_03.png"></image>
					<view class="checkInDays">
						<view>已签到 {{ signInfo.signDay }} 天
							<view class="line"></view> 签到提醒
						</view>
						<!-- <switch class="sign-switch" color="" :checked="signNotify"   /> -->

						<!-- signNotify -->
						<uv-switch v-model="falg" size="30rpx" @change="toggleSignNotify" activeColor="#acf934"
							inactiveColor="#aecc87"></uv-switch>
					</view>
				</view>
				<view class="checkInContent">
					<view class="horizontal-box" v-for="(row, rowIndex) in signRewards" :key="rowIndex">
						<view v-for="(item, index) in row" :key="index" class="item-box" :class="[
							`item-box${item.id}`,
							item.type === 'one' ? 'item-box-one' : 'item-box-two',
							signInfo.signDay + 1 == item.day ? 'active' : '',
							signInfo.signDay >= item.day ? 'receivedIt' : '',
						]">
							<view class="mask"></view>
							<view class="days"> {{ item.day }}天 </view>
							<view class="content" v-if="item.id !== 7">
								<image :src="getImagePath(item.icon)"></image>
								<view class="tit one-omit">{{ item.title }}</view>
							</view>
							<view v-else class="itemBox7Content">
								<view class="content" v-for="(subItem, subIndex) in item.items" :key="subIndex">
									<image :src="getImagePath(subItem.icon)"></image>
									<view class="tit one-omit">{{ subItem.title }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="signInfo.signDay == 7" class="receiveBtn"  @click="confirmSign(3)">
					本周奖励全部领取
				</view>
				<view v-else-if="signInfo.isSigned" class="receiveBtn" @click="confirmSign(1)">
					今日已签到
				</view>
				<view v-else class="receiveBtn" @click="confirmSign(2)">
					签到领取奖励
				</view>
			</view>
		</view>
	</uv-popup>
</template>

<script>
import uvPopup from "@/uni_modules/uv-popup/components/uv-popup/uv-popup.vue";

export default {
	name: "checkInPopUpWindow",
	components: {
		uvPopup,
	},
	data() {
		return {
			falg: this.signNotify,
			signRewards: [
				[
					{
						id: 1,
						day: 1,
						type: "one",
						icon: "wd_icon_xingyuan.png",
						title: "海浪操作作秀",
					},
					{
						id: 2,
						day: 2,
						type: "one",
						icon: "wd_icon_xingyuan(1).png",
						title: "红玫瑰x3",
					},
					{
						id: 3,
						day: 3,
						type: "two",
						icon: "wd_icon_xingyuan.png",
						title: "海浪操作作秀",
					},
				],
				[
					{
						id: 4,
						day: 6,
						type: "two",
						icon: "wd_icon_xingyuan(4).png",
						title: "樱花x3",
					},
					{
						id: 5,
						day: 5,
						type: "one",
						icon: "wd_icon_xingyuan(5).png",
						title: "海浪头像框",
					},
					{
						id: 6,
						day: 4,
						type: "one",
						icon: "wd_icon_xingyuan(1).png",
						title: "红玫瑰x3",
					},
				],
				[
					{
						id: 7,
						day: 7,
						type: "one",
						items: [
							{ icon: "wd_icon_xingyuan(1).png", title: "红玫瑰x3" },
							{ icon: "wd_icon_xingyuan(4).png", title: "红玫瑰x3" },
							{ icon: "wd_icon_xingyuan.png", title: "红玫瑰x3" },
							{ icon: "wd_icon_xingyuan(1).png", title: "红玫瑰x3" },
						],
					},
				],
			],
		};
	},
	props: {
		signInfo: {
			type: Object,
			default: () => { },
		},
		checkInDays: {
			type: Number || String,
			default: 1,
		},
		signNotify: {
			type: Boolean,
			default: true,
		},
	},
	methods: {
		open() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		toggleSignNotify(e) {
			this.$emit("toggleSignNotify", e);
		},
		confirmSign(type) {
			this.$emit("confirmSign", type);
		},
		getImagePath(iconName) {
			return `../../static/me/job/${iconName}`;
		},
	},
};
</script>

<style scoped lang="scss">
/* 添加样式 */
.bottomCompatibility {
	height: --window-bottom;
	position: relative;
	left: 0;
	top: 0;
}

.content-box {
	min-height: 982rpx;
	background: url("@/static/me/job/rw_bg_tanchuang.png") top center / 100% auto no-repeat,
		linear-gradient(to bottom,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0) 50%,
			#f1ffe5 50%,
			#f1ffe5 100%);
	box-sizing: border-box;
	padding: 30rpx;
	padding-top: 136rpx;

	.close {
		position: absolute;
		top: 6rpx;
		right: 30rpx;
		width: 54rpx;
		height: 54rpx;
	}

	.left-title {
		width: 360rpx;
		height: 142rpx;
		padding-bottom: 32rpx;

		image {
			width: 376rpx;
			height: 58rpx;
		}

		.checkInDays {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #333333;

			>view {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #8f9c78;
				font-family: PingFang SC-Medium;

				.line {
					width: 2rpx;
					height: 30rpx;
					background: #d9d9d9;
					display: inline-block;
					margin: 0 12rpx;
				}
			}
		}
	}

	.checkInContent {
		width: 100%;
		height: 560rpx;

		.horizontal-box {
			width: 100%;
			height: 192rpx;
			display: flex;
			align-items: start;
			justify-content: space-between;
		}

		.item-box {
			display: inline-block;
			background: #000;
			position: relative;
			left: 0;
			top: 0;
			padding-top: 30rpx;
			padding-bottom: 12rpx;
			box-sizing: border-box;
			.mask{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%; 
				z-index: 10;
				display: none; 
			}
			&.receivedIt {
				.mask{
					display: block;
				}
			}
			.days {
				font-weight: 700;
				font-size: 18px;
				color: #8cd914;
				font-family: "Alimama ShuHeiTi-Bold";
				position: absolute;
				top: 8rpx;
				left: 18rpx;
			}

			.content {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				image {
					width: 76rpx;
					height: 76rpx;
				}

				.tit {
					max-width: 140rpx;
					display: inline-block;
					font-family: "PingFang SC-Medium";
					font-weight: 400;
					font-size: 28rpx;
					color: #2a3518;
					margin-top: 12rpx;
					text-align: center;
				}
			}

			.itemBox7Content {
				display: flex;
				align-items: center;
			}

			&.active {
				.days {
					color: #fff;
				}

				.content {
					.tit {
						color: #fff;
					}
				}
			}
		}

		.item-box-one {
			width: 226rpx;
			height: 172rpx;
		}

		.item-box-two {
			width: 212rpx;
			height: 188rpx;
		}

		.item-box1 {
			background: url("@/static/me/job/rw_bg_jiangli01_moren.png") center / 100% no-repeat;
			.mask{
				background: url("@/static/me/job/rw_bg_jiangli01_zhezhao.png") center / 100% no-repeat;
			}

			&.active {
				background: url("@/static/me/job/rw_bg_jiangli01_dianji.png") center / 100% no-repeat;
				transform: scale(1.07);
			} 
		}

		.item-box2 {
			background: url("@/static/me/job/rw_bg_jiangli02_moren.png") center / 100% no-repeat;
			.mask{
				background: url("@/static/me/job/rw_bg_jiangli02_zhezhao.png") center / 100% no-repeat;
			}


			&.active {
				background: url("@/static/me/job/rw_bg_jiangli02_dianji.png") center / 100% no-repeat;
				transform: scale(1.07);
			}
		}

		.item-box3 {
			background: url("@/static/me/job/rw_bg_jiangli03_moren.png") center / 100% no-repeat;
			.mask{
				background: url("@/static/me/job/rw_bg_jiangli03_zhezhao.png") center / 100% no-repeat;
			}


			&.active {
				background: url("@/static/me/job/rw_bg_jiangli03_dianji.png") center / 100% no-repeat;
				transform: scale(1.07);
			}
		}

		.item-box4 {
			background: url("@/static/me/job/rw_bg_jiangli04_moren.png") center / 100% no-repeat;
			.mask{
				background: url("@/static/me/job/rw_bg_jiangli04_zhezhao.png") center / 100% no-repeat;
			}


			&.active {
				background: url("@/static/me/job/rw_bg_jiangli04_dianji.png") center / 100% no-repeat;
				transform: scale(1.07);
			}
		}

		.item-box5 {
			background: url("@/static/me/job/rw_bg_jiangli05_moren.png") center / 100% no-repeat;
			.mask{
				background: url("@/static/me/job/rw_bg_jiangli05_zhezhao.png") center / 100% no-repeat;
			}


			&.active {
				background: url("@/static/me/job/rw_bg_jiangli05_dianji.png") center / 100% no-repeat;
				transform: scale(1.07);
			}
		}

		.item-box6 {
			background: url("@/static/me/job/rw_bg_jiangli06_moren.png") center / 100% no-repeat;
			.mask{
				background: url("@/static/me/job/rw_bg_jiangli06_zhezhao.png") center / 100% no-repeat;
			}


			&.active {
				background: url("@/static/me/job/rw_bg_jiangli06_dianji.png") center / 100% no-repeat;
				transform: scale(1.07);
			}
		}

		.item-box7 {
			width: 100%;
			.mask{
				background: url("@/static/me/job/rw_bg_jiangli07_zhezhao.png") center / 100% no-repeat;
			}

			height: 172rpx;
			background: url("@/static/me/job/rw_bg_jiangli07_moren.png") center / 100% no-repeat;
			display: flex;
			align-items: center;
			justify-content: center;

			.itemBox7Content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 540rpx;
			}

			.tit {
				color: #4f3712;
				font-size: 28rpx;
				width: 130rpx;
			}

			&.active {
				background: url("@/static/me/job/rw_bg_jiangli07_dianji.png") center / 100% no-repeat;
				transform: scale(1.01);

				.tit {
					color: #fff;
				}
			}
		}
	}

	.receiveBtn {
		background: #acf934;
		border-radius: 126rpx;
		padding: 18rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 30rpx;
	}

	.sign-switch {
		transform: scale(0.6);
	}
}
</style>