init
This commit is contained in:
唐明明
257
pages/sign/index.vue
Normal file
257
pages/sign/index.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user