wangfukang
3 years ago
7 changed files with 256 additions and 169 deletions
@ -1,60 +1,127 @@ |
|||
<template> |
|||
<view> |
|||
<view class="status">当前状态：{{value}}</view> |
|||
<view class="clock-button" :class="{isClock:isClock}" type="success" @click="onClock">打卡</view> |
|||
<view class="" v-if="peopleType=='1'"> |
|||
<view class="status">当前状态：{{value}}</view> |
|||
<view class="clock-button" :class="{isClock:isClock}" type="success" @click="onClock">打卡</view> |
|||
</view> |
|||
<view class="" v-else> |
|||
<uni-section class="mb-10" title="时间选择" type="line"> |
|||
<uni-datetime-picker v-model="range" type="daterange" /> |
|||
</uni-section> |
|||
<uni-card title="打卡情况"> |
|||
<uni-list> |
|||
<uni-list-item direction="row" v-for="(item , index) in staffList" :key="index"> |
|||
<template #body> |
|||
<view class="tag-wrap"> |
|||
<view v-if="item.departmentTitle"> |
|||
<u-tag :text="item.departmentTitle" size="12" /> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<template #header> |
|||
<view class="avatar-wrap"> |
|||
<u-avatar :src="item.avatar" size="24"> |
|||
</u-avatar> |
|||
<text class="staff-name">{{ item.nickname }}</text> |
|||
</view> |
|||
</template> |
|||
<template #footer> |
|||
<view style="font-size: 24rpx;"> |
|||
<text style="margin-right: 10px;">正常:20</text> |
|||
<text style="margin-right: 10px;">迟到:<text style="color: red;">2</text></text> |
|||
<text>早退:<text style="color: red;">3</text></text> |
|||
</view> |
|||
</template> |
|||
</uni-list-item> |
|||
</uni-list> |
|||
</uni-card> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {mapState} from 'vuex' |
|||
import { |
|||
mapState |
|||
} from 'vuex' |
|||
export default { |
|||
data() { |
|||
return { |
|||
value:'未打卡', |
|||
isClock:false |
|||
value: '未打卡', |
|||
isClock: false, |
|||
peopleType: '0', |
|||
staffList:[] |
|||
} |
|||
}, |
|||
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) |
|||
}) |
|||
} |
|||
} |
|||
computed: mapState(['userId']), |
|||
onLoad() { |
|||
this.getStaffList() |
|||
}, |
|||
methods: { |
|||
getStaffList() { |
|||
this.tui.request('/app/common/user/findAllUserByShopId', 'get', {}, false, false, true).then((res) => { |
|||
if (res.code !== 200) return |
|||
this.staffList = res.result |
|||
}) |
|||
}, |
|||
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> |
|||
<style lang="scss"> |
|||
.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; |
|||
} |
|||
|
|||
.tag-wrap { |
|||
width: 100rpx; |
|||
flex: 1; |
|||
display: flex; |
|||
|
|||
view { |
|||
margin: 0 2upx; |
|||
} |
|||
} |
|||
|
|||
.avatar-wrap { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 24upx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue