mteacher/src/views/audition/MonthAppeal.vue

<template>
  <div class="wrap">
    <m-header v-if="headerStatus" :backUrl="backUrl">
      <template slot="right">
          <div @click="onAppealRecord">申诉记录</div>
      </template>
    </m-header>
    <van-dropdown-menu active-color="#01C1B5">
      <van-dropdown-item v-model="value1" :options="option1" @change="getList" />
    </van-dropdown-menu>

    <div v-if="dataShow">
      <van-cell-group>
         <!-- :class="item.isNow ? '' : 'disabled'" -->
        <van-cell v-for="(item, index) in dataList" :key="index" is-link @click="onSure(item)">
          <template #title>
            {{ item.monthStr }}
            <van-tag v-if="item.confirmStatus != 2" color="#FF8282">未确认</van-tag>
            <van-tag v-if="item.confirmStatus == 2" >已确认</van-tag>
          </template>
          <template #default>
            总计：<span class="countMoney">{{ item.totalActualSalary }}元</span>
          </template>
        </van-cell>
      </van-cell-group>

      <div class="allCount">
        合计：<span class="allMoney">{{ totalSalary }}<i>元</i></span>
      </div>
    </div>
    <m-empty class="empty" msg="暂无数据" v-else key="data" />
  </div>
</template>
<script>
import MHeader from "@/components/MHeader"
import MEmpty from "@/components/MEmpty"
import { getSTD, browser }  from '@/common/common'
import { findTeacherYearSalarys } from '@/api/audition'
export default {
  name: "teacherList",
  components: { MHeader, MEmpty },
  data() {
    return {
      headerStatus: true,
      value1: new Date().getFullYear(),
      option1: [
        { text: '2020年', value: 2020 },
        { text: '2021年', value: 2021 },
        { text: '2022年', value: 2022 }
      ],
      dataShow: true,
      dataList: [],
      totalSalary: 0,
      backUrl: {
          callBack: () => {
              if (browser().android) {
                  // eslint-disable-next-line
                  DAYA.postMessage(JSON.stringify({ api: 'back' }))
              } else if (browser().iPhone) {
                  window.webkit.messageHandlers.DAYA.postMessage(JSON.stringify({ api: 'back' }))
              }
          }
      },
    };
  },
  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) {
    //   this.headerStatus = false;
    // }

    this.getList()
  },
  methods: {
    getList() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      findTeacherYearSalarys({ year: this.value1 }).then(res => {
        let result = res.data
        this.$toast.clear()
        if(result.code == 200) {
          this.totalSalary = result.data.totalSalary
          let t = new Date()
          t.setMonth(t.getMonth() - 1)
          let temp = t.getFullYear() + '-' + getSTD(t.getMonth() + 1)
          result.data.monthSalarys.forEach(item => {
            if(item.month == temp) {
              item.isNow = true
            } else {
              item.isNow = false
            }
            let tempDate = new Date(item.month + '-01')
            item.monthStr = (tempDate.getMonth() + 1) + '月'
          })
          this.dataList = result.data.monthSalarys.reverse()
          if(this.dataList.length <= 0) {
            this.dataShow = false
          } else {
            this.dataShow = true
          }
        } else {
          this.$toast(result.msg)
        }
      })
    },
    onSure(item) {
      // console.log(item)
      this.$router.push({
        path: '/remuneration',
        query: {
          month: item.month,
          isHide: 1
        }
      })
    },
    onAppealRecord() {
      this.$router.push({
        path: 'appealRecord'
      })
    }
  }
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.wrap {
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #f3f4f8;
}
/deep/.van-dropdown-menu__title, /deep/.van-cell {
  font-size: .16rem;
  line-height: .18rem;
}
/deep/.van-cell {
  padding-top: .14rem;
  padding-bottom: .14rem;
}
.countMoney {
  color: #FF433F;
}
.disabled {
  opacity: .5;
}

/deep/.van-cell-group {
  margin-bottom: .55rem;
}
.allCount {
  padding: 0 .16rem;
  line-height: .55rem;
  background: #fff;
  font-size: .17rem;
  color: #1A1A1A;
  display: flex;
  justify-content: space-between;
  position: fixed;
  width: calc(100% - .32rem);
  bottom: 0;
  left: 0;
  .allMoney {
    font-size: .22rem;
    color: #F85043;
    i {
      font-style: normal;
      font-size: .16rem;
    }
  }
}
</style>