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>已签到 1 天 <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">
						<view class="item-box item-box1 item-box-one" :class="signInfo.signDay >= 1 ? 'active' : ''">
							<view class="days">
								1天
							</view>
							<view class="content">
								<image src="@/static/me/job/wd_icon_xingyuan.png"></image>
								<view class="tit one-omit">海浪操作作秀</view>
							</view>
						</view>
						<view class="item-box item-box2 item-box-one" :class="signInfo.signDay >= 2 ? 'active' : ''">
							<view class="days">
								2天
							</view>
							<view class="content">
								<image src="@/static/me/job/wd_icon_xingyuan(1).png"></image>
								<view class="tit one-omit">红玫瑰x3</view>
							</view>
						</view>
						<view class="item-box item-box3 item-box-two" :class="signInfo.signDay >= 3 ? 'active' : ''">
							<view class="days">
								3天
							</view>
							<view class="content">
								<image src="@/static/me/job/wd_icon_xingyuan.png"></image>
								<view class="tit one-omit">海浪操作作秀</view>
							</view>
						</view>
					</view>
					<view class="horizontal-box">
						<view class="item-box item-box4 item-box-two" :class="signInfo.signDay >= 6 ? 'active' : ''">
							<view class="days">
								6天
							</view>
							<view class="content">
								<image src="@/static/me/job/wd_icon_xingyuan(4).png"></image>
								<view class="tit one-omit">樱花x3</view>
							</view>
						</view>
						<view class="item-box item-box5 item-box-one" :class="signInfo.signDay >= 5 ? 'active' : ''">
							<view class="days">
								5天
							</view>
							<view class="content">
								<image src="@/static/me/job/wd_icon_xingyuan(5).png"></image>
								<view class="tit one-omit">海浪头像框</view>
							</view>
						</view>
						<view class="item-box item-box6 item-box-one" :class="signInfo.signDay >= 4 ? 'active' : ''">
							<view class="days">
								4天
							</view>
							<view class="content">
								<image src="@/static/me/job/wd_icon_xingyuan(1).png"></image>
								<view class="tit one-omit">红玫瑰x3</view>
							</view>
						</view>
					</view>
					<view class="item-box item-box7" :class="signInfo.signDay >= 7 ? 'active' : ''">
						<view class="days">
							7天
						</view>
						<view class="itemBox7Content">
							<view class="content">
								<image src="@/static/me/job/wd_icon_xingyuan(1).png"></image>
								<view class="tit one-omit">红玫瑰x3</view>
							</view>
							<view class="content">
								<image src="@/static/me/job/wd_icon_xingyuan(4).png"></image>
								<view class="tit one-omit">红玫瑰x3</view>
							</view>
							<view class="content">
								<image src="@/static/me/job/wd_icon_xingyuan.png"></image>
								<view class="tit one-omit">红玫瑰x3</view>
							</view>
							<view class="content">
								<image src="@/static/me/job/wd_icon_xingyuan(1).png"></image>
								<view class="tit one-omit">红玫瑰x3</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="signInfo.isSigned " class="receiveBtn" @click="confirmSign()">
					今日已签到
				</view>
				<view v-else-if="!signInfo.isSigned " class="receiveBtn" @click="confirmSign()">
					签到领取奖励
				</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	
		}
	},
	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(){
			this.$emit("confirmSign")
		}
	}
}
</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;

			.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;

			&.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;

			&.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;

			&.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;

			&.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;

			&.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;

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


		.item-box7 {
			width: 100%;
			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>