收藏、点赞记录静态

2 months ago · e9dcea13a7
parent 2888905c41
commit e9dcea13a7
3 changed files with 336 additions and 19 deletions
--- a/teaching_integration_platform_admin_template/src/views/favoritesRecords/index.vue
+++ b/teaching_integration_platform_admin_template/src/views/favoritesRecords/index.vue
@ -1,14 +1,173 @@
 <template>
-    <div>
-        收藏记录
+    <div class="container">
+      <el-card>
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="课程名称">
+            <el-input
+              v-model="formInline.user"
+              placeholder="请输入课程名称"
+              clearable
+              style="width: 300px"
+            />
+          </el-form-item>
+  
+          <el-form-item label="日期">
+            <el-date-picker
+              v-model="formInline.date"
+              type="date"
+              placeholder="请选择日期"
+              clearable
+              style="width: 300px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              :loading="inquireLoading"
+              @click="handleInquire"
+            >
+              查询
+            </el-button>
+            <el-button
+              type="danger"
+              v-if="selectID.length"
+              @click="deleteSelected"
+            >
+              批量删除
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+      <el-card style="margin-top: 20px; height: calc(100vh - 200px); width: 100%">
+        <el-table
+          :data="recordList"
+          border
+          style="width: 100%"
+          @selection-change="selectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column type="index" width="55" label="序号" />
+          <el-table-column prop="courseName" label="课程名称" />
+          <el-table-column prop="number" label="收藏人数" />
+          <el-table-column prop="time" label="时间" />
+          <el-table-column label="操作">
+            <template #default="{ row }">
+              <el-button type="danger" link @click="onDeleteRecord(row.id)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
    </div>
