签到
<template>
<!-- <a-spin :spinning="spinning"> -->
<div class="logo-top" :style="{width:width + 'px',height:height + 'px'}" >
<!-- 签到 -->
<img :style="{width:width + 'px',height:height + 'px'}" src="http://h5.u2sy.cn/img/cj2.png" alt="" />
<div :style="{marginTop: height*220/707 + 'px',height:50*height/667+ 'px',lineHeight:50*height/667+ 'px'}" class="nav-title">封神日历</div>
<div class="calendar" :style="{width: width*330/375 + 'px',bottom:height*60/667 + 'px',height:310*height/667 + 'px'}">
<strong @click="rule = !rule" style=" font-size: 0.45rem;color: #9b2816;">查看规则</strong>
<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>
<!-- <a-modal
v-model="visible"
ok-text="查看运势"
cancel-text="确定"
@ok="hideModal"
>
<p>{{ successfulsign }}</p>
<p>转发可获得今日运势</p>
</a-modal> -->
<p>
<a-button v-show="nosameResult"
@click="postsameIn(wxuser)"
style="margin-right: 0.3rem;" type="primary"> 今日签到 </a-button>
<span style="margin-right: 0.3rem;" v-show="sameResult">已签到</span>
<span @click="postRepairsign(wxuser)">补签</span>
</p>
<!-- <p><span @click="Fortune">运势</span></p> -->
</div>
<!-- 规则 -->
<div class="bxjp" v-show="rule">
<div style="text-align: center;"><img src="../assets/images/gze.jpg" alt="" /></div>
<div class="prize-content">
<strong style="color:#9b2816;">道友悉知</strong>
<ol type="disc">
<li>每日签到可获得20积分。</li>
<li>连续累计签到7天，第7天当天将获得50积分。</li>
<li>连续累计签到30天，第30天当天将获得100积分。</li>
<li>法定节日当天签到可获得50积分</li>
<li>将运势图分享至朋友圈可获得补签机会1次，每人每月最多获得3次补签机会。</li>
<li>补签机会仅限当月使用。</li>
</ol>
</div>
<p><button @click="rule =!rule">取消</button></p>
</div>
</div>
<!-- </a-spin> -->
</template>
<script>
import http from "../services/http-service";
let Months = new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : "0" + (new Date().getMonth() + 1)
let timeday = new Date().getFullYear() + "-" + Months
let dates = new Date().getDate() >= 10 ? new Date().getDate() : "0" + new Date().getDate()
let timedays = timeday + '-' + dates
export default {
name: "HelloWorld",
props: {},
data() {
return {
num: 0,
visible: false,
width: window.innerWidth,
height: window.innerHeight,
timeday,
rule: false,
timedays,
successfulsign:null,
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: {
// 运势
Fortune () {
this.$router.push({
path: "/Fortune",
name: "Fortune",
});
},
// 补签
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;
},
hideModal() {
this.Fortune()
this.visible = false;
},
// 当日签到
async postsameIn(wxuser) {
let temp = await http.sameIn(wxuser)
console.log(temp)
// this.visible = true
// alert("签到成功")
this.successfulsign = '签到成功'
this.postsameDay(this.wxuser)
this.$router.push({
path: "/Fortune",
name: "Fortune",
})
},
// 展示所有签到信息
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))
console.log(this.timedays)
})
}
},
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">
// @import '../style/SignDaily';
.calendar {
// border: 1px solid red;
left: 0.2rem;
position: absolute;
/deep/.ant-fullcalendar-value{
font-size: 0.4rem;
}
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:1rem 0.4rem 0;
// border: 1px solid red;
p:nth-child(1){
font-size: 0.45rem;
text-align: center;
color: #000000;
}
p:nth-child(2){
font-size: 0.35rem;
text-align: center;
color: #999999;
}
// 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;
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;
}
}
/deep/.ant-fullcalendar-header {
display: none;
}
</style>
本文来自博客园，作者：zjxgdq，转载请注明原文链接：https://www.cnblogs.com/zjxzhj/p/14788391.html
浙公网安备 33010602011771号