370 lines
9.5 KiB
Vue
370 lines
9.5 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 顶部背景 -->
|
|
<view class="head-Bg">
|
|
<lwTopnav :bgColor="bgColor" lwColor="#fff" lwTitle="首页"></lwTopnav>
|
|
<view class="home-search">
|
|
<u-search height="80" bgColor="#fff" placeholder="请输入关键字" clearabled animation v-model="keyword"></u-search>
|
|
</view>
|
|
</view>
|
|
<!-- 轮播图 -->
|
|
<view class="swiper-view">
|
|
<u-swiper @click="handleClickSwiper" mode="number" :list="getBanner" height="400"
|
|
indicatorPos="bottomRight" borderRadius="0"></u-swiper>
|
|
</view>
|
|
<!-- 横向滚动列表 -->
|
|
<view class="horizontal-scroll">
|
|
<Function :list="functionList" :moduleName="functionModuleName"/>
|
|
</view>
|
|
<!-- 番禺区“人才生态30条” -->
|
|
<view class="web-link">
|
|
<image :src="webLinkImg" @click="toWeb"></image>
|
|
</view>
|
|
<!-- 智汇谷简介、成员单位一览、人才留言板 -->
|
|
<view class="common-blocks">
|
|
<view class="common-left" @click="toShowIntroduce(0)">
|
|
<view class="left-top">
|
|
<text class="lto">{{ introductionList[0].name }}</text>
|
|
<text class="ltt">点击进入{{ introductionList[0].name }}</text>
|
|
<view class="see">立即查看</view>
|
|
</view>
|
|
<view class="left-bottom" @click="toShowIntroduce(1)">
|
|
<text class="lbo">{{ introductionList[1].name }}</text>
|
|
<text class="lbt">点击进入{{ introductionList[1].name }}</text>
|
|
<view class="see">立即查看</view>
|
|
</view>
|
|
</view>
|
|
<view class="common-right" @click="toMessage">
|
|
<text class="rto">人才留言板</text>
|
|
<text class="rtt">点击进入人才留言板</text>
|
|
<view class="see">立即查看</view>
|
|
</view>
|
|
</view>
|
|
<!-- 工作动态 -->
|
|
<view class="work-dynamics">
|
|
<u-section title="工作动态" :showLine="false" fontSize="40" subTitle="查看更多" @click="toList"></u-section>
|
|
<view style="height: 40rpx"></view>
|
|
<Dynamics :list="dynamicsList" tip="置顶" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import lwTopnav from "@/components/lw-topnav/lw-topnav";
|
|
import Function from "./component/functions.vue";
|
|
import Dynamics from "./component/dynamics.vue";
|
|
import configService from "../../common/config.service";
|
|
export default {
|
|
components: {
|
|
lwTopnav,Function,Dynamics
|
|
},
|
|
props:{
|
|
bgColor:{
|
|
type: String,
|
|
default: 'transparent'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
keyword:'',//搜索内容
|
|
// 轮播图
|
|
swiperList: [
|
|
// 'http://8.138.171.103/static/banner.png',
|
|
],
|
|
// 功能按钮
|
|
functionList:[
|
|
{name:'人才政策'},
|
|
{name:'人才服务'},
|
|
{name:'资源对接'}
|
|
],
|
|
// 人才模块名称
|
|
functionModuleName: '',
|
|
// 简介模块
|
|
introductionList:[
|
|
{name: '智汇谷简介'},
|
|
{name: '成员单位一览'}
|
|
],
|
|
// 简介模块名称
|
|
introductionName: '',
|
|
// 栏目模块名称
|
|
columnName: '',
|
|
// 栏目模块列表
|
|
columnList:[],
|
|
// 人才生态30条链接
|
|
url:'https://b.pyrc.com.cn/pyrsj/public/login.asp',
|
|
// 人才生态30条图片
|
|
webLinkImg:'http://8.138.171.103/static/webLink.png',
|
|
// 动态列表
|
|
dynamicsList:[{
|
|
top: 0,
|
|
title: '本年度广州市积分制入户申请即将开放！你想知道的都在这里',
|
|
text: '<p>2024年度广州市积分制入户工作正式启动今年的入户指标为1.6万个10月8日起接受积分制入户申请</p>',
|
|
photo: 'static/banner.png',
|
|
view: 597,
|
|
createtime: 1729935783000
|
|
},{
|
|
top: 0,
|
|
title: '本年度广州市积分制入户申请即将开放！你想知道的都在这里',
|
|
text: '<p>2024年度广州市积分制入户工作正式启动今年的入户指标为1.6万个10月8日起接受积分制入户申请</p>',
|
|
photo: 'static/banner.png',
|
|
view: 597,
|
|
createtime: 1729935783000
|
|
}],
|
|
};
|
|
},
|
|
computed:{
|
|
getBanner(){
|
|
let list = this.swiperList.map(item => encodeURI(configService.ip+item.path)).slice(0,10);
|
|
return list;
|
|
}
|
|
},
|
|
methods:{
|
|
// 获取首页数据
|
|
async getHomeData(){
|
|
try{
|
|
// this.$emit('changeLoading',true);
|
|
// 获取轮播图
|
|
let bannerRes = await this.$api.getBanner();
|
|
if(bannerRes.success){
|
|
this.swiperList = bannerRes.data;
|
|
}
|
|
|
|
// 获取文章模块
|
|
let moduleRes = await this.$api.getAllModule();
|
|
if(moduleRes.success){
|
|
// 获取人才模块文章标签
|
|
let functionLabelRes = await this.$api.getLabel(moduleRes.data[0].id);
|
|
if(functionLabelRes?.success){
|
|
this.functionList = functionLabelRes.data;
|
|
this.functionModuleName = moduleRes.data[0].moduleName;
|
|
}
|
|
|
|
// 获取简介模块文章标签
|
|
let introductionLabelRes = await this.$api.getLabel(moduleRes.data[1].id);
|
|
if(introductionLabelRes?.success){
|
|
this.introductionList = introductionLabelRes.data;
|
|
this.introductionName = moduleRes.data[1].moduleName;
|
|
}
|
|
|
|
// 获取栏目模块文章标签
|
|
let columnLabelRes = await this.$api.getLabel(moduleRes.data[2].id);
|
|
if(columnLabelRes?.success){
|
|
this.columnList = columnLabelRes.data;
|
|
this.columnName = moduleRes.data[2].moduleName;
|
|
// 缓存最新政策和人才活动项
|
|
uni.setStorageSync("policy",{moduleName:this.columnName,labelName:this.columnList[1].name});
|
|
uni.setStorageSync("activity",{moduleName:this.columnName,labelName:this.columnList[2].name});
|
|
|
|
// 获取动态文章列表
|
|
let articleRes = await this.$api.getArticleList({
|
|
labelName: this.columnList[0].name,
|
|
moduleName: this.columnName,
|
|
size: 10,
|
|
current: 1,
|
|
});
|
|
console.log(articleRes)
|
|
if(articleRes?.success){
|
|
this.dynamicsList = articleRes.data.records;
|
|
}
|
|
}
|
|
}
|
|
}catch(e){
|
|
}finally{
|
|
// this.$emit('changeLoading',false);
|
|
}
|
|
},
|
|
|
|
// 跳转网络连接-人才生态30条
|
|
toWeb(){
|
|
uni.navigateTo({
|
|
url: `/pages/home/component/web?url=${this.url}`
|
|
})
|
|
},
|
|
|
|
// 点击轮播图
|
|
handleClickSwiper(index){
|
|
// uni.navigateTo({
|
|
// url: '/pages/article/articleDetails'
|
|
// })
|
|
},
|
|
|
|
// 三大功能中的智汇谷简介和成员单位一览
|
|
toShowIntroduce(index){
|
|
uni.navigateTo({
|
|
url: `/pages/article/richDetail?title=${this.introductionList[index].name}&moduleName=${this.introductionName}`
|
|
})
|
|
},
|
|
|
|
// 留言板
|
|
toMessage(){
|
|
uni.navigateTo({
|
|
url: '/pages/home/component/message'
|
|
})
|
|
},
|
|
|
|
// 动态查看更多
|
|
toList(){
|
|
uni.navigateTo({
|
|
url: `/pages/article/articleList?moduleName=${this.columnName}&labelName=${this.columnList[0].name}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.home-search{
|
|
padding: 10rpx 35rpx;
|
|
height: 120rpx;
|
|
}
|
|
.head-Bg{
|
|
// position: fixed;
|
|
top: 0rpx;
|
|
left: 0rpx;
|
|
z-index: 1;
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
overflow: hidden;
|
|
background: -webkit-linear-gradient( 190deg, #4BACFF 0%, rgba(255,255,255,0.77) 100%);
|
|
background: linear-gradient( 190deg, #4BACFF 0%, rgba(255,255,255,0.77) 100%);
|
|
}
|
|
.swiper-view{
|
|
.indicator-num {
|
|
padding: 2px 0;
|
|
background-color: rgba(0, 0, 0, 0.35);
|
|
border-radius: 100px;
|
|
width: 35px;
|
|
// @include flex;
|
|
justify-content: center;
|
|
|
|
&__text {
|
|
color: #FFFFFF;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
.horizontal-scroll{
|
|
margin: 50rpx 0 0 0;
|
|
width: 100%;
|
|
}
|
|
.web-link{
|
|
// padding: 0 25rpx;
|
|
height: 270rpx;
|
|
// border-radius: 16rpx;
|
|
image{
|
|
// border-radius: 16rpx;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.common-blocks{
|
|
padding: 0 25rpx;
|
|
margin-top: 70rpx;
|
|
display: flex;
|
|
height: 500rpx;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
.common-left{
|
|
width: 48%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.left-top{
|
|
height: 48%;
|
|
border-radius: 12rpx;
|
|
background: linear-gradient( 100deg, #d5ffd9 0%, rgba(255,255,255,0.77) 100%);
|
|
padding: 25rpx 0 0 25rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.lto{
|
|
color: #2cae63;
|
|
font-weight: bold;
|
|
font-size: 35rpx;
|
|
}
|
|
.ltt{
|
|
margin-top: 10rpx;
|
|
margin-bottom: 40rpx;
|
|
color: #878787;
|
|
font-size: 26rpx;
|
|
}
|
|
.see{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 56rpx;
|
|
width: 150rpx;
|
|
height: 60rpx;
|
|
background-color: #51c280;
|
|
color: #fff;
|
|
font-size: 25rpx;
|
|
}
|
|
}
|
|
.left-bottom{
|
|
height: 48%;
|
|
border-radius: 12rpx;
|
|
background: linear-gradient( 100deg, #ffefd5 0%, rgba(255,255,255,0.77) 100%);
|
|
padding: 25rpx 0 0 25rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.lbo{
|
|
color: #e7940a;
|
|
font-weight: bold;
|
|
font-size: 35rpx;
|
|
}
|
|
.lbt{
|
|
color: #878787;
|
|
margin-top: 10rpx;
|
|
font-size: 26rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.see{
|
|
border-radius: 56rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 150rpx;
|
|
height: 60rpx;
|
|
background-color: #e89e23;
|
|
color: #fff;
|
|
font-size: 25rpx;
|
|
}
|
|
}
|
|
}
|
|
.common-right{
|
|
width: 48%;
|
|
border-radius: 12rpx;
|
|
background: linear-gradient( 190deg, #e7e8fd 0%, rgba(255,255,255,0.77) 100%);
|
|
padding: 25rpx 0 0 25rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.rto{
|
|
color: #4c5fdf;
|
|
font-weight: bold;
|
|
font-size: 35rpx;
|
|
}
|
|
.rtt{
|
|
color: #878787;
|
|
margin-top: 10rpx;
|
|
margin-bottom: 40rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
.see{
|
|
border-radius: 56rpx;
|
|
width: 150rpx;
|
|
height: 60rpx;
|
|
background-color: #8594f1;
|
|
color: #fff;
|
|
font-size: 25rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
.work-dynamics{
|
|
padding: 0 25rpx;
|
|
margin-top: 70rpx;
|
|
}
|
|
</style>
|