VUE 日历签到

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