mteacher/src/views/audition/Remuneration.vue

<template>
  <div class="wrap" id="remuneration">
    <m-header v-if="headerStatus" />

    <div class="monthMoney">{{ appealDate }}课酬 <br/><span>总计：{{ allMoney }}元</span></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.statType == 'MUSIC'">乐团课合计</span>
        <span class="title" v-if="item.statType == 'VIP'">VIP课合计</span>
        <span class="title" v-if="item.statType == 'PRACTICE'">网管课合计</span>
        <span class="title" v-if="item.statType == 'REWARD'">转结奖励合计</span>
        <span>{{ item.courseTimes }}{{ item.statType == 'REWARD' ? '组' : '节' }}</span>
        <span class="money">{{ item.totalActualSalary }}元</span>
      </div>
    </div>
    <!-- :class="confirmStatus == 0 ? 'paddingB80' : 'paddingB16'" -->
    <div :class="confirmStatus == 0 ? 'paddingB80' : 'paddingB16'">
      <van-tabs v-model="active">
        <van-tab title="课酬明细">
          <div v-if="dataShow" key="data">
            <van-list v-model="loading" :finished="finished" finished-text=" " @load="getList">
              <van-cell-group v-for="(item, index) in dataList" :key="index">
                <van-cell>
                  <template #icon>
                    <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">{{ item.courseName }}</div>
                    <div class="baseInfo">
                      <p>排课:{{ item.startClassTime | getMonthDay }} {{ item.startClassTime | getHourMin }}-{{ item.endClassTime | getHourMin }}</p>
                      <p>签到:{{ item.signInTime | getHourMin }}&nbsp;&nbsp;&nbsp;&nbsp;签退:{{ item.signOutTime | getHourMin }}</p>
                    </div>
                  </template>
                  <template #default>
                    <p class="money" :class="[item.reduceSalary > 0 ? 'error' : '']">
                      ￥<span>{{ item.finalSalary }}</span>
                    </p>
                    <div class="moneyInfo" v-if="item.reduceSalary > 0">
                      课酬:¥{{ item.actualSalary }}
                      <br />扣款:¥{{ item.reduceSalary }}
                    </div>
                  </template>
                </van-cell>
              </van-cell-group>
            </van-list>
          </div>
          <m-empty class="empty" v-else key="data" />
        </van-tab>
        <van-tab title="转结奖励明细">
          <div v-if="dataShow2" key="data2">
            <van-list v-model="loading2" :finished="finished2" finished-text=" " @load="getList2">
              <van-cell-group v-for="(item, index) in dataList2" :key="index">
                <van-cell>
                  <template #icon>
                    <!-- <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> -->
                    <i class="icon icon_reword"></i>
                  </template>
                  <template #title>
                    <div class="title">{{ item.courseName }}</div>
                    <div class="baseInfo">
                      <p>排课:{{ item.startClassTime | getMonthDay }} {{ item.startClassTime | getHourMin }}-{{ item.endClassTime | getHourMin }}</p>
                      <p>签到:{{ item.signInTime | getHourMin }}&nbsp;&nbsp;&nbsp;&nbsp;签退:{{ item.signOutTime | getHourMin }}</p>
                    </div>
                  </template>
                  <template #default>
                    <p class="money" :class="[item.reduceSalary > 0 ? 'error' : '']">
                      ￥<span>{{ item.finalSalary }}</span>
                    </p>
                    <div class="moneyInfo" v-if="item.reduceSalary > 0">
                      课酬:¥{{ item.actualSalary }}
                      <br />扣款:¥{{ item.reduceSalary }}
                    </div>
                  </template>
                </van-cell>
              </van-cell-group>
            </van-list>
          </div>
          <m-empty class="empty" v-else key="data2" />
        </van-tab>
      </van-tabs>
    </div>

    <!-- <m-empty class="empty" v-else key="data" /> -->

    <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, getSTD } from "@/common/common";
