Browse Source

feat(coach): 添加我的考勤功能

- 在教练首页添加"我的考勤"和"我的消息"入口
- 新增我的考勤页面,包含考勤、请假和异常三种状态的数据展示
- 实现考勤数据的加载和分页功能
- 优化页面样式,增加导航栏和按钮样式
master
liutong 12 months ago
parent
commit
1205fa90e6
  1. 9
      pages.json
  2. 19
      pages/coach/my/index.vue
  3. 491
      pages/coach/my/my_attendance.vue
  4. BIN
      static/images/tabbar/banji.png
  5. BIN
      static/images/tabbar/banjis.png

9
pages.json

@ -322,6 +322,15 @@
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
}, },
{
"path": "pages/coach/my/my_attendance",
"style": {
"navigationBarTitleText": "我的考勤",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#292929",
"navigationBarTextStyle": "white"
}
},
{ {
"path": "pages/coach/my/info", "path": "pages/coach/my/info",
"style": { "style": {

19
pages/coach/my/index.vue

@ -74,6 +74,16 @@
<view></view> <view></view>
</view> </view>
<view class="item" @click="openViewMyAttendance()">
<view>我的考勤</view>
<view></view>
</view>
<view class="item" @click="openViewSchoolingStatistics()">
<view>我的消息</view>
<view></view>
</view>
</view> </view>
<view class="section_box"> <view class="section_box">
@ -151,7 +161,14 @@ export default {
uni.navigateTo({ uni.navigateTo({
url: '/pages/coach/my/set_up' url: '/pages/coach/my/set_up'
}) })
} },
//-
openViewMyAttendance(){
uni.navigateTo({
url: '/pages/coach/my/my_attendance'
})
},
} }
} }
</script> </script>

491
pages/coach/my/my_attendance.vue

