feat:更换新建面授课upload组件

src/views/courselibrary/CoursewareManage.vue

@@ -179,7 +179,7 @@
                 </div>
                 <span>授课形式</span>
               </div>
-              <a-radio-group v-model:value="onftvalue">
+              <a-radio-group v-model:value="valueE1">
                 <div class="bc_box">
                   <div class="bc_boxl" @click="bs_hShow">
                     <div class="ol_checkbox">
@@ -209,15 +209,13 @@
                   </div>
                   <span>是否设置目录</span>
                 </div>
-                <a-radio-group v-model:value="valueE">
+                <a-radio-group v-model:value="valueE2">
                   <div class="bc_box">
                     <div class="ol_checkbox">
                       <a-radio v-model:checked="checked" :value="3">是</a-radio>
                     </div>
                     <div class="ol_checkbox">
-                      <a-radio v-model:checked="checked" :valueA="4"
+                      <a-radio v-model:checked="checked" :value="4">否</a-radio>
-                        >否</a-radio
-                      >
                     </div>
                   </div>
                 </a-radio-group>
@@ -327,7 +325,7 @@
                     </span>
                   </div>
                 </div>
-                <div class="mbl_items">
+                <div class="mbl_items2">
                   <div class="item_nam">
                     <div class="asterisk_icon">
                       <img
@@ -338,26 +336,13 @@
                     <span style="margin-right: 14px">封面图</span>
                   </div>
                   <div class="item_inp">
-                    <div class="i3_upload">
+                    <div class="i_upload">
-                      <a-upload
+                      <div class="addimg">
-                        v-model:file-list="fileList"
+                        <div class="heng"></div>
-                        name="avatar"
+                        <div class="shu"></div>
-                        list-type="picture-card"
+                      </div>
-                        class="avatar-uploader"
-                        :show-upload-list="false"
-                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-                        :before-upload="beforeUpload"
-                        @change="handleChange"
-                      >
-                        <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
-                        <div v-else>
-                          <loading-outlined v-if="loading"></loading-outlined>
-                          <plus-outlined v-else></plus-outlined>
-                          <div class="ant-upload-text">Upload</div>
-                        </div>
-                      </a-upload>
                     </div>
-                    <div class="i3_bottom">
+                    <div class="i_bottom">
                       <span style="color: #999ba3"
                         >高宽比为16:9 (如:800*450) png或jpg图片</span
                       >
@@ -489,7 +474,7 @@
                     </div>
                   </div>
                 </div>
-                <div class="mbl_items">
+                <div class="mbl_items2">
                   <div class="item_nam">
                     <span style="margin-right: 14px">课程简介</span>
                   </div>
@@ -1619,13 +1604,7 @@
 </template>
 <script>
 import { reactive, toRefs, defineComponent, ref } from "vue";