import MEmpty from "@/components/MEmpty";
import { findTeacherSettlementCourseSalarys, confirmTeacherMonthSalary, findTeacherRewards } from "@/api/audition";
export default {
  name: "remuneration",
  components: { MHeader, MEmpty },
  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 {
      active: 0,
      headerStatus: true,
      appealDate: tempAppealDate,
      appealDateStr: tempAppealDateStr,
      loading: false,
      finished: false,
      statistics: [],
      allMoney: 0, // 总计金额
      dataList: [],
      dataShow: true, // 是否有数据
      confirmStatus: 1, // 是否确认
      haveComplaints: 0, // 是否存在申诉
      params: {
        month: query.month ? query.month : null,
        page: 1,
        rows: 20
      },
      loading2: false,
      finished2: false,
      dataList2: [],
      dataShow2: true, // 是否有数据
      params2: {
        month: query.month ? query.month : null,
        page: 1,
        rows: 20
      },
    };
  },
  mounted() {
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
    document.title = "确认课酬";
    if (browser().android || browser().iPhone) {
      if(params.isHide == 1) {
        this.headerStatus = true
      } else {
        this.headerStatus = false;
      }
    }

  },
  methods: {
    getList() {
      // this.finished = true
      let params = this.params;
      findTeacherSettlementCourseSalarys(params).then(res => {
        let result = res.data;
        this.loading = false;
        if (result.code == 200) {
          // 判断是否有统计数据
          if(result.data.stat && result.data.stat.length > 0) {
            this.statistics = result.data.stat
            let counts = {
              courseTimes: 0,
              totalActualSalary: 0
            }
            result.data.stat.forEach(item => {
              counts.courseTimes += item.courseTimes
              counts.totalActualSalary += item.totalActualSalary
            })
            this.allMoney = counts.totalActualSalary
          }
          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;
        }
      });
    },
    getList2() {
      // this.finished = true
      let params = this.params2;
      findTeacherRewards(params).then(res => {
        let result = res.data;
        this.loading2 = false;
        if (result.code == 200) {
          let pageInfo = result.data
          params.page = pageInfo.pageNo
          this.dataList2 = this.dataList2.concat(pageInfo.rows)
          if (params.page >= pageInfo.totalPage) {
            this.finished2 = true;
          }
          this.params2.page++;
        } else {
          this.finished2 = true;
        }
        // 判断是否有数据
        if (this.dataList2.length <= 0) {
          this.dataShow2 = false;
        }
      });
    },
    onAppeal(haveComplaints) {
      this.$router.push({
        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
            document.querySelector('#remuneration').scrollTop = 0
          } 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)
    },
    getMonthDay(time) {
      let tempDate = time || new Date()
      if(typeof(tempDate) == 'string') {
          tempDate = new Date(time.replace(/-/ig, '/'))
      }
      let month = tempDate.getMonth() + 1
      let day = tempDate.getDate()
      return month + '月' + day + '日'
    }
  }
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.wrap {
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #f3f4f8;
}

.monthMoney {
  font-size: 0.16rem;
  color: #1a1a1a;
  background: #fff;
  text-align: center;
  padding: .1rem 0;
  span {
    font-size: .18rem;
  }
}

.monthCount {
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 0.04rem;
  margin: 0.16rem 0.16rem .12rem;
  background: #fff;
  padding: 0.12rem;
  .item {
    display: flex;
    justify-content: space-between;
    color: #666666;
    font-size: 0.14rem;
    padding: 0.05rem 0.1rem;
    .title {
      width: 1rem;
    }
    .money {
      width: 0.8rem;
      text-align: right;
    }

    &:nth-child(2n + 2) {
      background: #f0f0f0;
    }
  }
}
/deep/.van-tabs {
  background: #fff;
  padding-bottom: .12rem;
}
/deep/.van-tabs__line {
  background-color: #14928A;
}
/deep/.van-cell-group {
  margin: 0.16rem 0.16rem 0;
  border: 1px solid #71bdb8;
  border-radius: 0.04rem;
  overflow: hidden;
}
/deep/.van-cell {
  padding: 0.13rem;
  .van-cell__title {
    padding-left: 0.1rem;
  }
  .van-cell__value {
    flex: 0 auto;
    padding-left: 0.1rem;
  }
  .title {
    font-size: 0.16rem;
    font-weight: 500;
    color: #1a1a1a;
    padding-bottom: 0.05rem;
  }
  .baseInfo {
    font-size: 0.14rem;
    color: #808080;
    line-height: 1.3;
  }
  .money {
    font-size: 0.16rem;
    color: #1a1a1a;
    padding-bottom: 0.02rem;
    line-height: .24rem;
    &.error {
      color: #ff3535;
    }
    span {
      font-size: 0.22rem;
    }
  }
  .moneyInfo {
    font-size: 0.14rem;
    line-height: 1.3;
    color: #1a1a1a;
  }
}
.icon {
  width: 0.4rem;
  height: 0.4rem;
  display: inline-block;
}
.icon_audition {
  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-size: contain;
}
.icon_vip {
  background: url("../../assets/images/audition/vip_icon.png") no-repeat center;
  background-size: contain;
}
.icon_reword {
  background: url("../../assets/images/audition/reword_icon.png") no-repeat center;
  background-size: contain;
}
.paddingB80 {
  padding-bottom: .8rem
}
.paddingB16 {
  padding-bottom: .16rem;
}
.button-group {
  position: fixed;
  bottom: 0;
  margin: 0.2rem 0;
  width: 100%;
  text-align: center;
  .btn {
    padding: 0 0.45rem;
    line-height: 0.4rem;
    display: inline-block;
    border: 1px solid @mColor;
    border-radius: 1rem;
    color: @mColor;
    background: #fff;
    font-size: 0.18rem;
    &.primary {
      color: #fff;
      background: @mColor;
    }
  }
  .btn + .btn {
    margin-left: 0.1rem;
  }
}
</style>