轮播图管理

src/api/banners.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+/**
+* 保存轮播图
+* @param {*} data
+* @returns
+*/
+export const saveBanner = (data) => request({
+  url: '/admin/banner',
+  method: 'post',
+  data
+})
+
+/**
+ * 轮播图列表
+ * @param {*} params
+ * @returns
+ */
+export const getBannerList = (params) => request({
+  url: '/admin/banner', params
+})
+
+/**
+ * 删除轮播图
+ * @param {*} data
+ * @returns
+ */
+export const deleteBanner = (id) => request({
+  url: `/admin/banner/${id}`, method: 'delete'
+})
+/**
+ * 更新轮播图
+ * @param {*} data
+ * @returns
+ */
+export const UpdateBanner = (data, id) => request({
+  url: `/admin/banner/${id}`, method: 'put', data
+})
+/**
+ * 查询轮播图详情
+ * @param {*} params
+ * @returns
+ */
+export const getBannerDetail = (id) => request({
+  url: `/admin/banner/${id}`
+})

src/api/course.js

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 
 /**
-* 保存班级
+* 保存课程
 * @param {*} data
 * @returns
 */
@@ -12,7 +12,7 @@ export const saveCourse = (data) => request({
 })
 
 /**
- * 班级列表
+ * 课程列表
  * @param {*} params
  * @returns
  */
@@ -21,7 +21,7 @@ export const getCourseList = (params) => request({
 })
 
 /**
- * 删除班级
+ * 删除课程
  * @param {*} data
  * @returns
  */
@@ -29,7 +29,7 @@ export const deleteCourse = (id) => request({
   url: `/admin/course/${id}`, method: 'delete'
 })
 /**
- * 更新班级
+ * 更新课程
  * @param {*} data
  * @returns
  */
@@ -37,7 +37,7 @@ export const UpdateCourse = (data, id) => request({
   url: `/admin/course/${id}`, method: 'put', data
 })
 /**
- * 查询班级详情
+ * 查询课程详情
  * @param {*} params
  * @returns
  */

src/api/oss.js

