13 changed files with 665 additions and 9 deletions
@ -1,3 +1,3 @@ |
|||
{ |
|||
"navigationBarTitleText": "资讯详情" |
|||
"navigationBarTitleText": "详情" |
|||
} |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 655 B |
@ -0,0 +1,208 @@ |
|||
import { getModuleList, contentList } from '../../api/index.js' |
|||
const app = getApp() |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
pageIndex: 1, |
|||
pageSize: 10, |
|||
modulelist: [], //module 接口
|
|||
noticelist: [], //notice 接口
|
|||
newsCategoryList: [], //type-8 tab list
|
|||
nodata: false, |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false, |
|||
isLoadMore: false, //是否显示load-more组件
|
|||
// swiperBannerList: [],
|
|||
// indicatorDots: false, //指示点
|
|||
// autoplay: true, //true,//自动播放
|
|||
// circular: true, //衔接滑动
|
|||
// interval: 5000, //自动播放间隔时长(ms)
|
|||
// duration: 500, //幻灯片切换时长(ms)
|
|||
// currentSwiper: 0,
|
|||
// showTitle: true, //视频标题
|
|||
moduleInfo: {}, //pid, bannerflag, categorycode, modulestyle, categoryname
|
|||
preloadVisible: true, //type-8 预加载
|
|||
lastPlayVideo: '', //正在播放的视频
|
|||
completeInfoDialogVisible: false, //完善信息
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
let moduleInfo = { ...options } |
|||
this.setData({ |
|||
moduleInfo |
|||
}) |
|||
wx.setNavigationBarTitle({ |
|||
title: options.name |
|||
}) |
|||
// if (options.bannerflag == '1') {
|
|||
// this.getBannerList(options.categorycode)
|
|||
// }
|
|||
if (this.getModuleStyleType() == 'notice_list') { |
|||
this.setData({ |
|||
isLoadMore: true |
|||
}) |
|||
this.getNoticelist() |
|||
} else if (this.getModuleStyleType() == 'module_list') { |
|||
this.getModuleCategory() |
|||
} else { |
|||
wx.showToast({ |
|||
title: '样式错误', |
|||
icon: 'none', |
|||
duration: 2500 |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
this.setData({ |
|||
loadMoreVisible: true |
|||
}) |
|||
if (this.data.loadMoreType === 'loading') { |
|||
this.setData({ |
|||
pageIndex: this.data.pageIndex + 1, |
|||
pageSize: this.data.pageSize, |
|||
}) |
|||
|
|||
if (this.getModuleStyleType() == 'notice_list') { |
|||
this.getNoticelist() |
|||
} else if (this.getModuleStyleType() == 'module_list') { |
|||
this.getModuleCategory() |
|||
} |
|||
} |
|||
}, |
|||
//modulestyle 调用模式
|
|||
getModuleStyleType () { |
|||
let moduleStyle = this.data.moduleInfo.style |
|||
if (moduleStyle == '1' || moduleStyle == '3') { |
|||
return 'module_list' |
|||
} else if (moduleStyle == '2' || moduleStyle == '4') { |
|||
return 'notice_list' |
|||
} |
|||
return 'none' |
|||
}, |
|||
//获取模块列表
|
|||
getModuleCategory() { |
|||
let params = { |
|||
pageIndex: this.data.pageIndex, |
|||
pageSize: this.data.pageSize, |
|||
typeCode: this.data.moduleInfo.typeCode |
|||
} |
|||
getModuleList(params).then(res => { |
|||
//为 多个悬浮按钮设置初始位置
|
|||
if (this.data.pageIndex == 1) { |
|||
let index = 0 |
|||
res.data.forEach(item => { |
|||
if (item.categoryType == 'module_category_type_button') { |
|||
item.startY = 600 + 200 * index++ + '' |
|||
} |
|||
}) |
|||
} |
|||
this.setData({ |
|||
modulelist: this.data.modulelist.concat(res.data), |
|||
loadMoreType: res.data.length === this.data.pageSize ? 'loading' : 'none', |
|||
loadMoreVisible: res.data.length === this.data.pageSize ? false : true |
|||
}) |
|||
if (this.data.modulelist.length == 0) { |
|||
this.setData({ |
|||
nodata: true, |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false, |
|||
}) |
|||
} |
|||
}).catch(err => { |
|||
this.setData({ |
|||
modulelist: [], |
|||
nodata: true, |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false, |
|||
}) |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
//获取通知列表
|
|||
getNoticelist(categoryCode='') { |
|||
let that = this |
|||
let params = { |
|||
pageIndex: this.data.pageIndex, |
|||
pageSize: this.data.pageSize, |
|||
typeId: this.data.moduleInfo.pid, |
|||
} |
|||
contentList(params).then(res => { |
|||
let list = [ ...res.data ] |
|||
console.log(list) |
|||
that.setData({ |
|||
noticelist: that.data.noticelist.concat(list), |
|||
loadMoreType: res.data.length === that.data.pageSize ? 'loading' : 'none', |
|||
loadMoreVisible: res.data.length === that.data.pageSize ? false : true, |
|||
preloadVisible: false |
|||
}) |
|||
if (that.data.noticelist.length == 0) { |
|||
that.setData({ |
|||
nodata: true, |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false, |
|||
}) |
|||
} |
|||
}).catch(err => { |
|||
that.setData({ |
|||
noticelist: [], |
|||
nodata: true, |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false, |
|||
preloadVisible: false |
|||
}) |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
/** |
|||
* module 跳转模块页面 |
|||
*/ |
|||
navigateToType (e) { |
|||
const info = e.currentTarget.dataset.info |
|||
if (info.moduleStyle == '1' || info.moduleStyle == '3' || info.moduleStyle == '2' || info.moduleStyle == '4') { |
|||
wx.navigateTo({ |
|||
url: `./moduleList?pid=${info.id}&style=${info.moduleStyle}&name=${info.name}` |
|||
}) |
|||
} else { |
|||
wx.navigateTo({ |
|||
url: `/subpages/communityNews/pages/detail/detail?id=${info.id}` |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
//notice 跳转详情页面
|
|||
toDetail(e){ |
|||
const info = e.currentTarget.dataset |
|||
wx.navigateTo({ |
|||
url: `/subpages/communityNews/pages/detail/detail?id=${info.id}` |
|||
}) |
|||
}, |
|||
|
|||
// 检查 是否完善信息
|
|||
verifyCompleteInfo () { |
|||
if (app.globalData.infoCompleted == 0) { |
|||
this.setData({ |
|||
completeInfoDialogVisible: !this.data.completeInfoDialogVisible |
|||
}) |
|||
return true |
|||
} else { |
|||
return false |
|||
} |
|||
}, |
|||
}) |
@ -0,0 +1,9 @@ |
|||
{ |
|||
"navigationBarTitleText": "", |
|||
"usingComponents": { |
|||
"load-more": "../../../../components/loadMore/loadMore", |
|||
"no-data":"../../../../components/nodata/nodata", |
|||
"complete-info-dialog": "../../../../components/completeInfoDialog/completeInfoDialog", |
|||
"move-btn": "/components/moveButton/moveButton" |
|||
} |
|||
} |
@ -0,0 +1,91 @@ |
|||
<wxs module="filter" src="../../../../utils/filter.wxs"></wxs> |
|||
<view class="dept-list"> |
|||
<!-- 视频图片 banner --> |
|||
<!-- <view class="banner" wx:if="{{swiperBannerList.length > 0}}"> |
|||
<view class="page-section page-section-spacing swiper"> |
|||
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange"> |
|||
<block wx:for="{{swiperBannerList}}" wx:for-item="item" wx:for-index="index" wx:key="index"> |
|||
<swiper-item> |
|||
<view data-banner="{{item}}"> |
|||
<view class="swiper-item" data-id="{{item.id}}"> |
|||
<image wx:if="{{item.imgUrl}}" class="banner-item" src='{{item.imgUrl}}' mode="aspectFill" /> |
|||
<block wx:elif="{{item.videoUrl}}"> |
|||
<video id="video{{index}}" class="banner-item" src="{{item.videoUrl}}" title="{{item.title}}" bindcontrolstoggle="bindcontrolstoggle" bindpause="bindended" bindplay='bindplay' bindended='bindended' /> |
|||
<view class="video-title" hidden="{{!showTitle}}">{{item.title}}</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</swiper-item> |
|||
</block> |
|||
</swiper> |
|||
<view class="dots"> |
|||
<block wx:for="{{ swiperBannerList }}" wx:key="index"> |
|||
<view class="dot {{index == currentSwiper ? ' active' : '' }}"></view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</view> --> |
|||
<!-- 1. 图标、模块类别名称 --> |
|||
<view class="type-1" wx:if="{{modulelist.length > 0 && moduleInfo.style == '1'}}"> |
|||
<block wx:for="{{modulelist}}" wx:for-index="index" wx:for-item="item" wx:key="index"> |
|||
<view class="list-item" bindtap="navigateToType" data-info="{{item}}"> |
|||
<image class="list-icon" src="{{item.imgUrl}}"/> |
|||
<view class="list-name">{{item.name}}</view> |
|||
</view> |
|||
|
|||
<!-- <move-btn button-top="{{item.startY}}" |
|||
button-left="560" |
|||
button-width="178" |
|||
button-height="178" |
|||
img-url="{{item.imgUrl}}" |
|||
bindmovebtnCallBack="toReportIssue" |
|||
data-code="{{item.categoryCode}}" |
|||
wx:elif="{{item.categoryType == 'module_category_type_button'}}"></move-btn> --> |
|||
</block> |
|||
</view> |
|||
<!-- 2. 图片、标题、部门、浏览次数 --> |
|||
<view class="type-2" wx:if="{{noticelist.length > 0 && moduleInfo.style == '2'}}"> |
|||
<view class="list-item" wx:for="{{noticelist}}" data-id="{{item.id}}" bindtap="toDetail" wx:for-index="index" wx:for-item="item" wx:key="index"> |
|||
<view class="item-info"> |
|||
<view class="item-info-title">{{item.noticeTitle}}</view> |
|||
<view class="item-info-dept"> |
|||
<view class="dept"><image class="dept-icon-1" src="../../images/danwei.png" />{{item.deptName}}</view> |
|||
<view class="read"><image class="dept-icon-2" src="../../images/eye.png" />{{item.readingAmount}}</view> |
|||
</view> |
|||
</view> |
|||
<image class="list-img" src="{{item.imgUrl}}"></image> |
|||
</view> |
|||
</view> |
|||
<!-- 3. 模块标题、内容、背景图 --> |
|||
<view class="type-3" wx:if="{{modulelist.length > 0 && moduleInfo.style == '3'}}"> |
|||
<view class="list-item color-{{index%6}}" wx:for="{{modulelist}}" bindtap="navigateToType" data-info="{{item}}" wx:for-index="index" wx:for-item="item" wx:key="index"> |
|||
<!-- <image class="list-bg" src="{{item.imgUrl}}"/> --> |
|||
<view class="title">{{item.name}}</view> |
|||
<!-- <view class="content"> |
|||
<text >{{common.getStr(item.content)}}</text> |
|||
<text>内容介绍</text> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
<!-- 4. 标题、部门、时间 --> |
|||
<view class="type-4" wx:if="{{noticelist.length > 0 && moduleInfo.style == '4'}}"> |
|||
<view class="list-item" wx:for="{{noticelist}}" bindtap="toDetail" data-id="{{item.id}}" wx:for-index="index" wx:for-item="item" wx:key="index"> |
|||
<view class="item-name">{{item.noticeTitle}}</view> |
|||
<view class="item-info"> |
|||
<view class="dept">{{item.deptName}}</view> |
|||
<view class="time">{{common.getTimeStr(item.releaseTime)}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<complete-info-dialog completeInfoDialogVisible="{{completeInfoDialogVisible}}"></complete-info-dialog> |
|||
<load-more loadMoreType="{{loadMoreType}}" loadMoreVisible="{{loadMoreVisible && isLoadMore}}"></load-more> |
|||
<no-data isShow="{{nodata}}"></no-data> |
|||
<wxs module="common"> |
|||
module.exports.getStr = function(content) { |
|||
return content.replace(getRegExp('<\/?.+?\/?>|[ ]','g'),'') |
|||
} |
|||
module.exports.getTimeStr = function(time) { |
|||
return time.split(' ')[0].replace(getRegExp('-','g'),'.') |
|||
} |
|||
</wxs> |
@ -0,0 +1,346 @@ |
|||
page { |
|||
background: #f7f7f7; |
|||
height: auto; |
|||
} |
|||
|
|||
/* 轮播图start */ |
|||
.altitle { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 66rpx; |
|||
background-color: black; |
|||
margin-top: 237rpx; |
|||
border-bottom-right-radius: 16rpx; |
|||
border-bottom-left-radius: 16rpx; |
|||
opacity: 0.5; |
|||
font-size: 22rpx; |
|||
font-weight: 500; |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
|
|||
.altitle-name { |
|||
margin: 10rpx 20rpx; |
|||
} |
|||
|
|||
.container { |
|||
width: 100vw; |
|||
} |
|||
|
|||
.page-body { |
|||
padding-top: 30rpx; |
|||
background: #fff; |
|||
height: 350rpx; |
|||
} |
|||
|
|||
.page-section { |
|||
width: 100%; |
|||
margin-bottom: 60rpx; |
|||
} |
|||
|
|||
.page-section_center { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
.page-section:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.page-section-gap { |
|||
box-sizing: border-box; |
|||
padding: 0 30rpx; |
|||
} |
|||
|
|||
.page-section-spacing { |
|||
box-sizing: border-box; |
|||
/* padding: 0 20rpx; */ |
|||
height: 350rpx; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.page-section-title { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
margin-bottom: 10rpx; |
|||
padding-left: 30rpx; |
|||
padding-right: 30rpx; |
|||
} |
|||
|
|||
.page-section-gap .page-section-title { |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
} |
|||
|
|||
.swiper-item { |
|||
display: block; |
|||
height: 350rpx; |
|||
} |
|||
|
|||
.banner { |
|||
overflow: hidden; |
|||
height: 350rpx; |
|||
display: flex; |
|||
width: 100%; |
|||
margin: 0 auto; |
|||
background-color: #FFF; |
|||
padding: 44rpx 0; |
|||
} |
|||
|
|||
.banner-item { |
|||
overflow: hidden; |
|||
height: 350rpx; |
|||
display: flex; |
|||
width: 100%; |
|||
border-radius: 16rpx; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
.dots { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: -16rpx; |
|||
z-index: 999; |
|||
position: relative; |
|||
} |
|||
|
|||
.dots .dot { |
|||
width: 8rpx; |
|||
height: 8rpx; |
|||
border-radius: 8rpx; |
|||
margin-left: 10rpx; |
|||
background: #d2d5da; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
.dots .dot.active { |
|||
width: 24rpx; |
|||
background: #fff; |
|||
} |
|||
|
|||
.page-section-title { |
|||
margin-top: 60rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
swiper { |
|||
width: 710rpx; |
|||
height: 350rpx; |
|||
margin: 0 auto; |
|||
box-shadow: 0px 4px 29px 0px rgba(63, 63, 63, 0.1); |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
-webkit-backface-visibility: hidden; |
|||
-webkit-transform: translate3d(0, 0, 0); |
|||
} |
|||
|
|||
.video-title { |
|||
width: 100%; |
|||
height: 50rpx; |
|||
line-height: 50rpx; |
|||
padding-left: 40rpx; |
|||
color: white; |
|||
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0)); |
|||
background: -webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0)); |
|||
position: absolute; |
|||
top: 0; |
|||
} |
|||
/* 轮播图end */ |
|||
|
|||
/* type-1 start */ |
|||
.type-1 { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 20rpx 40rpx; |
|||
background-color: #ffffff; |
|||
margin-top: 10rpx; |
|||
} |
|||
.type-1 .list-item { |
|||
width: 200rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin: 20rpx 10rpx; |
|||
} |
|||
.type-1 .list-item .list-icon { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
} |
|||
.type-1 .list-item .list-name { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
} |
|||
/* type-1 end */ |
|||
|
|||
/* type-2 start */ |
|||
.type-2 { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.type-2 .list-item { |
|||
width: 710rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin: 10rpx 0; |
|||
border-radius: 6rpx; |
|||
background-color: #ffffff; |
|||
padding: 20rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.type-2 .list-item .item-info { |
|||
width: 420rpx; |
|||
min-height: 160rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.type-2 .list-item .item-info .item-info-title { |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-wrap:break-word; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
display: -webkit-box; |
|||
} |
|||
.type-2 .list-item .item-info .item-info-dept { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-top: 20rpx; |
|||
font-size: 26rpx; |
|||
color: #aaaaaa; |
|||
} |
|||
.type-2 .list-item .item-info .item-info-dept .dept { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.type-2 .list-item .item-info .item-info-dept .dept-icon-1{ |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
.type-2 .list-item .item-info .item-info-dept .read{ |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 24rpx; |
|||
color: #000000; |
|||
} |
|||
.type-2 .list-item .item-info .item-info-dept .dept-icon-2{ |
|||
width: 28rpx; |
|||
height: 24rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
.type-2 .list-item .list-img { |
|||
width: 220rpx; |
|||
height: 146rpx; |
|||
border-radius: 12rpx; |
|||
} |
|||
/* type-2 end */ |
|||
|
|||
/* type-3 start */ |
|||
.type-3 { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 20rpx; |
|||
background-color: #ffffff; |
|||
margin-top: 10rpx; |
|||
} |
|||
.type-3 .list-item { |
|||
width: 330rpx; |
|||
height: 150rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
margin: 20rpx 10rpx; |
|||
position: relative; |
|||
border-radius: 14rpx; |
|||
} |
|||
.type-3 .color-0 { |
|||
background-color: rgba(27, 171, 252, 0.13); |
|||
} |
|||
.type-3 .color-1 { |
|||
background-color: rgba(255, 100, 92, 0.13); |
|||
} |
|||
.type-3 .color-2 { |
|||
background-color: rgba(251, 128, 54, 0.13); |
|||
} |
|||
.type-3 .color-3 { |
|||
background-color: rgba(67, 204, 202, 0.13); |
|||
} |
|||
.type-3 .color-4 { |
|||
background-color: rgba(184, 159, 150, 0.13); |
|||
} |
|||
.type-3 .color-5 { |
|||
background-color: rgba(255, 213, 86, 0.13); |
|||
} |
|||
.type-3 .list-item .list-bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
border-radius: 12rpx; |
|||
opacity: 0.2; |
|||
} |
|||
.type-3 .list-item .title { |
|||
margin-left: 30rpx; |
|||
font-size: 32rpx; |
|||
color: #333333; |
|||
} |
|||
.type-3 .list-item .content { |
|||
margin-left: 30rpx; |
|||
margin-top: 8rpx; |
|||
font-size: 26rpx; |
|||
color: #666666; |
|||
overflow: hidden; |
|||
text-overflow:ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
/* type-3 end */ |
|||
|
|||
/* type-4 start */ |
|||
.type-4 { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background-color: #ffffff; |
|||
margin-top: 10rpx; |
|||
} |
|||
.type-4 .list-item { |
|||
width: 690rpx; |
|||
min-height: 150rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
margin: 20rpx 0; |
|||
border-radius: 6rpx; |
|||
background-color: #f5f7fa; |
|||
padding: 20rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.type-4 .list-item .item-name { |
|||
font-size: 34rpx; |
|||
color: #333333; |
|||
} |
|||
.type-4 .list-item .item-info { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.type-4 .list-item .item-info .dept{ |
|||
font-size: 28rpx; |
|||
color: #fba84f; |
|||
} |
|||
.type-4 .list-item .item-info .time{ |
|||
font-size: 28rpx; |
|||
color: #999999; |
|||
} |
|||
/* type-4 end */ |
Loading…
Reference in new issue