-import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
+
-import { message } from "ant-design-vue";
-function getBase64(img, callback) {
-  const reader = new FileReader();
-  reader.addEventListener("load", () => callback(reader.result));
-  reader.readAsDataURL(img);
-}
 const columns1 = [
   {
     title: "序号",
@@ -1966,12 +1945,8 @@ const columns7 = [
   },
 ];
 export default defineComponent({
-  components: {
+  components: {},
-    LoadingOutlined,
-    PlusOutlined,
-  },
   setup() {
-    const current = ref(["mail"]);
     const state = reactive({
       tableData1: [
         {
@@ -2290,53 +2265,19 @@ export default defineComponent({
       agreestudy_hs: false,
       rejectstudy_hs: false,
       value: "",
-      // value1:"",
-      // value2:"",
       value5: "",
       value6: "",
       value7: "",
       value8: "",
       value11: "",
       value20: "",
-      valueE: "",
+      valueE1: "",
+      valueE2: "",
       valueB: "",
       valueC: "",
       selectedRowKeys: [],
-
       faceManageTab: "1",
     });
-    const fileList = ref([]);
-    const loading = ref(false);
-    const imageUrl = ref("");
-    const handleChange = (info) => {
-      if (info.file.status === "uploading") {
-        loading.value = true;
-        return;
-      }
-      if (info.file.status === "done") {
-        // Get this url from response in real world.
-        getBase64(info.file.originFileObj, (base64Url) => {
-          imageUrl.value = base64Url;
-          loading.value = false;
-        });
-      }
-      if (info.file.status === "error") {
-        loading.value = false;
-        message.error("upload error");
-      }
-    };
-    const beforeUpload = (file) => {
-      const isJpgOrPng =
-        file.type === "image/jpeg" || file.type === "image/png";
-      if (!isJpgOrPng) {
-        message.error("You can only upload JPG file!");
-      }
-      const isLt2M = file.size / 1024 / 1024 < 2;
-      if (!isLt2M) {
-        message.error("Image must smaller than 2MB!");
-      }
-      return isJpgOrPng && isLt2M;
-    };
     const getTableDate = () => {
       let datas = state.tableData1;
       datas.map((value) => {
@@ -2808,7 +2749,6 @@ export default defineComponent({
       state.tableData = data2;
     };
     getTableDate4();
-    const onftvalue = ref();
     const options1 = ref([
       {
         value: "value1",
@@ -2903,7 +2843,7 @@ export default defineComponent({
     };
     const clear_valueE = () => {
       state.bs_hs = false;
-      state.valueE = "";
+      state.valueE1 = "";
     };
     const qr_exit = () => {
       state.QR_hs = false;
@@ -2930,21 +2870,13 @@ export default defineComponent({
     };
 
     return {
-      onftvalue,
-      current,
       ...toRefs(state),
-      fileList,
-      loading,
-      imageUrl,
       columns1,
       columns2,
       columns4,
       columns5,
       columns6,
       columns7,
-      // tableDataFunc,
-      handleChange,
-      beforeUpload,
       getTableDate,
       getTableDate2,
       options1,
@@ -3951,6 +3883,55 @@ export default defineComponent({
                   }
                 }
               }
+              .mbl_items2 {
+                display: flex;
+                align-items: start;
+                margin-top: 10px;
+                margin-bottom: 10px;
+                .item_nam {
+                  width: 100px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: flex-end;
+                  white-space: nowrap;
+                  .asterisk_icon {
+                    width: 10px;
+                    height: 10px;
+                    margin-right: 5px;
+                    margin-top: -15px;
+                  }
+                }
+                .item_inp {
+                  flex: 1;
+                  .i_upload {
+                    width: 100px;
+                    height: 100px;
+                    border: 1px solid #4ea6ff;
+                    border-radius: 8px;
+                    text-align: center;
+                    align-items: center;
+                    margin-bottom: 5px;
+                    cursor: pointer;
+                    .addimg{
+                      position: relative;
+                      .heng{
+                        position: absolute;
+                        top: 50px;
+                        left: 25px;
+                        width: 50px;
+                        border: 1px solid #4ea6ff;
+                      }
+                      .shu{
+                        position: absolute;
+                        top: 25px;
+                        left: 50px;
+                        height: 50px;
+                        border: 1px solid #4ea6ff;
+                      }
+                    }
+                  }
+                }
+              }
               .i2_cz {
                 width: 440px;
                 margin-left: 100px;
@@ -3987,12 +3968,6 @@ export default defineComponent({
                 }
                 .item_inp {
                   flex: 1;
-                  position: relative;
-                  .inp_num {
-                    position: absolute;
-                    left: 395px;
-                    bottom: 10px;
-                  }
                 }
                 .accessory {
                   display: flex;
@@ -4005,6 +3980,33 @@ export default defineComponent({
                   }
                 }
               }
+              .mbl_items2 {
+                display: flex;
+                align-items: start;
+                margin-bottom: 10px;
+                .item_nam {
+                  width: 100px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: flex-end;
+                  white-space: nowrap;
+                  .asterisk_icon {
+                    width: 10px;
+                    height: 10px;
+                    margin-right: 5px;
+                    margin-top: -15px;
+                  }
+                }
+                .item_inp {
+                  flex: 1;
+                  position: relative;
+                  .inp_num {
+                    position: absolute;
+                    left: 395px;
+                    bottom: 10px;
+                  }
+                  }
+                }
               .mbl_items12 {
                 width: 440px;
                 margin-left: 100px;