-</template>
-
-<script lang='ts' setup>
-// import { onMounted, reactive, ref, toRefs, watch } from 'vue'
-
-</script>
-
-<style lang='scss' scoped>
-
-</style>
+  </template>
+  
+  <script lang="ts" setup>
+  import { reactive, ref } from 'vue'
+  import useUserStore from '@/store/modules/user'
+  import { ElMessageBox, ElMessage } from 'element-plus'
+  import { useRouter } from 'vue-router'
+  
+  const router = useRouter()
+  
+  const userStore = useUserStore()
+  const formInline = reactive({
+    user: '',
+    region: '',
+    date: '',
+  })
+  const inquireLoading = ref(false)
+  function handleInquire() {
+    inquireLoading.value = true
+    setTimeout(() => {
+      inquireLoading.value = false
+      ElMessage({
+        type: 'success',
+        message: '查询成功',
+      })
+    }, Math.random() * 1000)
+  }
+  const recordList = ref([
+    {
+      courseId: 'de3100cad98f76be3176dd39aa748a9e',
+      courseName: '离散数学及其应用',
+      id: '1818126244841295873',
+      img: '',
+      number: 5,
+      time: '2024-07-30 11:27:30',
+      userId: '2',
+    },
+    {
+      id: '1818114181813293057',
+      courseId: '2fa0fd63262230639d2c45a3acd9045c',
+      courseName: '计算机导论12',
+      userId: '2',
+      number: 2,
+      img: '',
+      time: '2024-07-30 10:39:34',
+    },
+  ])
+  const params = ref({
+    pagesize: 10,
+    pagenum: '1',
+    userId: userStore.data.id,
+  })
+  const total = ref(0)
+  
+  //删除浏览记录逻辑
+  const onDeleteRecord = async (ids: any) => {
+    await ElMessageBox.confirm('你确认删除该条浏览信息吗？', '温馨提示', {
+      type: 'warning',
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+    })
+  }
+  const selectID = ref([])
+  const selectionChange = (e: { map: (arg0: (item: any) => any) => never[] }) => {
+    if (e) {
+      selectID.value = e.map((item: { id: any }) => item.id)
+      console.log(selectID.value)
+    }
+  }
+  const deleteSelected = async () => {
+    //判断数组是否为空
+    if (selectID.value.length === 0) {
+      await ElMessageBox.confirm('请选择你要删除的内容', '温馨提示', {
+        type: 'warning',
+        confirmButtonText: '确认',
+      })
+      return
+    }
+    await ElMessageBox.confirm('你确认删除浏览记录吗？', '温馨提示', {
+      type: 'warning',
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+    })
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .container {
+    position: relative;
+    width: 100%;
+  
+    // height: calc(100vh - 100px);
+    .pagination {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: center;
+    }
+  }
+  
+  :deep(.el-form-item) {
+    margin-bottom: 0;
+  }
+  
+  :deep(.el-scrollbar__wrap) {
+    padding: 0;
+  }
+  </style>
+  
--- a/teaching_integration_platform_admin_template/src/views/likesHistory/index.vue
+++ b/teaching_integration_platform_admin_template/src/views/likesHistory/index.vue
@ -1,14 +1,172 @@
 <template>
-    <div>
-        点赞记录
-    </div>
+  <div class="container">
+    <el-card>
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form-item label="课程名称">
+          <el-input
+            v-model="formInline.user"
+            placeholder="请输入课程名称"
+            clearable
+            style="width: 300px"
+          />
+        </el-form-item>
+
+        <el-form-item label="日期">
+          <el-date-picker
+            v-model="formInline.date"
+            type="date"
+            placeholder="请选择日期"
+            clearable
+            style="width: 300px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            :loading="inquireLoading"
+            @click="handleInquire"
+          >
+            查询
+          </el-button>
+          <el-button
+            type="danger"
+            v-if="selectID.length"
+            @click="deleteSelected"
+          >
+            批量删除
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card style="margin-top: 20px; height: calc(100vh - 200px); width: 100%">
+      <el-table
+        :data="recordList"
+        border
+        style="width: 100%"
+        @selection-change="selectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column type="index" width="55" label="序号" />
+        <el-table-column prop="courseName" label="课程名称" />
+        <el-table-column prop="number" label="点赞人数" />
+        <el-table-column prop="time" label="时间" />
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <el-button type="danger" link @click="onDeleteRecord(row.id)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
 </template>

-<script lang='ts' setup>
-import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import useUserStore from '@/store/modules/user'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const userStore = useUserStore()
+const formInline = reactive({
+  user: '',
+  region: '',
+  date: '',
+})
+const inquireLoading = ref(false)
+function handleInquire() {
+  inquireLoading.value = true
+  setTimeout(() => {
+    inquireLoading.value = false
+    ElMessage({
+      type: 'success',
+      message: '查询成功',
+    })
+  }, Math.random() * 1000)
+}
+const recordList = ref([
+  {
+    courseId: 'de3100cad98f76be3176dd39aa748a9e',
+    courseName: '离散数学及其应用',
+    id: '1818126244841295873',
+    img: '',
+    number: 5,
+    time: '2024-07-30 11:27:30',
+    userId: '2',
+  },
+  {
+    id: '1818114181813293057',
+    courseId: '2fa0fd63262230639d2c45a3acd9045c',
+    courseName: '计算机导论12',
+    userId: '2',
+    number: 2,
+    img: '',
+    time: '2024-07-30 10:39:34',
+  },
+])
+const params = ref({
+  pagesize: 10,
+  pagenum: '1',
+  userId: userStore.data.id,
+})
+const total = ref(0)

+//删除浏览记录逻辑
+const onDeleteRecord = async (ids: any) => {
+  await ElMessageBox.confirm('你确认删除该条浏览信息吗？', '温馨提示', {
+    type: 'warning',
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+  })
+}
+const selectID = ref([])
+const selectionChange = (e: { map: (arg0: (item: any) => any) => never[] }) => {
+  if (e) {
+    selectID.value = e.map((item: { id: any }) => item.id)
+    console.log(selectID.value)
+  }
+}
+const deleteSelected = async () => {
+  //判断数组是否为空
+  if (selectID.value.length === 0) {
+    await ElMessageBox.confirm('请选择你要删除的内容', '温馨提示', {
+      type: 'warning',
+      confirmButtonText: '确认',
+    })
+    return
+  }
+  await ElMessageBox.confirm('你确认删除浏览记录吗？', '温馨提示', {
+    type: 'warning',
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+  })
+}
 </script>

-<style lang='scss' scoped>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  width: 100%;
+
+  // height: calc(100vh - 100px);
+  .pagination {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    justify-content: center;
+  }
+}
+
+:deep(.el-form-item) {
+  margin-bottom: 0;
+}

+:deep(.el-scrollbar__wrap) {
+  padding: 0;
+}
 </style>
--- a/teaching_integration_platform_template/src/Layout/tabbar/index.vue
+++ b/teaching_integration_platform_template/src/Layout/tabbar/index.vue
@ -104,7 +104,7 @@ function logout() {
    send()
    setTimeout(() => {
      otherWin.postMessage('logout', import.meta.env.VITE_APP_OTHER_ORIGIN)
-    }, 500)
+    }, 700)
  }
 }
 const handleCommand = (command: string) => {