签到
Posted 赚钱狂魔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了签到相关的知识，希望对你有一定的参考价值。
<template>
<a-spin :spinning="spinning">
<div class="logo-top">
<!-- 签到 -->
<img class="img" src="../assets/images/cj2.png" alt="" />
<div class="nav-title">封神日历</div>
<div class="calendar">
<a-calendar :fullscreen="false">
<ul slot="dateCellRender" slot-scope="value" class="events">
<li v-for="item in getListData(value)" :key="item.content">
<a-badge
style="color: red; font-size: 0.5rem"
:class="item.content"
/>
</li>
</ul>
</a-calendar>
<p>
<span
v-show="nosameResult"
@click="postsameIn(wxuser)"
style="margin-right: 0.3rem;"
>今日签到</span
><span style="margin-right: 0.3rem;" v-show="sameResult">已签到</span>
<span @click="postRepairsign(wxuser)">补签</span>
</p>
</div>
</div>
</a-spin>
</template>
<script>
let Months = new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : "0" + (new Date().getMonth() + 1)
let timeday = new Date().getFullYear() + "-" + Months
let timedays = timeday + \'-\' + new Date().getDate()
import http from "../services/http-service";
export default {
name: "HelloWorld",
props: {},
data() {
return {
num: 0,
visible: false,
timeday,
timedays,
spinning: true,
wxuser: window.localStorage.getItem("wxUser"),
arr: [],
// e: new Date(),
// topic: [],
value: new Date(),
sameResult: false,
nosameResult: true,
};
},
mounted() {
this.postsameDay(this.wxuser);
},
created() {},
methods: {
// 补签
async postRepairsign (wxuser) {
let temp = await http.repairSign(wxuser)
if (temp === \'这天还没到哦\') {
alert(\'这天还没到哦\')
} else if(temp === \'补签成功\') {
alert(\'补签成功\')
}else if(temp === \'已经签到过\') {
alert(\'已经签到过\')
}else if(temp === \'补签次数不够\') {
alert(\'补签次数不够\')
}
this.postsameDay(this.wxuser)
console.log(temp)
},
// 弹框
showModal() {
this.visible = true;
},
// 当日签到
async postsameIn(wxuser) {
let temp = await http.sameIn(wxuser);
console.log(temp)
alert("签到成功")
this.postsameDay(this.wxuser)
},
// 展示所有签到信息
async postsameDay(wxuser) {
let temp = await http.sameDay(wxuser)
this.spinning = false
console.log(temp)
if (temp != null) {
temp.forEach((item) => {
if (this.timeday === item.signTime.substring(0, 7)) {
this.arr.push(item.signTime.substring(8, 10))
}
if (this.timedays === item.signTime.substring(0, 10)) {
this.sameResult = true
this.nosameResult = false
}
console.log(item.signTime.substring(0, 10))
})
}
},
getListData(value) {
let listData;
var Arrs = [...this.arr];
Arrs.forEach((i) => {
if (
value.date() == i &&
value.year() == new Date().getFullYear() &&
value.month() + 1 == new Date().getMonth() + 1
) {
listData = [{ type: "warning", content: "el-icon-check" }];
}
});
return listData || [];
},
onPanelChange(value, mode) {
console.log(mode);
console.log(value);
},
},
};
</script>
<style scoped lang="less">
.calendar {
width: 88%;
left: 0.2rem;
position: absolute;
top: 8rem;
button {
background-color: #9b2816;
border: none;
margin-left: 0.6rem;
color: white;
font-size: 0.4rem;
height: 0.7rem;
padding: 0 0.1rem;
// margin: 0;
// p {
// padding: 0.1rem 0.2rem;
// color: white;
// border-radius: 0.1rem;
// #9b2816;
// }
}
}
/deep/.ant-select-selection {
background-color: transparent;
border: 1px solid rgb(174, 226, 221);
}
/deep/.ant-radio-group-small .ant-radio-button-wrapper {
background-color: transparent;
border: 1px solid rgb(174, 226, 221);
}
// 弹框
/deep/.ant-modal-content {
width: 80%;
margin: 2.5rem auto;
}
/deep/.ant-modal-body {
padding:1.5rem 0.4rem 0;
div{
display: flex;
margin: 0;
width: 100%;
height: 1.5rem;
/deep/.ant-input{
width: 75%;
height: 1rem;
border: 1px solid #9c9c9b;
}
p{
width: 20%;
height: 1rem;
line-height: 1rem;
color: rgb(70, 66, 66);
}
}
}
p {
border: none;
margin-left: 0.6rem;
color: white;
font-size: 0.4rem;
height: 0.7rem;
padding: 0 0.1rem;
margin: 0;
span {
padding: 0.1rem 0.2rem;
color: white;
border-radius: 0.1rem;
background-color: #9b2816;
}
}
</style>
以上是关于签到的主要内容，如果未能解决你的问题，请参考以下文章