赵雪银 学习记录

Teaching_integration_platform_admin_template

@@ -0,0 +1 @@
+Subproject commit be31783972a0cdd8d1abfe03df8ef24a73854b0c

src/api/record.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+//获取浏览记录列表
+export const getRecordListService = (params) =>
+  request.get('/learningrecords/getall', { params })
+//删除浏览记录
+export function DelRecordService(ids) {
+  return request.delete(
+    `h/learningrecords/delete?ids=${ids}`,
+  )
+}

src/api/user/record.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+//获取浏览记录列表
+export const getRecordListService = (params) =>
+  request.get('http://localhost:8080/learningrecords/getall', { params })
+//删除浏览记录
+export function DelRecordService(ids) {
+  return request.delete(
+    `http://localhost:8080/learningrecords/delete?ids=${ids}`,
+  )
+}

src/views/MyCourseStudy/learningProcess.vue

@@ -1,10 +1,269 @@
+<script setup>
+// import router from '@/router'
+import { ref } from 'vue'
+import { getRecordListService, DelRecordService } from '@/api/user/record.js'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+
+const total = ref(0)
+const recordList = ref([])
+const selectedIds = ref([])
+const loading = ref(false)
+const showCheckbox = ref(false)
+const params = ref({
+  pagesize: '15',
+  pagenum: '1',
+  userId: '1',
+})
+
+//获取浏览记录列表
+const getrecordList = async () => {
+  loading.value = true
+  const res = await getRecordListService(params.value)
+  recordList.value = res.data.list
+  console.log(res)
+  //获取总的浏览记录
+  total.value = res.data.total
+  loading.value = false
+}
+getrecordList()
+//处理分页逻辑
+const onSizeChange = (size) => {
+  // console.log('当前每页条数', size)
+  //只要是每页条数变化了，那么原来正在访问的当前页面就没有意义了，数据已经不在原来的页面
+  //重新从第一页渲染
+  params.value.pagenum = 1
+  params.value.pagesize = size
+  //基于最新的当前页和每页条数渲染数据
+  getrecordList()
+}
+const onCurrentChange = (page) => {
+  recordList.value.pagenum = page
+  getrecordList()
+}
+
+//删除浏览记录逻辑
+const onDeleteRecord = async (ids) => {
+  await ElMessageBox.confirm('你确认删除该条浏览信息吗？', '温馨提示', {
+    type: 'warning',
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+  })
+  await DelRecordService(ids)
+  // console.log(ids)
+  ElMessage({ type: 'success', message: '删除成功' })
+  getrecordList()
+}
+//批量删除
+//点击复选框时的 change 事件来调用 toggleSelection 方法，
+//以切换复选框的选中状态，并将对应的 id 添加到 selectedIds 数组中或从中移除。
+const toggleSelection = (id) => {
+  if (selectedIds.value.includes(id)) {
+    selectedIds.value = selectedIds.value.filter((recordId) => recordId !== id)
+  } else {
+    selectedIds.value.push(id)
+  }
+  console.log(selectedIds)
+}
+//我们首先检查 selectedIds 数组是否为空，如果为空，则弹出提示框提醒用户选择要删除的项。
+//如果 selectedIds 数组不为空，在删除之前会弹出确认框，再次确认是否要删除选中项。
+//如果确认删除，则根据 selectedIds 数组来过滤 record 数组，并重置 selectedIds 数组。
+const deleteSelected = async () => {
+  //判断数组是否为空
+  if (selectedIds.value.length === 0) {
+    await ElMessageBox.confirm('请选择你要删除的内容', '温馨提示', {
+      type: 'warning',
+      confirmButtonText: '确认',
+    })
+    return
+  }
+  await ElMessageBox.confirm('你确认删除浏览记录吗？', '温馨提示', {
+    type: 'warning',
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+  })
+
+  // 调用已封装好的删除接口进行删除操作
+  await DelRecordService(selectedIds.value)
+    .then(() => {
+      recordList.value = recordList.value.filter(
+        (item) => !selectedIds.value.includes(item.id),
+      )
+      selectedIds.value = []
+    })
+    .catch((error) => {
+      console.error('删除失败:', error)
+    })
+  ElMessage({ type: 'success', message: '删除成功' })
+  getrecordList()
+}
+//跳转页面
+const router = useRouter()
+const goToAnotherPage = (address) => {
+  //console.log(address)
+  router.push(address)
+}
+</script>
+
 <template>
