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.
357 lines
11 KiB
357 lines
11 KiB
<template>
|
|
<view class="approve-list">
|
|
<view class="l-tabs">
|
|
<view @click="tabChange(0)">
|
|
<view :class="['t-txt', tabIdx==0?'active':'']">
|
|
<text>预约审批</text>
|
|
<view class="t-label">99</view>
|
|
</view>
|
|
</view>
|
|
<view @click="tabChange(1)">
|
|
<view :class="['t-txt', tabIdx==1?'active':'']">
|
|
<text>请假审批</text>
|
|
<view class="t-label">99</view>
|
|
</view>
|
|
</view>
|
|
<view @click="tabChange(2)">
|
|
<view :class="['t-txt', tabIdx==2?'active':'']">
|
|
<text>换班审批</text>
|
|
<view class="t-label">99</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="l-bar">
|
|
<view>审核人数:3人</view>
|
|
<view @click="toRecord">审批记录</view>
|
|
</view>
|
|
<view class="l-null" v-if="false">
|
|
<image></image>
|
|
<view>抱歉，没有相关课程订单信息...</view>
|
|
</view>
|
|
<view class="l-list" v-else>
|
|
<view class="l-item">
|
|
<view class="l-content">
|
|
<view class="c-user">
|
|
<image></image>
|
|
<view>胡可课</view>
|
|
</view>
|
|
<view class="c-content">
|
|
<view class="c-name">羽毛球课程(羽毛球课)</view>
|
|
<view class="c-times">
|
|
<view v-for="(e, i) in approveList" :key="i">2020-08-22 10:30</view>
|
|
</view>
|
|
</view>
|
|
<view class="c-status">
|
|
<view class="s-icon" v-if="true"></view>
|
|
<view class="s-txt s-active" v-else>通过</view>
|
|
</view>
|
|
</view>
|
|
<view class="l-reason">
|
|
<view>原因:</view>
|
|
<view>作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内…</view>
|
|
</view>
|
|
<view class="l-unfold">
|
|
<view>
|
|
<text>展开</text>
|
|
<image mode="aspectFit" src="/static/images/arrow_c874.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="l-bot-bar">
|
|
<view class="bb-select">
|
|
<view></view>
|
|
<text>全选</text>
|
|
</view>
|
|
<view class="bb-btns">
|
|
<view hover-class="hover-active">不同意</view>
|
|
<view hover-class="hover-active">同意</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { API } from '../../../js/api';
|
|
import { servers } from '../../../js/server';
|
|
import util from '../../../utils/util';
|
|
import { mapState } from 'vuex';
|
|
export default {
|
|
computed: {
|
|
...mapState([ 'storeInfo' ]),
|
|
},
|
|
data(){
|
|
return {
|
|
tabIdx: 0,
|
|
approveList: []
|
|
}
|
|
},
|
|
onLoad(options){
|
|
this.getApproveList();
|
|
},
|
|
methods: {
|
|
tabChange(i){
|
|
this.tabIdx = i;
|
|
},
|
|
toRecord(){
|
|
util.routeTo(`/pages/approve/record/record`,'nT');
|
|
},
|
|
getApproveList(approve_type = 0){
|
|
let { storeInfo } = this;
|
|
servers.get({
|
|
url: API.approve.getApproveList,
|
|
data: {
|
|
approve_type,
|
|
stadium_id: storeInfo.id,
|
|
is_approve_record: 0
|
|
},
|
|
failMsg: '加载失败！'
|
|
})
|
|
.then(res=>{
|
|
let _list = res.list || [];
|
|
this.approveList = _list;
|
|
console.warn('approve list --->', res);
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "~style/public.scss";
|
|
.approve-list{
|
|
padding-bottom: 120upx;
|
|
padding-bottom: calc( 120upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
|
|
padding-bottom: calc( 120upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
|
|
}
|
|
.l-tabs{
|
|
margin-bottom: 28upx;
|
|
background-color: #fff;
|
|
@include centerFlex(center);
|
|
>view{
|
|
flex-grow: 0;
|
|
width: 33.33%;
|
|
display: flex;
|
|
justify-content: center;
|
|
.t-txt{
|
|
position: relative;
|
|
height: 96upx;
|
|
line-height: 96upx;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
.t-label{
|
|
position: absolute;
|
|
right: -34upx;
|
|
top: 18upx;
|
|
width: 32upx;
|
|
height: 32upx;
|
|
border-radius: 50%;
|
|
line-height: 32upx;
|
|
text-align: center;
|
|
font-size: 20upx;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
background-color: #FF4444;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
&.active{
|
|
font-weight: 600;
|
|
color: $themeColor;
|
|
&::after{
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 8upx;
|
|
background-color: $themeColor;
|
|
border-radius: 4upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.l-bar{
|
|
padding: 0 50upx;
|
|
height: 92upx;
|
|
background-color: yellowgreen;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
font-size: 28upx;
|
|
line-height: 40upx;
|
|
&:first-child{
|
|
max-width: 60%;
|
|
color: #333;
|
|
@include textHide(1);
|
|
}
|
|
&+view{
|
|
color: $themeColor;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
.l-list{
|
|
padding: 0 24upx;
|
|
.l-item{
|
|
padding: 24upx;
|
|
background-color: #fff;
|
|
.l-content{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.c-user{
|
|
flex-shrink: 0;
|
|
margin-right: 30upx;
|
|
>image{
|
|
margin: 0 auto 8upx;
|
|
display: block;
|
|
width: 100upx;
|
|
height: 100upx;
|
|
border-radius: 50%;
|
|
background-color: skyblue;
|
|
}
|
|
>view{
|
|
max-width: 120upx;
|
|
line-height: 40upx;
|
|
text-align: center;
|
|
font-size: 28upx;
|
|
color: #9a9a9d;
|
|
@include textHide(1);
|
|
}
|
|
}
|
|
.c-content{
|
|
flex-grow: 1;
|
|
padding-top: 26upx;
|
|
.c-name,.c-times>view{
|
|
font-size: 28upx;
|
|
line-height: 52upx;
|
|
color: #333;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
.c-status{
|
|
flex-shrink: 0;
|
|
padding-top: 60upx;
|
|
.s-icon{
|
|
width: 36upx;
|
|
height: 36upx;
|
|
border: 2upx solid #9a9a9d;
|
|
border-radius: 50%;
|
|
>image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.s-txt{
|
|
font-size: 28upx;
|
|
line-height: 40upx;
|
|
color: $themeColor;
|
|
&.s-active{
|
|
color: #FF4444;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.l-reason{
|
|
padding-top: 14upx;
|
|
border-top: 2upx solid #D8D8D8;
|
|
display: flex;
|
|
>view{
|
|
&:first-child{
|
|
flex-shrink: 0;
|
|
margin-right: 20upx;
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
}
|
|
&+view{
|
|
flex-grow: 1;
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #9a9a9d;
|
|
}
|
|
}
|
|
}
|
|
.l-unfold{
|
|
padding: 10upx 0 0;
|
|
@include centerFlex(flex-end);
|
|
>view{
|
|
font-size: 28upx;
|
|
line-height: 46upx;
|
|
color: $themeColor;
|
|
>image{
|
|
margin-left: 10upx;
|
|
width: 24upx;
|
|
height: 24upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.l-null{
|
|
padding-top: 94upx;
|
|
>image{
|
|
margin: 0 auto 20upx;
|
|
display: block;
|
|
width: 346upx;
|
|
height: 346upx;
|
|
background-color: skyblue;
|
|
}
|
|
>view{
|
|
text-align: center;
|
|
line-height: 44upx;
|
|
font-size: 32upx;
|
|
color: #9A9A9D;
|
|
}
|
|
}
|
|
.l-bot-bar{
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
padding: 10upx 24upx;
|
|
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
|
|
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
|
|
width: 100%;
|
|
background-color: #fff;
|
|
@include centerFlex(space-between);
|
|
.bb-select{
|
|
flex-shrink: 0;
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
@include centerFlex(flex-start);
|
|
>view{
|
|
margin-right: 14upx;
|
|
width: 36upx;
|
|
height: 36upx;
|
|
border-radius: 50%;
|
|
border: 2upx solid #9a9a9d;
|
|
}
|
|
|
|
}
|
|
.bb-btns{
|
|
flex-shrink: 0;
|
|
@include centerFlex(flex-end);
|
|
>view{
|
|
width: 220upx;
|
|
height: 88upx;
|
|
line-height: 84upx;
|
|
text-align: center;
|
|
border-radius: 44upx;
|
|
border: 2upx solid $themeColor;
|
|
color: $themeColor;
|
|
&+view{
|
|
margin-left: 20upx;
|
|
background-color: $themeColor;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|