fe-manage/src/components/courserecommended/RecommendedCourse.vue

<template>
  <!-- 推荐课程抽屉 -->
  <a-drawer class="course-drawer" :visible="visible" width="80%" :title="title" @close="closeDrawer" :maskClosable="false">
    <div class="inp">
      <span class="red">* </span>
      <span>推荐标题：</span>
      <a-input v-model:value="state.sellName"  show-count :maxlength="20" />
    </div>
    <div class="inp">
      <span class="red">* </span>
      <span>推荐组织：</span>
      <a-input v-model:value="state.sellForm"/>
    </div>
    <div class="inp inp2">
      <span class="red">* </span>
      <span>推荐理由：</span>
      <a-input v-model:value="state.sellIntro"  show-count :maxlength="100" />
    </div>
    <div class="imgupload">
      <span class="red">* </span>
      <span>课程包封面图：</span>
      <div>
        <a-upload
          v-model:file-list="fileList"
          
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          list-type="picture-card"
          @preview="handlePreview"
        >
        <div v-if="fileList.length < 1">
            <plus-outlined />
            <div  style="margin-top: 8px">
              <img src="../../assets/images/taskpage/upload.png" alt="">
              <span>将文件拖到此处，或 点击上传
</span>
            </div>
            
        </div>
        </a-upload>
        <a-modal :visible="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
      </div>
    </div>
    <div class="button1">
      <button class="btn2" @click="closeDrawer">取消</button>
      <a-button class="btn2" @click="handleNew">下一步</a-button>
    </div>
    <AddCourse v-model:visible="newNext" :title="添加在线课程"></AddCourse>
  </a-drawer>
  
  <!-- 下一步添加学员 -->
</template>
<script setup>
import { reactive, ref, computed, nextTick } from 'vue';
import { Form, message } from "ant-design-vue";
import { isTopList, downloadErrorRecords, UploadProps } from '@/api/case'
import AddCourse from "@/components/courserecommended/AddCourse";
import useDownload from '@/hooks/useDownload'
const state = reactive({
  sellName:"1",      //推荐标题
  sellIntro:"1",     //推荐组织
  sellForm:"1",      //推荐理由
})
const newNext = ref(false);
const handleNew = () => {
  if(!state.sellName){
    message.destroy();
    return message.warning("请输入推荐标题");
  }
  if(!state.sellIntro){
    message.destroy();
    return message.warning("请输入推荐组织");
  }
  if(!state.sellForm){
    message.destroy();
    return message.warning("请输入推荐理由");
  }
  newNext.value = true;
};
const emit = defineEmits(['update:visible'])

// 取消抽屉
const closeDrawer = async () => {
  state.sellName = ""
  state.sellIntro = ""
  state.sellForm = ""
  // resetFields()
  emit('update:visible', false)
  // await nextTick()
  // getTopList()
}

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
const previewVisible = ref(false);
    const previewImage = ref('');
    const previewTitle = ref('');

    const fileList = ref([
   
    ]);

    const handleCancel = () => {
      previewVisible.value = false;
      previewTitle.value = '';
    };
    const handlePreview = async (file) => {
      if (!file.url && !file.preview) {
        file.preview = (await getBase64(file.originFileObj));
      }
      previewImage.value = file.url || file.preview;
      previewVisible.value = true;
      previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
    };

defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '推荐课程'
  },
  
})

</script>


<style lang="scss" scoped>
.course-drawer{
  margin-bottom: 80px;
  .red{
    color: #d9001b;
  }
  .inp{
    display: flex;
    margin-left: 134px;
    margin-bottom: 55px;
    .ant-input{
      width: 510px;
      height: 31px;
    }
    .ant-input-affix-wrapper{
      width: 510px;
      height: 31px;

    }

  }
  .inp2 .ant-input-affix-wrapper{
    height: 80px;
  }
  .imgupload{
    margin-left: 134px;
    margin-bottom: 55px;
    :deep(.ant-upload.ant-upload-select-picture-card){
      width: 413px;
      height: 227px;
      margin-left: 80px;
      margin-top: 30px;
    }
    :deep(.ant-upload-list-picture-card .ant-upload-list-item){
      width: 413px;
      height: 227px;
      margin-left: 80px;
      margin-top: 30px;
    }
  }
  .button1 {
    height: 72px;
    width: 100%;
    position: absolute;
    background-color: #fff;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
    
    .btn2 {
      width: 60px;
      height: 30px;
      padding: 2px 2px 2px 2px;
      border-radius: 4px;
      border: 1px solid #409eff;
      background-color: #409eff;
      color: #ffffff;
      text-align: center;
      margin-left: 23px;
      &:hover{
        background-color: #66b1ff;
        box-sizing: border-box;
      }
    }
  }
}


</style>