EAIFrontend/src/views/HomeworkPage/component/HomeworkDetail.vue

<template>
  <div class="homework-details">
    <div class="homework-details-title">
      作业详情
    </div>
    <div class="homework-details-info">
      <div class="homework-details-text">
        <div class="title">
          {{data.assignmentName}}
        </div>
        <div class="item">
          <span style="font-weight: 600">作业描述: </span>
          {{data.description}}
        </div>
        <div class="item">
          <span style="font-weight: 600">发布老师: </span>
          {{data.teacherName}}
        </div>
        <div class="item">
          <span style="font-weight: 600">截止日期: </span>
          {{new Date(Date.parse(data.endTime)).toLocaleString()}}
        </div>
        <div class="item">
          <el-link type="primary" @click="downloadFile(data.descriptionFile, `${data.assignmentName}-描述文件`)">相关文件下载</el-link>
          <div class="button-container">
            <el-button style="margin-left: 550px" color="#597D3B" @click="handleBack">返回</el-button>
            <el-button color="#597D3B" @click="handleStart()" :disabled="new Date() > new Date(data.endTime)">
              开始{{ data.type }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
<!--    <div class="homework-details-title">-->
<!--      评论区-->
<!--    </div>-->
<!--    <div class="homework-remark">-->
<!--      <div>-->
<!--        <el-skeleton style="width: 240px" animated >-->
<!--          <template #template>-->
<!--            <el-skeleton-item variant="circle" style="&#45;&#45;el-skeleton-circle-size: 40px"></el-skeleton-item>-->
<!--            <el-skeleton-item variant="text" style="height: 40px;width: 200px; margin-left: 30px"></el-skeleton-item>-->
<!--          </template>-->
<!--        </el-skeleton>-->
<!--      </div>-->
<!--      <div>-->
<!--        <el-input type="textarea" style="width: 100%;margin: 20px 0"></el-input>-->
<!--        <el-button color="#597d3b" size="large" style="float: right" :disabled="true">发布</el-button>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script lang="ts" setup>
import useApis from "@/apis";
import {useRoute} from "vue-router";
import {onMounted, reactive} from "vue";
import type {IAssignment} from "@/types/vo";
import './homeworkDetail.scss'
import {useStore} from "@/store";
import router from "@/router";
import {ElMessage} from "element-plus";

const apis = useApis()
const store = useStore()
const route = useRoute()
const assignmentId = +route.params.assignmentId //string转number

let data = reactive<IAssignment>({
  assignmentId: null,
  assignmentName: "",
  description: "",
  descriptionFile: null,
  attachments: null,
  teacherId: null,
  teacherName: "",
  courseId: null,
  startTime: "",
  endTime: "",
  createTime: "",
  status: "",
  type:""
})

function handleStart(){
  getEngagement()
  console.log(data.type)
  if(data.type == 'writing' || data.type == '写作'){
    router.push(`/home/assignment/${assignmentId}/edit`)
  } else if(data.type == 'speaking' || data.type == 'AI口语'){
    router.push(`/home/assignment/${assignmentId}/aispeaking`)
  }
}

function downloadFile(url:string, fileName:string) {
  const link = document.createElement('a');
  link.href = url;
  //link.download = fileName;
  //link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
  link.click();
}


async function getEngagement(){
  apis.getEngagement(store.user.id, assignmentId)
      .then((_res:any) => {
        //还未参加作业，则先加入作业
        if(_res.data.data == null){
          apis.engageAssignment(assignmentId)
              .then((res:any) => {
                ElMessage({
                  message: '参加作业成功',
                  type: 'success',
                })
              })
              .catch((_err:any) => {
                console.log("参加做业的错误",_err)
              })
        }
      }).catch((_err:any) => {
        console.log(_err)
      })
}


const fetchData = () => {
  apis.getAssignmentById(assignmentId)
      .then((res: any) => {
        Object.assign(data, res.data.data)
      })
}

const handleBack = () => {
   // 跳转到目标页面
   router.push(`/home/courseDetail/${data.courseId}`)
}

onMounted(() => {
  fetchData()
})
</script>

<script lang="ts">
export default {
  name: "HomeworkDetail"
}
</script>

<style scoped>
  .button-container {
    display: flex;

  }
  .el-button {
  margin-right:0px;
}
</style>