|
|
@@ -1,29 +1,59 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <van-nav-bar :title="detailInfo.kk_name" />
|
|
|
+ <div class="zyContent">
|
|
|
+ <van-loading v-if="loading || detailLoad" class="h-full flex items-center justify-center" />
|
|
|
|
|
|
- <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)">
|
|
|
+ <van-nav-bar left-arrow :title="detailInfo.grade_name+' 《'+ detailInfo.kk_name+'》'" @click-left="onClickLeft" />
|
|
|
+
|
|
|
+ <div class="production p-5">
|
|
|
+ <div class="title">{{detailInfo.grade_name+' 《'+ detailInfo.kk_name+'》'}}</div>
|
|
|
+ <div class="flex space-x-5 my-1">
|
|
|
+ <div>责任教师：{{detailInfo.kk_zrjs}}</div>
|
|
|
+ <div>机构名称：{{detailInfo.kk_jgmc}}</div>
|
|
|
+ </div>
|
|
|
+ <div>简介：<br />{{detailInfo.kc_jj}}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex justify-between items-center space-x-1">
|
|
|
+ <van-search class="flex-1" v-model="keyword" shape="round" placeholder="搜索你要看的内容" @search="initData" />
|
|
|
+ <!-- <div @click="onClickRight" class="flex items-center" style="color: #00A3FF;font-size: 12px;">
|
|
|
+ 课程安排
|
|
|
+ <van-icon name="arrow" size="14" />
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <van-empty v-if="listData.length==0" description="无数据" />
|
|
|
+
|
|
|
+ <van-grid v-if="!loading" :border="false" :column-num="2" :center="false" :gutter="5">
|
|
|
+ <van-grid-item v-for="(item, index) in listData" :key="index" @click="lookDetail(item.kf_id)">
|
|
|
<div class="shadow">
|
|
|
- <van-image :src="getFullUrl(item.kk_img)" />
|
|
|
+ <van-image :src="getFullUrl(item.kf_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="van-ellipsis title">{{item.kf_name}}</div>
|
|
|
+ <van-rate class="my-2" v-model="item.kf_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>
|
|
|
+ <span>{{item.kf_like_num}}</span>
|
|
|
</div>
|
|
|
<div class="icon-item">
|
|
|
<van-icon name="like-o" />
|
|
|
- <span>{{item.kk_fav_num}}</span>
|
|
|
+ <span>{{item.kf_fav_num}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-grid-item>
|
|
|
- </van-grid> -->
|
|
|
+ </van-grid>
|
|
|
+
|
|
|
+ <van-dialog v-model:show="dialogShow" :show-confirm-button="false" message-align="left" style="height: 60%;">
|
|
|
+ <template #title>
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ 课程安排
|
|
|
+ <van-icon name="cross" @click="dialogShow=false" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <iframe class="iframe" :src="detailInfo.file_preview" width="100%" style="height: 100%;" frameborder="0" scrolling="auto"></iframe>
|
|
|
+ </van-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -31,15 +61,22 @@
|
|
|
import { kc_detail, files_list } from "./api.js";
|
|
|
import { useRouter } from 'vue-router';
|
|
|
const router = useRouter();
|
|
|
-const parentId = router.currentRoute.value.params.id;
|
|
|
+const parentId = ref(router.currentRoute.value.params.id);
|
|
|
const loading = ref(false);
|
|
|
+const detailLoad = ref(false);
|
|
|
const keyword = ref("");
|
|
|
const listData = ref([]);
|
|
|
const detailInfo = ref({});
|
|
|
+const dialogShow = ref(false);
|
|
|
+
|
|
|
+const onClickLeft = () => history.back();
|
|
|
|
|
|
initData();
|
|
|
function initData() {
|
|
|
let obj = {
|
|
|
+ page: "1",
|
|
|
+ limit: "9999",
|
|
|
+ keyword: keyword.value,
|
|
|
kk_id: parentId.value,
|
|
|
}
|
|
|
loading.value = true;
|
|
|
@@ -54,15 +91,68 @@ function initData() {
|
|
|
|
|
|
initDetailData();
|
|
|
function initDetailData() {
|
|
|
+ detailLoad.value = true;
|
|
|
kc_detail({ kk_id: parentId.value }).then((res) => {
|
|
|
if (res.code == 1) {
|
|
|
detailInfo.value = res.data.one_info;
|
|
|
- console.log(detailInfo.value)
|
|
|
+ detailLoad.value = false;
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+const lookDetail = (id) => {
|
|
|
+ router.push({ name: 'jckc_zyDetail', params: { id } })
|
|
|
+}
|
|
|
+
|
|
|
+const onClickRight = () => {
|
|
|
+ dialogShow.value = true;
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.zyContent {
|
|
|
+ height: 100vh;
|
|
|
+ background: #fcfeff;
|
|
|
+ .production {
|
|
|
+ background: url(/images/bg.png) no-repeat top left;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ .title {
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.van-search__content--round) {
|
|
|
+ box-shadow: 0px 1px 2px 0px rgba(153, 160, 168, 0.18);
|
|
|
+ background: #fff;
|
|
|
+ // .van-search__field {
|
|
|
+ // background: #fff;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ :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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tip {
|
|
|
+ color: #9a9a9a;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ :deep(.van-dialog) {
|
|
|
+ .van-dialog__header {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
bzkf30