@ -0,0 +1,491 @@
<!--我的考勤-详情-->
<template>
<view class="main_box">
<fui-segmented-control
:values="optionTable"
type="text"
activeColor="#29d3b4"
color="#fff"
@click="segmented">
</fui-segmented-control>
<view class="main_section">
<!--考勤-->
<scroll-view
class="section_1"
v-if="filteredData.type == '1'"
scroll-y="true"
:lower-threshold="lowerThreshold"
@scrolltolower="loadMoreData"
style="height: 100vh;"
>
<view class="ul">
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">篮球课</view>
<view class="content">考勤正常</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">篮球课</view>
<view class="content">考勤正常</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">篮球课</view>
<view class="content">考勤正常</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
</view>
<view class="title_box">普通考勤</view>
<view class="subhead_box">请假</view>
<view class="subhead_box">2025-01-01 00:00:00 - 2505-01-01 00:00:00</view>
<view class="ul">
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">普通考勤</view>
<view class="content">迟到</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">普通考勤</view>
<view class="content">早退</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">普通记录</view>
<view class="content">本周考勤情况周一到周五均按时打卡未请假综合表现良好
</view>
</view>
</view>
</view>
</scroll-view>
<!--请假-->
<scroll-view
class="section_1"
v-if="filteredData.type == '2'"
scroll-y="true"
:lower-threshold="lowerThreshold"
@scrolltolower="loadMoreData"
style="height: 100vh;"
>
<view class="ul">
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">篮球课</view>
<view class="content">考勤正常</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">篮球课</view>
<view class="content">考勤正常</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">篮球课</view>
<view class="content">考勤正常</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
</view>
<view class="title_box">普通考勤</view>
<view class="subhead_box">请假</view>
<view class="subhead_box">2025-01-01 00:00:00 - 2505-01-01 00:00:00</view>
<view class="ul">
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">普通考勤</view>
<view class="content">迟到</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">普通考勤</view>
<view class="content">早退</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">普通记录</view>
<view class="content">本周考勤情况周一到周五均按时打卡未请假综合表现良好
</view>
</view>
</view>
</view>
</scroll-view>
<!--异常-->
<scroll-view
class="section_1"
v-if="filteredData.type == '3'"
scroll-y="true"
:lower-threshold="lowerThreshold"
@scrolltolower="loadMoreData"
style="height: 100vh;"
>
<view class="ul">
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">篮球课</view>
<view class="content">考勤正常</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">篮球课</view>
<view class="content">考勤正常</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">篮球课</view>
<view class="content">考勤正常</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
</view>
<view class="title_box">普通考勤</view>
<view class="subhead_box">请假</view>
<view class="subhead_box">2025-01-01 00:00:00 - 2505-01-01 00:00:00</view>
<view class="ul">
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">普通考勤</view>
<view class="content">迟到</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">普通考勤</view>
<view class="content">早退</view>
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
</view>
</view>
<view class="li">
<view class="left">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
</view>
<view class="right">
<view class="content">普通记录</view>
<view class="content">本周考勤情况周一到周五均按时打卡未请假综合表现良好
</view>
</view>
</view>
</view>
</scroll-view>
<view class="section_btn">
<view class="btn">请假</view>
</view>
</view>
</view>
</template>
<script>
import marketApi from '@/api/market.js';
import AQTabber from "@/components/AQ/AQTabber.vue"
export default {
components: {
AQTabber,
},
data() {
return {
//tab
optionTable: [
{
id: 1,
name: '考勤'
},
{
id: 2,
name: '请假'
},
{
id: 3,
name: '异常'
}
],
loading:false,//
lowerThreshold: 100,//
isReachedBottom: false,//|true=|false=
//
filteredData:{
page:1,//
limit:10,//
total:10,//
type: '1',//1=,2=,3=
},
tableList:[],//
}
},
onLoad(options) {},
onShow(){
this.init()//
},
methods: {
//
async init(){
await this.getList();
},
//tag
async segmented(e) {
//
await this.resetFilteredData()
this.filteredData.type = e.id//1=,2=,3=
await this.getList()
},
//()
loadMoreData() {
//
if (!this.isReachedBottom) {
this.isReachedBottom = true;//
this.getList();
}
},
//
async resetFilteredData() {
this.isReachedBottom = false; // 便
this.filteredData.page = 1//
this.filteredData.limit = 10//
this.filteredData.total = 10//
},
//
async getList(){
this.loading = true
let data = {...this.filteredData}
//
if(this.filteredData.page * this.filteredData.limit > this.filteredData.total){
this.loading = false
uni.showToast({
title: '暂无更多',
icon: 'none'
})
return
}
if(data.page == 1){
this.tableList = []
}
let res = await marketApi.myClient(data)
this.loading = false
this.isReachedBottom = false;
if (res.code != 1){
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
this.tableList = this.tableList.concat(res.data.list.data); // 使 concat
console.log('列表',this.tableList)
this.filteredData.total = res.data.list.total
this.filteredData.page++
this.countArr = {
type_0:res.data.count[0],
type_1:res.data.count[1],
type_2:res.data.count[2],
type_3:res.data.count[3],
max_count:res.data.gh.max_count,
lq_count:res.data.gh.lq_count,
}
},
}
}
</script>
<style lang="less" scoped>
.main_box{
background: #292929 ;
}
//
.navbar_section{
display: flex;
justify-content: center;
align-items: center;
background: #29d3b4;
.title{
padding: 20rpx 0;
font-size: 30rpx;
color: #315d55;
}
}
.main_section{
min-height: 100vh;
background: #292929 100%;
padding: 0 24rpx;
padding-top: 32rpx;
padding-bottom: 150rpx;
font-size: 28rpx;
.section_1{
color: #fff;
font-size: 28rpx;
.ul{
margin-top: 23rpx;
display: flex;
flex-direction: column;
gap: 24rpx;
.li{
display: flex;
align-items: center;
gap: 43rpx;
.left{
image{
width: 174rpx;
height: 174rpx;
border-radius: 24rpx;
background-color: #333333;
}
}
.right{
display: flex;
flex-direction: column;
gap: 18rpx;
.content{
font-size: 24rpx;
}
.content:nth-child(1){
font-size: 28rpx;
}
}
}
}
.title_box{
margin-top: 46rpx;
font-size: 28rpx;
}
.subhead_box{
margin-top: 22rpx;
font-size: 24rpx;
}
}
.section_btn{
display: flex;
justify-content: center;
.btn{
width: 722rpx;
height: 64rpx;
line-height: 64rpx;
border-radius: 8rpx;
background-color: rgba(32,202,175,1);
color: rgba(255,255,255,1);
font-size: 28rpx;
text-align: center;
}
}
}
</style>

BIN
static/images/tabbar/banji.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 543 B

BIN
static/images/tabbar/banjis.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 560 B

Loading…
Cancel
Save