|
|
@@ -2,48 +2,41 @@
|
|
|
<div class="wrap">
|
|
|
<m-header v-if="headerStatus" />
|
|
|
|
|
|
- <div class="monthMoney"> 2020年3月课酬确认单 </div>
|
|
|
- <div class="monthCount">
|
|
|
- <div class="item">
|
|
|
- <span class="title">本月合计</span>
|
|
|
- <span>100节</span>
|
|
|
- <span class="money">4000元</span>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="title">乐团课合计</span>
|
|
|
- <span>100节</span>
|
|
|
- <span class="money">4000元</span>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="title">VIP课合计</span>
|
|
|
- <span>100节</span>
|
|
|
- <span class="money">4元</span>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="title">网管课合计</span>
|
|
|
- <span>100节</span>
|
|
|
- <span class="money">4000元</span>
|
|
|
+ <div class="monthMoney">{{ appealDate }}课酬</div>
|
|
|
+ <div class="monthCount" v-if="statistics.length > 0">
|
|
|
+ <div class="item" v-for="(item, index) in statistics" :key="index">
|
|
|
+ <span class="title" v-if="item.groupType == 'ALL'">本月合计</span>
|
|
|
+ <span class="title" v-if="item.groupType == 'MUSIC'">乐团课合计</span>
|
|
|
+ <span class="title" v-if="item.groupType == 'VIP'">VIP课合计</span>
|
|
|
+ <span class="title" v-if="item.groupType == 'PRACTICE'">网管课合计</span>
|
|
|
+ <span>{{ item.courseTimes }}节</span>
|
|
|
+ <span class="money">{{ item.totalActualSalary }}元</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div style="padding-bottom: .8rem">
|
|
|
+ <div :class="confirmStatus == 0 ? 'paddingB80' : 'paddingB16'">
|
|
|
<van-list v-model="loading" :finished="finished" finished-text=" " @load="getList">
|
|
|
- <van-cell-group v-for="i in 10" :key="i">
|
|
|
+ <van-cell-group v-for="(item, index) in dataList" :key="index">
|
|
|
<van-cell>
|
|
|
<template #icon>
|
|
|
- <i class="icon icon_audition"></i>
|
|
|
+ <i class="icon icon_audition" v-if="item.groupType == 'PRACTICE'"></i>
|
|
|
+ <i class="icon icon_vip" v-if="item.groupType == 'VIP'"></i>
|
|
|
+ <i class="icon icon_music" v-if="item.groupType == 'MUSIC'"></i>
|
|
|
</template>
|
|
|
<template #title>
|
|
|
- <div class="title">长笛·基础知识课</div>
|
|
|
+ <div class="title">{{ item.courseName }}</div>
|
|
|
<div class="baseInfo">
|
|
|
- <p>排课:3月5日 13:00-13:35</p>
|
|
|
- <p>签到:13:00 签退13:35</p>
|
|
|
+ <p>排课:{{ item.startClassTime | getMonthDay }} {{ item.startClassTime | getHourMin }}-{{ item.endClassTime | getHourMin }}</p>
|
|
|
+ <p>签到:{{ item.signInTime | getHourMin }} 签退:{{ item.signOutTime | getHourMin }}</p>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template #default>
|
|
|
- <p class="money error">￥<span>50</span></p>
|
|
|
- <div class="moneyInfo">
|
|
|
- 课酬:¥100<br />实付:¥50
|
|
|
+ <p class="money" :class="[item.reduceSalary > 0 ? 'error' : '']">
|
|
|
+ ￥<span>{{ item.actualSalary }}</span>
|
|
|
+ </p>
|
|
|
+ <div class="moneyInfo" v-if="item.reduceSalary > 0">
|
|
|
+ 课酬:¥{{ item.expectSalary }}
|
|
|
+ <br />扣款:¥{{ item.reduceSalary }}
|
|
|
</div>
|
|
|
</template>
|
|
|
</van-cell>
|
|
|
@@ -53,24 +46,45 @@
|
|
|
|
|
|
<!-- <m-empty class="empty" v-else key="data" /> -->
|
|
|
|
|
|
- <div class="button-group">
|
|
|
- <span class="btn" @click="onAppeal">问题申诉</span>
|
|
|
- <span class="btn primary">确认课酬</span>
|
|
|
+ <div class="button-group" v-if="confirmStatus == 0">
|
|
|
+ <span class="btn" @click="onAppeal(haveComplaints)">{{ haveComplaints == 1 ? '申诉详情' : '问题申诉' }}</span>
|
|
|
+ <span class="btn primary" @click="onConfirmAppeal">确认课酬</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import MHeader from "@/components/MHeader";
|
|
|
-import { browser } from '@/common/common'
|
|
|
+import { browser, getSTD } from "@/common/common";
|
|
|
// import MEmpty from "@/components/MEmpty";
|
|
|
+import { findTeacherSettlementCourseSalarys, confirmTeacherMonthSalary } from "@/api/audition";
|
|
|
export default {
|
|
|
name: "remuneration",
|
|
|
components: { MHeader },
|
|
|
data() {
|
|
|
+ let query = this.$route.query
|
|
|
+ let tempDate = new Date(query.month + '-01')
|
|
|
+ if(!query.month) {
|
|
|
+ tempDate = new Date()
|
|
|
+ tempDate.setMonth(tempDate.getMonth() - 1)
|
|
|
+ }
|
|
|
+ let tempAppealDate = tempDate.getFullYear() + '年' + getSTD(tempDate.getMonth() + 1) + '月'
|
|
|
+ let tempAppealDateStr = tempDate.getFullYear() + '-' + getSTD(tempDate.getMonth() + 1)
|
|
|
return {
|
|
|
headerStatus: true,
|
|
|
+ appealDate: tempAppealDate,
|
|
|
+ appealDateStr: tempAppealDateStr,
|
|
|
loading: false,
|
|
|
- finished: false
|
|
|
+ finished: false,
|
|
|
+ statistics: [],
|
|
|
+ dataList: [],
|
|
|
+ dataShow: true, // 是否有数据
|
|
|
+ confirmStatus: 1, // 是否确认
|
|
|
+ haveComplaints: 0, // 是否存在申诉
|
|
|
+ params: {
|
|
|
+ month: query.month ? query.month : null,
|
|
|
+ page: 1,
|
|
|
+ rows: 20
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -79,29 +93,105 @@ export default {
|
|
|
localStorage.setItem("Authorization", decodeURI(params.Authorization));
|
|
|
localStorage.setItem("userInfo", decodeURI(params.Authorization));
|
|
|
}
|
|
|
- document.title = '确认课酬'
|
|
|
- if(browser().android || browser().iPhone) {
|
|
|
- this.headerStatus = false
|
|
|
+ document.title = "确认课酬";
|
|
|
+ if (browser().android || browser().iPhone) {
|
|
|
+ this.headerStatus = false;
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
getList() {
|
|
|
- this.finished = true
|
|
|
+ // this.finished = true
|
|
|
+ let params = this.params;
|
|
|
+ findTeacherSettlementCourseSalarys().then(res => {
|
|
|
+ let result = res.data;
|
|
|
+ this.loading = false;
|
|
|
+ if (result.code == 200) {
|
|
|
+ // 判断是否有统计数据
|
|
|
+ if(result.data.stat) {
|
|
|
+ let tempStatistics = result.data.stat
|
|
|
+ let counts = {
|
|
|
+ courseTimes: 0,
|
|
|
+ totalActualSalary: 0
|
|
|
+ }
|
|
|
+ result.data.stat.forEach(item => {
|
|
|
+ counts.courseTimes += item.courseTimes
|
|
|
+ counts.totalActualSalary += item.totalActualSalary
|
|
|
+ })
|
|
|
+ counts.groupType = 'ALL'
|
|
|
+ tempStatistics.unshift(counts)
|
|
|
+ this.statistics = tempStatistics
|
|
|
+ }
|
|
|
+ let pageInfo = result.data.pageInfo
|
|
|
+ params.page = pageInfo.pageNo
|
|
|
+ this.confirmStatus = result.data.confirmStatus
|
|
|
+ this.haveComplaints = result.data.haveComplaints
|
|
|
+ this.dataList = this.dataList.concat(pageInfo.rows)
|
|
|
+ if (params.page >= pageInfo.totalPage) {
|
|
|
+ this.finished = true;
|
|
|
+ }
|
|
|
+ this.params.page++;
|
|
|
+ } else {
|
|
|
+ this.finished = true;
|
|
|
+ }
|
|
|
+ // 判断是否有数据
|
|
|
+ if (this.dataList.length <= 0) {
|
|
|
+ this.dataShow = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- onAppeal() {
|
|
|
+ onAppeal(haveComplaints) {
|
|
|
this.$router.push({
|
|
|
- path: 'appealDetail'
|
|
|
+ path: "appealDetail",
|
|
|
+ query: {
|
|
|
+ haveComplaints: haveComplaints,
|
|
|
+ appealDateStr: this.appealDateStr
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onConfirmAppeal() {
|
|
|
+ this.$dialog.confirm({
|
|
|
+ title: '确认课酬',
|
|
|
+ message: '您是否确认本月课酬？',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ // on confirm
|
|
|
+ confirmTeacherMonthSalary({ month: this.appealDateStr }).then(res => {
|
|
|
+ let result = res.data
|
|
|
+ if(result.code == 200) {
|
|
|
+ this.$toast('课酬确认成功')
|
|
|
+ this.confirmStatus = 1
|
|
|
+ } else {
|
|
|
+ this.$toast(result.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
+ .catch(() => {
|
|
|
+ // on cancel
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ getHourMin(time) {
|
|
|
+ let tempDate = time
|
|
|
+ if(!time) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ if(typeof(tempDate) == 'string') {
|
|
|
+ tempDate = new Date(time.replace(/-/ig, '/'))
|
|
|
+ }
|
|
|
+ let hour = tempDate.getHours()
|
|
|
+ let minut = tempDate.getMinutes()
|
|
|
+ return getSTD(hour) + ':' + getSTD(minut)
|
|
|
},
|
|
|
- formatter(type, val) {
|
|
|
- if (type === "year") {
|
|
|
- return `${val}年`;
|
|
|
- } else if (type === "month") {
|
|
|
- return `${val}月`;
|
|
|
- } else if (type == "day") {
|
|
|
- return `${val}日`;
|
|
|
+ getMonthDay(time) {
|
|
|
+ let tempDate = time || new Date()
|
|
|
+ if(typeof(tempDate) == 'string') {
|
|
|
+ tempDate = new Date(time.replace(/-/ig, '/'))
|
|
|
}
|
|
|
- return val;
|
|
|
+ let month = tempDate.getFullYear()
|
|
|
+ let day = tempDate.getMonth() + 1
|
|
|
+ return month + '月' + day + '日'
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -112,102 +202,110 @@ export default {
|
|
|
height: 100vh;
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
- background-color: #F3F4F8;
|
|
|
+ background-color: #f3f4f8;
|
|
|
}
|
|
|
|
|
|
.monthMoney {
|
|
|
- font-size: .16rem;
|
|
|
- color: #1A1A1A;
|
|
|
+ font-size: 0.16rem;
|
|
|
+ color: #1a1a1a;
|
|
|
background: #fff;
|
|
|
text-align: center;
|
|
|
- line-height: .5rem;
|
|
|
+ line-height: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.monthCount {
|
|
|
- border: 1px solid rgba(204,204,204,1);
|
|
|
- border-radius: .04rem;
|
|
|
- margin: .16rem .16rem 0;
|
|
|
+ border: 1px solid rgba(204, 204, 204, 1);
|
|
|
+ border-radius: 0.04rem;
|
|
|
+ margin: 0.16rem 0.16rem 0;
|
|
|
background: #fff;
|
|
|
- padding: .12rem;
|
|
|
+ padding: 0.12rem;
|
|
|
.item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
color: #666666;
|
|
|
- font-size: .14rem;
|
|
|
- padding: .05rem .1rem;
|
|
|
+ font-size: 0.14rem;
|
|
|
+ padding: 0.05rem 0.1rem;
|
|
|
.title {
|
|
|
- width: .8rem;
|
|
|
+ width: 0.8rem;
|
|
|
}
|
|
|
.money {
|
|
|
- width: .8rem;
|
|
|
+ width: 0.8rem;
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
&:nth-child(2n + 2) {
|
|
|
- background: #F0F0F0;
|
|
|
+ background: #f0f0f0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
/deep/.van-cell-group {
|
|
|
- margin: .16rem .16rem 0;
|
|
|
- border: 1px solid #71BDB8;
|
|
|
- border-radius: .04rem;
|
|
|
+ margin: 0.16rem 0.16rem 0;
|
|
|
+ border: 1px solid #71bdb8;
|
|
|
+ border-radius: 0.04rem;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
/deep/.van-cell {
|
|
|
- padding: .13rem;
|
|
|
+ padding: 0.13rem;
|
|
|
.van-cell__title {
|
|
|
- padding-left: .1rem;
|
|
|
+ padding-left: 0.1rem;
|
|
|
}
|
|
|
.van-cell__value {
|
|
|
flex: 0 auto;
|
|
|
- padding-left: .1rem;
|
|
|
+ padding-left: 0.1rem;
|
|
|
}
|
|
|
.title {
|
|
|
- font-size: .16rem;
|
|
|
+ font-size: 0.16rem;
|
|
|
font-weight: 500;
|
|
|
- color: #1A1A1A;
|
|
|
- padding-bottom: .05rem;
|
|
|
+ color: #1a1a1a;
|
|
|
+ padding-bottom: 0.05rem;
|
|
|
}
|
|
|
.baseInfo {
|
|
|
- font-size: .14rem;
|
|
|
+ font-size: 0.14rem;
|
|
|
color: #808080;
|
|
|
line-height: 1.3;
|
|
|
}
|
|
|
.money {
|
|
|
- font-size: .16rem;
|
|
|
- color: #1A1A1A;
|
|
|
- padding-bottom: .02rem;
|
|
|
+ font-size: 0.16rem;
|
|
|
+ color: #1a1a1a;
|
|
|
+ padding-bottom: 0.02rem;
|
|
|
&.error {
|
|
|
- color: #FF3535;
|
|
|
+ color: #ff3535;
|
|
|
}
|
|
|
span {
|
|
|
- font-size: .22rem;
|
|
|
+ font-size: 0.22rem;
|
|
|
}
|
|
|
}
|
|
|
.moneyInfo {
|
|
|
- font-size: .14rem;
|
|
|
+ font-size: 0.14rem;
|
|
|
line-height: 1.3;
|
|
|
- color: #1A1A1A;
|
|
|
+ color: #1a1a1a;
|
|
|
}
|
|
|
}
|
|
|
.icon {
|
|
|
- width: .4rem;
|
|
|
- height: .4rem;
|
|
|
+ width: 0.4rem;
|
|
|
+ height: 0.4rem;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
.icon_audition {
|
|
|
- background: url('../../assets/images/audition/audition_icon.png') no-repeat center;
|
|
|
+ background: url("../../assets/images/audition/audition_icon.png") no-repeat
|
|
|
+ center;
|
|
|
background-size: contain;
|
|
|
}
|
|
|
.icon_music {
|
|
|
- background: url('../../assets/images/audition/music_icon.png') no-repeat center;
|
|
|
+ background: url("../../assets/images/audition/music_icon.png") no-repeat
|
|
|
+ center;
|
|
|
background-size: contain;
|
|
|
}
|
|
|
.icon_vip {
|
|
|
- background: url('../../assets/images/audition/vip_icon.png') no-repeat center;
|
|
|
+ background: url("../../assets/images/audition/vip_icon.png") no-repeat center;
|
|
|
background-size: contain;
|
|
|
}
|
|
|
+.paddingB80 {
|
|
|
+ padding-bottom: .8rem
|
|
|
+}
|
|
|
+.paddingB16 {
|
|
|
+ padding-bottom: .16rem;
|
|
|
+}
|
|
|
.button-group {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
@@ -215,21 +313,21 @@ export default {
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
.btn {
|
|
|
- padding: 0 .45rem;
|
|
|
- line-height: .4rem;
|
|
|
+ padding: 0 0.45rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
display: inline-block;
|
|
|
border: 1px solid @mColor;
|
|
|
border-radius: 1rem;
|
|
|
color: @mColor;
|
|
|
background: #fff;
|
|
|
- font-size: .18rem;
|
|
|
+ font-size: 0.18rem;
|
|
|
&.primary {
|
|
|
color: #fff;
|
|
|
background: @mColor;
|
|
|
}
|
|
|
}
|
|
|
- .btn+.btn {
|
|
|
- margin-left: .1rem;
|
|
|
+ .btn + .btn {
|
|
|
+ margin-left: 0.1rem;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
