ds_mobile_app/mobile/standard/signIn/signIn.vue

<template>
	<view>
		<block v-if="!activiState">
			<view class="main_content1" :style="{backgroundImage:'url('+img_url+'signIn/sign_bg.png)'}">
				<view class="top_bar">
					<view class="top_header">
						<view class="top_header_left" @click="goBack">
							<image :src="img_url + 'signIn/to_back.png'" mode=""></image>
						</view>
						<view class="top_header_cen">签到中心</view>
						<view class="top_white_space"></view>
					</view>
				</view>
				<view class="date_banner">
					<view class="b_day" :style="{backgroundImage:'url('+img_url+'signIn/date_bg.png)'}">{{bigDay}}</view>
					<view class="s_day_time">
						<view class="s_b_top">{{getWeek}}</view>
						<view class="s_date">{{month}}/{{year}}</view>
						<view class="s_sign">{{signInfo.isSign==2?'今日已签到':'今日未签到'}}</view>
					</view>
					<view class="s_sign_tip">
						<image :src="img_url+'signIn/qiandao.png'" mode=""></image>
						<text>{{signInfo.isSign==2?'已签到':'未签到'}}</text>
					</view>
				</view>
				<view class="sign_record">
					<view class="sign_integral">
						<view class="cur_int">目前积分<text>{{my_points}}</text></view>
						<view class="int_tip">连续签到7天可享受双倍积分+优惠券双重好礼</view>
					</view>
					
					<view class="sign_proc">
						<view class="bub_box">+5积分</view>
						<view class="proc_bar_bg">
							<view class="proc_bar"></view>
						</view>
						<view class="sign_days">
							<text v-for="item in [1,2,3,4,5,6,7]">{{item}}天</text>
						</view>
					</view>
					
					<view class="sign_but_con">
						<view class="sign_but">已连续签到6天 积分+5</view>
					</view>
				</view>
				
				<view class="mis_int">
					<view class="mis_int_title">做任务 赚积分</view>
					<view class="mis_two_con">
						<view class="con_item">
							<view class="text_con">
								<text>限时抽奖</text>
								<text>每日惊喜不断</text>
							</view>
							<view class="sign_but">
								<image :src="img_url+'signIn/sign_but1.png'" mode=""></image>
							</view>
							<view class="img_con">
								<image :src="img_url+'signIn/sign_img1.png'" mode=""></image>
							</view>
						</view>
						<view class="con_item">
							<view class="text_con">
								<text>购物赚积分</text>
								<text>每次购物都是赚钱</text>
							</view>
							<view class="sign_but">
								<image :src="img_url+'signIn/sign_but1.png'" mode=""></image>
							</view>
							<view class="img_con">
								<image :src="img_url+'signIn/sign_img2.png'" mode=""></image>
							</view>
						</view>
					</view>
					<view class="mis_b_con">
						<!-- <image :src="img_url+'signIn/sign_banner.png'" mode="aspectFit"></image> -->
						<view class="" :style="{backgroundImage:'url('+img_url+'signIn/sign_banner.png)'}"></view>
					</view>
				</view>
				
				<view class="int_mis">
					<view class="mis_int_title">积分任务</view>
					<view class="int_mis_con">
						<view class="int_mis_con_item">
							<view class="imc_item_left">
								<image :src="img_url+'signIn/sign_share.png'" mode=""></image>
								<view class="imc_item_left_text">
									<text>分享活动，邀请好友获取补签机会</text>
									<text>分享活动给好友，可获得一次补签</text>
								</view>
							</view>
							<view class="imc_item_right">分享</view>
						</view>
					</view>
					<view class="int_mis_con">
						<view class="int_mis_con_item">
							<view class="imc_item_left">
								<image :src="img_url+'signIn/sign_shopping.png'" mode=""></image>
								<view class="imc_item_left_text">
									<text>购物得积分，下单支付可赚取积分</text>
									<text>好友参与活动您可获得5积分</text>
								</view>
							</view>
							<view class="imc_item_right">去购物</view>
						</view>
					</view>
					<view class="int_mis_con">
						<view class="int_mis_con_item">
							<view class="imc_item_left">
								<image :src="img_url+'signIn/sign_up.png'" mode=""></image>
								<view class="imc_item_left_text">
									<text>会员升级，会员升级可得20积分</text>
									<text>会员升级获得10积分</text>
								</view>
							</view>
							<view class="imc_item_right" v-if="true">去升级</view>
							<view class="imc_item_right upAl" v-if="false">已升级</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="activiState">
			<signAcCom></signAcCom>
		</block>
	</view>
