增加首页配置

src/api/biz/settings.js

+// 导入请求公用方法
+import { request } from "../../utils/axiosFun";
+
+export const saveSwiper = (obj) => {
+  return request("post", "/api/mgr/swiperConfig/save", obj);
+};
+
+export const fetchAllSwiper = () => {
+  return request("get", "/api/mgr/swiperConfig", {});
+};
+
+export const fetchHomeTags = () => {
+  return request("get", "/api/mgr/mainPageTagConfig", {});
+};

src/views/biz/homePageSetting/index.vue

+<template>
+  <div class="price-config-container">
+    <div class="title-text">轮播图配置</div>
+    <a-row
+      type="flex"
+      class="swiper-config"
+    >
+      <a-col
+        v-for="swiper in this.swipers"
+        :key="swiper.id"
+        :value="swiper.id"
+      >
+        <div class="swiper-div">
+          <div class="img-container">
+            <img
+              class="image"
+              v-if="swiper.imageUrl"
+              :src="swiper.imageUrl"
+              alt="avatar"
+            />
+          </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>
+        </div>
+      </a-col>
+
+      <a-col>
+        <div
+          class="create-swiper-div"
+          @click="displaySwiperCreator"
+        >
+          <div class="tool-bar-text">
+            <a-icon
+              type="plus"
+              class="btn-icon"
+            /><br>
+            创建轮播图
+          </div>
+        </div>
+      </a-col>
+    </a-row>
+
+    <div class="title-text home-tags">首页分类标签</div>
+
+    <a-row
+      type="flex"
+      class="swiper-config"
+    >
+      <a-col :span="24">
+        <div>
+          <a-tag
+            v-for="(tag) in this.homeTags"
+            :key="tag.id"
+            color="#108ee9"
+          >{{tag.name}}</a-tag>
+          <a-button
+            type="primary"
+            icon="plus"
+            @click="showHomeTagEditor"
+          >
+            添加标签
+          </a-button>
+        </div>
+      </a-col>
+    </a-row>
+
+    <div class="title-text rec-video">首页推荐视频</div>
+
+    <template>
+      <a-modal
+        :visible="showSwiperCreator"
+        title="创建轮播图"
+        @ok="saveSwiper"
+        @cancel="closeSwiperCreator"
+        :destroyOnClose="true"
+        centered
+      >
+        <a-form>
+          <a-form-item label="编辑封面">
+            <div class="siwper-editor">
+              <a-upload
+                name="file"
+                :multiple="false"
+                list-type="picture-card"
+                :show-upload-list="false"
+                :customRequest="uploadSwiperImg"
+                :before-upload="beforeUpload"
+              >
+
+                <img
+                  v-if="currentSwiper.logoUrl"
+                  :src="currentSwiper.logoUrl"
+                  :width="200"
+                />
+                <div v-else>
+                  <a-icon :type="loading ? 'loading' : 'plus'" />
+                  <div class="ant-upload-text">
+                    上传封面
+                  </div>
+                </div>
+              </a-upload>
+            </div>
+          </a-form-item>
+          <a-form-item label="关联课程">
+            <a-select
+              show-search
+              placeholder="查询课程"
+              :default-active-first-option="false"
+              :show-arrow="false"
+              :filter-option="false"
+              :not-found-content="null"
+              @search="onCourseSearch"
+              @change="onCourseChange"
+            >
+              <a-select-option
+                v-for="course in this.courses"
+                :key="course.id"
+                :value="course.id"
+              >
+                {{ course.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="轮播图状态">
+            <a-switch
+              @change="onSwiperStatusChange"
+              :v-model="currentSwiper.online"
+              checked-children="上架"
+              un-checked-children="下架"
+            />
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </template>
+
+    <template>
+      <a-modal
+        :visible="showHomeTagCreator"
+        title="添加首页标签"
+        @ok="saveSwiper"
+        @cancel="closeSwiperCreator"
+        :destroyOnClose="true"
+        centered
+      >
+        <a-form>
+          <a-form-item label="选择首页标签">
+            <a-select mode="multiple">
+              <a-select-option
+                v-for="(t) in this.tags"
+                :key="t.tagId"
+                :value="t.tagId"
+              >
+                {{ t.tagName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </template>
+
+  </div>
+
+</template>
+
+<script>
+import { disposereq } from "@/utils/util";
+import { saveSwiper, fetchAllSwiper, fetchHomeTags } 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";
+
+export default {
+  data() {
+    return {
+      homeTags: [],
+      tags: [],
+      swipers: [],
+      courses: [],
+      showHomeTagCreator: false,
+      showSwiperCreator: false,
+      swiper: {},
+      currentSwiper: {},
+      loading: false,
+      imageUrl: "",
+      uploadFile,
+      fullPageSize: 10000,
+    };
+  },
+  created() {
+    fetchCourseList({
+      pageIndex: 1,
+      pageSize: this.fullPageSize,
+      status: "UP",
+    }).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;
+    });
+  },
+  beforeUpdate() {},
+  methods: {
+    showHomeTagEditor() {
+      this.showHomeTagCreator = true;
+    },
+    loadAllSwiper() {
+      fetchAllSwiper().then((resp) => {
+        this.swipers = resp.datas;
+      });
+    },
+    onCourseChange(value) {
+      this.currentSwiper.courseId = value;
+    },
+    onCourseSearch(value) {
+      const searchData = {
+        pageIndex: 1,
+        pageSize: this.fullPageSize,
+        status: "UP",
+      };
+      if (value) {
+        searchData.name = value;
+      }
+      fetchCourseList(searchData).then((resp) => {
+        this.courses = resp.data;
+      });
+    },
+    onSwiperStatusChange(checked) {
+      this.currentSwiper.online = checked;
+    },
+    saveSwiper() {
+      const data = {
+        imageUrl: this.currentSwiper.logoUrl,
+        courseId: this.currentSwiper.courseId,
+        status: this.currentSwiper.online ? "ENABLE" : "DISABLE",
+      };
+      saveSwiper(data).then((resp) => {
+        if (resp.resp_code === 200) {
+          this.loadAllSwiper();
+          this.showSwiperCreator = false;
+          this.currentSwiper = {};
+        } else {
+          this.$message.error(`创建轮播图失败:${resp.resp_msg}`);
+        }
+      });
+    },
+    closeSwiperCreator() {
+      this.currentSwiper = {};
+      this.showSwiperCreator = false;
+    },
+    displaySwiperCreator() {
+      this.showSwiperCreator = true;
+    },
+    uploadSwiperImg(data) {
+      const formData = new FormData();
+      formData.append("file", data.file);
+      this.loading = true;
+      uploadFile(formData)
+        .then((res) => {
+          if (res.data.resp_code == 200) {
+            this.currentSwiper.logoUrl = res.data.datas.url;
+          } else {
+            this.$message.error("上传封面失败");
+          }
+          this.loading = false;
+        })
+        .catch((err) => {
+          disposereq(this, err);
+        });
+    },
+    beforeUpload(file) {
+      const isJpgOrPng =
+        file.type === "image/jpeg" || file.type === "image/png";
+      if (!isJpgOrPng) {
+        this.$message.info("只能上传图片");
+      }
+      const isLt2M = file.size / 1024 / 1024 < 10;
+      if (!isLt2M) {
+        this.$message.error("Image must smaller than 10MB!");
+      }
+      return isJpgOrPng && isLt2M;
+    },
+  },
+};
+</script>
+
+<style>
+.price-config-container {
+  margin: 20px;
+}
+
+.price-config-container .home-tags {
+  margin-top: 20px;
+}
+.price-config-container .rec-video {
+  margin-top: 20px;
+}
+.price-config-container .title-text {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.price-config-container .swiper-config {
+  margin-top: 10px;
+}
+
+.price-config-container .swiper-div {
+  width: 150px;
+  height: 150px;
+  display: table;
+  float: left;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  vertical-align: top;
+  cursor: pointer;
+  -webkit-transition: border-color 0.3s ease;
+  transition: border-color 0.3s ease;
+}
+
+.price-config-container .swiper-div .course-name {
+  word-break: break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: bold;
+  font-size: 14px;
+  color: #303030;
+}
+
+.price-config-container .create-swiper-div {
+  width: 150px;
+  height: 150px;
+  display: table;
+  float: left;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  text-align: center;
+  vertical-align: top;
+  background-color: #fafafa;
+  border: 1px dashed #d9d9d9;
+  border-radius: 4px;
+  cursor: pointer;
+  -webkit-transition: border-color 0.3s ease;
+  transition: border-color 0.3s ease;
+}
+
+.price-config-container .create-swiper-div:hover {
+  border-color: #1890ff;
+}
+
+.price-config-container .img-container {
+  width: 250px;
+  height: 150px;
+}
+.price-config-container .image {
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+  margin: auto;
+}
+
+.price-config-container .tool-bar-text {
+  display: table-cell;
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.price-config-container .tool-bar-text .btn-icon {
+  font-size: 20px;
+}
+</style>
\ No newline at end of file