mteacher/src/views/audition/ArrangeWork.vue

<template>
  <div class="arrangeWork">
    <m-header v-if="headerStatus" />
    <div class="container">
      <!-- <div class="formGroup">
        <div class="formTitle">课外训练标题</div>
        <van-field type="text" placeholder="请输入（1-25字）" />
      </div> -->
      <div class="formGroup">
           <div class="dot"></div>
        <div class="formTitle">作业内容</div>
        <van-field rows="8" v-model="content" type="textarea" placeholder="请输入（1-600字）" />
      </div>
    </div>
    <van-cell class="endTime" title="作业提交截止时间" @click="onEndTime" readonly placeholder="请选择截止时间" >
      <template #default>
        {{ dateSection.showStartDate }} <span class="arrowDown"></span>
      </template>
    </van-cell>
    <div class="button-group">
      <van-button type="primary" round size="large" @click="onSubmit">确定</van-button>
    </div>

    <!-- 日期开始弹窗 -->
    <van-popup position="bottom" v-model="dateSection.status">
      <van-datetime-picker
        v-model="dateSection.currentDate"
        type="date"
        :min-date="dateSection.minDate"
        :max-date="dateSection.maxDate"
        :formatter="formatter"
        @confirm="confirmStartTime()"
        @cancel="dateSection.status = false"
      />
    </van-popup>
  </div>
</template>
<script>
import MHeader from "@/components/MHeader"
import { browser, _throttle }  from '@/common/common'
import dayjs from "dayjs";
import { addHomeWork } from '@/api/audition'
export default {
  name: "teacherList",
  components: { MHeader },
  data() {
    let tempDate = new Date() // 默认显示T+3
    tempDate.setDate(tempDate.getDate() + 3)
    return {
      that: this,
      headerStatus: true,
      dateSection: {
        status: false,
        minDate: new Date(),
        maxDate: new Date(2025, 10, 1),
        currentDate: tempDate,
        showStartDate: dayjs(tempDate).format("YYYY年MM月DD日")
      },
      content: null, // 课程编号
      expiryDate: null, // 作业截止日期
    };
  },
  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
    }

  },
  methods: {
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`
      } else if (type === "month") {
        return `${val}月`
      } else if (type == "day") {
        return `${val}日`
      }
      return val
    },
    confirmStartTime() {
      this.dateSection.showStartDate = dayjs(this.dateSection.currentDate).format("YYYY年MM月DD日")
      this.dateSection.status = false
    },
    onEndTime() {
      this.dateSection.status = true
    },
    onSubmit: _throttle(function() {
      if(!this.content) {
        this.$toast('请输入作业内容')
        return
      }
      this.$toast.loading({
        message: '加载中...',
        duration: 10000,
        forbidClick: true,
        loadingType: 'spinner',
      })
      let query = this.$route.query
      let params = {
        content: this.content,
        courseId: query.courseId,
        expiryDate: dayjs(this.dateSection.currentDate).format('YYYY-MM-DD')
      }
      addHomeWork({...params}).then(res => {
        let result = res.data
        this.$toast.clear()
        if(result.code == 200) {
          this.$toast('作业布置成功')
          this.$router.replace({
            path: '/manageEvaluation'
          })
        } else {
          this.$toast(result.msg)
        }
      })
    }, 500)
  }
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.arrangeWork {
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #F3F4F8;
}
/deep/.van-cell {
  font-size: .14rem;
  padding: .12rem .16rem;
  line-height: .24rem;
}

.arrowDown {
  display: inline-block;
  margin-left: .1rem;
  width: 0.1rem;
  height: 0.07rem;
  background: url('../../assets/images/audition/arrow_down.png') no-repeat center center;
  background-size: 100%;
}


.container {
  background: #ffffff;
  .formTitle {
    padding: .12rem .21rem 0;
    font-size: .16rem;
    color: #333333;
    font-weight: 500;
  }
}

.endTime {
  margin-top: .1rem;
  .van-cell__title {
    font-size: .16rem;
    color: #1A1A1A;
 
  }

  /deep/.van-cell__value {
    // width: 30%;
    justify-content: flex-end;
    text-align: right;
    font-size: .16rem;
    color: #1A1A1A;
    display: flex;
    align-items: center;
  }
}



.button-group {
  margin: 0.3rem 0.26rem 0.2rem;
  .van-button--primary {
    background: @mColor;
    border: 1px solid @mColor;
    font-size: 0.18rem;
  }
}

.dot {
  width: 4px;
  height: 0.17rem;
  background: #01c1b5;
  border-radius: 3px;
  position: absolute;
  z-index: 200;
  top: .15rem;
  left: 0.12rem;
}
.formGroup {
  position: relative;
}
</style>