完成首页配置

src/api/biz/settings.js

@@ -12,3 +12,32 @@ export const fetchAllSwiper = () => {
 export const fetchHomeTags = () => {
   return request("get", "/api/mgr/mainPageTagConfig", {});
 };
+
+export const fetchAvaliHomeTags = (data) => {
+  return request("post", "/api/mgr/mainPageTagConfig/tags", {data});
+};
+
+export const addHomeTag = (tag) => {
+  return request("post", "/api/mgr/mainPageTagConfig/add", tag);
+};
+
+export const removeHomeTag = (tagId) => {
+  return request("get", `/api/mgr/mainPageTagConfig/delete/${tagId}`, {});
+};
+
+export const fetchRecVideos = () => {
+  return request("get", `/api/mgr/recommendConfig/list`, {});
+};
+
+export const fetchAvailRecVideos = (data) => {
+  return request("post", `/api/mgr/recommendConfig/select`, {data});
+};
+
+export const addHomeRecVideos = (data) => {
+  return request("post", `/api/mgr/recommendConfig/add`, data);
+};
+
+export const removeHomeRecVideos = (id) => {
+  return request("get", `/api/mgr/recommendConfig/delete/${id}`, {});
+};
+

src/views/biz/homePageSetting/index.vue

@@ -10,21 +10,37 @@
         :key="swiper.id"
         :value="swiper.id"
       >
-        <div class="swiper-div">
+        <div
+          class="swiper-div"
+          @click="updateSwiper(swiper)"
+        >
           <div class="img-container">
             <img
               class="image"
               v-if="swiper.imageUrl"
               :src="swiper.imageUrl"
-              alt="avatar"
             />
+            <div class="swiper-image-status">
+
+              <a-tooltip
+                v-if="swiper.status === 'ENABLE'"
+                placement="bottom"
+                title="已发布"
+              >
+                <a-icon
+                  type="star"
+                  theme="filled"
+                />
+              </a-tooltip>
+              <a-tooltip
+                v-else
+                placement="bottom"
+                title="未发布"
+              >
+                <a-icon type="star" />
+              </a-tooltip>
+            </div>
           </div>
-          <a-button type="link">
-            关联课程
-          </a-button>
-          <a-button type="link">
-            {{swiper.status === 'ENABLE' ? "下架" : "上架"}}
-          </a-button>
           <div class="course-name">
             <span>{{swiper.courseName}}</span>
           </div>
@@ -51,19 +67,21 @@
 
     <a-row
       type="flex"
-      class="swiper-config"
+      class="swiper-config-hometags"
     >
       <a-col :span="24">
         <div>
           <a-tag
             v-for="(tag) in this.homeTags"
             :key="tag.id"
-            color="#108ee9"
+            color="blue"
+            closable
+            @close="deleteHomeTag(tag)"
           >{{tag.name}}</a-tag>
           <a-button
-            type="primary"
             icon="plus"
             @click="showHomeTagEditor"
+            size="small"
           >
             添加标签
           </a-button>
@@ -73,10 +91,55 @@
 
     <div class="title-text rec-video">首页推荐视频</div>
 
+    <a-row
+      type="flex"
+      class="swiper-config"
+    >
+      <a-col
+        v-for="video in this.homeRecVideos"
+        :key="video.id"
+        :value="video.id"
+      >
+        <div class="swiper-div">
+          <div class="img-container">
+            <img
+              class="image"
+              v-if="video.courseLogoUrl"
+              :src="video.courseLogoUrl"
+            />
+            <div class="swiper-image-status">
+              <a-icon
+                type="delete"
+                @click="removeHomeRecVideo(video)"
+              />
+            </div>
+          </div>
+          <div class="course-name">
+            <span>{{video.courseName}}</span>
+          </div>
+        </div>
+      </a-col>
+
+      <a-col>
+        <div
+          class="create-swiper-div"
+          @click="openHomeVideoEditor"
+        >
+          <div class="tool-bar-text">
+            <a-icon
+              type="plus"
+              class="btn-icon"
+            /><br>
+            添加视频
+          </div>
+        </div>
+      </a-col>
+    </a-row>
+
     <template>
       <a-modal
         :visible="showSwiperCreator"
-        title="创建轮播图"
+        :title="currentSwiper.courseId ? '编辑轮播图':'新建轮播图'"
         @ok="saveSwiper"
         @cancel="closeSwiperCreator"
         :destroyOnClose="true"
@@ -95,8 +158,8 @@
               >
 
                 <img
-                  v-if="currentSwiper.logoUrl"
-                  :src="currentSwiper.logoUrl"
+                  v-if="currentSwiper.imageUrl"
+                  :src="currentSwiper.imageUrl"
                   :width="200"
                 />
                 <div v-else>
@@ -118,6 +181,7 @@
               :not-found-content="null"
               @search="onCourseSearch"
               @change="onCourseChange"
+              v-model="currentSwiper.courseId"
             >
               <a-select-option
                 v-for="course in this.courses"
@@ -129,12 +193,14 @@
             </a-select>
           </a-form-item>
           <a-form-item label="轮播图状态">
-            <a-switch
-              @change="onSwiperStatusChange"
-              :v-model="currentSwiper.online"
-              checked-children="上架"
-              un-checked-children="下架"
-            />
+            <a-radio-group
+              name="radioGroup"
+              v-model="currentSwiper.status"
+              default-value="DISABLE"
+            >
+              <a-radio value="ENABLE">上架</a-radio>
+              <a-radio value="DISABLE">下架</a-radio>
+            </a-radio-group>
           </a-form-item>
         </a-form>
       </a-modal>
@@ -144,20 +210,51 @@
       <a-modal
         :visible="showHomeTagCreator"
         title="添加首页标签"
-        @ok="saveSwiper"
-        @cancel="closeSwiperCreator"
+        @ok="saveHomeTags"
+        @cancel="hideHomeTagEditor"
         :destroyOnClose="true"
         centered
       >
         <a-form>
           <a-form-item label="选择首页标签">
-            <a-select mode="multiple">
+            <a-select
+              mode="multiple"
+              v-model="tags"
+            >
               <a-select-option
-                v-for="(t) in this.tags"
-                :key="t.tagId"
-                :value="t.tagId"
+                v-for="(t) in this.availTags"
+                :key="t.id"
+                :value="t.id"
               >
-                {{ t.tagName }}
+                {{ t.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </template>
+
+    <template>
+      <a-modal
+        :visible="showHomeVideoEditor"
+        title="添加推荐视频"
+        @ok="saveHomeRecVideos"
+        @cancel="hideHomeVideoEditor"
+        :destroyOnClose="true"
+        centered
+      >
+        <a-form>
+          <a-form-item label="选择推荐视频">
+            <a-select
+              mode="multiple"
+              v-model="selectedVideos"
+            >
+              <a-select-option
+                v-for="(t) in this.availHomeRecVideos"
+                :key="t.id"
+                :value="t.id"
+              >
+                {{ t.name }}
               </a-select-option>
             </a-select>
           </a-form-item>
@@ -171,7 +268,18 @@
 
 <script>
 import { disposereq } from "@/utils/util";
-import { saveSwiper, fetchAllSwiper, fetchHomeTags } from "@/api/biz/settings";
+import {
+  saveSwiper,
+  fetchAllSwiper,
+  fetchHomeTags,
+  fetchAvaliHomeTags,
+  addHomeTag,
+  removeHomeTag,
+  fetchRecVideos,
+  fetchAvailRecVideos,
+  addHomeRecVideos,
+  removeHomeRecVideos,
+} from "@/api/biz/settings";
 import { uploadFile } from "@/api/biz/resource";
 import { fetchList as fetchCourseList } from "@/api/biz/course";
 import { fetchList as fetchTagList } from "@/api/biz/courseTag";
@@ -179,8 +287,13 @@ import { fetchList as fetchTagList } from "@/api/biz/courseTag";
 export default {
   data() {
     return {
+      showHomeVideoEditor: false,
+      homeRecVideos: [],
+      availHomeRecVideos: [],
+      selectedVideos: [],
       homeTags: [],
       tags: [],
+      availTags: [],
       swipers: [],
       courses: [],
       showHomeTagCreator: false,
@@ -198,30 +311,84 @@ export default {
       pageIndex: 1,
       pageSize: this.fullPageSize,
       status: "UP",
+      allow: "ALL",
     }).then((resp) => {
       this.courses = resp.data;
     });
     fetchAllSwiper().then((resp) => {
       this.swipers = resp.datas;
-      console.log(this.swipers);
-    });
-
-    fetchTagList({
-      pageIndex: 1,
-      pageSize: 1000,
-    }).then((res) => {
-      this.tags = res.data;
-    });
-
-    fetchHomeTags().then((resp) => {
-      this.homeTags = resp.data;
     });
+    this.fetchAllHomeTags();
+    this.fetchHomeRecVideos();
   },
   beforeUpdate() {},
   methods: {
+    removeHomeRecVideo(video) {
+      console.log(video);
+      removeHomeRecVideos(video.id).then((resp) => {
+        this.fetchHomeRecVideos();
+      });
+    },
+    saveHomeRecVideos() {
+      const recVideos = [];
+      this.selectedVideos.forEach((v) => {
+        recVideos.push({ courseId: v });
+      });
+      addHomeRecVideos(recVideos).then((resp) => {
+        this.fetchHomeRecVideos();
+        this.showHomeVideoEditor = false;
+      });
+    },
+    hideHomeVideoEditor() {
+      this.selectedVideos = [];
+      this.fetchHomeRecVideos();
+      this.showHomeVideoEditor = false;
+    },
+    openHomeVideoEditor() {
+      fetchAvailRecVideos({ pageIndex: 1, pageSize: 10000 }).then((resp) => {
+        this.availHomeRecVideos = resp.data;
+      });
+      this.showHomeVideoEditor = true;
+    },
+    fetchHomeRecVideos() {
+      fetchRecVideos().then((resp) => {
+        this.homeRecVideos = resp.datas;
+      });
+    },
+    deleteHomeTag(tag) {
+      removeHomeTag(tag.id).then((resp) => {
+        this.fetchAllHomeTags();
+      });
+    },
     showHomeTagEditor() {
+      fetchAvaliHomeTags({
+        pageIndex: 1,
+        pageSize: 10000,
+      }).then((resp) => {
+        this.availTags = resp.data;
+      });
       this.showHomeTagCreator = true;
     },
+    fetchAllHomeTags() {
+      fetchHomeTags().then((resp) => {
+        this.homeTags = resp.datas;
+      });
+    },
+    saveHomeTags() {
+      addHomeTag(this.tags).then((resp) => {
+        this.fetchAllHomeTags();
+      });
+      this.tags = [];
+      this.showHomeTagCreator = false;
+    },
+    hideHomeTagEditor() {
+      this.tags = [];
+      this.showHomeTagCreator = false;
+    },
+    updateSwiper(swiper) {
+      this.currentSwiper = swiper;
+      this.showSwiperCreator = true;
+    },
     loadAllSwiper() {
       fetchAllSwiper().then((resp) => {
         this.swipers = resp.datas;
@@ -235,6 +402,7 @@ export default {
         pageIndex: 1,
         pageSize: this.fullPageSize,
         status: "UP",
+        allow: "ALL",
       };
       if (value) {
         searchData.name = value;
@@ -248,10 +416,12 @@ export default {
     },
     saveSwiper() {
       const data = {
-        imageUrl: this.currentSwiper.logoUrl,
-        courseId: this.currentSwiper.courseId,
-        status: this.currentSwiper.online ? "ENABLE" : "DISABLE",
+        ...this.currentSwiper,
       };
+      if (this.currentSwiper.id) {
+        data.id = this.currentSwiper.id;
+      }
+
       saveSwiper(data).then((resp) => {
         if (resp.resp_code === 200) {
           this.loadAllSwiper();
@@ -264,6 +434,7 @@ export default {
     },
     closeSwiperCreator() {
       this.currentSwiper = {};
+      this.loadAllSwiper();
       this.showSwiperCreator = false;
     },
     displaySwiperCreator() {
@@ -276,7 +447,7 @@ export default {
       uploadFile(formData)
         .then((res) => {
           if (res.data.resp_code == 200) {
-            this.currentSwiper.logoUrl = res.data.datas.url;
+            this.currentSwiper.imageUrl = res.data.datas.url;
           } else {
             this.$message.error("上传封面失败");
           }
@@ -305,23 +476,29 @@ export default {
 <style>
 .price-config-container {
   margin: 20px;
+  background: rgb(255, 255, 255);
 }
 
 .price-config-container .home-tags {
   margin-top: 20px;
 }
 .price-config-container .rec-video {
-  margin-top: 20px;
+  padding-top: 60px;
 }
 .price-config-container .title-text {
   font-size: 16px;
   font-weight: bold;
+  color: #000;
 }
 
 .price-config-container .swiper-config {
   margin-top: 10px;
 }
 
+.price-config-container .swiper-config-hometags {
+  padding-top: 20px;
+}
+
 .price-config-container .swiper-div {
   width: 150px;
   height: 150px;
@@ -336,12 +513,15 @@ export default {
 }
 
 .price-config-container .swiper-div .course-name {
+  padding-top: 5px;
   word-break: break-all;
   text-overflow: ellipsis;
   overflow: hidden;
   font-weight: bold;
   font-size: 14px;
   color: #303030;
+  line-height: 20px;
+  height: 60px;
 }
 
 .price-config-container .create-swiper-div {
@@ -370,10 +550,8 @@ export default {
   height: 150px;
 }
 .price-config-container .image {
-  max-width: 100%;
-  max-height: 100%;
-  display: block;
-  margin: auto;
+  width: 100%;
+  height: 100%;
 }
 
 .price-config-container .tool-bar-text {
@@ -388,4 +566,17 @@ export default {
 .price-config-container .tool-bar-text .btn-icon {
   font-size: 20px;
 }
+
+.swiper-image-status {
+  position: absolute;
+  text-align: right;
+  color: #fff;
+  width: 100%;
+  top: 0;
+  z-index: 2;
+  height: 24px;
+  line-height: 24px;
+  padding-right: 15px;
+  font-size: 14px;
+}
 </style>
\ No newline at end of file