<!-- 首页 -->
<template>
<view class="index">
<!-- <div class='slideShine' style="position:absolute;top: 36rpx;left: 46rpx;z-index: -998;font-size: 50rpx;color: #fff;font-weight: 600;letter-spacing: 4rpx;">新疆网络举报</div> -->
<!-- <image style="width: 70px;height: 60px;position:absolute;top: 36rpx;left: 60rpx;z-index: -998" src="http://111.198.10.15:11604/png/share.png"></image> -->
<view style="position:absolute;top: 36rpx;left: 20rpx;z-index: -998;">
<view style="color: #fff;display: flex;justify-content: center;align-items: center;font-size: 36rpx;font-weight: 600;letter-spacing: 2rpx;">
<image style="width: 49px;height: 42px;margin-right: 16rpx;" src="http://111.198.10.15:11604/png/share.png"/>
<text>新疆互联网违法和不良信息举报中心</text>
</view>
</view>
<image src="http://111.198.10.15:11604/png/back_ts.png" style="position:absolute;top: -4rpx;left: 0;z-index: -999; width:100%;height: 300rpx;"></image>
<view class="swiper-area">
<swiper class="swiper-box" style="height: 400rpx;" :interval="3000" :indicator-dots="true" :autoplay="true" :circular="circular">
<swiper-item v-for="(item ,index) in rotationList" :key="index" @click="clickTitle(item, 'swiper')">
<view class="swiper-item" >
<image :src="item.img" style="width:100%;height: 400rpx;"></image>
</view>
</swiper-item>
</swiper>
</view>
<view class="tab-area">
<view class="tab">
<u-row>
<u-col span="4" v-for="item in tabList_first" :key="item.id">
<view class="tab-item" @click="handleClick(item.id)">
<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
<text class="grid-text">{{item.name}}</text>
</view>
</u-col>
</u-row>
<!-- <u-row>
<u-col span="4" v-for="item in tabList_second" :key="item.id">
<view class="tab-item" @click="handleClick(item.id)">
<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
<text class="grid-text">{{item.name}}</text>
</view>
</u-col>
</u-row> -->
<!-- <u-row>
<u-col span="6" v-for="item in tabList_third" :key="item.id">
<view class="tab-item" @click="handleClick(item.id)">
<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
<text class="grid-text">{{item.name}}</text>
</view>
</u-col>
</u-row> -->
</view>
</view>
<!-- 通知公告、辟谣信息、案例警醒 -->
<view class="event-area">
<!-- <EventList
v-for="(item,index) in eventList"
:key="index"
:title="item.name"
:list="item.value"
@checkMore="checkMore(item.id)">
</EventList> -->
<view class="title" style="position: relative;">
<text>
通知公告
</text>
<image style="position: absolute;width: 80px;height: 27px;left:4%;top:41%;z-index: -10;" src="http://111.198.10.15:11404/imgs/xj/装饰条.png"/>
<view class="icon-text" @click="checkMore('tzgg')">
<text class="text">更多</text>
<u-icon name="arrow-right-double" color="#0043ac" size="18"></u-icon>
</view>
</view>
<view class="list">
<view class="list-item" v-for="e in tzggList" :key="e.id">
<text @click="clickTitle(e, 'tzgg')">{{e.title}}</text>
</view>
</view>
<image class="list-img" style="width: 49px;height: 42px;margin-right: 16rpx;" src="http://111.198.10.15:11404/imgs/xj/通知公告.png"/>
</view>
<view class="event-area">
<view class="title" style="position: relative;">
<text>权威发布</text>
<image style="position: absolute;width: 80px;height: 27px;left:4%;top:41%;z-index: -10;" src="http://111.198.10.15:11404/imgs/xj/装饰条.png"/>
<view class="icon-text" @click="checkMore('pyxx')">
<text class="text">更多</text>
<u-icon name="arrow-right-double" color="#0043ac" size="18"></u-icon>
</view>
</view>
<view class="list">
<view class="list-item" v-for="e in pyxxList" :key="e.id">
<text @click="clickTitle(e, 'pyxx')">{{e.title}}</text>
</view>
</view>
<image class="list-img" style="width: 49px;height: 42px;margin-right: 16rpx;" src="http://111.198.10.15:11404/imgs/xj/辟谣.png"/>
</view>
<view class="event-area">
<view class="title" style="position: relative;">
<text>案例警醒</text>
<image style="position: absolute;width: 80px;height: 27px;left:4%;top:41%;z-index: -10;" src="http://111.198.10.15:11404/imgs/xj/装饰条.png"/>
<view class="icon-text" @click="checkMore('aljx')">
<text class="text">更多</text>
<u-icon name="arrow-right-double" color="#0043ac" size="18"></u-icon>
</view>
</view>
<view class="list">
<view class="list-item" v-for="e in aljxList" :key="e.id">
<text @click="clickTitle(e, 'aljx')">{{e.title}}</text>
</view>
</view>
<image class="list-img" style="width: 49px;height: 42px;margin-right: 16rpx;" src="http://111.198.10.15:11404/imgs/xj/案例.png"/>
</view>
</view>
</template>
<script>
import EventList from '@/components/eventList.vue'
import { stamp2Time } from '@/common/utils.js'
import { getNoticeList, getPyxxList } from '@/api/index.js'
export default {
name: 'Index',
components: {
EventList
},
data() {
return {
tabList_first: [
{
id: 'will',
name: '我要举报',
icon: 'http://111.198.10.15:11404/imgs/xj/我要举报.png',
},
// {
// id: 'search',
// name: '举报查询',
// icon: '../../static/index/search.png',
// },
{
id: 'guide',
name: '举报指南',
icon: 'http://111.198.10.15:11404/imgs/xj/举报指南.png',
},
{
id: 'jdy',
name: '加入我们',
// name: '成为监督员',
icon: 'http://111.198.10.15:11404/imgs/xj/成为监督员.png',
},
],
tabList_second: [
{
id: 'status',
name: '工作动态',
icon: '../../static/index/status.png',
},
{
id: 'rules',
name: '法律法规',
icon: '../../static/index/rules.png',
},
{
id: 'jdy',
name: '成为监督员',
icon: '../../static/index/jdy.png',
},
],
tabList_third: [
],
//轮播图信息
swiperList: [
{
url: 'http://111.198.10.15:11604/png/swiper4.png'
},
{
url: 'http://111.198.10.15:11604/png/swiper3.png'
},
{
url: 'http://111.198.10.15:11604/png/swiper2.png'
},
{
url: 'http://111.198.10.15:11604/png/swiper1.png'
},
],
tzggList: [], // 通知公告列表
pyxxList: [], // 辟谣信息列表
aljxList: [], // 案例警醒列表
rotationList: [], // 轮播图数据
eventList: [
{
id: 'tzgg',
name: '通知公告',
value: 'tzggList'
},
{
id: 'pyxx',
name: '辟谣信息',
value: 'pyxxList'
},
{
id: 'aljx',
name: '案例警醒',
value: 'aljxList'
},
]
}
},
mounted(){
uni.showShareMenu({
withShareTicket: true,
menus: ["shareAppMessage", "shareTimeline"]
});
this.fetchNoticeList() // 获取通知公告列表
this.fetchPyxxList() // 获取辟谣信息列表
this.fetchAljxList() // 案例警醒列表
this.fetchRotationList() //轮播图
},
//分享好友
onShareAppMessage() {
return {
title: '新疆网络举报',
imageUrl: '../../static/share.png',
};
},
//分享朋友圈
onShareTimeline() {
return {
title: '新疆网络举报',
}
},
methods: {
// 点击按钮
handleClick(val) {
console.log('---', val)
if(val === 'search') { // 举报查询
wx.navigateTo({
url: '/packageIndex/search/search'
})
} else if(val === 'guide') { // 举报指南
wx.navigateTo({
url: '/packageIndex/guide/guide'
})
} else if(val === 'will') { // 我要举报
wx.navigateTo({
url: '/packageIndex/center/center'
})
}
else if(val === 'rules' || val === 'status') { // 法律法规、工作动态
let tabIndex = 0;
if(val === 'status') {
tabIndex = 1;
} else if(val === 'net') {
tabIndex = 2;
}
wx.navigateTo({
url: `/packageIndex/messageList/messageList?tabIndex=${tabIndex}`
})
} else if(val === 'jdy') { // 成为监督员
wx.navigateTo({
url: `/packageIndex/supervisor/supervisor`
})
}
},
// 点击更多
checkMore(id) {
// 跳转到固定页面
if(id === 'aljx') {
wx.navigateTo({
url: '/packageMine/egersis/egersis'
})
}
if(id === 'pyxx') {
wx.navigateTo({
url: '/packageToolList/rumorInfo/rumorInfo'
})
}
if(id === 'tzgg') { // 通知公告
wx.navigateTo({
url: '/packageToolList/notice/notice'
})
}
},
// 获取轮播图列表
fetchRotationList() {
const param = {
pageIndex: 1, //当前页数（必传）
pageSize: 13, //每页数 （必传）
yuzhong: 'zh',//（必传）固定值
siteRoleCode: 'xjwljb', //（必传）固定值
catalogCode: 'ssxw', //（必传）固定值
}
getNoticeList(param).then(res => {
console.log(res)
this.rotationList = res.filter(item => item.contentSmallImage).map(item => {
return {
catalogId: item.catalogId,
id: item.id,
title: item.title,
publishTime: stamp2Time(item.publishDate),
img: item.contentSmallImage
}
})
this.rotationList = this.rotationList.filter((item, index) => index < 5)
})
},
// 获取通知公告列表
fetchNoticeList() {
const param = {
pageIndex: 1, //当前页数（必传）
pageSize: 2, //每页数 （必传）
yuzhong: 'zh',//（必传）固定值
siteRoleCode: 'xjwljb', //（必传）固定值
catalogCode: 'tzgg', //（必传）固定值
}
getNoticeList(param).then(res => {
console.log(res, '通知公告列表')
this.tzggList = res.map(item => {
return {
catalogId: item.catalogId,
id: item.id,
title: item.title,
publishTime: stamp2Time(item.publishDate)
}
})
})
},
// 获取辟谣信息--对应联合辟谣平台的权威发布
fetchPyxxList() {
const param = {
pageIndex: 1,
pageSize: 2,
// siteRoleCode: 'zzqwxbPortal',
// catalogCode: 'yykt'
siteRoleCode: 'zzqwxbPortal', // 对应权威发布
catalogCode: 'qwfb', // 对应权威发布
}
getPyxxList(param).then(res => {
this.pyxxList = res.map(item => {
return {
catalogId: item.catalogId,
id: item.id,
title: item.title,
publishTime: stamp2Time(item.publishDate)
}
})
})
},
// 获取案例警醒--对应联合辟谣平台热点聚焦
fetchAljxList() {
const param = {
pageIndex: 1,
pageSize: 2,
// siteRoleCode: 'zzqwxbPortal',
// catalogCode: 'yykt'
// siteRoleCode: 'zzqwxbPortal', // 对应热点聚焦
// catalogCode: 'rdjj'
siteRoleCode: 'xjwljb', //（必传）固定值
catalogCode: 'jbrdjj', //（必传）固定值
}
getPyxxList(param).then(res => {
this.aljxList = res.map(item => {
return {
catalogId: item.catalogId,
id: item.id,
title: item.title,
publishTime: stamp2Time(item.publishDate)
}
})
})
},
// 点击标题
clickTitle(val, type) {
let url = '';
if(type === 'tzgg' || type=== 'swiper' || type ==='aljx') { // 通知公告
url = `https://www.xjwljb.com/mobile/#/newsDetail?id=${val.id}&categoryId=${val.catalogId}` + `&label=${type === 'tzgg' ? '通知公告' : '热点聚焦'}`
} else if(type === 'pyxx') { // 辟谣信息
url = `https://www.xjwljb.com/piyao/web/bulletin/newInfo?id=${val.id}&catalogId=${val.catalogId}`
}
// else { // 案例警醒
// url = `https://www.xjwljb.com/mobile/#/newsDetail?id=${val.id}&catalogId=${val.catalogId}`
// }
// if (type === 'tzgg') {
// wx.navigateTo({
// url: '/packageToolList/rumorWebView/rumorWebView?type=tzgg&url=' + encodeURIComponent(url) + `&label=通知公告`
// })
// } else {
wx.navigateTo({
url: '/packageToolList/rumorWebView/rumorWebView?url=' + encodeURIComponent(url)
})
// }
}
}
}
</script>
<style lang="scss" scoped>
.index {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 60rpx 0;
padding-top: 192rpx;
.swiper-area {
padding: 0 40rpx;
}
.tab-area {
margin-top: 40rpx;
padding: 0 40rpx;
.tab {
background: linear-gradient(#eef1fd 0%, #bed5fe 100%);
border-radius: 20rpx;
padding-bottom: 80rpx;
}
.tab-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 80rpx;
.grid-text {
color: #3a3a3b;
}
}
}
.slideShine{
background: #871317 -webkit-linear-gradient(left, #561214, #febaf7 50%, #ff0 90%,#561214) no-repeat 0 0;
background-size:20% 100%;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 36px;
text-align: center;
font-weight: bold;
text-decoration: underline;
}
.slideShine {
animation: slideShine 4s linear infinite;animation: slideShine 4s linear infinite;
}
@keyframes slideShine {
0% {background-position: 0 0; }
100% {background-position: 100% 100%; }
}
.title {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 36rpx;
font-weight: 600;
// padding: 20rpx 20rpx 0 20rpx;
box-sizing: border-box;
padding: 32rpx 40rpx;
.icon-text {
display: flex;
flex-direction: row;
align-items: center;
font-size: 34rpx;
font-weight: 400;
color: #0043ac;
.text {
margin-right: 16rpx;
}
}
}
.event-area{
position: relative;
.list-img{
position: absolute;
right:12px;
bottom:10px;
}
}
.list {
border: 1px solid #BED7FF;
border-radius: 10px;
width: 95%;
margin: 0 auto;
.list-item {
margin: 32rpx 0;
padding: 0 40rpx;
width: 70%;
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
}
}
</style>
<style lang="scss">
.index {
}
</style>
