258 lines
8.7 KiB
Vue
258 lines
8.7 KiB
Vue
<template>
|
|
<view class="content">
|
|
<image class="setting" src="/static/find/sign_img.png" mode="widthFix"></image>
|
|
<view class="sign">
|
|
<view class="signAdd">
|
|
<view class="label">
|
|
<image class="picture" src="/static/find/sign.png" mode="aspectFill"></image>
|
|
<view class="label-day">
|
|
<view class="number">
|
|
<text>{{ dateData.total }}</text>天
|
|
</view>
|
|
本月打卡
|
|
</view>
|
|
</view>
|
|
<view class="label">
|
|
<image class="picture" src="/static/find/sign_active.png" mode="aspectFill"></image>
|
|
<view class="label-day">
|
|
<view class="number">
|
|
<text>{{ dateData.continue }}</text>天
|
|
</view>
|
|
累计打卡
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="signDate">
|
|
<view class="date">
|
|
{{ dateData.month }}
|
|
</view>
|
|
<view class="list">
|
|
<view class="week">
|
|
<view class="week-label">
|
|
日
|
|
</view>
|
|
<view class="week-label">
|
|
一
|
|
</view>
|
|
<view class="week-label">
|
|
二
|
|
</view>
|
|
<view class="week-label">
|
|
三
|
|
</view>
|
|
<view class="week-label">
|
|
四
|
|
</view>
|
|
<view class="week-label">
|
|
五
|
|
</view>
|
|
<view class="week-label">
|
|
六
|
|
</view>
|
|
</view>
|
|
<view class="day" v-for="(item, index) in dateArr" :key="index">
|
|
<view class="day-label" v-for="(items, index) in item" :key="index">
|
|
<view class="label-block" :class="{active : items.isSign}" v-if="!items.isHidden">
|
|
<uni-icons v-if="items.isSign" class="search-icon" custom-prefix="iconfont" type="icon-dui" color="#ffffff" size="18"></uni-icons>
|
|
<block v-else>{{ items.date }}</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="signBtn">
|
|
<view class="btn" @click="signClick" :class="{active : dateData.isSign}">
|
|
{{ dateData.isSign ? '今日已打卡' : '今日打卡'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tipsText">
|
|
ZH大健康用户打卡
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { date, sign } from '@/apis/interfaces/sign'
|
|
export default {
|
|
data() {
|
|
return {
|
|
dateData: '',
|
|
dateArr : ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.dateList();
|
|
},
|
|
methods: {
|
|
// 用户登录
|
|
dateList() {
|
|
date().then(res => {
|
|
this.dateData = res.base
|
|
this.dateArr = res.calendar
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
|
|
// 签到
|
|
signClick() {
|
|
sign().then(res => {
|
|
console.log(res)
|
|
uni.showToast({
|
|
title: '签到成功',
|
|
icon: "none"
|
|
})
|
|
this.dateList();
|
|
}).catch(err => {
|
|
console.log(err)
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background: $window-color;
|
|
height: 100vh;
|
|
}
|
|
.setting {
|
|
width: 100%;
|
|
}
|
|
.sign {
|
|
z-index: 9;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
padding: 0 $padding + 20;
|
|
margin-top: -$margin * 2.5;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
.signTitle {
|
|
padding: $padding * 3;
|
|
font-size: $title-size + 20;
|
|
color: #48988d;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
.signAdd {
|
|
padding: $padding $padding * 2.5;
|
|
box-sizing: border-box;
|
|
border-radius: $radius-m;
|
|
background-color: white;
|
|
margin-bottom: $margin;
|
|
display: flex;
|
|
.label {
|
|
display: flex;
|
|
font-size: $title-size-sm;
|
|
.picture {
|
|
width: 74rpx;
|
|
height: 74rpx;
|
|
margin-right: $margin - 10;
|
|
}
|
|
.label-day {
|
|
color: $text-gray;
|
|
text {
|
|
font-size: $title-size-lg;
|
|
color: $text-color;
|
|
font-weight: 600;
|
|
padding-right: $padding - 20;
|
|
}
|
|
}
|
|
&:first-child {
|
|
flex: 1;
|
|
.label-day {
|
|
text {
|
|
color: $main-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.signDate {
|
|
padding: $padding;
|
|
border-radius: $radius-m;
|
|
background-color: white;
|
|
.date {
|
|
text-align: center;
|
|
font-size: $title-size + 6;
|
|
margin-bottom: $margin;
|
|
font-weight: 600;
|
|
}
|
|
.list {
|
|
.week {
|
|
display: flex;
|
|
.week-label {
|
|
text-align: center;
|
|
font-size: $title-size-m;
|
|
width: 14.28%;
|
|
margin: $margin - 10 0;
|
|
}
|
|
}
|
|
.day {
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
.day-label {
|
|
width: 14.28%;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
color: $text-color;
|
|
font-size: $title-size-m;
|
|
.label-block {
|
|
display: inline-block;
|
|
background-color: transparent;
|
|
color: $text-gray-m;
|
|
border-radius: 50%;
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
line-height: 56rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
.label-icon {
|
|
position: absolute;
|
|
left: 10rpx;
|
|
top: 0;
|
|
}
|
|
&.active {
|
|
background-color: $main-color;
|
|
color: white;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.signBtn {
|
|
padding: $padding * 2 $padding * 2 0;
|
|
.btn {
|
|
color: white;
|
|
background-color: $text-price;
|
|
text-align: center;
|
|
border-radius: $radius-m;
|
|
line-height: 90rpx;
|
|
&.active {
|
|
background-color: #ededed;
|
|
color: $text-gray;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tipsText {
|
|
text-align: center;
|
|
line-height: 120rpx;
|
|
font-size: $title-size-sm;
|
|
color: $text-gray-m;
|
|
}
|
|
}
|
|
</style>
|