@@ -20,7 +20,7 @@ export function getOSSClient() {
   }
 
   return getSTSToken().then((sts) => {
-    stsInfo = sts
+    stsInfo = sts.data
     client = new OSS({
       accessKeyId: sts.data.accessKeyId,
       accessKeySecret: sts.data.accessKeySecret,

src/icons/svg/banner.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645447002957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1533" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.4 844.9m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="1534"></path><path d="M660 844.9m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="1535"></path><path d="M362.7 844.9m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="1536"></path><path d="M898.7 135.7H126.8c-16.5 0-29.8 13.3-29.8 29.8v563.6c0 16.5 13.3 29.8 29.8 29.8h771.9c16.5 0 29.8-13.3 29.8-29.8V165.5c0-16.4-13.4-29.8-29.8-29.8z m-170 104.5c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72c0-39.7 32.3-72 72-72z m65.1 413.2c-18.7 1.3-41.9 0.9-68.4-3.3-39.3-6.3-78.1-20-115.4-40.6-45.6-25.2-89-61-129.1-106.2-38.8-43.9-65.2-39.1-73.9-37.5-32.6 5.9-70.9 42.4-108 102.6-15.1 24.5-27.3 48.7-36 67.3-8.9 19-30.9 28-50.5 20.5-21.7-8.3-31.9-33.3-22-54.3 9.6-20.6 23-47.1 39.7-74.3 50.8-82.8 105.4-130.1 162.5-140.5 25.9-4.7 51.7-1.8 76.7 8.8 24.9 10.5 48.9 28.8 71.5 54.4 59.6 67.4 124.5 107.8 192.8 120.1 50.5 9.1 84.5-1.4 84.9-1.5l-0.4 0.1 10.8 31.8c8.3 24.6-9 50.8-35.2 52.6z" p-id="1537"></path></svg>

src/router/index.js

@@ -105,6 +105,28 @@ export const constantRoutes = [
     ]
   },
 
+  // 轮播图
+  {
+    path: '/banners',
+    component: Layout,
+    meta: { title: '轮播图管理', icon: 'banner' },
+    children: [
+      {
+        path: 'banners',
+        name: '轮播图列表',
+        component: () => import('@/views/banners/index'),
+        meta: { title: '轮播图列表', icon: 'banner' }
+      },
+      {
+        hidden: true,
+        path: 'banners/edit',
+        name: 'bannersEdit',
+        component: () => import('@/views/banners/edit'),
+        meta: { title: '轮播图编辑', icon: 'question' }
+      }
+    ]
+  },
+
   // 照片墙
   {
     path: '/photoWall',

src/views/banners/edit.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <el-card class="box-card" style="text-align:center" shadow="never">
+      <h2>{{ bannerId ? '修改' : '新建' }}轮播图</h2>
+      <el-form
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="10vw"
+        style="width:50%;margin:auto"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="课程名" prop="courseId">
+          <el-select v-model="ruleForm.courseId" style="width:100%" filterable placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.courseId"
+              :label="item.title"
+              :value="item.courseId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="轮播图" prop="thumb">
+          <upload-image
+            style="float:left"
+            :icon="ruleForm.thumb"
+            @handleChange="handleChange"
+            @handleDeleteIcon="handleDeleteIcon"
+          />
+        </el-form-item>
+        <el-form-item label="轮播图位置" prop="position">
+          <el-select v-model="ruleForm.position" style="width:100%" placeholder="请选择">
+            <el-option
+              v-for="item in positionOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="sortNo" prop="排序">
+          <el-input v-model="ruleForm.sortNo" min="0" type="number" />
+        </el-form-item>
+        <el-form-item label-width="0">
+          <el-button
+            type="primary"
+            @click="submitForm('ruleForm')"
+          >{{ !bannerId?'新建轮播图':'修改轮播图' }}</el-button>
+          <el-button @click="$router.go(-1)">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { saveBanner, getBannerDetail, UpdateBanner } from '@/api/banners'
+import { getCourseList } from '@/api/course'
+import UploadImage from '@/components/UploadImage/index.vue'
+
+export default {
+  components: {
+    UploadImage
+  },
+  data() {
+    return {
+      options: [],
+      bannerId: '',
+      ruleForm: {
+        courseId: undefined,
+        thumb: undefined,
+        position: undefined,
+        sortNo: undefined
+      },
+      rules: {
+        courseId: [
+          { required: true, message: '请选择课程', trigger: 'blur' }
+        ],
+        thumb: [{ required: true, message: '请上传图片', trigger: 'blur' }],
+        position: [{ required: true, message: '请选择轮播图位置', trigger: 'blur' }]
+      },
+      positionOptions: [
+        { label: '培训通知', value: 'Training' },
+        { label: '精彩锦集', value: 'Wonderful' }
+      ]
+    }
+  },
+  mounted() {
+    if (this.$route?.query.bannerId) {
+      this.bannerId = this.$route.query.bannerId
+      getBannerDetail(this.bannerId)
+        .then((res) => {
+          this.ruleForm = res.data
+        })
+        .catch((e) => {})
+    }
+    getCourseList().then((res) => {
+      this.options = res.data.records
+    })
+  },
+  methods: {
+    handleChange(val) {
+      this.ruleForm.thumb = val
+    },
+    handleDeleteIcon() {
+      this.ruleForm.thumb = ''
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log(this.ruleForm.courseId)
+          var title
+          this.options.map(item => {
+            if (item.courseId === this.ruleForm.courseId) {
+              title = item.title
+            }
+          })
+          if (this.bannerId) {
+            UpdateBanner({ ...this.ruleForm, title }, this.bannerId)
+              .then((res) => {
+                this.$message.success('修改成功')
+                this.$router.go(-1)
+              })
+              .catch((e) => {})
+          } else {
+            saveBanner({ ...this.ruleForm, title })
+              .then((e) => {
+                this.$message.success('保存成功')
+                this.$router.go(-1)
+              })
+              .catch((e) => {})
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped >
+.demo-ruleForm {
+  margin-top: 1em;
+}
+</style>
+
+<style lang="scss" scoped>
+</style>

src/views/banners/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="body">
+    <el-card class="box-card" shadow="never">
+      轮播图位置：<el-select v-model="position" placeholder="请选择">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <div style="float:right">
+        <el-button type="primary" @click="onSearch">查询</el-button>
+        <el-button @click="onReset">重置</el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建轮播图</el-button>
+      </div>
+    </el-card>
+    <el-table stripe :data="tableData" border style="width: 100%">
+      <el-table-column prop="title" label="课程名称" />
+      <el-table-column prop="thumb" label="图片">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.thumb" style="width:100px" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="position" label="位置">
+        <template slot-scope="scope">{{ scope.row.position === 'Training' ? '培训通知' : '精彩锦集' }}</template>
+      </el-table-column>
+      <el-table-column prop="sortNo" label="排序">
+        <template slot-scope="scope">{{ scope.row.sortNo ? scope.row.sortNo : 0 }}</template>
+      </el-table-column>
+      <el-table-column align="center" label="操作" min-width="100" width="280">
+        <template slot-scope="scope">
+          <el-link :underline="false" style="margin-right:1em" type="primary">
+            <router-link
+              :to="{path:'banners/edit',query: { bannerId: scope.row.bannerId }}"
+            >编辑</router-link>
+          </el-link>
+          <el-popconfirm
+            icon="el-icon-info"
+            icon-color="red"
+            title="确定要删除该轮播图吗？"
+            @onConfirm="handleDelete(scope.row)"
+          >
+            <el-link slot="reference" :underline="false" type="danger">删除</el-link>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      v-show="Total!==0"
+      style="float:right; margin:20px 0"
+      :total="Total"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      :page-sizes="[pageSize, 20, 35,40,50,80,100]"
+      layout="total, prev, pager, next, sizes"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+<script>
+import { getBannerList, deleteBanner } from '@/api/banners'
+export default {
+  data() {
+    return {
+      position: undefined,
+      tableData: [],
+      options: [
+        { label: '培训通知', value: 'Training' },
+        { label: '精彩锦集', value: 'Wonderful' }
+      ],
+      //
+      pageSize: 10,
+      currentPage: 1,
+      Total: 0 // 条目总数
+    }
+  },
+  mounted() {
+    this.onSearch()
+  },
+  methods: {
+    // 改变每页显示条数
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.changePagination()
+    },
+    // 改变页码
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.changePagination()
+    },
+    // 改变分页组件重新查询数据
+    changePagination() {
+      getBannerList({
+        position: this.position,
+        pageNum: this.currentPage,
+        pageSize: this.pageSize
+      }).then((res) => {
+        this.tableData = res.data.records
+      })
+    },
+
+    handleAdd() {
+      this.$router.push({ path: 'banners/edit' })
+    },
+    handleDelete(row) {
+      deleteBanner(row.bannerId).then(() => {
+        this.onSearch()
+      })
+    },
+    onSearch() {
+      getBannerList({
+        position: this.position,
+        pageNum: this.currentPage,
+        pageSize: this.pageSize
+      }).then((res) => {
+        this.tableData = res.data.records
+        this.pageSize = res.data.size
+        this.Total = res.data.total
+      })
+    },
+    onReset() {
+      this.position = undefined
+      this.currentPage = 1
+      this.pageSize = 10
+      this.onSearch()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>