178 lines
3.9 KiB
Vue
178 lines
3.9 KiB
Vue
<template>
|
||
<div class="AppSignIn">
|
||
<div class="title">打卡记录</div>
|
||
<div class="sign_list">
|
||
<scroll-view scroll-y style="height: 100%;">
|
||
<div class="sign_card" v-for="item in signlist" :key="item.id">
|
||
<div class="sign_left">{{ item.createTime.substring(0,5) }}</div>
|
||
<div class="sign_right">
|
||
<div class="time">{{ item.createDate }}</div>
|
||
<div class="tips">打卡成功</div>
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
</div>
|
||
|
||
<div class="sign_btn">
|
||
<div class="btn" @click="signIn" :class="status==0? '': 'active'">
|
||
<div>{{ status==1? '已打卡':'打卡'}}</div>
|
||
<div>{{ time }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import dayjs from "dayjs"
|
||
import { mapState } from "vuex"
|
||
export default {
|
||
appName: "打卡",
|
||
data() {
|
||
return {
|
||
time: '',
|
||
status: 0, // 打卡状态：0、未打卡；1、已打卡
|
||
signlist: [],
|
||
current: 1,
|
||
screenHeight: '',
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['user'])
|
||
},
|
||
methods: {
|
||
getList() {
|
||
this.$http.post(`/api/appwechatsigninfo/listByWxUserId?current=${this.current}&size=3000`).then(res=> {
|
||
if(res?.data?.records) {
|
||
this.signlist = res.data.records
|
||
}
|
||
})
|
||
},
|
||
// 今天的打卡状态
|
||
getToday() {
|
||
this.$http.post(`/api/appwechatsigninfo/queryNowDetail`).then(res=> {
|
||
if(res?.data) {
|
||
this.status = res.data.status
|
||
}
|
||
})
|
||
},
|
||
// 打卡
|
||
signIn() {
|
||
if(this.status == 1) {
|
||
return this.$u.toast("已打卡,请勿重复打卡!")
|
||
}
|
||
this.$http.post(`/api/appwechatsigninfo/sign`).then(res=> {
|
||
if(res.code == 0) {
|
||
this.$u.toast(`打卡成功`)
|
||
this.getToday()
|
||
this.getList()
|
||
}
|
||
}).catch(err=> console.log(err))
|
||
}
|
||
},
|
||
onShow() {
|
||
document.title = '每日打卡'
|
||
this.getToday()
|
||
this.getList()
|
||
setInterval(() => {
|
||
this.time = dayjs(new Date()).format('HH:mm:ss')
|
||
}, 1000)
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.AppSignIn {
|
||
padding: 0px 32px;
|
||
box-sizing: border-box;
|
||
height: 100%;
|
||
|
||
.title {
|
||
font-weight: 600;
|
||
font-size: 28px;
|
||
color: #333333;
|
||
width: 100%;
|
||
height: 6vh;
|
||
line-height: 6vh;
|
||
padding-left: 32px;
|
||
box-sizing: border-box;
|
||
background: #F5F5F5;
|
||
overflow-y: none;
|
||
}
|
||
|
||
.sign_list {
|
||
width: 100%;
|
||
height: 69vh;
|
||
.sign_card {
|
||
display: flex;
|
||
background: #FFFFFF;
|
||
padding: 24px;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
|
||
border-radius: 16px;
|
||
margin-bottom: 24px;
|
||
|
||
.sign_left {
|
||
align-self: center;
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #333333;
|
||
margin-right: 32px;
|
||
}
|
||
|
||
.sign_right {
|
||
font-weight: 400;
|
||
font-size: 26px;
|
||
color: #333333;
|
||
|
||
.tips {
|
||
color: #999999;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.sign_btn {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 25vh;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
background: #F5F5F5;
|
||
box-shadow: 0 -4px 8px 0 rgba(0,0,0,0.02);
|
||
z-index: 9;
|
||
|
||
.btn {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 240px;
|
||
height: 240px;
|
||
text-align: center;
|
||
background-image: linear-gradient(180deg, #75BDFF 0%, #4783FF 100%);
|
||
border: 8px solid #FFFFFF;
|
||
box-shadow: 0 8px 12px -4px rgba(133,196,255,0.65);
|
||
border-radius: 50%;
|
||
color: #FFFFFF;
|
||
|
||
& > div:first-child {
|
||
font-weight: 500;
|
||
font-size: 40px;
|
||
margin-top: 72px;
|
||
}
|
||
|
||
& > div:last-child {
|
||
margin-top: 10px;
|
||
font-weight: 400;
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
background-image: linear-gradient(180deg, #bcff75 0%, hsl(132, 87%, 30%) 100%);
|
||
}
|
||
}
|
||
}
|
||
</style> |