feat：添加外链接口对接 完善添加直播

src/api/indexExternalChain.js

@@ -0,0 +1,19 @@
+import http from "./config";
+
+//创建外链接口
+export const createExternalChain = (obj) => http.post('/link/createLinks', obj)
+
+//外链信息删除接口
+export const deleteLink = (obj) => http.post('/link/deleteLink', { params: obj })
+
+//获取外链详细信息接口
+export const getLink = (obj) => http.post('/link/getOne', { params: obj })
+
+// 更新外链数据
+export const updateLinks = (obj) => http.post('/link/updateLinks', obj)
+
+//修改为必修的接口
+export const updateToCompulsory = (obj) => http.post('/link/updateToCompulsory', { params: obj })
+
+//修改为选修的接口
+export const updateToElective = (obj) => http.post('/link/updateToElective', { params: obj })

src/components/drawers/AddLive.vue

@@ -65,7 +65,6 @@
               <a-range-picker
                 style="width: 424px"
                 v-model:value="time"
-                format="YYYY-MM-DD HH:MM"
                 :placeholder="['      开始时间', '        结束时间']"
               />
             </div>
@@ -110,7 +109,7 @@
             <div class="signbox">
               <span style="margin-right: 3px">直播封面：</span>
             </div>
-            <div class="textarea">
+            <div class="textarea" style="overflow: hidden">
               <a-upload
                 v-model:file-list="fileList"
                 name="avatar"
@@ -279,7 +278,7 @@
         </div>
       </div>
       <div class="main_btns">
-        <button class="btn1">取消</button>
+        <button class="btn1" @click="closeDrawer">取消</button>
         <button class="btn2" @click="createLiveBroadcast">确定</button>
       </div>
     </div>
@@ -289,6 +288,13 @@
 import { reactive, toRefs, ref } from "vue";
 import { message } from "ant-design-vue";
 import * as api from "../../api/indexLiveBroadcast";
