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.
60 lines
1.2 KiB
60 lines
1.2 KiB
<template>
|
|
<view>
|
|
<view class="status">当前状态：{{value}}</view>
|
|
<view class="clock-button" :class="{isClock:isClock}" type="success" @click="onClock">打卡</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
export default {
|
|
data() {
|
|
return {
|
|
value:'未打卡',
|
|
isClock:false
|
|
}
|
|
},
|
|
computed: mapState([ 'userId' ]),
|
|
methods: {
|
|
onClock() {
|
|
if (!this.isClock) {
|
|
this.tui.request("/app/clockIn/", "get", {
|
|
userId: this.userId
|
|
}, false, true).then((res) => {
|
|
if (res.code == 200) {
|
|
this.tui.toast('打卡成功', 2000, true)
|
|
this.value = '已打卡'
|
|
this.isClock = true
|
|
}else{
|
|
this.tui.toast(res.message)
|
|
}
|
|
console.log(res)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.status {
|
|
font-size: 40upx;
|
|
color: #333333;
|
|
text-align: center;
|
|
padding: 80upx;
|
|
}
|
|
.clock-button {
|
|
width: 200upx;
|
|
height: 200upx;
|
|
line-height: 200upx;
|
|
border-radius: 200upx;
|
|
text-align: center;
|
|
background-color: #5fd9ee;
|
|
color: #fef0f0;
|
|
font-size: 56upx;
|
|
margin: 50upx auto;
|
|
}
|
|
.isClock {
|
|
background: grey;
|
|
}
|
|
</style>
|
|
|