![微信小程序实现连续签到七天_第1张图片](http://img.e-com-net.com/image/info8/e52343caef2a443e9dd45871f3d3860e.jpg)
断签之后会从第一天重新开始
<template>
<view class="content" style="height: 100vh;background: white;">
<view class="back">
<view style="position: absolute;bottom: 200rpx;left: 40rpx;width: 90%;">
<image :src="headimgUrl" mode="widthFix" style="width: 92rpx;height: 92rpx;border-radius: 50%;float: left;margin-top: -6rpx;margin-right: 14rpx;"></image>
<view style="float: left;">
<span style="font-size: 32rpx;
font-weight: bold;
color: #FFFFFF;">当月连续签到 -size: 44rpx;color: #FF7D00;line-height: 40rpx;">{{ days }}-size: 32rpx;
font-weight: bold;
color: #FFFFFF;">天</span>
<view style="font-size: 24rpx;
font-weight: 100;
color: #FFFFFF;">连续签到七天可获得{{ sevenDay }}积分</view>
</view>
<uni-calendar ref="calendar" class="uni-calendar--hook"
:clear-date="true" :date="info.date"
:insert="info.insert"
:startDate="info.startDate"
:endDate="info.endDate" :range="info.range" @confirm="confirm" />
</view>
</view>
<view class="sign_content">
<div class="signBox">
<text style="font-size: 30rpx;
font-weight: bold;
color: #0D052C;">签到得积分,直接当钱花</text>
<ul class="signBtnBox">
<li class="signBtnOne" v-for="(item, index) in list" :key="index" :class="{ signed: index + 1 <= Number(days) }">
<div @click="handleSignIn(index+1, item.code)">
<p style="line-height: 50rpx;">{{ item.gift_num }}</p>
<!-- <p v-if="index + 1 <= Number(days)">已签到</p>
<p v-else>签到</p> -->
<p style="line-height: 210rpx;font-size: 20rpx;">{{ item.points }}积分</p>
</div>
</li>
</ul>
<view style="background: linear-gradient(to bottom right, #FF5A23, #FF920D);width: 80%;margin: 0 auto;text-align: center;color: white;font-size: 34rpx;height: 88rpx;line-height: 88rpx;margin-top: 120rpx;border-radius: 40rpx;" @click="handleSignIn1">签到</view>
</div>
</view>
</view>
</template>
<script>
export default {
data() {
return {
showCalendar: false,
info: {
lunar: true,
range: true,
insert: false,
selected: []
},
list: [
{ gift_num: "第一天", code: "USER_SIGN_POINT_1", points: null },
{ gift_num: "第二天", code: "USER_SIGN_POINT_2", points: null },
{ gift_num: "第三天", code: "USER_SIGN_POINT_3", points: null },
{ gift_num: "第四天", code: "USER_SIGN_POINT_4", points: null },
{ gift_num: "第五天", code: "USER_SIGN_POINT_5", points: null },
{ gift_num: "第六天", code: "USER_SIGN_POINT_6", points: null },
{ gift_num: "第七天", code: "USER_SIGN_POINT_7", points: null },
],
res: "",
days: "",
signOK: "",
headimgUrl: "",
sevenDay: "",
};
},
onReady() {
this.$nextTick(() => {
this.showCalendar = true
})
},
methods: {
open() {
this.$refs.calendar.open()
},
async todaySignIn(code) {
const res = await this.$request.post(
"user/userSign",
{
token: uni.getStorageSync("token").token,
},
{
native: true,
}
);
if (res.data.status == "ok") {
var data = res.data.data;
uni.showToast({
title: "签到成功!",
duration:2000
})
setTimeout(()=>{
this.getSignIn()
},2000)
} else {
this.handleSignIn()
}
},
handleSignIn1() {
const index = Number(this.days) + 1;
if (index <= this.list.length) {
const code = this.list[index - 1].code;
this.todaySignIn(code);
} else {
uni.showToast({
icon: 'none',
title: "明天再来签到吧"
})
}
},
async qiandao(code, index) {
const res = await this.$request.post(
"user/getUserConf",
{
token: uni.getStorageSync("token").token,
code: code,
type: 1
},
{
native: true,
}
);
if (res.data.status == "ok") {
var data = res.data.data;
console.log(data, "签到");
this.sevenDay = data[0].values
this.list[index].points = data[0].values;
}
},
handleSignIn(index, code) {
if (index > Number(this.days) + 1) {
uni.showToast({
icon: 'none',
title: "请按顺序签到"
})
} else if (index === Number(this.days) + 1) {
this.todaySignIn(code);
} else {
uni.showToast({
icon: 'none',
title: "明天再来签到吧"
})
}
},
async getSignIn() {
const res = await this.$request.post(
"user/getUserSignList",
{
token: uni.getStorageSync("token").token,
},
{
native: true,
}
);
if (res.data.status == "ok") {
var data = res.data.data;
this.days = data.sign_num;
this.headimgUrl = data.headimgUrl;
console.log(data, "签到列表");
for (let i = 0; i < this.list.length; i++) {
this.qiandao(this.list[i].code, i);
}
}
},
},
components: {},
onShow(){
this.getSignIn();
},
created() {
this.getSignIn();
this.qiandao("USER_SIGN_POINT_7", 6);
},
};
</script>
<style lang="scss" scoped>
.back {
width: 100%;
height: 460rpx;
background: url("https://-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202308240245145778-Group%2034161%403x.png") no-repeat;
position: relative;
top: 0;
.avatar {
width: 400rpx;
position: absolute;
height: 100rpx;
left: 40rpx;
top: 20rpx;
z-index: 9;
}
.sign-date {
}
}
.sign_content {
position: relative;
top: -150rpx;
height: 622rpx;
background: white;
border-radius: 24rpx;
padding: 34rpx;
display: flex;
justify-content: center;
.sign_day {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: 436rpx;
}
}
.signBox {
width: 100%;
background: white;
border-radius: 10px;
margin: 0 auto;
.tips {
margin-top: 3%;
span {
font-size: 16px;
letter-spacing: -0.1px;
line-height: 22px;
font-weight: 500;
}
:nth-of-type(2) {
color: #fe9300;
letter-spacing: -0.1px;
}
}
.signBtnBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
& > li {
width: 22%;
height: 172rpx;
background:url('https:
border-radius: 4px;
background-size: 100%;
margin-top: 50rpx;
img {
margin: 6px 0 0 10px;
}
p {
text-align: center;
opacity: 0.6;
font-size: 14px;
color: #333333;
letter-spacing: 0;
font-weight: 500;
}
}
li:nth-child(7){
width: 49%;
height: 172rpx;
color: #333333;
background: url('https:
background-size: cover;
background-position: center;
border-radius: 4px;
margin-top: 50rpx;
p{
text-align: left;
padding-left: 50rpx;
}
}
.signed:nth-child(7){
background: url('https:
background-size: 100%;
color: #333333;
p {
opacity: 1 !important;
color: #333;
}
}
.signed {
background: url('https:
background-size: 100%;
color: #333333;
p {
opacity: 1 !important;
color: #333;
}
}
}
}
</style>