appFormLowcode/src/views/home/index.vue

<!--
@ 作者: 秦东
@ 时间: 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')"><i class="fa fa-qrcode"></i></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>