提交

src/pages/jckc/api.js

@@ -28,4 +28,35 @@ export const files_detail = (data = {}) =>
   request({
     url: '/kczy/files/detail',
     data: data
-  })
+  })
+
+//课程资源-点赞
+export const likeApi_add = (data = {}) => {
+  return request({
+    url: '/kczy/files_like/add',
+    data
+  })
+}
+
+//课程资源-去除点赞
+export const likeApi_del = (data = {}) => {
+  return request({
+    url: '/kczy/files_like/delete',
+    data
+  })
+}
+
+//课程资源-收藏
+export const collectApi_add = (data = {}) => {
+  return request({
+    url: '/kczy/files_fav/add',
+    data
+  })
+}
+//课程资源-去除收藏
+export const collectApi_del = (data = {}) => {
+  return request({
+    url: '/kczy/files_fav/delete',
+    data
+  })
+}

src/pages/jckc/index.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="jckcContent">
     <van-nav-bar left-arrow title="基础课程" right-text="筛选" @click-right="handleRightClick" @click-left="onClickLeft" />
-    <van-search v-model="keyword" shape="round" placeholder="搜索你要看的内容" @search="initData" />
+    <van-search v-model="keyword" shape="round" placeholder="搜索你要看的内容" @search="handleSearch" />
 
-    <van-empty v-if="listData.length==0" description="无数据" />
+    <van-empty v-if="listData.length==0 && !loading" description="无数据" />
 
-    <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-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="initData" class="grid grid-cols-2">
+        <van-cell v-for="(item, index) in listData" :key="index" @click="lookDetail(item.kk_id)">
           <van-image :src="getFullUrl(item.kk_img)" />
           <div class="p-2">
             <div class="van-ellipsis title">{{item.kk_name}}</div>
@@ -24,9 +23,9 @@
               </div>
             </div>
           </div>
-        </div>
-      </van-grid-item>
-    </van-grid>
+        </van-cell>
+      </van-list>
+    </van-pull-refresh>
 
     <van-popup v-model:show="popupShow" position="bottom" class="p-5">
       <h1 class="my-5">请进行筛选</h1>
@@ -64,6 +63,8 @@ import { kc_list, grade_list } from "./api.js";
 import { useRouter } from 'vue-router';
 const router = useRouter()
 const loading = ref(false);
+const finished = ref(false);
+const refreshing = ref(false);
 const keyword = ref("");
 const listData = ref([]);
 
@@ -109,11 +110,24 @@ const initFascicule = (value, i) => {
   initData();
 };
 
