VUE 日历签到
<style lang="scss">
@import "../assets/css/px2rem.scss";
.sign-box {
width: %;
min-height: %;
background: #f5f5f5;
position: relative;
.top-box {
padding: px2rem() px2rem() px2rem();
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();
img {
width: px2rem();
height: px2rem();
display: block;
}
}
.nickname {
p:first-child {
font-size: px2rem();
}
p:last-child {
font-size: px2rem();
span {
color: #f60;
}
}
}
}
.sign-btn {
font-size: px2rem();
border: ;
background: rgba(, , , 0.4);
height: px2rem();
line-height: px2rem();
width: px2rem();
border-radius: px2rem();
color: #fff;
}
.integral-box {
font-size: px2rem();
color: #fff;
display: flex;
justify-content: space-around;
margin-top: px2rem();
font-size: px2rem();
.sign-price {
flex: %;
p {
text-align: center;
height: px2rem();
line-height: px2rem();
img {
width: px2rem();
margin-right: px2rem();
vertical-align: sub;
}
}
}
}
.calender {
background: #fff;
width: %;
border-radius: px2rem();
box-shadow: px2rem() px2rem() rgba($color: #, $alpha: 0.2);
.ui-datepicker-wrapper {
width: %;
font-size: px2rem();
color: #;
box-shadow: px2rem() px2rem() px2rem() px2rem() rgba(,,,.);
&.ui-datepicker-wrapper-show {
display: block;
}
.ui-datepicker-header {
height: px2rem();
line-height: px2rem();
text-align: center;
border-bottom: px2rem() solid #eaeaea;
font-weight: bold;
.ui-datepicker-curr-month {
font-size: px2rem();
}
.ui-datepicker-btn {
height: px2rem();
width: px2rem();
}
.ui-datepicker-prev {
background: url(../assets/img/arrow-l.png) no-repeat center center;
background-size: px2rem() auto;
float: left;
}
.ui-datepicker-next {
background: url(../assets/img/arrow-r.png) no-repeat center center;
background-size: px2rem() auto;
float: right;
}
}
.ui-datepicker-body {
.datepicker-weekday {
.weekday-head {
display: flex;
justify-content: space-around;
border-bottom: px2rem() solid #;
li {
height: px2rem();
line-height: px2rem();
font-size: px2rem();
font-weight: bold;
}
}
.weekday-days {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
li {
flex: 14.2%;
text-align: center;
height: px2rem();
line-height: px2rem();
font-size: px2rem();
&.active {
background: url(../assets/img/right-mark.png) no-repeat center center;
background-size: % 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=""> 小扳手:</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()+,
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 < ? '' + s : s;
},
getNextMonth(mon){
this.setMonth = this.setMonth + ;
this.getSignData(this.setMonth,this.setYear,this.setMonth,mon)
//this.getMonthData(this.setYear,this.setMonth)
},
getPrevMonth(mon){
this.setMonth = this.setMonth - ;
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()+;
}
var firstDay = new Date(year,month - , );
var firstDayWeekDay = firstDay.getDay();
if(firstDayWeekDay === ) firstDayWeekDay = ; year = firstDay.getFullYear();
month = firstDay.getMonth() + ; var lastDayOfLastMonth = new Date(year,month-,);
var lastDateOfLastMonth = lastDayOfLastMonth.getDate(); var preMonthDayCount = firstDayWeekDay - ; var lastDay = new Date(year,month,);
var lastDate = lastDay.getDate();
this.ret = [];
for (var i = ; i < ; i++) {
var date = i - preMonthDayCount;
var showDate = date;
var thisMonth = month;
var ifThisMonthDays = true; if (date <= ) {
//上一月
thisMonth = month - ;
showDate = lastDateOfLastMonth + date;
ifThisMonthDays = false;
} else if(date > lastDate){
//下一月
thisMonth = month + ;
showDate = showDate -lastDate;
ifThisMonthDays = false;
}
if (thisMonth === ) thisMonth = ;
if (thisMonth === ) thisMonth = ;
this.ret.push({
month: thisMonth,
date:date,
showDate: this.fillZero(showDate),
ifThisMonthDays: ifThisMonthDays
});
}
this.signMark.map((obj1,index1)=>{
var homologous1 = obj1.time.split(' ')[];
this.ret.map((obj2,index2)=>{
var mark1 = homologous1.split('-')[];
// 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 == ){
alert(response.msg)
if(mon == ){
this.setMonth = this.setMonth-;
} else {
this.setMonth = this.setMonth+;
}
//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>
VUE 日历签到的更多相关文章
- 使用 UICollectionView 实现日历签到功能
概述 在 App 中,日历通常与签到功能结合使用.是提高用户活跃度的一种方式,同时,签到数据中蕴含了丰富的极其有价值的信息.下面我们就来看看如何在 App 中实现日历签到功能. 效果图 ..... 思 ...
- 多功能版vue日历控件
下载地址:https://pan.baidu.com/s/1nvpx0tB5cIvvqHuApz_MpQ 之前写了一个简单的vue日历控件:https://www.cnblogs.com/mrzhu/ ...
- php+mysql+jquery日历签到
在网站开发过程中我们会经常用到签到功能来奖励用户积分,或者做一些其他活动.这次项目开发过程中做了日历签到,因为没有经验所有走了很多弯路,再次记录过程和步骤. 1.日历签到样式: 2.本次签到只记录本月 ...
- PHP实现日历签到,并实现累计积分功能
在网站开发过程中我们会经常用到签到功能来奖励用户积分,或者做一些其他活动.这次项目开发过程中做了日历签到,因为没有经验所有走了很多弯路,再次记录过程和步骤. 1.日历签到样式:使用的是calendar ...
- jquery日历签到控件的实现
calendar.js var calUtil = { //当前日历显示的年份 showYear:2015, //当前日历显示的月份 showMonth:1, //当前日历显示的天数 showDays ...
- vue 日历组件只显示本月和下个月 -- 多选日期
效果就是上图 代码贴出 1.在components > calander > index.vue <template> <div class="page&quo ...
- Vue日历
Vue生成日历,根据返回值将日期标红 HTML: <h1>CSS 日历</h1> <div id="calendar"> <div cla ...
- vue日历/日程提醒/html5本地缓存
先上图 功能: 1.上拉日历折叠,展示周 2.左右滑动切换月 2.“今天”回到今天:“+”添加日程 3.localStorage存储日程 index,html <body> <div ...
- vue 日历组件
Github 上很多点击弹出日历选择某个时间的组件,却没有找到单纯展示日历并且能点击获取时间的组件 npm i vue-calendar-component --save cnpm i vue-cal ...
随机推荐
- Storm的wordCounter计数器详解
原文:http://www.maoxiangyi.cn/index.php/archives/362 拓扑 点击(此处)折叠或打开 package cn.jd.storm; import backty ...
- 使用IneliJ IDEA 2016将Java Web项目导出为War包
本文记录使用IDEA导出war包的过程以及碰到问题的解决办法 虽说现在改用IDEA进行开发了,但还是用eclipse打war包 -.囧 这样下去不是办法... 于是今天就试着使用IDEA进行打包. 项 ...
- [转]Marshaling a SAFEARRAY of Managed Structures by P/Invoke Part 6.
1. Introduction. 1.1 Starting from part 4 I have started to discuss how to interop marshal a managed ...
- Vue Vuex state mutations
Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vu ...
- Android学习笔记AutoCompleteTextView的使用
activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- web3部署智能合约碰到的一个奇怪问题
都是gasLimit惹的祸 解决一个奇怪问题Error: Number can only safely store up to 53 bits 原来好好的node endpointtest.js ,结 ...
- chkconfig的原理 和添加开机自启动的办法
当我们使用 chkconfig --list的时候 都会又 123456 这样的级别. 当某个级别是 on 他就会开机启动,当他是off 的时候他就不会开机自启动. 那么这是什么原因呢?他的 原理是 ...
- 十一、Node.js监听代码改动自动重启node插件supervisor
我们慢慢地发现,每次我们稍微改变js代码都需要重启服务才能在浏览器显示新的效果,很麻烦,这里我们可以通过npm命令安装supervisoror插件,安装方法如下 之前章节我们知道安装了nodejs就会 ...
- C# 根据论文 像素差异算法【个人实验还是比较好使的】
论文地址:http://www.docin.com/p-1081596986.html 具体代码: 我转YUV,再通过上面的论文的方式比较近. YVU 介绍:https://blog.csdn.net ...
- Eclipse设置自动生成的javadoc
1.点击 Window -> Preference -> Java -> Code Style -> Code Template ,在右边选择 Comments -> 相 ...