轮播图预览效果

src/views/knowledge/news/index.vue

@@ -1,13 +1,356 @@
+<script lang='ts' setup>
+import { useUserStore } from "@/store/modules/user"
+
+import { ref } from 'vue'
+import { getUserDetail, getZxxyNavis, getTuijian, getCarousel } from '@/api/knowledge/index'
+import Archivestype from '@/views/knowledge/knowledge/components/archivestype.vue'
+import Navili from '@/views/knowledge/knowledge/components/Navili.vue'
+import KnowledgeContent from '@/views/knowledge/knowledge/components/KnowledgeContent.vue'
+import { UserQuery, UserDetail, NaviQuery, Navi, Graphicform, PageParam } from '@/api/knowledge/types'
+import { onScroll, scrollTo, formatDate } from '@/api/knowledge/scroll'
+import { useRouter } from 'vue-router'
+import errimg from '@/assets/404_images/imgNotFound.png'
+
+const active = ref(0); // 当前激活的导航索引
+
+
+const userStore = useUserStore();
+const { userKey, userToken } = userStore;
+
+
+const userDetail = ref<UserDetail>({
+  //证件号码
+  idcardno: ["1", "2"],
+  //姓名
+  name: 'a',
+  //头像url
+  icon: 'b',
+  //工号
+  wmNumber: '2',
+  //唯一识别码
+  wmKey: "1",
+  //adminorg
+  adminorg: "9999",
+});
+const tuijianPage = ref<Graphicform[]>();
+
+const naviList = ref<Navi[]>();
+const naviList1 = ref<Navi[]>();
+//用户信息查询参数
+const userQueryParam = reactive<UserQuery>({
+  userkey: userKey,
+  usertoken: userToken,
+});
+//navi查询参数
+const naviQueryParam = reactive<NaviQuery>({
+  atParentId: "",//知识库
+  userkey: userKey,
+  usertoken: userToken,
+});
+const pageParamTuijian = reactive<PageParam>({
+  total: 0,
+  page: 1,
+  pagesize: 7,
+  archivesTypeAtParentId: "",	//知识库or新闻资讯
+  gParentSun: "",
+  //唯一识别码
+  key: String(userDetail.value.wmKey),
+  //adminorg
+  adminorg: String(userDetail.value.adminorg),
+  userkey: userKey,
+  usertoken: userToken,
+
+})
+const carousel = ref<Graphicform[]>();
+function errorImg(e: any) {
+  e.srcElement.src = errimg;
+  //这一句没用，如果默认图片的路径错了还是会一直闪屏，在方法的前面加个.once只让它执行一次也没用
+  e.srcElement.onerror = null; //防止闪图
+}
+const fatherisReady = ref(0);
+
+const router = useRouter()
+const routerUrl = toRaw(router).currentRoute.value.fullPath
+onBeforeMount(() => {
+  //当前登录用户详细信息
+  getUserDetail(userQueryParam)
+    .then(({ data }) => {
+      userDetail.value = data
+    });
+
+})
+
+
+onMounted(() => {
+  // 监听滚动事件
+  window.addEventListener('scroll', jsScroll, false)
+
+  if (routerUrl.endsWith("index")) {//此时页面为知识库
+    naviQueryParam.atParentId = '16213848089876281'
+    pageParamTuijian.archivesTypeAtParentId = '16213848089876281'
+  } else if (routerUrl.endsWith("news")) {//此时页面为新闻资讯
+    naviQueryParam.atParentId = '16213847972425134'
+    pageParamTuijian.archivesTypeAtParentId = '16213847972425134'
+  }
+  getZxxyNavis(naviQueryParam)
+    .then(({ data }) => {
+      naviList.value = data
+      }).finally(() => {
+        fatherisReady.value = 100;
+      })
+  //推荐 
+  getTuijian(pageParamTuijian)
+    .then(({ data }) => {
+      tuijianPage.value = data.list
+      pageParamTuijian.page = data.pageNum
+      pageParamTuijian.total = data.total
+    });
+  getCarousel(pageParamTuijian)
+    .then(({ data }) => {
+      carousel.value = data.list
+    });
+});
+
+
+function jsScroll() {
+  active.value = onScroll();
+}
+
+onUnmounted(() => {
+  // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
+  window.removeEventListener('scroll', onScroll)
+});
+function handleCurrentChange() {
+
+  getTuijian(pageParamTuijian)
+    .then(({ data }) => {
+      tuijianPage.value = data.list
+      pageParamTuijian.page = data.pageNum
+      pageParamTuijian.total = data.total
+    });
+
+}
+
+//dialog
+const cardContentSource = ref<Graphicform>({});
+const showContentBox = ref(false);	//详情弹窗
+
+function showContentDialog(item: any) {
+  showContentBox.value = true;
+  cardContentSource.value = item;
+}
+
+
+</script>
 <template>