</template>

<script>
	import signAcCom from './signAcCom.vue'
	export default{
		components:{
			signAcCom
		},
		data(){
			return{
				img_url:getApp().globalData.imgUrl,
				activiState:true,
				bigDay:'00',
				month:'00',
				year:'0000',
				signInfo:{},
				my_points:0
			}
		},
		onLoad() {
			// this.initData()
		},
		computed:{
			getWeek(){
				let now = new Date()
				let arr = ['周日','周一','周二','周三','周四','周五','周六']
				return arr[now.getDay()]
			}
		},
		methods:{
			
			initData(){
				this.getInfo()
				this.getNow()
				this.getUserPoints()
			},
			getInfo(){
				let params = {
					url:'/v3/promotion/front/sign/activity/detail'
				}
				this.$request(params).then(res=>{
					if(res.state==200){
						this.signInfo = res.data
					}
				})
			},
			getNow(){
				let now= new Date()
				this.bigDay = now.getDate().toString().length==2?now.getDate():'0'+now.getDate()
				this.month = (now.getMonth() + 1).toString().length==2?now.getMonth() + 1: '0' + (now.getMonth() + 1)
				this.year = now.getFullYear()
				console.log(this.bigDay,this.month,this.year)
				
			},
			getUserPoints(){
				let param = {}
				param.url = 'v3/member/front/integralLog/getMemberIntegral'
				param.method = 'GET'
				this.$request(param).then(res=>{
					if(res.state == 200){
						this.my_points = res.data.memberIntegral
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.main_content1{
		height: 100%;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 750rpx 492rpx;
		padding-bottom: 26rpx;
		.date_banner{
			position: relative;
			margin-top: 50rpx;
			padding: 0 20rpx;
			display: flex;
			.b_day{
				width: 220rpx;
				height: 160rpx;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: normal;
				font-size: 110rpx;
			}
			.s_day_time{
				margin-left: 20rpx;
				.s_b_top{
					font-size: 50rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #FFFFFF;
				}
				.s_date,.s_sign{
					font-size: 30rpx;
					font-family: PingFang;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 46rpx;
					height: 46rpx;
				}
				.s_date{
					margin-top: 10rpx;
				}
			}
			.s_sign_tip{
				position: absolute;
				top: 0;
				right: 0;
				width: 179rpx;
				height: 59rpx;
				background-color: #fff;
				border-bottom-left-radius: 30rpx;
				border-top-left-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				text{
					font-size: 30rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #FF8118;
				}
				image{
					width:37rpx;
					height:34rpx;
					margin-right: 10rpx;
				}
			}
		}
	
		.sign_record{
			width: 355px;
			box-shadow: 0px 5rpx 26rpx 0px rgba(255, 130, 25, 0.18);
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 17px 10px 20px;
			margin: 20rpx auto;
			position: relative;
			.sign_integral{
				text-align: center;
				// width: 100%;
				.cur_int{
					font-size: 36rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #2D2D2D;
					text{
						color: #FF8118;
					}
				}
				.int_tip{
					font-size: 26rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #000000;
					line-height: 68rpx;
					opacity: 0.2;
					text-shadow: 0px 2rpx 4rpx rgba(255, 84, 0, 0.2);
					text-align: center;
				}
			}
			.sign_proc{
				margin-top: 50rpx;
				.bub_box{
					position: relative;
					// top:100px;
					// left:100rpx;
					display: inline-block;
					padding: 4rpx 12rpx;
					background: linear-gradient(62deg, #FF8F2A, #FFBE67);
					border-radius: 16rpx;
					font-size: 24rpx;
					color: #fff;
					&:after{
						position: absolute;
						content: "";
						width: 0;
						height: 0;
						top: 100%;
						left: 40%;
						border-top: 6rpx solid  #ffa638;
						border-right: 6rpx solid transparent;
						border-left: 6rpx solid transparent;
					}
	            }
				.sign_days{
					// width: 624rpx;
					font-size: 24rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #999999;
					opacity: 0.8;
					margin: 0 auto;
					display: flex;
					justify-content: space-between;
				}
			
			}
			.proc_bar_bg{
				
				// width: 624rpx;
				height: 20rpx;
				background: #FFB85F;
				border-radius: 10rpx;
				margin: 26rpx auto;
				.proc_bar{
					border-radius: 10rpx;
					background-size: 30rpx 30rpx;
					height: 20rpx;
					background-color: #FF791B;
					background-image: linear-gradient(-45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent);
				}
			}
			.sign_but_con{
				margin-top: 52rpx;
				display: flex;
				justify-content: center;
				.sign_but{
					width: 580rpx;
					height: 80rpx;
					border: 4rpx solid #FF7C19;
					box-shadow: 0px 6rpx 30rpx 0px rgba(255, 130, 25, 0.18);
					border-radius: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					font-size: 34rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FF7D15;
					
				}
			}
		}
	
		.mis_int{
			padding: 20rpx;
			.mis_two_con{
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				.con_item{
					position: relative;
					padding: 46rpx;
					box-shadow: 0px 10rpx 48rpx 4rpx rgba(86, 86, 86, 0.08);
					border-radius: 32rpx;
					.text_con{
						text{
							display: block;
							&:first-child{
								font-size: 34rpx;
								font-family: PingFang;
								font-weight: bold;
								color: #666666;
							}
							&:last-child{
								margin-top: 14rpx;
								font-size: 23rpx;
								font-family: PingFang;
								font-weight: 500;
								color: #B2B2B2;
							}
						}
					}
					.img_con{
						margin-top: 42rpx;
						width:254rpx;
						height:138rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.sign_but{
						position: absolute;
						top: 46rpx;
						right: 46rpx;
						image{
							width: 43rpx;
							height: 43rpx;
						}
					}
				}
			}
			.mis_b_con{
				margin-top: 36rpx;
				view{
					width: 100%;
					height: 180rpx;
					background-repeat:no-repeat;
					background-size: contain;
					background-position: center center;
				}
			}
		}
		.mis_int_title{
			padding-left: 14rpx;
			font-size: 38rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #2D2D2D;
			border-left: 6rpx solid #FF7C19;
		}
		.int_mis{
			margin-top: 16rpx;
			padding: 20rpx;
			.int_mis_con{
				margin-top: 20rpx;
				border-bottom: 2rpx solid #F5F5F5;
				&:last-child{
					border-bottom: none;
				}
				.int_mis_con_item{
					display: flex;
				    padding: 20rpx 0;
					justify-content: space-between;
					align-items: center;
					.imc_item_left{
						display: flex;
						align-items: center;
						image{
							width: 80rpx;
							height: 80rpx;
						}
						.imc_item_left_text{
							margin-left: 20rpx;
							height: 64rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							text{
								&:first-child{
									font-size: 26rpx;
									font-family: PingFang;
									font-weight: 500;
									color: #2D2D2D;
								}
								&:last-child{
									height: 25rpx;
									font-size: 24rpx;
									font-family: PingFang;
									font-weight: 500;
									color: #999999;
								}
							}
						}
					}
					.imc_item_right{
						width: 124rpx;
						height: 50rpx;
						background-color: #FF6D12;
						box-shadow: 0px 6rpx 14rpx 0px rgba(255, 127, 37, 0.35);
						border-radius: 25rpx;
						color: #fff;
						text-align: center;
						font-size: 26rpx;
						line-height: 50rpx;
						&.upAl{
							background: #BBBBBB !important;
						}
					}
				}
			}
		}
	}
	.top_bar {
		width: 750rpx;
		// height: 178rpx;
		padding-top: 42rpx;
		/* #ifdef APP-PLUS||MP-WEIXIN */
		padding-top: calc(var(--status-bar-height) + 42rpx);
		/* #endif */
		padding-right: 20rpx;
		width: 750rpx;
		z-index: 50;
	
		.top_header {
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.top_header_left {
				padding-left: 20rpx;
	
				image {
					width: 17rpx;
					height: 29rpx;
				}
			}
	
			.top_header_cen {
				margin: 0 50rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
			}
	
			.top_white_space {
				width: 30rpx;
				height: 29rpx;
				padding-right: 20rpx;
			}
		}
	
		.top_category {
			margin-top: 40rpx;
	
			.cate_wrap {
				display: -webkit-box;
				align-items: center;
				overflow-x: scroll;
	
				.category_item {
					color: #FFFFFF;
					padding: 0 20rpx;
					margin-left: 20rpx;
					height: 54rpx;
	
					&.boWhite {
						border-bottom: 4rpx solid #fff;
					}
				}
			}
		}
	}
	.date_banner{
		
	}
</style>