-  <div>学习过程</div>
+  <div class="record">
+    <div class="content">
+      <!-- 头部 -->
+      <div class="header">
+        <el-button type="primary" plain>浏览记录</el-button>
+        <el-button
+          type="danger"
+          plain
+          style="float: right"
+          @click="deleteSelected"
+        >
+          批量删除
+        </el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="toggleCheckbox"
+          style="float: right"
+        >
+          管理
+        </el-button>
+      </div>
+      <!-- 中间 -->
+      <div class="record-list">
+        <ul v-if="recordList.length > 0">
+          <li v-for="record in recordList" :key="record.id" v-loading="loading">
+            <input
+              type="checkbox"
+              :value="record.id"
+              @change="toggleSelection(record.id)"
+              v-if="showCheckbox"
+            />
+
+            <div class="right">
+              <div class="video">
+                <img
+                  :src="record.content"
+                  style="width: 100%"
+                  height="100%"
+                  @click="goToAnotherPage(record.address)"
+                />
+              </div>
+              <div class="info">
+                <div class="tv">
+                  <div class="name">
+                    {{ record.coursesName }}
+                  </div>
+                  <el-icon
+                    style="float: right"
+                    @click="onDeleteRecord(record.id)"
+                  >
+                    <Delete />
+                  </el-icon>
+                </div>
+                <div class="tv">
+                  <div class="time">{{ record.time }}</div>
+                  <div class="views">{{ record.number }} 观看次数</div>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+        <el-empty v-else description="暂时没有浏览记录" />
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="example-pagination-block">
+      <el-pagination
+        v-model:current-page="params.pagenum"
+        v-model:page-size="params.pagesize"
+        :page-sizes="[2, 5, 7, 15]"
+        :background="true"
+        layout="jumper,total, sizes, prev, pager, next "
+        :total="total"
+        @current-change="onCurrentChange"
+        @size-change="onSizeChange"
+        style="margin-top: 20px; justify-content: flex-end"
+      />
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup>
-import {} from 'vue'
+<style scoped>
+.right {
+  float: right;
+}
 
-</script>
+.record {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.content {
+  flex: 1;
+}
+.example-pagination-block {
+  position: sticky;
+  bottom: 0;
+  margin: 0 auto;
+  /* text-align: center; */
+}
 
-<style lang="scss" scoped></style>
+.record-list {
+  margin: 10px 0;
+}
+ul {
+  /* flex-wrap: wrap; */
+  /* margin-bottom: 10px; */
+  list-style-type: none;
+  padding: 10;
+  display: flex;
+  flex-wrap: wrap;
+  /* justify-content: space-evenly; */
+  justify-content: start;
+}
+li {
+  transition: filter 0.3s; /* 添加过渡动画 */
+  flex: 0 0 20%;
+  /* width: 18%; */
+  margin-bottom: 10px;
+  padding: 10px;
+  box-sizing: border-box;
+  /* border: 1px solid #ccc; */
+  /* border-radius: 4px; */
+  /* text-align: center; */
+  transition: box-shadow 0.3s;
+  cursor: pointer;
+}
+li:hover {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+.video {
+  width: 100%;
+  height: 150px;
+  background-color: #d7e8f2;
+}
+.info {
+  display: flex;
+  /* overflow: hidden; */
+  flex-direction: column;
+}
+.name {
+  float: left;
+  margin: 5px;
+  font-size: 15px;
+}
+.tv {
+  /* display: grid */
+  margin: 5px;
+  font-size: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.time {
+  float: left;
+}
+.views {
+  float: right;
+}
+</style>