-  <h1>test</h1>
+  <div class="app-container">
+    <KnowledgeContent v-model:isShow="showContentBox" :contentSource="cardContentSource"></KnowledgeContent>
+    <!-- 内容区域 -->
+    <div class="content">
+
+      <div class="models ">
+
+        <div class="model-title">
+          <h3>推荐</h3>
+
+        </div>
+        <div class="grid-tuijian">
+          <el-carousel indicator-position="outside" class="mycarousel" arrow="always">
+            <el-carousel-item v-for="(item, index) in carousel" :key="index" @click="showContentDialog(item)">
+
+              <img style="width: 495px; height: 300px;border-radius:16px;margin-top: 4px; margin-left: 4px;"
+                referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
+            </el-carousel-item>
+          </el-carousel>
+
+          <div v-for="(item, index) in tuijianPage" :key="index" class="tuijian-card" @click="showContentDialog(item)">
+            <img style="width: 170px; height: 126px;border-radius:8px;margin-top: 4px; margin-left: 4px;"
+              referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
+
+            <div class="card-right">
+              <span class="card-title" :title=item.gTitle>{{ item.gTitle }}</span>
+              <span class="card-text" :title=item.gDescribe>{{ item.gDescribe }}</span>
+
+              <span class="time-span"><span class="fa fa-clock-o"></span>{{ formatDate(item.gAddTime) }}</span>
+
+              <span class="myicons">
+                <span class="fa fa-star-o"></span>收藏(<span>{{ item.gCollectionSum }}</span>) <span
+                  class="fa fa-thumbs-o-up"></span>赞(<span>{{
+                    item.gLikes }}</span>) <span class="fa fa-thumbs-o-down"></span>踩(<span>{{ item.gStepOn }}</span>)
+                <span class="fa fa-eye">阅读</span>(<span>{{ item.gRead }}</span>)
+              </span>
+            </div>
+          </div>
+
+        </div>
+        <el-pagination class="pagi" v-model:current-page="pageParamTuijian.page" v-if="pageParamTuijian.total > 0"
+          v-model:page-size="pageParamTuijian.pagesize" layout="prev, pager, next, jumper" :total="pageParamTuijian.total"
+          @current-change="handleCurrentChange" />
+      </div>
+      <!-- 各知识/新闻分区 -->
+
+      <template v-for="(item, index) in naviList">
+        <Archivestype :liContent=item :index=(index) :fatherisReady="fatherisReady" :routerUrl="routerUrl"></Archivestype>
+      </template>
+
+
+
+
+    </div>
+
+    <!-- 导航区域 -->
+
+    <ul class="navs">
+      <li :class="{ active: active === 0 }" @click="scrollTo(0)">
+        推荐
+      </li>
+
+      <template v-for="(item, index) in naviList">
+        <Navili :class="{ active: active === index+1 }" :oneli=item :index=(index+1) v-if="item.hasCard" :active=active
+          @click="scrollTo(index + 1)"></Navili>
+      </template>
+
+    </ul>
+  </div>
 </template>
 
-<script setup lang="ts">
 
-</script>
 
 <style scoped>