+import { toDate } from "@/api/method";
+
+function getBase64(img, callback) {
+  const reader = new FileReader();
+  reader.addEventListener("load", () => callback(reader.result));
+  reader.readAsDataURL(img);
+}
 const options1 = ref([
   {
     value: "value1",
@@ -465,6 +471,8 @@ export default {
       inputV8: "", //结束前多少分钟开始签退
       textV1: "",
       radioV1: "", //标准设置的单选
+      imageUrl: "", //上传图片地址
+      loading: false,
       switchC1: "",
       checkedC1: "",
       checkedC2: true,
@@ -474,6 +482,18 @@ export default {
       ctx.emit("update:addliveVisible", false);
       state.radioV1 = "";
       state.playback = false;
+      state.inputV6 = "";
+      state.inputV7 = "";
+      state.inputV2 = "";
+      state.inputV3 = "";
+      state.inputV1 = "";
+      state.inputV4 = "";
+      state.inputV5 = "";
+      state.inputV8 = "";
+      state.time = "";
+      state.textV1 = "";
+      state.switchC1 = "";
+      state.imageUrl = "";
     };
     const afterVisibleChange = (bool) => {
       console.log("state", bool);
@@ -487,23 +507,66 @@ export default {
         state.radioV1 = "";
       }
     };
+    const handleChange = (info) => {
+      if (info.file.status === "uploading") {
+        state.loading = true;
+        return;
+      }
+
+      if (info.file.status === "done") {
+        // Get this url from response in real world.
+        getBase64(info.file.originFileObj, (base64Url) => {
+          state.imageUrl = base64Url;
+          state.loading = false;
+        });
+      }
+
+      if (info.file.status === "error") {
+        state.loading = 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 createLiveBroadcast = () => {
-      if (!state.inputV1) return message.info("请输入直播名称");
-      if (!state.time) return message.info("请输入直播时间");
-      if (!state.inputV2) return message.info("请输入直播时长");
+      if (!state.inputV1) return message.warning("请输入直播名称");
+      if (!state.time) return message.warning("请输入直播时间");
+      if (!state.inputV2) return message.warning("请输入直播时长");
       const regular = /^[+]{0,1}(\d+)$/;
       if (!regular.test(state.inputV2)) {
-        return message.info("直播时长需大于0");
+        return message.warning("直播时长需大于0");
       }
 
       // if (!state.inputV3) return message.info("请输入授课老师");
       let check = state.checkedC2 * 1;
-      let startTime = state.time[0].$d;
-      let endTime = state.time[1].$d;
-      console.log(startTime); //时间需要处理
-      console.log(endTime);
+      // let startTime = state.time[0].$d;
+      // let endTime = state.time[1].$d;
+      // console.log(startTime); //时间需要处理
+      // console.log(endTime);
+      let startTime = toDate(
+        new Date(state.time[0].$d).getTime() / 1000,
+        "Y-M-D"
+      );
+      let endTime = toDate(
+        new Date(state.time[1].$d).getTime() / 1000,
+        "Y-M-D"
+      );
       let obj = {
         afterSignIn: state.inputV6,
         beforeSignIn: state.inputV7,
@@ -511,8 +574,8 @@ export default {
         createUser: 0,
         // liveCover: state.fileList,//直播封面
         liveDuration: state.inputV2,
-        // liveEndTime: endTime,
-        // liveStartTime: startTime,
+        liveEndTime: endTime,
+        liveStartTime: startTime,
         liveExplain: state.textV1,
         liveFlag: "",
         liveId: 0,
@@ -532,6 +595,11 @@ export default {
         .createLiveBroadcast(obj)
         .then((res) => {
           console.log(res.data.data, 1111);
+          console.log(state, 2222);
+          message.success("提交成功");
+          closeDrawer();
+
+          // state = {}
         })
         .catch((err) => {
           console.log(err, 2222);
@@ -548,6 +616,8 @@ export default {
       rowSelection,
       cloradio1,
       createLiveBroadcast,
+      handleChange,
+      beforeUpload,
     };
   },
 };

src/components/drawers/AddRef.vue

@@ -1,268 +1,300 @@
 <template>
-    <a-drawer
-      :visible="addrefVisible"
-      class="drawerStyle addrefDrawer"
-      width="80%"
-      title="添加外链"
-      placement="right"
-      @after-visible-change="afterVisibleChange"
-    >
-      <div class="drawerMain">
-        <div class="header">
-          <div class="headerTitle">添加外链</div>
-          <img
-            style="width: 29px; height: 29px; cursor: pointer"
-            src="../../assets/images/basicinfo/close.png"
-            @click="closeDrawer"
-          />
-        </div>
-        <div class="contentMain">
-          <div class="main_left">
-            <div class="main_item">
-              <div class="signbox">
-                <div class="sign">
-                  <img
-                    src="@/assets/images/coursewareManage/asterisk.png"
-                    alt=""
-                  />
-                </div>
-                <span style="margin-right: 3px">外链名称：</span>
+  <a-drawer
+    :visible="addrefVisible"
+    class="drawerStyle addrefDrawer"
+    width="80%"
+    title="添加外链"
+    placement="right"
+    @after-visible-change="afterVisibleChange"
+  >
+    <div class="drawerMain">
+      <div class="header">
+        <div class="headerTitle">添加外链</div>
+        <img
+          style="width: 29px; height: 29px; cursor: pointer"
+          src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer"
+        />
+      </div>
+      <div class="contentMain">
+        <div class="main_left">
+          <div class="main_item">
+            <div class="signbox">
+              <div class="sign">
+                <img
+                  src="@/assets/images/coursewareManage/asterisk.png"
+                  alt=""
+                />
               </div>
-              <div class="btnbox">
-                <a-input
-                  v-model:value="inputV1"
-                  style="width: 424px; height: 32px"
-                  placeholder="请输入外链名称"
+              <span style="margin-right: 3px">外链名称：</span>
+            </div>
+            <div class="btnbox">
+              <a-input
+                v-model:value="inputV1"
+                style="width: 424px; height: 32px"
+                placeholder="请输入外链名称"
                 maxlength="20"
+              />
+            </div>
+          </div>
+          <div class="main_item">
+            <div class="signbox">
+              <div class="sign">
+                <img
+                  src="@/assets/images/coursewareManage/asterisk.png"
+                  alt=""
                 />
               </div>
+              <span style="margin-right: 3px">链接：</span>
             </div>
-            <div class="main_item">
-              <div class="signbox">
-                <div class="sign">
-                  <img
-                    src="@/assets/images/coursewareManage/asterisk.png"
-                    alt=""
-                  />
-                </div>
-                <span style="margin-right: 3px">链接：</span>
-              </div>
-              <div class="btnbox">
-                <a-input
-                  v-model:value="inputV2"
-                  style="width: 424px; height: 32px"
-                  placeholder="请输入链接"
-                />
-              </div>
+            <div class="btnbox">
+              <a-input
+                v-model:value="inputV2"
+                style="width: 424px; height: 32px"
+                placeholder="请输入链接"
+              />
             </div>
-            <div class="main_item2">
-              <div class="signbox">
-                <span style="margin-right: 3px">外链说明：</span>
-              </div>
-              <div class="textarea">
-                <a-textarea
-                  v-model:value="textV1"
-                  placeholder="请输入外链说明"
-                  allow-clear
-                />
-              </div>
+          </div>
+          <div class="main_item2">
+            <div class="signbox">
+              <span style="margin-right: 3px">外链说明：</span>
+            </div>
+            <div class="textarea">
+              <a-textarea
+                v-model:value="textV1"
+                placeholder="请输入外链说明"
+                allow-clear
+              />
             </div>
-
           </div>
         </div>
-        <div class="main_btns">
-          <button class="btn1">取消</button>
-          <button class="btn2">确定</button>
-        </div>
       </div>
-    </a-drawer>
-  </template>
+      <div class="main_btns">
+        <button class="btn1" @click="closeDrawer">取消</button>
+        <button class="btn2" @click="createExternalChain">确定</button>
+      </div>
+    </div>
+  </a-drawer>
+</template>
   <script>
-  import { reactive, toRefs, ref } from "vue";
-  const rowSelection = ref({
-    checkStrictly: false,
-    onChange: (selectedRowKeys, selectedRows) => {
-      console.log(
-        `selectedRowKeys: ${selectedRowKeys}`,
-        "selectedRows: ",
-        selectedRows
-      );
+import { reactive, toRefs, ref } from "vue";
+import * as api from "../../api/indexExternalChain";
+import { message } from "ant-design-vue";
+const rowSelection = ref({
+  checkStrictly: false,
+  onChange: (selectedRowKeys, selectedRows) => {
+    console.log(
+      `selectedRowKeys: ${selectedRowKeys}`,
+      "selectedRows: ",
+      selectedRows
+    );
+  },
+  onSelect: (record, selected, selectedRows) => {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: (selected, selectedRows, changeRows) => {
+    console.log(selected, selectedRows, changeRows);
+  },
+});
+export default {
+  name: "AddRef",
+  // components: {
+  // },
+  props: {
+    addrefVisible: {
+      type: Boolean,
+      default: false,
     },
-    onSelect: (record, selected, selectedRows) => {
-      console.log(record, selected, selectedRows);
-    },
-    onSelectAll: (selected, selectedRows, changeRows) => {
-      console.log(selected, selectedRows, changeRows);
-    },
-  });
-  export default {
-    name: "AddRef",
-    // components: {
-    // },
-    props: {
-      addrefVisible: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    setup(props, ctx) {
-      const state = reactive({
-          inputV1: "",
-          inputV2: "",
-        textV1:"",
-      });
-      const closeDrawer = () => {
-        ctx.emit("update:addrefVisible", false);
+  },
+  setup(props, ctx) {
+    const state = reactive({
+      inputV1: "",
+      inputV2: "",
+      textV1: "",
+    });
+    const closeDrawer = () => {
+      ctx.emit("update:addrefVisible", false);
+      state.inputV2 = "";
+      state.inputV1 = "";
+      state.textV1 = "";
+    };
+    const afterVisibleChange = (bool) => {
+      console.log("state", bool);
+    };
+    const createExternalChain = () => {
+      console.log(Object.prototype.toString.call(state.inputV1));
+      console.log(Object.prototype.toString.call(state.inputV2));
+      console.log(Object.prototype.toString.call(state.textV1));
+      let obj = {
+        createUser: 0,
+        createTime: "",
+        linkAddress: state.inputV2,
+        linkDescription: state.textV1,
+        linkFlag: "",
+        linkId: 0,
+        linkName: state.inputV1,
+        linkTag: "",
+        updateTime: "",
+        updateUser: 0,
       };
-      const afterVisibleChange = (bool) => {
-        console.log("state", bool);
-      };
-      return {
-        ...toRefs(state),
-        afterVisibleChange,
-          closeDrawer,
-          rowSelection,
-      };
-    },
-  };
-  </script>
+      api
+        .createExternalChain(obj)
+        .then((res) => {
+          console.log(res.data.data);
+          message.success("提交成功");
+          closeDrawer();
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    };
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      closeDrawer,
+      rowSelection,
+      createExternalChain,
+    };
+  },
+};
+</script>
   <style lang="scss">
-  .ant-table-striped :deep(.table-striped) td {
-    background-color: #fafafa !important;
-  }
-  .addrefDrawer {
-    .drawerMain {
-      .header {
-        height: 73px;
-        border-bottom: 1px solid #e8e8e8;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .headerTitle {
-          font-size: 18px;
-          font-weight: 600;
-          color: #333333;
-          line-height: 25px;
-          margin-left: 24px;
-        }
+.ant-table-striped :deep(.table-striped) td {
+  background-color: #fafafa !important;
+}
+.addrefDrawer {
+  .drawerMain {
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        margin-left: 24px;
       }
-      .contentMain {
-        display: flex;
-        justify-content: space-between;
-        .main_left {
-          padding-right: 30px;
-          flex: 1;
-          border-right: 1px solid #e8e8e8;
-          .main_item {
+    }
+    .contentMain {
+      display: flex;
+      justify-content: space-between;
+      .main_left {
+        padding-right: 30px;
+        flex: 1;
+        border-right: 1px solid #e8e8e8;
+        .main_item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 32px;
+          .signbox {
+            width: 120px;
             display: flex;
+            justify-content: end;
             align-items: center;
-            margin-bottom: 32px;
-            .signbox {
-              width: 120px;
-              display: flex;
-              justify-content: end;
-              align-items: center;
-              .sign {
-                margin-right: 5px;
-              }
-            }
-            .btnbox {
-              display: flex;
-              flex: 1;
-              align-items: center;
-              .xkbtn {
-                cursor: pointer;
-                width: 130px;
-                height: 40px;
-                background: #388be1;
-                border-radius: 8px;
-                border: 0;
-                margin-right: 8px;
-                color: #fff;
-              }
+            .sign {
+              margin-right: 5px;
             }
           }
-          .main_item2 {
+          .btnbox {
             display: flex;
-            align-items: flex-start;
-            margin-bottom: 32px;
-            .signbox {
-              width: 120px;
-              display: flex;
-              justify-content: end;
-              align-items: center;
-              .sign {
-                margin-right: 5px;
-              }
-            }
-            .kqszbox {
-              .qdqtbox {
-                margin-left: 56px;
-              }
-              .setbox {
-                display: flex;
-                flex-wrap: wrap;
-                margin-top: 10px;
-                margin-bottom: 24px;
-                .timerbox {
-                  margin-top: 6px;
-                  margin-right: 32px;
-                  display: flex;
-                  align-items: center;
-                  flex-wrap: nowrap;
-                }
-              }
-            }
-            .btnbox2 {
-              display: flex;
-              flex-direction: column;
-              justify-content: flex-start;
-              .xkbtn {
-                cursor: pointer;
-                width: 130px;
-                height: 40px;
-                background: #388be1;
-                border-radius: 8px;
-                border: 0;
-                margin-right: 16px 8px 32px 0;
-                color: #fff;
-                margin-top: 16px;
-                margin-bottom: 60px;
-              }
+            flex: 1;
+            align-items: center;
+            .xkbtn {
+              cursor: pointer;
+              width: 130px;
+              height: 40px;
+              background: #388be1;
+              border-radius: 8px;
+              border: 0;
+              margin-right: 8px;
+              color: #fff;
             }
           }
         }
-      }
-      .main_btns {
-        height: 72px;
-        width: 100%;
-        bottom: 0;
-        left: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
-        .btn1 {
-          width: 100px;
-          height: 40px;
-          border: 1px solid #4ea6ff;
-          border-radius: 8px;
-          color: #4ea6ff;
-          background-color: #fff;
-          cursor: pointer;
-        }
-        .btn2 {
-          cursor: pointer;
-          width: 100px;
-          height: 40px;
-          background: #4ea6ff;
-          border-radius: 8px;
-          border: 0;
-          margin-left: 15px;
-          color: #fff;
+        .main_item2 {
+          display: flex;
+          align-items: flex-start;
+          margin-bottom: 32px;
+          .signbox {
+            width: 120px;
+            display: flex;
+            justify-content: end;
+            align-items: center;
+            .sign {
+              margin-right: 5px;
+            }
+          }
+          .kqszbox {
+            .qdqtbox {
+              margin-left: 56px;
+            }
+            .setbox {
+              display: flex;
+              flex-wrap: wrap;
+              margin-top: 10px;
+              margin-bottom: 24px;
+              .timerbox {
+                margin-top: 6px;
+                margin-right: 32px;
+                display: flex;
+                align-items: center;
+                flex-wrap: nowrap;
+              }
+            }
+          }
+          .btnbox2 {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            .xkbtn {
+              cursor: pointer;
+              width: 130px;
+              height: 40px;
+              background: #388be1;
+              border-radius: 8px;
+              border: 0;
+              margin-right: 16px 8px 32px 0;
+              color: #fff;
+              margin-top: 16px;
+              margin-bottom: 60px;
+            }
+          }
         }
       }
     }
+    .main_btns {
+      height: 72px;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+      .btn1 {
+        width: 100px;
+        height: 40px;
+        border: 1px solid #4ea6ff;
+        border-radius: 8px;
+        color: #4ea6ff;
+        background-color: #fff;
+        cursor: pointer;
+      }
+      .btn2 {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 0;
+        margin-left: 15px;
+        color: #fff;
+      }
+    }
   }
-  </style>
+}
+</style>