|
|
@@ -1,8 +1,303 @@
|
|
|
-<!-- 精彩回放 -->
|
|
|
-<script setup lang='ts'>
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="bg-white-grey rounded-10px">
|
|
|
+ <div>
|
|
|
+ <div class="mb-30px" style="position: relative">
|
|
|
+ <el-icon
|
|
|
+ @click="initData"
|
|
|
+ :size="22"
|
|
|
+ color="#bfbfbf"
|
|
|
+ style="position: absolute; right: 50px; top: 12px; z-index: 100"
|
|
|
+ >
|
|
|
+ <Search
|
|
|
+ /></el-icon>
|
|
|
+ <el-input v-model="keyword" placeholder="搜索课程" clearable />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 年级：
|
|
|
+ <span
|
|
|
+ v-for="(item, key) in gradeData"
|
|
|
+ :key="key"
|
|
|
+ @click="handleSelectGrade(item)"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="
|
|
|
+ item.grade == selectGrade
|
|
|
+ ? 'online_grade_item_active'
|
|
|
+ : 'online_grade_item'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ item.gradename }}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%">
|
|
|
+ 学科：
|
|
|
+ <span
|
|
|
+ v-for="(item, key) in subjectData"
|
|
|
+ :key="key"
|
|
|
+ @click="handleselectSubject(item)"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="
|
|
|
+ item.subject_id == selectSubject
|
|
|
+ ? 'online_grade_item_active'
|
|
|
+ : 'online_grade_item'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ item.subject_name }}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-loading="loading" v-if="listData.length > 0">
|
|
|
+ <ul class="mt-25px course-list">
|
|
|
+ <li v-for="(item, i) in listData" :key="i">
|
|
|
+ <div class="course-img relative">
|
|
|
+ <img :src="item.img" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="pt-10px pb-15px px-15px border-bottom-1">
|
|
|
+ <div
|
|
|
+ class="text-16px text-dark-400 h-20px leading-20px overflow-hidden"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ <div class="mt-10px">
|
|
|
+ <h4
|
|
|
+ class="text-14px text-hex-abaaaa flex justify-between items-center"
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ <el-icon :size="16"><Clock /></el-icon>
|
|
|
+ <span class="ml-5px"
|
|
|
+ ><span class="mr-10px">浏览</span>
|
|
|
+ {{ item.lll ? item.lll : 0 }}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <div class="btn">{{ item.kss }}</div>
|
|
|
+ </h4>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="p-15px text-13px bordertop">
|
|
|
+ <div class="text-hex-abaaaa truncate h-30px">{{ item.kcjj }}</div>
|
|
|
+ <div
|
|
|
+ @click="toDetail(item.id)"
|
|
|
+ class="ml-10px flex justify-end items-center text-hex-716acc text-right"
|
|
|
+ >
|
|
|
+ 查看回放
|
|
|
+ <el-icon color="#716acc" class="ml-5px"><Right /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="flex justify-center my-10">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="page"
|
|
|
+ v-model:page-size="limit"
|
|
|
+ layout=" prev, pager, next"
|
|
|
+ :total="total"
|
|
|
+ :background="true"
|
|
|
+ @current-change="initData"
|
|
|
+ :hide-on-single-page="false"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="py-80px text-center" v-else>暂无数据</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { Clock, Right, Search } from "@element-plus/icons-vue";
|
|
|
+
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+const router = useRouter();
|
|
|
+let token = $ref("");
|
|
|
+let total = $ref(10);
|
|
|
+let subjectData = $ref([]);
|
|
|
+let gradeData = $ref([]);
|
|
|
+let selectGrade = $ref("");
|
|
|
+let selectSubject = $ref("");
|
|
|
+
|
|
|
+let userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
|
|
|
+let smVal = userInfo.sm_info.sm_id;
|
|
|
+if (localStorage.getItem("userInfo")) {
|
|
|
+ let userinfo = JSON.parse(localStorage.getItem("userInfo"));
|
|
|
+ token = userinfo.token;
|
|
|
+ //这里的赋值会报错
|
|
|
+ // gobalData.params.token = userinfo.token;
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
+let page = $ref(1);
|
|
|
+let limit = $ref(12);
|
|
|
+let keyword = $ref("");
|
|
|
+
|
|
|
+// 初始化
|
|
|
+let loading = $ref(false);
|
|
|
+let listData = $ref([]);
|
|
|
+function initData() {
|
|
|
+ loading = true;
|
|
|
+ console.log(selectGrade, selectSubject, "123");
|
|
|
+ request({
|
|
|
+ url: "https://kzkt.bozedu.net/kzkt/zbkc/index",
|
|
|
+ data: {
|
|
|
+ page: 1,
|
|
|
+ limit: 12,
|
|
|
+ token:token,
|
|
|
+ live: 4,
|
|
|
+ keyword: keyword,
|
|
|
+ grade_id: selectGrade,
|
|
|
+ subject_id: selectSubject,
|
|
|
+ },
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == "1") {
|
|
|
+ loading = false;
|
|
|
+ listData = res.data.page_data;
|
|
|
+ total = res.data.total_rows * 1;
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+initData();
|
|
|
+function getGradeData() {
|
|
|
+ request({
|
|
|
+ url: "https://uc.bozedu.net/index.php?mod=school&action=main&do=base_grade",
|
|
|
+ data: { limit: 9999, page: 1, sm_id: smVal },
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == "1") {
|
|
|
+ let pageData = res.data;
|
|
|
+ gradeData = [
|
|
|
+ {
|
|
|
+ grade: "",
|
|
|
+ gradename: "全部",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ var num = 0;
|
|
|
+ for (var i in pageData) {
|
|
|
+ var itemGrade = pageData[i];
|
|
|
+ if (num == 0) {
|
|
|
+ subjectData = [
|
|
|
+ {
|
|
|
+ subject_id: "",
|
|
|
+ subject_name: "全部",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ var subjectArr = itemGrade.subjects;
|
|
|
+ for (var j in subjectArr) {
|
|
|
+ subjectData.push(subjectArr[j]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ gradeData.push(itemGrade);
|
|
|
+ num++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+getGradeData();
|
|
|
+
|
|
|
+function handleSelectGrade(item) {
|
|
|
+ selectGrade = item.grade;
|
|
|
+ initData();
|
|
|
+}
|
|
|
+
|
|
|
+function handleselectSubject(item) {
|
|
|
+ selectSubject = item.subject_id;
|
|
|
+ initData();
|
|
|
+}
|
|
|
</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bg-white-grey {
|
|
|
+ background: #fcfeff;
|
|
|
+}
|
|
|
|
|
|
-<template>
|
|
|
- <div>精彩回放</div>
|
|
|
-</template>
|
|
|
+.bordertop {
|
|
|
+ height: 80px;
|
|
|
+ border-top: 1px dashed #ededed;
|
|
|
+}
|
|
|
+
|
|
|
+.course-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ li {
|
|
|
+ min-width: 0;
|
|
|
+ width: 284px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
|
|
|
+ margin-right: 19px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:nth-child(4n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .course-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 151px;
|
|
|
+ border-radius: 10px 10px 0 0;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-bottom {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 30;
|
|
|
+ width: 185px;
|
|
|
+ height: 27px;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 0 10px 0 0;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.btn {
|
|
|
+ width: 76px;
|
|
|
+ height: 20px;
|
|
|
+ padding: 2px 0;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #8599fe;
|
|
|
+}
|
|
|
+
|
|
|
+.online_grade_item_active {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #588afa;
|
|
|
+ padding: 5px 8px 5px 8px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.online_grade_item {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #bfbfbf;
|
|
|
+ padding: 5px 8px 5px 8px;
|
|
|
+}
|
|
|
+.online-search-input input.el-input__inner {
|
|
|
+ border-radius: 27px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
|
|
|
+ text-align: center;
|
|
|
+ padding-right: 45px;
|
|
|
+}
|
|
|
+::v-deep .el-input__inner {
|
|
|
+ height: 45px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #bfbfbf;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+::v-deep input::-webkit-input-placeholder {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
WINDOWS-7IFQK7E\EDY