-/*
+.content {
+  background-color: white;
+  width: 89.1%;
+  margin-left: 190px;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  border-radius: 5px;
+}
+
+
+
+
+/* 导航栏的样式 */
+.navs {
+
+
+
+  width: 192px;
+  position: fixed;
+  height: auto;
+  top: 95px;
+
+}
+
+.navs li {
+
+  text-align: center;
+  line-height: 3;
+  font-size: 15.5px;
+  color: #909399;
+  background-color: white;
+  margin-right: 15px;
+}
+
+.navs li:hover {
+  cursor: pointer;
+}
+
+/* 当导航被点亮后改变颜色 */
+.navs .active {
+  color: #409EFF;
+
+}
+
+.model-title {
+  margin-top: -9px;
+  height: 30px;
+}
+
+.grid-tuijian {
+
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 484px);
+  gap: 10px;
+  grid-auto-flow: row dense;
+
+}
+
+.tuijian-card {
+  display: flex;
+  width: 481px;
+  height: 140px;
+  padding: 3px;
+  border-radius: 8px;
+  flex-direction: row;
+  flex-wrap: wrap;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+.mycarousel {
+
+  grid-row-start: 1;
+  grid-row-end: 3;
+  border-radius: 15px;
+  width: 480px;
+  height: 290px;
+}
+
+.card-right {
+  display: flex;
+  width: 300px;
+  flex-direction: column;
+  flex-wrap: wrap;
+  padding-left: 8px;
+}
+
+.card-title {
+
+
+  height: 1.5em !important;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+
+
+
+}
+
+.card-text {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  height: 3.1em;
+  font-size: 14px;
+  color: #909399;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+}
+
+.time-span {
+  height: 1.5em;
+  align-self: end;
+  margin-top: auto;
+  font-size: 13px;
+  margin-right: 5px;
+  color: #909399;
+
+
+}
+
+.myicons {
+
+  align-self: end;
+  margin-right: 5px;
+  font-size: 13px;
+  color: #909399;
+}
+
+.el-pagination {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  justify-content: center;
 
-*/
+}
-</style>
+</style>

src/widget/carousel/index.vue

@@ -14,7 +14,7 @@
         <input  v-model="value" type="hidden" >
     </el-form-item>
 
-    <LowcodeCarousel></LowcodeCarousel>
+    <LowcodeCarousel :data="props.data"></LowcodeCarousel>
 </template>
 <script lang='ts' setup>
 import LowcodeCarousel   from './lowcodeCarousel.vue';

src/widget/carousel/lowcodeCarousel.vue

@@ -1,16 +1,44 @@
 <template>
-    <el-carousel class="lowcodeCarsousel">
+    <el-carousel arrow="always" style="width: 495px; height: 300px;">
-        <el-carousel-item v-for="item in 4" :key="item">
+        <el-carousel-item v-for="item in carsouselData" :key="item.imgId" >
-            <h3 class="small justify-center" text="2xl">{{ item }}</h3>
+          <!-- <img 
+            style="width:100%,height:100%"
+            referrerpolicy="no-referrer" 
+            :src="item.imgUrl" fit="fill"
+            @error="errorImg($event)"
+            /> -->
+            <el-image style="width: 100%; height: 100%;cursor:pointer;" :src="item.imgUrl" fit="contain" alt="暂未上传" @click="handleLink(item)" >
+						<template #error>
+							<div class="image-slot">
+								<el-image style="width: 100%; height: 100%;" :src="errimg" fit="contain" ></el-image>
+							</div>
+						</template>
+					</el-image>
         </el-carousel-item>
     </el-carousel>
 </template>
 
 <script setup lang="ts">
+import { CarsuselConfig } from '@/api/DesignForm/types'
+import errimg from '@/assets/404_images/imgNotFound.png'
+const props = defineProps({
+  // eslint-disable-next-line vue/require-default-prop
+  data: {
+    type: Object,
+  }
+})
+const carsouselData:CarsuselConfig[] = props.data?.control.carsuselConfigArr
 
 
-
+function errorImg(e: any) {
-
+  e.srcElement.src = errimg;
+  //这一句没用，如果默认图片的路径错了还是会一直闪屏，在方法的前面加个.once只让它执行一次也没用
+  e.srcElement.onerror = null; //防止闪图
+}
+function handleLink(item:any){
+  alert(item.link)
+  window.open(item.link,'_blank')
+}
 </script>
 
 <style scoped>
@@ -23,7 +51,7 @@
 }
 
 .el-carousel__item h3 {
-  color: #475669;
+  color: black;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -37,4 +65,6 @@
 .el-carousel__item:nth-child(2n + 1) {
   background-color: #d3dce6;
 }
+
+
 </style>