<style lang="scss">
@import "../assets/css/px2rem.scss";
.sign-box {
width: 100%;
min-height: 100%;
background: #f5f5f5;
position: relative;
.top-box {
padding: px2rem(40) px2rem(30) px2rem(0);
background: #4bc7c7;
}
.person-box {
display: flex;
justify-content: space-around;
align-items: center;
}
.sign-personInfor {
display: flex;
color: #fff;
align-items: center;
.headImg {
position: relative;
margin-right: px2rem(30);
img {
width: px2rem(140);
height: px2rem(140);
display: block;
}
}
.nickname {
p:first-child {
font-size: px2rem(34);
}
p:last-child {
font-size: px2rem(28);
span {
color: #f60;
}
}
}
}
.sign-btn {
font-size: px2rem(34);
border: 0;
background: rgba(0, 0, 0, 0.4);
height: px2rem(70);
line-height: px2rem(50);
width: px2rem(140);
border-radius: px2rem(14);
color: #fff;
}
.integral-box {
font-size: px2rem(30);
color: #fff;
display: flex;
justify-content: space-around;
margin-top: px2rem(20);
font-size: px2rem(34);
.sign-price {
flex: 0 0 40%;
p {
text-align: center;
height: px2rem(80);
line-height: px2rem(80);
img {
width: px2rem(40);
margin-right: px2rem(10);
vertical-align: sub;
}
}
}
}
.calender {
background: #fff;
width: 100%;
border-radius: px2rem(10);
box-shadow: 0 px2rem(4) px2rem(4) rgba($color: #000000, $alpha: 0.2);
.ui-datepicker-wrapper {
width: 100%;
font-size: px2rem(24);
color: #666;
box-shadow: px2rem(2) px2rem(2) px2rem(8) px2rem(2) rgba(128,128,128,.3);
&.ui-datepicker-wrapper-show {
display: block;
}
.ui-datepicker-header {
height: px2rem(100);
line-height: px2rem(100);
text-align: center;
border-bottom: px2rem(1) solid #eaeaea;
font-weight: bold;
.ui-datepicker-curr-month {
font-size: px2rem(30);
}
.ui-datepicker-btn {
height: px2rem(100);
width: px2rem(100);
}
.ui-datepicker-prev {
background: url(../assets/img/arrow-l.png) no-repeat center center;
background-size: px2rem(20) auto;
float: left;
}
.ui-datepicker-next {
background: url(../assets/img/arrow-r.png) no-repeat center center;
background-size: px2rem(20) auto;
float: right;
}
}
.ui-datepicker-body {
.datepicker-weekday {
.weekday-head {
display: flex;
justify-content: space-around;
border-bottom: px2rem(1) solid #777;
li {
height: px2rem(100);
line-height: px2rem(100);
font-size: px2rem(30);
font-weight: bold;
}
}
.weekday-days {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
li {
flex: 0 1 14.2%;
text-align: center;
height: px2rem(90);
line-height: px2rem(90);
font-size: px2rem(24);
&.active {
background: url(../assets/img/right-mark.png) no-repeat center center;
background-size: 50% auto;
}
&.ifDiabled {
color: #DDD;
visibility: hidden;
}
}
}
}
}
}
}
}
</style>
<template>
<div class="sign-box">
<div class="top-box">
<div class="person-box">
<div class="sign-personInfor">
<div class="headImg">
<img src="../assets/img/head-img.png" alt="">
</div>
<div class="nickname">
<p>我是大橙子</p>
<p>您连续签到：<span>7天</span></p>
</div>
</div>
<button class="sign-btn" @click="signIn">签到</button>
</div>
<div class="integral-box">
<div class="sign-price">
<p><img src="../assets/img/red-packet.png" alt="">红包：5.00</p>
</div>
<div class="sign-price">
<p><img src="../assets/img/banshou.png" alt=""> 小扳手：320</p>
</div>
</div>
</div>
<div class="calender">
<div class="ui-datepicker-wrapper ui-datepicker-wrapper-show">
<div class="ui-datepicker-header">
<a href="javascript:;" class="ui-datepicker-btn ui-datepicker-prev" @click="getPrevMonth(1)"></a>
<a href="javascript:;" class="ui-datepicker-btn ui-datepicker-next" @click="getNextMonth(2)"></a>
<span class="ui-datepicker-curr-month">{{thisMonthDays.year}}年{{thisMonthDays.month}}月</span>
</div>
<div class="ui-datepicker-body">
<div class="datepicker-weekday">
<ul class="weekday-head">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<!-- active -->
<ul class="weekday-days">
<li v-for="item in this.thisMonthDays.days" :data-date="thisMonthDays.year+'-'+thisMonthDays.month+'-'+item.showDate" :key="item.id" :class="{active: item.hasMark ==thisMonthDays.year+'-'+thisMonthDays.month+'-'+item.showDate,ifDiabled: !item.ifThisMonthDays}">
{{item.showDate}}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Hotcss from "hotcss";
import qs from "qs";
export default {
name: "signIn",
data: function() {
return {
ret: [],
thisMonthDays: {},
daysHtml: '',
setYear: new Date().getFullYear(),
setMonth: new Date().getMonth()+1,
uid: '',
signMark: []
};
},
created() {
this.login();
},
mounted: function() {
this.getMonthData(this.setYear,this.setMonth);
this.getSignData(this.setMonth,this.setYear,this.setMonth);
},
methods: {
login(){
this.axios.get('http://app.lanbanshou.com/mpdemo/login/translate',{
params: {
openid: 'oFX2IwUkoxBLEmk999HaPrxCB79c'
}
}).then((response)=> {
response = JSON.parse(response.data.obj);
console.log(response)
sessionStorage.setItem('uid',response.info.id)
this.uid = response.info.id;
}).catch((response)=>{
console.log(response);
})
},
signIn(){
this.axios.get('http://192.168.2.88:8080/mpdemo/qiandao/qiandao',{
params:{
uid: this.uid
}
}).then((response)=>{
console.log(response);
alert(response.data.obj)
}).catch((response)=>{
console.log(response);
})
},
fillZero(s) {
return s < 10 ? '0' + s : s;
},
getNextMonth(mon){
this.setMonth = this.setMonth + 1;
this.getSignData(this.setMonth,this.setYear,this.setMonth,mon)
//this.getMonthData(this.setYear,this.setMonth)
},
getPrevMonth(mon){
this.setMonth = this.setMonth - 1;
this.getSignData(this.setMonth,this.setYear,this.setMonth,mon)
// this.getMonthData(this.setYear,this.setMonth)
},
getMonthData(year,month){
if(!year || !month){
var today = new Date();
year = today.getFullYear();
month = today.getMonth()+1;
}
var firstDay = new Date(year,month - 1, 1);
var firstDayWeekDay = firstDay.getDay();
if(firstDayWeekDay === 0) firstDayWeekDay = 7;
year = firstDay.getFullYear();
month = firstDay.getMonth() + 1;
var lastDayOfLastMonth = new Date(year,month-1,0);
var lastDateOfLastMonth = lastDayOfLastMonth.getDate();
var preMonthDayCount = firstDayWeekDay - 1;
var lastDay = new Date(year,month,0);
var lastDate = lastDay.getDate();
this.ret = [];
for (var i = 0; i < 42; i++) {
var date = i - preMonthDayCount;
var showDate = date;
var thisMonth = month;
var ifThisMonthDays = true;
if (date <= 0) {
//上一月
thisMonth = month - 1;
showDate = lastDateOfLastMonth + date;
ifThisMonthDays = false;
} else if(date > lastDate){
//下一月
thisMonth = month + 1;
showDate = showDate -lastDate;
ifThisMonthDays = false;
}
if (thisMonth === 0) thisMonth = 12;
if (thisMonth === 13) thisMonth = 1;
this.ret.push({
month: thisMonth,
date:date,
showDate: this.fillZero(showDate),
ifThisMonthDays: ifThisMonthDays
});
}
this.signMark.map((obj1,index1)=>{
var homologous1 = obj1.time.split(' ')[0];
this.ret.map((obj2,index2)=>{
var mark1 = homologous1.split('-')[2];
// console.log(mark1);
if(obj2.showDate == mark1){
obj2.hasMark = homologous1;
}
})
})
this.thisMonthDays = {
year: year,
month: this.fillZero(month),
days: this.ret
}
// return {
// year: year,
// month: month,
// days: this.ret
// };
console.log({
year: year,
month: this.fillZero(month),
days: this.ret
});
},
getSignData(defaultDate,changeYear,changeMonth,mon){
console.log(defaultDate,changeYear,changeMonth)
this.axios.get('http://192.168.2.88:8080/mpdemo/qiandao/sign',{
params : {
uid: sessionStorage.getItem('uid'),
time: defaultDate
}
}).then((response)=>{
response = JSON.parse(response.data.obj);
if(response.code == 404){
alert(response.msg)
if(mon == 2){
this.setMonth = this.setMonth-1;
} else {
this.setMonth = this.setMonth+1;
}
//this.setMonth = new Date().getMonth()+1;
return;
}
this.signMark = response.list;
console.log(this.signMark)
this.getMonthData(changeYear,changeMonth);
}).catch((response)=>{
console.log(response)
})
},
}
};
</script>
