You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
475 lines
15 KiB
475 lines
15 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-10-22 16:01:55
|
|
@ 备注: 首页
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { useRouter } from 'vue-router'
|
|
import { userStror } from "@/utils/pinia/stores/modules/userOrders";
|
|
|
|
import { appGroupPage,appGroupPageCont,appTablePage,appTablePageCont } from '@/api/lowCode/type'
|
|
import { customerFormGroupList,customerFormList,appJwtPower,getAppList } from '@/api/lowCode/index'
|
|
import { newHomeType } from '@/api/news/type'
|
|
import { getHomenNews } from '@/api/news/index'
|
|
|
|
//引入组件
|
|
import HeaderPage from '@/views/common/header/index.vue'
|
|
import BottomPage from '@/views/common/bottom/index.vue'
|
|
import CarouselPage from '@/views/common/carouselPage/index.vue'
|
|
import NewPageInfo from '@/views/news/pageInfo.vue'
|
|
|
|
const router = useRouter()
|
|
const userPinia = userStror();
|
|
const appListTotal = ref<number>(0)
|
|
//翻页参数
|
|
const pageInfo = reactive<appGroupPage>({
|
|
page:1,
|
|
pagesize: 12000,
|
|
state:1
|
|
})
|
|
//App列表翻页参数
|
|
var pageAppInfo = reactive<appTablePage>({
|
|
page:1,
|
|
pagesize: 5,
|
|
groupId:"",
|
|
keywords:"",
|
|
})
|
|
const activeName = ref<string>("171210499312138"); //选显卡默认
|
|
//app分组列表
|
|
const appTableGroup = ref<appGroupPageCont[]>([])
|
|
//app列表
|
|
const appTableList = ref<appTablePageCont[]>([])
|
|
|
|
const _scrollTop = ref<number>(0)
|
|
const loadingList = ref(false) //是否显示加载
|
|
const scrollBox = ref(null) //滚动条
|
|
const loadText = ref("数据加载中，请稍后......")
|
|
|
|
const homeAppList =ref<any[]>([])
|
|
const homeNewList =ref<any[]>([])
|
|
const homeKnowledgeList =ref<any[]>([])
|
|
|
|
const newInfo = ref<any>("")
|
|
const newIsShow = ref(false)
|
|
|
|
onBeforeMount(() => {
|
|
getHomeAppList();
|
|
customerFormGroupList(pageInfo)
|
|
.then(({data}) =>{
|
|
if(data.list){
|
|
appTableGroup.value = data.list
|
|
if(Array.isArray(data.list) && data.list.length > 0){
|
|
pageAppInfo.groupId = data.list[0].idStr
|
|
data.list.forEach((item:appGroupPageCont) => {
|
|
if(item.title == "默认"){
|
|
activeName.value = item.idStr
|
|
pageAppInfo.groupId = item.idStr
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
nextTick(() =>{
|
|
appList()
|
|
})
|
|
// console.log("获取分组",data)
|
|
})
|
|
getNewList();
|
|
getknowledgeList();
|
|
})
|
|
//监听选显卡选项的变化
|
|
watch(() => activeName.value,(val:string) => {
|
|
console.log("切换选项卡",val)
|
|
pageAppInfo.groupId = val
|
|
pageAppInfo.page = 1
|
|
appListTotal.value = 0
|
|
appTableList.value=[]
|
|
appList()
|
|
})
|
|
//获取app列表
|
|
const appList = () => {
|
|
loadText.value = "数据加载中，请稍后......"
|
|
loadingList.value = true
|
|
customerFormList(pageAppInfo)
|
|
.then((appData) =>{
|
|
// console.log("获取分组---------->",appData.data.total)
|
|
appListTotal.value = appListTotal.value + appData.data.count
|
|
// appTableList.value = appData.data.list
|
|
appTableList.value.push(...appData.data.list)
|
|
if(appData.data.total > 0){
|
|
if(appListTotal.value < appData.data.total){
|
|
let pagenum = pageAppInfo.pagesize - appData.data.count
|
|
if (pagenum > 0) {
|
|
loadText.value = "最后一页了！没有新数据了！"
|
|
loadingList.value = true
|
|
}else{
|
|
loadText.value = ""
|
|
loadingList.value = false
|
|
}
|
|
}else{
|
|
loadText.value = "最后一页了！没有新数据了！"
|
|
loadingList.value = true
|
|
}
|
|
|
|
}else{
|
|
loadText.value = "此选项没有数据！"
|
|
loadingList.value = true
|
|
}
|
|
|
|
// loadText.value = appData
|
|
// console.log("获取分组----2222------>",pagenum)
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-10-28 13:30:41
|
|
@ 功能: 滚动事件处理
|
|
*/
|
|
const onHandleScroll = (event:any) => {
|
|
// console.log("onHandleScroll",loadingList.value, event)
|
|
|
|
if (loadingList.value === true) {
|
|
return
|
|
}
|
|
let wrapRef = scrollBox.value.wrapRef
|
|
scrollBox.value.moveY = wrapRef.scrollTop * 100 / wrapRef.clientHeight
|
|
scrollBox.value.moveX = wrapRef.scrollLeft * 100 / wrapRef.clientWidth
|
|
let poor = wrapRef.scrollHeight - wrapRef.clientHeight
|
|
|
|
// console.log("wrapRef",wrapRef)
|
|
// console.log("moveY",scrollBox.value.moveY )
|
|
// console.log("moveX",scrollBox.value.moveX )
|
|
// console.log("poor",poor,event.scrollTop)
|
|
if (event.scrollTop + 2 >= poor) {
|
|
_scrollTop.value = event.scrollTop
|
|
|
|
loadingList.value=true
|
|
pageAppInfo.page++
|
|
// console.log("pageAppInfo.page",pageAppInfo.page++)
|
|
appList()
|
|
}
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-10-28 13:40:15
|
|
@ 功能: 监听当前页面是否回归到首页
|
|
*/
|
|
watch(()=>pageAppInfo.page,(val:number)=>{
|
|
if(val <= 1){
|
|
_scrollTop.value = 0
|
|
scrollBox.value.setScrollTop(_scrollTop)
|
|
}
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-10-29 14:50:08
|
|
@ 功能: 打开app
|
|
*/
|
|
const openApp = (appKey:string) => {
|
|
appJwtPower({id:appKey,types:1})
|
|
.then(({data})=>{
|
|
// console.log("打开应用------>data:",data)
|
|
if(data){
|
|
router.push({ path: "/form_table",query:{id: appKey}});
|
|
}else{
|
|
ElMessage({
|
|
message: '对不起！您不可使用此App！请联系管理员进行授权！',
|
|
type: 'error',
|
|
plain: true,
|
|
})
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-08 13:57:04
|
|
@ 功能: 获取首页App列表171210499312138
|
|
*/
|
|
const getHomeAppList = () => {
|
|
// getAppList({id:"171210499312138"})
|
|
getAppList({id:"229565067446718464"})
|
|
.then((data) => {
|
|
console.log("获取首页App列表",data)
|
|
homeAppList.value = data.data
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-11 09:59:55
|
|
@ 功能: 获取新闻资讯
|
|
*/
|
|
const getNewList = () => {
|
|
let sendData = {
|
|
"groupId":"16213847972425134",
|
|
"sunGroupId":"",
|
|
"typestypes":0,
|
|
"limit":6
|
|
}
|
|
getHomenNews(sendData)
|
|
.then((data) =>{
|
|
// console.log("获取新闻资讯",data)
|
|
homeNewList.value = data.data
|
|
})
|
|
}
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-11 09:59:55
|
|
@ 功能: 获取知识资讯
|
|
*/
|
|
const getknowledgeList = () => {
|
|
let sendData = {
|
|
"groupId":"16213848089876281",
|
|
"sunGroupId":"",
|
|
"typestypes":0,
|
|
"limit":6
|
|
}
|
|
getHomenNews(sendData)
|
|
.then((data) =>{
|
|
// console.log("获取新闻资讯",data)
|
|
homeKnowledgeList.value = data.data
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-11 10:52:01
|
|
@ 功能: 打开新闻内容
|
|
*/
|
|
const lookNewInfo = (val:any) => {
|
|
newInfo.value = val
|
|
newIsShow.value = true
|
|
console.log("打开新闻内容",newIsShow.value,newInfo.value)
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-11 13:51:01
|
|
@ 功能: 打开新页面
|
|
*/
|
|
const openNews = (val:any,name:string) => {
|
|
router.push({ path: "/news",query:{id: val,title:name}});
|
|
}
|
|
|
|
|
|
</script>
|
|
<template>
|
|
<div >
|
|
<div class="mt-4">
|
|
|
|
<div style="display: flex; justify-content: center;margin-top: 5px;">
|
|
<el-input
|
|
|
|
style="width: 98%;"
|
|
placeholder="请输入搜索内容"
|
|
class="input-with-select"
|
|
>
|
|
<template #prepend>
|
|
<el-button class="footSvg " ><SvgIcon icon-class="search" size="18" /></el-button>
|
|
</template>
|
|
|
|
<template #append>
|
|
<div style="display: flex; justify-content: center; max-width: 15px;"><el-icon :size="20" style="margin-top: 15%;" @click="router.push('/scanQrCode')"><SetUp /></el-icon></div>
|
|
</template>
|
|
</el-input>
|
|
|
|
<!-- <el-dropdown placement="top-end">
|
|
<span class="el-dropdown-link" >
|
|
<el-icon :size="22" style="margin-top: 26%; margin-left: 7%; background-color: #F5F5F5; ">
|
|
<CirclePlus />
|
|
</el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="router.push('/scanQrCode')"><el-icon :size="16"><SetUp /></el-icon>扫一扫</el-dropdown-item>
|
|
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown> -->
|
|
</div>
|
|
|
|
|
|
|
|
<!-- -->
|
|
</div>
|
|
<el-scrollbar ref="scrollBox" class="indexBody" @scroll="onHandleScroll">
|
|
<CarouselPage :num="4" />
|
|
<el-card style="margin-top: 5px;" shadow="always">
|
|
|
|
<div v-for="item in homeAppList" :key="item.id" class="appIconBox " @click="openApp(item.signCodeStr)">
|
|
<div v-if="item.icon!=''" class="footSvgpic ">
|
|
<el-image style="width: 40px; height: 40px" :src="item.icon" fit="fit" />
|
|
</div>
|
|
<div v-else class="footSvg "><SvgIcon icon-class="homepage" :size="40" /></div>
|
|
<div class="appNamsBox">{{ item.name }}</div>
|
|
</div>
|
|
<!-- <div class="appIconBox ">
|
|
<div class="footSvg"><SvgIcon icon-class="homepage" :size="20" /></div>
|
|
<div>首页</div>
|
|
</div>
|
|
<div class="appIconBox ">
|
|
<div class="footSvg"><SvgIcon icon-class="homepage" :size="20" /></div>
|
|
<div>首页</div>
|
|
</div>
|
|
<div class="appIconBox ">
|
|
<div class="footSvg"><SvgIcon icon-class="homepage" :size="20" /></div>
|
|
<div>首页</div>
|
|
</div>
|
|
<div class="appIconBox ">
|
|
<div class="footSvg"><SvgIcon icon-class="homepage" :size="20" /></div>
|
|
<div>首页</div>
|
|
</div>
|
|
<div class="appIconBox ">
|
|
<div class="footSvg "><SvgIcon icon-class="homepage" :size="20" /></div>
|
|
<div>首页</div>
|
|
</div>
|
|
<div class="appIconBox ">
|
|
<div class="footSvg"><SvgIcon icon-class="homepage" :size="20" /></div>
|
|
<div>首页</div>
|
|
</div>
|
|
<div class="appIconBox ">
|
|
<div class="footSvg"><SvgIcon icon-class="homepage" :size="20" /></div>
|
|
<div>首页</div>
|
|
</div>
|
|
<div class="appIconBox ">
|
|
<div class="footSvg"><SvgIcon icon-class="homepage" :size="20" /></div>
|
|
<div>首页</div>
|
|
</div>
|
|
<div class="appIconBox ">
|
|
<div class="footSvg"><SvgIcon icon-class="homepage" :size="20" /></div>
|
|
<div>首页</div>
|
|
</div> -->
|
|
</el-card>
|
|
<el-card style="margin-top: 5px;" shadow="always">
|
|
<template #header>
|
|
<div class="card-header contentBetween">
|
|
<span>新闻资讯</span>
|
|
|
|
<i @click="openNews('16213847972425134','新闻资讯')">MORE</i>
|
|
</div>
|
|
</template>
|
|
<ul class="newList">
|
|
<li v-for="item in homeNewList" :key="item.idStr" @click="lookNewInfo(item)" class="contentBetween">
|
|
<span>{{item.title}}</span>
|
|
<span>{{item.creationTime}}</span>
|
|
</li>
|
|
</ul>
|
|
</el-card>
|
|
<el-card style="margin-top: 5px;" shadow="always">
|
|
<template #header>
|
|
<div class="card-header contentBetween">
|
|
<span>知识库</span>
|
|
|
|
<i @click="openNews('16213848089876281','知识库')">MORE</i>
|
|
</div>
|
|
</template>
|
|
<ul class="newList">
|
|
<li v-for="item in homeKnowledgeList" :key="item.idStr" @click="lookNewInfo(item)" class="contentBetween">
|
|
<span>{{item.title}}</span>
|
|
<span>{{item.creationTime}}</span>
|
|
</li>
|
|
|
|
</ul>
|
|
</el-card>
|
|
<NewPageInfo v-model:is-show="newIsShow" :new-info="newInfo" />
|
|
</el-scrollbar>
|
|
<BottomPage />
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.indexBody{
|
|
width:100%;
|
|
height: calc(100vh - 99px);
|
|
padding: 0 5px 0px 5px;
|
|
.cardContBox{
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
cursor: pointer;
|
|
}
|
|
.cardInfo{
|
|
padding-left: 5px;
|
|
}
|
|
.title{
|
|
font-weight:bold;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.content{
|
|
font-size:14px;
|
|
color: #909399;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
:deep .el-card__body{
|
|
padding:10px 0px 15px 0;
|
|
}
|
|
:deep .el-card__header{
|
|
padding:10px 10px;
|
|
}
|
|
.card-header{
|
|
border-left: 5px solid #409EFF;
|
|
span {
|
|
padding-left: 10px;
|
|
}
|
|
i{
|
|
color: rgb(51.2, 126.4, 204);
|
|
}
|
|
}
|
|
}
|
|
.loading{
|
|
text-align: center;
|
|
height:30px;
|
|
}
|
|
.appIconBox{
|
|
width: 20%;
|
|
text-align: center;
|
|
display: inline-grid;
|
|
margin-top: 10px;
|
|
.footSvg{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width:50px;
|
|
height: 50px;
|
|
// border-radius:25px;
|
|
border-radius:5px;
|
|
background-color: #01A7F0;
|
|
margin: 0 auto;
|
|
}
|
|
.footSvgpic{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width:50px;
|
|
height: 50px;
|
|
border-radius:5px;
|
|
background-color: #01A7F0;
|
|
margin: 0 auto;
|
|
}
|
|
.appNamsBox{
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 12px;
|
|
}
|
|
div {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
.newList{
|
|
width: 100%;
|
|
li {
|
|
width: 100%;
|
|
padding:8px 5px;
|
|
border-bottom: 1px solid #F5F5F5;
|
|
}
|
|
}
|
|
</style>
|