siyu_app/components/signPop/signPop.vue

<template>
	<adMask :show="showAd"  @close="close">
		 <view class="signbox">
			 <view class="integral_img">
				 <image src="@/static/images/ad/integral_img.png" mode="heightFix"></image>
			 </view>
			 <view class="signbox-body">
				 <view class="signbox-head">
					 <image class="signbox-topbg" src="@/static/images/ad/Frame.png" mode="widthFix"></image>
					 <view class="signbox-headcon">
						 <view>
							 <text>连续签到领</text><text style="color: #FFFC76;">芳华币</text>
						 </view>
						 <view class="signbox-signnum">{{userSign.signNum==0?'您还没有签到':'已签到'+userSign.signNum+'天'}}</view>
					 </view>
				 </view>
				 
				<view class="signbox-con">
					<view class="signbox-item" v-for="(item,index) in userSign.sign"  :key="index">
						<block v-if="index<6" >
							<view  class="imgbox">
								<view v-if="index + 1 <= userSign.signNum" class="signdaybox">
									<view class="signday">+{{item.signNum}}</view>
									<image src="@/static/images/integral/sign_in_on_icon.png" mode="aspectFill"></image>
								</view>
								<view v-else class="integral-box">
									<view class="integral-box-line">
										<view class="integral-box-con">
											+{{item.signNum}}
										</view>
									</view>
								</view>
							</view>
							<view  :style="{color: index + 1 <= userSign.signNum ? '#FF5C03':''}">第{{index + 1}}天</view>
						</block>
						<block v-else>
							<view class="imgbox">
								<image class="imgbox" src="@/static/images/integral/gift_img.png" mode="aspectFill"></image>
							</view>
							<view :style="{color: 7 <= userSign.signNum ? '#FF5C03':''}">礼包</view>
						</block>
						  
					</view>
				</view>
				
				 <view class="signbox-footer">
				 	<button class="signbox-footer-btn" @click="goToSign()" :loading="signLoading" :disabled="signLoading">立即签到</button>
				 </view>
			 </view>
			 
			 <view class="adbox-close">
			 	<image src="@/static/images/ad/close_icon.png" @click="close"></image>
			 </view>
			 
		 </view>
	</adMask>
</template>

<script>
	
	export default {
        props: {
			userSign: {
				type: Object,
				default: function(){
					return {}
				}
			}
        },
		data() {
			return {
				showAd: false,
				signLoading: false,
				signNum:0,
				integral:0,
				sign:[],
				user:null,
				isDaySign:false,
			}
		},
		
		methods: {
			open() {
				this.showAd = true
			},
			close() {
				this.showAd = false
			},
			goToSign(){
				if(this.$isLogin()){
					uni.navigateTo({
						url: '/pages/user/integral/points'
					});
					this.close();
				}
				else{
					this.$showLoginPage();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.adbox-close {
		display: inline-block;
		margin-top: 68rpx;
		image {
			width: 64rpx;
			height: 64rpx;
		}
	}
	.signbox {
		width: 100%;
		@include u-flex(column, center, center);
		.integral_img {
			width: 322rpx;
			height: 304rpx;
			position: relative;
			image {
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 6;
				left: 46rpx;
				bottom: 0;
			}
		}
		&-body {
			margin-top: -130rpx;
			width: 662rpx;
			// height: 608rpx;
			padding-bottom: 50rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			position: relative;
			overflow: hidden;
		}
		&-head {
			width: 662rpx;
			position: relative;
		}
		&-topbg {
			width: 662rpx;
			height: auto;
		}
		&-headcon {
			width: 100%;
			position: absolute;
			bottom: 36rpx;
			left: 50%;
			transform: translateX(-50%);
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 47rpx;
			text-shadow: 0px 4px 8px rgba(255,89,2,0.8);
			text-align: center;
		}
		&-signnum {
			min-width: 186rpx;
			min-height: 48rpx;
			margin-top: 18rpx;
			padding: 0 24rpx;
			display: inline-block;
			box-sizing: border-box;
			line-height: 48rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #FF5C03;
		}
		&-con {
			padding: 44rpx 26rpx;
			box-sizing: border-box;
			@include u-flex(row, center, space-between);
			font-weight: 400;
			font-size: 24rpx;
			color: #757575;
		}
		&-item {
			text-align: center;
			.imgbox {
				flex-shrink: 0;
				height: 72rpx;
				width: 72rpx;
				margin-bottom: 4rpx;
				@include u-flex(row, center, center);
			}
			.signdaybox {
				position: relative;
				image {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}
			.signday {
				flex-shrink: 0;
				width: 72rpx;
				height: 72rpx;
				@include u-flex(row, center, center);
				box-sizing: border-box;
				background: #FCF0E7;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border: 2rpx dashed rgba(255,92,3,0.5);
				border-radius: 50%;
				font-weight: 500;
				font-size: 22rpx;
				color: #FF5C03;
			}
			.integral-box {
				width: 72rpx;
				height: 72rpx;
				background: linear-gradient( 180deg, #FBE69B 0%, #F2A54E 100%);
				border-radius: 50%;
				@include u-flex(row, center, center);
				&-line {
					width: 64rpx;
					height: 64rpx;
					@include u-flex(row, center, center);
					font-weight: 500;
					font-size: 22rpx;
					color: #FFFFFF;
					border-radius: 50%;
					position: relative;
					background: linear-gradient(180deg, rgba(241, 161, 75, 1), rgba(249, 225, 137, 1));
				}
				&-con {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					@include u-flex(row, center, center);
					background: linear-gradient( 180deg, #FFCD88 0%, #F4B55C 47%, #F49C49 100%);
				}
			}
		}
		&-footer {
			&-btn {
				width: 520rpx;
				min-height: 88rpx;
				line-height: 88rpx;
				background: linear-gradient( 90deg, #FF5701 0%, #FFB501 100%);
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(238,124,80,0.2);
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				&::after {
					border: none;
				}
			}
		}
	}
</style>