-initData();
+const handleSearch = () => {
+  listData.value = [];
+  currentPage.value = 1;
+  onRefresh();
+}
+
+const total = ref(0);
+const limit = ref(12);
+const currentPage = ref(1);
 function initData() {
+  if (refreshing.value) {
+    listData.value = [];
+    refreshing.value = false;
+  }
+
   let obj = {
-    page: "1",
-    limit: "9999",
+    page: currentPage.value,
+    limit: limit.value,
     keyword: keyword.value,
     kc_cate_level_1: "1",
     kk_shzt: "1",
@@ -123,11 +137,28 @@ function initData() {
   loading.value = true;
   kc_list(obj).then((res) => {
     if (res.code == 1) {
-      listData.value = res.data.page_data;
+      listData.value = listData.value.concat(res.data.page_data);
+      total.value = parseInt(res.data.total_rows);
       loading.value = false;
+
+      currentPage.value++;
+      if (listData.value.length >= total.value) {
+        finished.value = true;
+      }
     }
   });
-}
+};
+
+function onRefresh() {
+  // 清空列表数据
+  finished.value = false;
+
+
+  // 重新加载数据
+  // 将 loading 设置为 true，表示处于加载状态
+  loading.value = true;
+  initData();
+};
 
 
 let popupShow = ref(false);
@@ -153,27 +184,35 @@ const lookDetail = (id) => {
   :deep(.van-cell) {
     line-height: 30px;
   }
-
-  :deep(.van-grid-item) {
-    width: 50%;
-    .van-grid-item__content {
-      padding-top: 0;
+  // .van-pull-refresh {
+  //   height: calc(100% - 46px - 60px);
+  //   overflow: auto;
+  // }
+
+  :deep(.van-list) {
+    .van-cell {
+      padding: 10px 8px;
     }
-  }
-  :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;
+    .van-cell__value {
+      border-radius: 6px;
+      box-shadow: 0px 5px 12px 0px rgba(153, 160, 168, 0.18);
+      text-align: left;
+      .van-image {
+        display: block;
+        .van-image__img {
+          border-radius: 6px 6px 0 0;
+          height: 98px;
+        }
       }
     }
+    .van-list__finished-text {
+      -ms-grid-column-span: 1 / -1;
+      grid-column: 1 / -1;
+      display: none;
+    }
   }
   .title {
     font-size: 14px;
-    // width: 100%;
   }
   .tip {
     color: #9a9a9a;

src/pages/jckc/zy_detail.vue

@@ -4,24 +4,29 @@
       <van-icon name="arrow-left" color="#fff" size="16" @click="onClickLeft" />
     </div>
     <div class="look px-2">当前观看人数：{{detailInfo.kf_view_num}}</div>
-    <div class="videoDiv">
+
+    <div v-if="suffix=='mp4'" class="videoDiv">
       <div class="aliPlayerShow" id="J_prismPlayer"></div>
     </div>
+    <audio v-else-if="suffix=='mp3'" ref="urlResouce" controls :src="commonUrl">
+      <source :src="commonUrl" type="audio/mp3">
+    </audio>
+    <div v-else style="height: calc(100% - 60px);">
+      <iframe :src="commonUrl" frameborder="0" width="100%" height="100%"></iframe>
+    </div>
     <!-- <video ref="videoPlay" controls>
       <source :src="commonUrl" type="video/mp4" />
       <source :src="commonUrl" type="video/ogg" />
     </video> -->
 
-    <div></div>
-
     <div class="flex justify-between items-center px-3 mt-2">
       <div style="font-size: 15px;">{{detailInfo.kf_name}}</div>
       <div class="flex space-x-4 tip">
-        <div>
+        <div @click="handleFinger">
           <van-icon :name="detailInfo.is_like==0 ? 'good-job-o' : 'good-job'" />
           <span>{{detailInfo.kf_like_num}}</span>
         </div>
-        <div class="icon-item">
+        <div @click="handleLoveIcon">
           <van-icon :name="detailInfo.is_fav==0 ? 'like-o' : 'like'" />
           <span>{{detailInfo.kf_fav_num}}</span>
         </div>
@@ -32,12 +37,13 @@
 
 <script setup>
 import { getFullUrl } from '@/utils/helper';
-import { files_detail } from "./api.js";
+import { files_detail, likeApi_add, likeApi_del, collectApi_add, collectApi_del } from "./api.js";
 import { useRouter } from 'vue-router';
 const router = useRouter();
 const parentId = ref(router.currentRoute.value.params.id);
 const parentKkId = ref("");
 const detailInfo = ref({});
+const suffix = ref("mp4");
 const detailLoad = ref(false);
 const commonUrl = ref("");
 const sourceUrl = ref("");
@@ -53,6 +59,7 @@ function initDetailData() {
       detailInfo.value = res.data.one_info;
       parentKkId.value = detailInfo.value.kk_id;
       commonUrl.value = getFullUrl(res.data.one_info.kf_path);
+      suffix.value = res.data.one_info.kf_path.substr(res.data.one_info.kf_path.lastIndexOf(".") + 1);
       // detailLoad.value = false;
 
       // console.log(detailInfo.value)
@@ -98,6 +105,89 @@ function initDetailData() {
   });
 }
 
+const handleFinger = () => {
+  if (detailInfo.value.is_like == 1) {//0：关 1：开
+    //去掉赞
+    let transObj = {
+      kf_id: parentId.value,
+    };
+    likeApi_del(transObj)
+      .then((res) => {
+        if (res.code == "1") {
+          detailInfo.value.kf_like_num--;
+          detailInfo.value.is_like = 0;
+          showSuccessToast(res.msg);
+        } else {
+          showFailToast(res.msg);
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  } else {
+    let transObj = {
+      kczy_files_like: {
+        kf_id: parentId.value,
+        kt_id: parentKkId.value,
+      },
+    };
+    likeApi_add(transObj)
+      .then((res) => {
+        if (res.code == "1") {
+          detailInfo.value.kf_like_num++;
+          detailInfo.value.is_like = 1;
+          showSuccessToast(res.msg);
+        } else {
+          showFailToast(res.msg);
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }
+}
+
+const handleLoveIcon = () => {
+  if (detailInfo.value.is_fav == 1) {
+    //去掉收藏
+    let transObj = {
+      kf_id: parentId.value,
+    };
+    collectApi_del(transObj)
+      .then((res) => {
+        if (res.code == "1") {
+          detailInfo.value.kf_fav_num--;
+          detailInfo.value.is_fav = 0;
+          showSuccessToast(res.msg);
+        } else {
+          showFailToast(res.msg);
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  } else {
+    let transObj = {
+      kczy_files_fav: {
+        kf_id: parentId.value,
+        kt_id: parentKkId.value,
+      },
+    };
+    collectApi_add(transObj)
+      .then((res) => {
+        if (res.code == "1") {
+          detailInfo.value.kf_fav_num++;
+          detailInfo.value.is_fav = 1;
+          showSuccessToast(res.msg);
+        } else {
+          showFailToast(res.msg);
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -131,6 +221,7 @@ function initDetailData() {
   .tip {
     color: #00a3ff;
     font-size: 12px;
+    white-space: nowrap;
   }
 }
 </style>