11 changed files with 294 additions and 119 deletions
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,23 @@ |
|||
const api = require("../../../../utils/activity") |
|||
import util from "../../../../utils/util" |
|||
Page({ |
|||
data: { |
|||
noticeObj: {}, |
|||
noticeObjContent: "", //富文本内容
|
|||
preloadVisible: true |
|||
}, |
|||
onLoad (options) { |
|||
this.getNoticeDetail(options.id) |
|||
}, |
|||
getNoticeDetail (id) { |
|||
api.getBannerDetail(id).then(res => { |
|||
this.setData({ |
|||
noticeObj: res.data, |
|||
noticeObjContent: util.formatRichText(res.data.content), |
|||
preloadVisible: false |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
} |
|||
}) |
@ -0,0 +1,6 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"parser": "../../../../components/parser/parser" |
|||
}, |
|||
"navigationBarTitleText": "详情" |
|||
} |
@ -0,0 +1,28 @@ |
|||
<wxs module="filter" src="../../../../utils/filter.wxs"></wxs> |
|||
<view class="notice-detail"> |
|||
<view class="selfContent" wx:if="{{!preloadVisible}}"> |
|||
<view class="detail-title"> |
|||
<view>{{noticeObj.title}}</view> |
|||
</view> |
|||
<view class="detail-subtitle"> |
|||
<view class="left"> |
|||
<!-- <span>{{noticeObj.deptName}}</span> --> |
|||
<span>{{filter.formatTime(noticeObj.createdTime, 'yyyy-MM-dd')}}</span> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="readNum"> |
|||
<image src="../../images/ic_yueduliang.png" /> |
|||
</view> |
|||
<view class="num">{{noticeObj.browseNum}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="richContent"> |
|||
<!-- <rich-text space="nbsp" nodes="{{noticeObjContent}}"></rich-text> --> |
|||
<parser html="{{noticeObjContent}}"></parser> |
|||
</view> |
|||
</view> |
|||
<view class="preload" wx:else> |
|||
<view class="preload-title"></view> |
|||
<view class="preload-content"></view> |
|||
</view> |
|||
</view> |
@ -0,0 +1,126 @@ |
|||
.notice-detail { |
|||
width: 100%; |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
padding: 20rpx; |
|||
background: #f7f7f7; |
|||
} |
|||
.selfContent { |
|||
width: 100%; |
|||
display: table; |
|||
background: #ffffff; |
|||
border-radius: 16rpx; |
|||
box-sizing: border-box; |
|||
padding: 0 25rpx 38rpx; |
|||
} |
|||
.detail-title { |
|||
font-family: PingFang-SC-Bold; |
|||
font-size: 48rpx; |
|||
font-weight: bold; |
|||
line-height: 68rpx; |
|||
color: #333333; |
|||
padding-top: 40rpx; |
|||
margin-bottom: 20rpx; |
|||
position: relative; |
|||
} |
|||
.detail-title-img { |
|||
text-align: right; |
|||
} |
|||
.detail-title image { |
|||
width: 176rpx; |
|||
height: 66rpx; |
|||
vertical-align: middle; |
|||
} |
|||
.detail-subtitle { |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: space-between; |
|||
font-size: 22rpx; |
|||
color: #999999; |
|||
margin-top:45rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.detail-subtitle .left span:nth-child(1){ |
|||
margin-right: 32rpx; |
|||
} |
|||
.detail-subtitle .right{ |
|||
display: flex; |
|||
height: 32rpx; |
|||
line-height: 32rpx; |
|||
} |
|||
|
|||
.detail-subtitle .right .readNum { |
|||
/* display: inline-block; */ |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
.detail-subtitle .right .readNum image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
float:left; |
|||
object-fit: cover; |
|||
} |
|||
.banner { |
|||
width: 100%; |
|||
height: 400rpx; |
|||
margin: 39rpx 0 19rpx 0; |
|||
} |
|||
.banner image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
float:left; |
|||
object-fit: cover; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
} |
|||
.paragraph { |
|||
font-size: 38rpx; |
|||
line-height: 58rpx; |
|||
color: #333333; |
|||
text-indent: 76rpx; |
|||
margin-top:22rpx; |
|||
} |
|||
|
|||
.richContent{ |
|||
word-break: break-all; |
|||
} |
|||
|
|||
/* preload start */ |
|||
.preload { |
|||
width: 100%; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
border-radius: 16rpx; |
|||
padding: 0 24rpx; |
|||
overflow: hidden; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.preload-title { |
|||
width: 100%; |
|||
height: 80rpx; |
|||
border-radius: 8rpx; |
|||
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
|||
animation: loading 1.4s ease infinite; |
|||
background-size: 400% 100%; |
|||
margin-top: 20rpx; |
|||
} |
|||
.preload-content { |
|||
width: 100%; |
|||
height: 200rpx; |
|||
border-radius: 8rpx; |
|||
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
|||
animation: loading 1.4s ease infinite; |
|||
background-size: 400% 100%; |
|||
margin-top: 20rpx; |
|||
} |
|||
@keyframes loading { |
|||
0% { |
|||
background-position: 100% 50% |
|||
} |
|||
|
|||
100% { |
|||
background-position: 0 50% |
|||
} |
|||
} |
|||
/* preload end */ |
@ -1,137 +1,115 @@ |
|||
<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> |
|||
<!-- 视频图片 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> |
|||
</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> |
|||
|
|||
<!-- 1. 标题、部门、时间 --> |
|||
<view class="type-1" wx:if="{{noticelist.length > 0 && moduleInfo.modulestyle == '1'}}"> |
|||
<view class="list-li" 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"> |
|||
<image src="../../images/ic_zhengce.png" /> |
|||
<view class="street">{{item.deptName}}</view> |
|||
<view class="time">{{item.noticeTime}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 1. 标题、部门、时间 --> |
|||
<view class="type-1" wx:if="{{noticelist.length > 0 && moduleInfo.modulestyle == '1'}}"> |
|||
<view class="list-li" 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"> |
|||
<image src="../../images/ic_zhengce.png" /> |
|||
<view class="street">{{item.deptName}}</view> |
|||
<view class="time">{{item.noticeTime}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 2. 图标、模块类别名称 --> |
|||
<view class="type-2" wx:if="{{modulelist.length > 0 && moduleInfo.modulestyle == '2'}}"> |
|||
<view |
|||
class="list-item" |
|||
wx:for="{{modulelist}}" |
|||
wx:for-index="index" |
|||
wx:for-item="item" |
|||
wx:key="index" |
|||
bindtap="navigateToType" |
|||
data-info="{{item}}"> |
|||
<view class="list-name"> |
|||
<image src="{{item.imgUrl}}" class="list-icon"/>{{item.categoryName}} |
|||
</view> |
|||
<image src="../../images/right.png" class="list-arrow"></image> |
|||
</view> |
|||
<movable-area class="movable-area" wx:if="{{moduleInfo.categorycode == 'notice_jsqf'}}"> |
|||
</view> |
|||
<!-- 2. 图标、模块类别名称 --> |
|||
<view class="type-2" wx:if="{{modulelist.length > 0 && moduleInfo.modulestyle == '2'}}"> |
|||
<view class="list-item" wx:for="{{modulelist}}" wx:for-index="index" wx:for-item="item" wx:key="index" bindtap="navigateToType" data-info="{{item}}"> |
|||
<view class="list-name"> |
|||
<image src="{{item.imgUrl}}" class="list-icon" /> |
|||
{{item.categoryName}} |
|||
</view> |
|||
<image src="../../images/right.png" class="list-arrow"></image> |
|||
</view> |
|||
<!-- <movable-area class="movable-area" wx:if="{{moduleInfo.categorycode == 'notice_jsqf'}}"> |
|||
<movable-view class="movable-view" direction="all" inertia="true" friction="10"> |
|||
<view class="report-issue" bindtap="toReportIssue"> |
|||
<image src="../../images/reportissue.png" /> |
|||
</view> |
|||
</movable-view> |
|||
</movable-area> |
|||
</movable-area> --> |
|||
</view> |
|||
<!-- 3. 标题、内容 --> |
|||
<view class="type-3" wx:if="{{noticelist.length > 0 && moduleInfo.modulestyle == '3'}}"> |
|||
<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="name">{{item.noticeTitle}}</view> |
|||
<view class="info"> |
|||
<text>{{common.getStr(item.noticeContent)}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 3. 标题、内容 --> |
|||
<view class="type-3" wx:if="{{noticelist.length > 0 && moduleInfo.modulestyle == '3'}}"> |
|||
<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="name">{{item.noticeTitle}}</view> |
|||
<view class="info"> |
|||
<text>{{common.getStr(item.noticeContent)}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 5. 图片、标题、部门、时间 --> |
|||
<view class="type-5" wx:if="{{noticelist.length > 0 && moduleInfo.modulestyle == '5'}}"> |
|||
<view class="list-all"> |
|||
<view class="list-item" wx:for="{{noticelist}}" data-id="{{item.id}}" bindtap="toDetail" wx:for-index="index" wx:for-item="item" wx:key="index"> |
|||
<image src="{{item.imgUrl}}"></image> |
|||
<view class="item-info"> |
|||
<view class="item-info-name">{{item.noticeTitle}} |
|||
</view> |
|||
<view class="item-info-time"> |
|||
<text>{{item.deptName}}</text> |
|||
<text>{{filter.formatTime(item.noticeTime, 'yyyy-MM-dd')}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 5. 图片、标题、部门、时间 --> |
|||
<view class="type-5" wx:if="{{noticelist.length > 0 && moduleInfo.modulestyle == '5'}}"> |
|||
<view class="list-all"> |
|||
<view class="list-item" wx:for="{{noticelist}}" data-id="{{item.id}}" bindtap="toDetail" wx:for-index="index" wx:for-item="item" wx:key="index"> |
|||
<image src="{{item.imgUrl}}"></image> |
|||
<view class="item-info"> |
|||
<view class="item-info-name">{{item.noticeTitle}}</view> |
|||
<view class="item-info-time"> |
|||
<text>{{item.deptName}}</text> |
|||
<text>{{filter.formatTime(item.noticeTime, 'yyyy-MM-dd')}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 6. 图片、标题--> |
|||
<view class="type-6" wx:if="{{noticelist.length > 0 && moduleInfo.modulestyle == '6'}}"> |
|||
<view class="box"> |
|||
<view class="item" wx:for="{{noticelist}}" bindtap="toDetail" data-id="{{item.id}}" wx:for-index="index" wx:for-item="item" wx:key="index"> |
|||
<image src="{{item.imgUrl}}"></image> |
|||
<view class="name">{{item.noticeTitle}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 6. 图片、标题 --> |
|||
<view class="type-6" wx:if="{{noticelist.length > 0 && moduleInfo.modulestyle == '6'}}"> |
|||
<view class="box"> |
|||
<view class="item" wx:for="{{noticelist}}" bindtap="toDetail" data-id="{{item.id}}" wx:for-index="index" wx:for-item="item" wx:key="index"> |
|||
<image src="{{item.imgUrl}}"></image> |
|||
<view class="name">{{item.noticeTitle}}</view> |
|||
</view> |
|||
</view> |
|||
<!-- 7. 视频列表 --> |
|||
<view class="type-7" wx:if="{{noticelist.length > 0 && moduleInfo.modulestyle == '7'}}"> |
|||
<view class="video-list"> |
|||
<block wx:for="{{noticelist}}" wx:for-index="index" wx:for-item="item" wx:key="index"> |
|||
<view class="video-item"> |
|||
<video id="videoItem{{index}}" src="{{item.noticeVideoUrl}}" title="{{item.noticeTitle}}" bindcontrolstoggle="videoitemtoggle" bindplay='videoitemplay' data-index="{{index}}"/> |
|||
<view class="video-title" hidden="{{!item.showTitle}}">{{item.noticeTitle}}</view> |
|||
</view> |
|||
<view class="video-line"></view> |
|||
</block> |
|||
</view> |
|||
<!-- 7. 视频列表 --> |
|||
<view class="type-7" wx:if="{{noticelist.length > 0 && moduleInfo.modulestyle == '7'}}"> |
|||
<view class="video-list"> |
|||
<block wx:for="{{noticelist}}" wx:for-index="index" wx:for-item="item" wx:key="index"> |
|||
<view class="video-item"> |
|||
<video id="videoItem{{index}}" src="{{item.noticeVideoUrl}}" title="{{item.noticeTitle}}" bindcontrolstoggle="videoitemtoggle" bindplay='videoitemplay' data-index="{{index}}" /> |
|||
<view class="video-title" hidden="{{!item.showTitle}}">{{item.noticeTitle}}</view> |
|||
</view> |
|||
<view class="video-line"></view> |
|||
</block> |
|||
</view> |
|||
<!-- 8. 顶部标签、通知列表 --> |
|||
<view class="type-8" wx:if="{{newsCategoryList.length > 0 && moduleInfo.modulestyle == '8'}}"> |
|||
<view style="height:40rpx" wx:if="{{swiperBannerList.length > 0}}"></view> |
|||
<news-list |
|||
newsCategoryList="{{newsCategoryList}}" |
|||
newsList="{{noticelist}}" |
|||
preloadVisible="{{preloadVisible}}" |
|||
bind:newsCategoryCallback="newsCategoryCallback"> |
|||
</news-list> |
|||
</view> |
|||
|
|||
</view> |
|||
<!-- 8. 顶部标签、通知列表 --> |
|||
<view class="type-8" wx:if="{{newsCategoryList.length > 0 && moduleInfo.modulestyle == '8'}}"> |
|||
<view style="height:40rpx" wx:if="{{swiperBannerList.length > 0}}"></view> |
|||
<news-list newsCategoryList="{{newsCategoryList}}" newsList="{{noticelist}}" preloadVisible="{{preloadVisible}}" bind:newsCategoryCallback="newsCategoryCallback"></news-list> |
|||
</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'),'') |
|||
} |
|||
</wxs> |
|||
|
|||
</wxs> |
Loading…
Reference in new issue