|
|
@@ -0,0 +1,207 @@
|
|
|
+<template>
|
|
|
+ <div class="jckcContent">
|
|
|
+ <van-nav-bar title="基础课程" right-text="筛选" @click-right="handleRightClick" />
|
|
|
+ <van-search v-model="keyword" shape="round" placeholder="搜索你要看的内容" @search="initData" />
|
|
|
+
|
|
|
+ <van-loading v-if="loading" class="h-full flex items-center justify-center" />
|
|
|
+ <van-grid v-else :border="false" :column-num="2" :center="false" :gutter="5">
|
|
|
+ <van-grid-item v-for="(item, index) in listData" :key="index" @click="lookDetail(item.kk_id)">
|
|
|
+ <div class="shadow">
|
|
|
+ <van-image :src="getFullUrl(item.kk_img)" />
|
|
|
+ <div class="p-2">
|
|
|
+ <div class="van-ellipsis title">{{item.kk_name}}</div>
|
|
|
+ <van-rate class="my-2" v-model="item.kk_star_num" color="#ffd21e" void-icon="star" void-color="#eee" size="16px" readonly allow-half />
|
|
|
+ <div class="flex space-x-4 tip">
|
|
|
+ <div>
|
|
|
+ <van-icon name="good-job-o" />
|
|
|
+ <span>{{item.kk_like_num}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="icon-item">
|
|
|
+ <van-icon name="like-o" />
|
|
|
+ <span>{{item.kk_fav_num}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-grid-item>
|
|
|
+ </van-grid>
|
|
|
+
|
|
|
+ <van-popup v-model:show="popupShow" position="bottom" class="p-5">
|
|
|
+ <h1 class="my-5">请进行筛选</h1>
|
|
|
+ <div>
|
|
|
+ <div class="label">年级</div>
|
|
|
+ <van-row gutter="8">
|
|
|
+ <van-col span="6" v-for="(item, index) in gradeData" :key="index" class="mb-3">
|
|
|
+ <van-button :type="activeGradeIndex==index && 'primary'" @click="initGrade(item, index)">{{item.grade_name}}</van-button>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="label">分册</div>
|
|
|
+ <van-row gutter="8">
|
|
|
+ <van-col span="6" v-for="(item, index) in fasciculeData" :key="index" class="mb-3">
|
|
|
+ <van-button :type="activeFasciculeIndex==index && 'primary'" @click="initFascicule(item, index)">{{item.n}}</van-button>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ <van-row class="mt-8" gutter="20">
|
|
|
+ <van-col span="8">
|
|
|
+ <van-button @click="handleCancel()">取消</van-button>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="16">
|
|
|
+ <van-button type="primary" @click="handleCancel(1)">确定</van-button>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { getFullUrl } from '~/utils/helper';
|
|
|
+import { kc_list, grade_list } from "./api.js";
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+const router = useRouter()
|
|
|
+const loading = ref(false);
|
|
|
+const keyword = ref("");
|
|
|
+const listData = ref([]);
|
|
|
+
|
|
|
+const gradeData = ref([
|
|
|
+ {
|
|
|
+ grade_id: "",
|
|
|
+ grade_name: "全部",
|
|
|
+ }
|
|
|
+]);
|
|
|
+const activeGradeIndex = ref(0);
|
|
|
+const activeGrade = ref("");
|
|
|
+initGradeData();
|
|
|
+function initGradeData() {
|
|
|
+ grade_list({ limit: 50 }).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ gradeData.value = gradeData.value.concat(res.data.page_data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const fasciculeData = ref([
|
|
|
+ { v: "", n: "全部" },
|
|
|
+ { v: "1", n: "上册" },
|
|
|
+ { v: "2", n: "下册" }
|
|
|
+]);
|
|
|
+const activeFasciculeIndex = ref(0);
|
|
|
+const activeFascicule = ref("");
|
|
|
+
|
|
|
+
|
|
|
+const initGrade = (value, i) => {
|
|
|
+ activeGradeIndex.value = i;
|
|
|
+ activeGrade.value = value.grade_id;
|
|
|
+
|
|
|
+ initData();
|
|
|
+};
|
|
|
+const initFascicule = (value, i) => {
|
|
|
+ activeFasciculeIndex.value = i;
|
|
|
+ activeFascicule.value = value.grade_id;
|
|
|
+
|
|
|
+ initData();
|
|
|
+};
|
|
|
+
|
|
|
+initData();
|
|
|
+function initData() {
|
|
|
+ let obj = {
|
|
|
+ page: "1",
|
|
|
+ limit: "9999",
|
|
|
+ keyword: keyword.value,
|
|
|
+ kc_cate_level_1: "1",
|
|
|
+ kk_shzt: "1",
|
|
|
+ grade_id: activeGrade.value,
|
|
|
+ team_id: activeFascicule.value,
|
|
|
+ }
|
|
|
+ loading.value = true;
|
|
|
+ kc_list(obj).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ listData.value = res.data.page_data;
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+let popupShow = ref(false);
|
|
|
+const handleRightClick = () => {
|
|
|
+ console.log('right click')
|
|
|
+ popupShow.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+const handleCancel = (type) => {
|
|
|
+ popupShow.value = false;
|
|
|
+ type == 1 && initData();
|
|
|
+}
|
|
|
+
|
|
|
+const lookDetail = (id) => {
|
|
|
+ router.push({ name: 'jckc_zy', params: { id } })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.jckcContent {
|
|
|
+ height: 100vh;
|
|
|
+ background: #fcfeff;
|
|
|
+ :deep(.van-cell) {
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-grid-item) {
|
|
|
+ width: 50%;
|
|
|
+ .van-grid-item__content {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.shadow) {
|
|
|
+ border-radius: 6px;
|
|
|
+ box-shadow: 0px 5px 12px 0px rgba(153, 160, 168, 0.18);
|
|
|
+ .van-image {
|
|
|
+ display: block;
|
|
|
+ .van-image__img {
|
|
|
+ border-radius: 6px 6px 0 0;
|
|
|
+ height: 98px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 14px;
|
|
|
+ // width: 100%;
|
|
|
+ }
|
|
|
+ .tip {
|
|
|
+ color: #9a9a9a;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.van-popup) {
|
|
|
+ height: auto;
|
|
|
+ border-radius: 15px 15px 0 0;
|
|
|
+ h1 {
|
|
|
+ color: #222;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ .van-button {
|
|
|
+ width: 100%;
|
|
|
+ &.van-button--normal {
|
|
|
+ background: #f6f6f6;
|
|
|
+ border: none;
|
|
|
+ color: #949494;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ &.van-button--primary {
|
|
|
+ background: #00a3ff;
|
|
|
+ border-color: #00a3ff;
|
|
|
+ color: #fffeff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
bzkf30
