You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
353 lines
7.8 KiB
353 lines
7.8 KiB
<template>
|
|
<view class="sigin-in bx">
|
|
<navbar :leftClick="leftClick" :title="$t('page.signIn.title')"></navbar>
|
|
|
|
<view class="sigin-in-content">
|
|
<!-- <view class="title">{{ $t('page.signIn.title') }}</view> -->
|
|
<view class="numberOfSays">{{ $t('page.signIn.sign',[numberOfSays]) }}</view>
|
|
|
|
<view class="date-info">
|
|
<view class="month-info">
|
|
<view class="left-arrow">
|
|
<image @click="changeMonth(0)" src="/static/signin/arrow.png" mode="widthFix"></image>
|
|
</view>
|
|
|
|
<view class="month">{{ $t(`page.signIn.${monthIndex}`) }}</view>
|
|
|
|
<view class="right-arrow">
|
|
<image @click="changeMonth(1)" src="/static/signin/arrow.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="day-list">
|
|
<view v-for="(item,index) in dayList" :key="index" class="day-item">
|
|
<view v-if="item.sign" class="check-img">
|
|
<image src="/static/signin/check.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="sort">{{ $t('page.signIn.day',[index + 1])}}</view>
|
|
<view class="img-box">
|
|
<image src="/static/signin/gift.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="day">{{ forMateDate(item) }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tips">{{ tips[type[$i18n.locale]] }}</view>
|
|
|
|
<view :class="{ signedIn : userInfo.sginState == 1 }" @click="submitSignin" class="submit">{{ $t('page.signIn.title') }}</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/base/m-navbar.vue'
|
|
|
|
export default {
|
|
components: {
|
|
navbar
|
|
},
|
|
data() {
|
|
return {
|
|
numberOfSays: 0, //签到天数
|
|
dayList: [], //日期列表
|
|
tips: '', //提示
|
|
type: {
|
|
en: 'keyEnglish',
|
|
es: "keySpanish",
|
|
"zh": "keyChinese"
|
|
},
|
|
monthIndex: 0, //当前月份(0-11)
|
|
signinList : [], //签到列表
|
|
userInfo : {}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.initDate()
|
|
this.getTips()
|
|
this.getSigninList()
|
|
this.getUserInfo()
|
|
},
|
|
methods: {
|
|
leftClick() {
|
|
uni.navigateTo({
|
|
url: '/pages/home/home'
|
|
})
|
|
},
|
|
|
|
//初始化日期列表
|
|
initDate() {
|
|
if(this.dayList.length >= 28) return
|
|
//保存当前月份
|
|
this.monthIndex = this.$dayjs().month();
|
|
// 获取当前日期
|
|
let now = this.$dayjs();
|
|
// 获取当前月最后一天的日期
|
|
let lastDayOfMonth = now.endOf('month');
|
|
// 获取当前月的天数
|
|
let daysInMonth = lastDayOfMonth.date();
|
|
//获取当前月的第一天
|
|
var firstDay = this.$dayjs().date(1)
|
|
this.dayList.push(firstDay)
|
|
//获取一个月的所有日期
|
|
for (let i = 1; i < daysInMonth; i++) {
|
|
this.dayList.push(this.$dayjs(firstDay).add(i, 'day'))
|
|
}
|
|
},
|
|
|
|
//格式化时间
|
|
forMateDate(day) {
|
|
return this.$dayjs(day).format("MM-DD")
|
|
},
|
|
|
|
//获取已签到列表
|
|
getSigninList() {
|
|
this.request('getSignRecord').then(res => {
|
|
if (res.code == 200) {
|
|
this.signinList = res.result
|
|
this.updateSigninState()
|
|
}
|
|
})
|
|
},
|
|
|
|
//获取提示签到说明
|
|
getTips() {
|
|
this.request('getTips').then(res => {
|
|
if (res.code == 200) {
|
|
this.tips = res.result
|
|
}
|
|
})
|
|
},
|
|
|
|
//签到
|
|
submitSignin(day) {
|
|
this.$play()
|
|
if(this.userInfo.sginState == 1){
|
|
return uni.$u.toast(this.$t('message.34'))
|
|
}
|
|
this.request('sign').then(res => {
|
|
if (res.code == 200) {
|
|
uni.$u.toast(this.$t('message.35'))
|
|
this.getSigninList()
|
|
}
|
|
})
|
|
},
|
|
|
|
//修改当前月份
|
|
changeMonth(type) {
|
|
this.$play()
|
|
if (!type) {
|
|
if(this.monthIndex <= 0) return
|
|
// 获取当前月份之前的月份
|
|
this.monthIndex -= 1;
|
|
this.getDays()
|
|
} else {
|
|
if(this.monthIndex >= 11) return
|
|
//获取当前月份之后的月份
|
|
this.monthIndex += 1
|
|
this.getDays()
|
|
}
|
|
},
|
|
|
|
//获取过去或者未来的月份所有天
|
|
getDays(){
|
|
// 使用当前年份和新的月份索引创建一个日期对象
|
|
let firstDayOfMonth = this.$dayjs().year(this.$dayjs().year()).month(this.monthIndex).startOf('month');
|
|
|
|
// 获取当前月之前月份的最后一天
|
|
let lastDayOfMonth = firstDayOfMonth.endOf('month');
|
|
|
|
// 获取当前月之前月份的天数
|
|
let daysInMonth = lastDayOfMonth.date();
|
|
|
|
// 初始化日期列表
|
|
this.dayList = [];
|
|
|
|
// 遍历这个月的每一天
|
|
for (let i = 1; i <= daysInMonth; i++) {
|
|
// 添加每一天到列表中
|
|
this.dayList.push(firstDayOfMonth.add(i - 1, 'day'));
|
|
}
|
|
|
|
//更新签到状态
|
|
this.updateSigninState()
|
|
},
|
|
|
|
//更新签到状态
|
|
updateSigninState(){
|
|
this.signinList.forEach(item => {
|
|
let signDate = this.$dayjs(item.signTime).format("YYYY-MM-DD")
|
|
this.dayList.forEach(day => {
|
|
if (day.isSame(signDate, 'day')) {
|
|
this.$set(day, 'sign', true)
|
|
}
|
|
})
|
|
//统计用户选择的月份签到天数
|
|
this.countSigninDayNum()
|
|
})
|
|
},
|
|
|
|
//统计用户选择的月份签到天数
|
|
countSigninDayNum(){
|
|
this.numberOfSays = 0;
|
|
let lastIndex = this.getLastDayIndex()
|
|
//计算选择月份连续签到天数
|
|
for(let j = lastIndex ; j >= 0 ; j--){
|
|
if(this.dayList[j].sign){
|
|
this.numberOfSays++
|
|
}else{
|
|
return
|
|
}
|
|
}
|
|
},
|
|
|
|
//获取用户选择月份最后一天签到的索引
|
|
getLastDayIndex() {
|
|
for (let i = this.dayList.length - 1; i >= 0; i--) {
|
|
if (this.dayList[i].sign) {
|
|
return i;
|
|
}
|
|
}
|
|
},
|
|
|
|
//获取用户信息(用户判断用户是否已签到)
|
|
getUserInfo() {
|
|
this.request('userInfo').then(res => {
|
|
if (res.code == 200) {
|
|
this.userInfo = res.result.userInfo
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sigin-in {
|
|
// background: black;
|
|
padding-bottom: 80rpx;
|
|
|
|
.sigin-in-content {
|
|
width: 96%;
|
|
margin: 0 auto;
|
|
|
|
.numberOfSays {
|
|
text-align: center;
|
|
padding: 20rpx 0rpx;
|
|
}
|
|
|
|
.date-info {
|
|
// background: $uni-bg-color-app;
|
|
border-radius: 20rpx;
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
|
|
.month-info {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.month {
|
|
background: $uni-bg-color-app;
|
|
color: $uni-text-color-inverse;
|
|
padding: 10rpx;
|
|
border-radius: 10rpx;
|
|
margin: 0rpx 15rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
image {
|
|
width: 30rpx;
|
|
}
|
|
|
|
.right-arrow {
|
|
image {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.day-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.day-item {
|
|
background: $uni-bg-color-app;
|
|
color: $uni-text-color-inverse;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
width: calc(20% - 7px);
|
|
// background: #565656;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
margin-right: calc(35px / 4);
|
|
box-sizing: border-box;
|
|
padding: 10rpx;
|
|
|
|
&:nth-child(5n) {
|
|
margin-right: 0rpx;
|
|
}
|
|
|
|
.check-img {
|
|
position: absolute;
|
|
right: 4rpx;
|
|
top: -4rpx;
|
|
|
|
image {
|
|
width: 30rpx;
|
|
}
|
|
}
|
|
|
|
image {
|
|
width: 40rpx;
|
|
margin: 10rpx 0rpx;
|
|
}
|
|
|
|
.sort {
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.day {
|
|
font-size: 20rpx;
|
|
border-radius: 20rpx;
|
|
background: #66B53B;
|
|
}
|
|
|
|
view {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
color: #888888;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
margin: 20rpx 0rpx;
|
|
}
|
|
|
|
.submit {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 80rpx;
|
|
background: $uni-bg-color-app;
|
|
color: $uni-text-color-inverse;
|
|
border-radius: 40rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.signedIn{
|
|
background: #ccc;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|