lihenian
5 years ago
21 changed files with 1679 additions and 112 deletions
@ -1,3 +1,7 @@ |
|||
{ |
|||
"navigationBarTitleText": "一键服务" |
|||
"navigationBarTitleText": "一键服务", |
|||
"usingComponents": { |
|||
"load-more": "../../../../components/loadMore/loadMore", |
|||
"no-data":"../../../../components/nodata/nodata" |
|||
} |
|||
} |
|||
@ -0,0 +1,83 @@ |
|||
Component({ |
|||
data: { |
|||
selectBarLeft: 0, |
|||
newsCategoryId: '' |
|||
}, |
|||
properties: { |
|||
newsCategoryList: { |
|||
type: Array, |
|||
value: [], |
|||
observer: function (value) { |
|||
if (value.length > 0) { |
|||
const _this = this |
|||
const query = wx.createSelectorQuery().in(this) |
|||
query.select('#item1').boundingClientRect() |
|||
query.exec(function(res){ |
|||
_this.setData({ |
|||
selectBarLeft: res[0].width/2 |
|||
}) |
|||
console.log(_this.data.selectBarLeft) |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
newsList: { |
|||
type: Array, |
|||
value: [] |
|||
}, |
|||
preloadVisible: { |
|||
type: Boolean, |
|||
value: true |
|||
} |
|||
}, |
|||
lifetimes: { |
|||
created () { |
|||
console.log('组件实例创建--created') |
|||
}, |
|||
attached () { |
|||
|
|||
}, |
|||
detached () { |
|||
console.log('从父组件中移除-detached') |
|||
} |
|||
}, |
|||
pageLifetimes: { |
|||
show () { |
|||
|
|||
}, |
|||
hide () { |
|||
console.log('页面隐藏') |
|||
} |
|||
}, |
|||
methods: { |
|||
// 分类导航切换
|
|||
onChangeClassifyTab (e) { |
|||
this.data.newsCategoryList.forEach((item, index) => { |
|||
if (index === e.currentTarget.dataset.tab) { |
|||
this.data.newsCategoryId = item.value |
|||
item.select = true |
|||
const _this = this |
|||
const query = wx.createSelectorQuery().in(this) |
|||
query.select(`#item${index + 1}`).boundingClientRect() |
|||
query.exec(function(res){ |
|||
_this.setData({ |
|||
selectBarLeft: res[0].width/2 |
|||
}) |
|||
console.log(_this.data.selectBarLeft) |
|||
}) |
|||
} else { |
|||
item.select = false |
|||
} |
|||
}) |
|||
this.setData({ |
|||
newsCategoryList: this.data.newsCategoryList |
|||
}) |
|||
this.triggerEvent('newsCategoryCallback', { newsCategoryId: this.data.newsCategoryId }) |
|||
}, |
|||
toDetail (e) { |
|||
wx.navigateTo({ |
|||
url: `/subpages/oneKeyService/pages/noticeDetail/noticeDetail?id=${e.currentTarget.dataset.id}&title=${e.currentTarget.dataset.title}` |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,51 @@ |
|||
<view class="news-module"> |
|||
<scroll-view class="classify-tab" scroll-x="{{true}}"> |
|||
<view class="tab-list"> |
|||
<view |
|||
class="item {{item.select ? 'select' : ''}}" |
|||
id="{{'item' + (index + 1)}}" |
|||
wx:for="{{newsCategoryList}}" |
|||
wx:for-item="item" |
|||
wx:for-index="index" |
|||
data-tab="{{index}}" |
|||
bindtap="onChangeClassifyTab" |
|||
wx:key="index"> |
|||
{{item.label}} |
|||
<view style="left: calc({{selectBarLeft}}px - 15rpx)" wx:if="{{item.select}}" class="select-bar"></view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="news-list"> |
|||
<block wx:if="{{newsList.length > 0}}"> |
|||
<view class="type-3"> |
|||
<view class="list-item" wx:for="{{newsList}}" wx:for-index="index" wx:for-item="item" wx:key="index" bindtap="toDetail" data-id="{{item.id}}" data-title="{{item.noticeTitle}}"> |
|||
<view class="name">{{item.noticeTitle}}</view> |
|||
<view class="info"> |
|||
<text class="text">{{common.getStr(item.noticeContent)}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
|
|||
<block wx:if="{{preloadVisible}}"> |
|||
<view class="preload-item" wx:for="{{[1,2,3,4]}}" wx:key="index" wx:for-index="index" wx:for-item="item"> |
|||
<view class="left"> |
|||
<view class="top"> |
|||
<view class="title"></view> |
|||
<view class="title"></view> |
|||
<view class="time"></view> |
|||
</view> |
|||
<view class="bottom"></view> |
|||
</view> |
|||
<view class="right"></view> |
|||
</view> |
|||
</block> |
|||
|
|||
</view> |
|||
</view> |
|||
<wxs module="common"> |
|||
module.exports.cutTime = function(time) { return time.split(' ')[0] } |
|||
module.exports.getStr = function(content) { |
|||
return content.replace(getRegExp('<\/?.+?\/?>|[ ]','g'),'') |
|||
} |
|||
</wxs> |
|||
@ -0,0 +1,159 @@ |
|||
.news-module { |
|||
width: 100%; |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
} |
|||
|
|||
.classify-tab { |
|||
width: 100%; |
|||
height: 90rpx; |
|||
border-bottom: 1rpx solid #eaeaea; |
|||
} |
|||
::-webkit-scrollbar{ |
|||
width: 0; |
|||
height: 0; |
|||
color: transparent; |
|||
display:none; |
|||
} |
|||
.classify-tab .tab-list { |
|||
width: auto; |
|||
min-width: 100%; |
|||
height: 90rpx; |
|||
display: flex; |
|||
} |
|||
.tab-list .item { |
|||
height: 90rpx; |
|||
color: #ababab; |
|||
font-size: 30rpx; |
|||
margin: 0 20rpx; |
|||
line-height: 90rpx; |
|||
flex-shrink: 0; |
|||
position: relative; |
|||
width: 150rpx; |
|||
text-align: center; |
|||
} |
|||
.tab-list .item.select { |
|||
color: #FF4848; |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
.tab-list .item:first-child { |
|||
margin-left: 0; |
|||
} |
|||
.tab-list .item:last-child { |
|||
margin-right: 0; |
|||
} |
|||
.classify-tab .tab-list .item .select-bar { |
|||
width: 30rpx; |
|||
height: 8rpx; |
|||
border-radius: 4rpx; |
|||
background: #FF4848; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.news-list { |
|||
width: 100%; |
|||
} |
|||
|
|||
.news-list .preload-item { |
|||
width: 100%; |
|||
padding: 30rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.news-list .preload-item + .preload-item { |
|||
border-top: 1rpx solid #eaeaea; |
|||
} |
|||
.news-list .preload-item .left { |
|||
width: calc(100% - 260rpx); |
|||
height: 170rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.news-list .preload-item .left .top .title { |
|||
height: 30rpx; |
|||
width: 100%; |
|||
border-radius: 2rpx; |
|||
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
|||
animation: loading 1.4s ease infinite; |
|||
background-size: 400% 100%; |
|||
margin-top:10rpx; |
|||
} |
|||
.news-list .preload-item .left .top .time { |
|||
border-radius: 6rpx; |
|||
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
|||
animation: loading 1.4s ease infinite; |
|||
background-size: 400% 100%; |
|||
height: 20rpx; |
|||
width: 30%; |
|||
margin-top: 10rpx; |
|||
} |
|||
.news-list .preload-item .left .bottom { |
|||
height: 20rpx; |
|||
width: 50%; |
|||
border-radius: 2rpx; |
|||
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
|||
animation: loading 1.4s ease infinite; |
|||
background-size: 400% 100%; |
|||
} |
|||
.news-list .preload-item .right { |
|||
width: 240rpx; |
|||
height: 170rpx; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
|||
animation: loading 1.4s ease infinite; |
|||
background-size: 400% 100%; |
|||
} |
|||
|
|||
/* type-3 start */ |
|||
.type-3 .list-item { |
|||
width: 100%; |
|||
padding: 40rpx 28rpx; |
|||
margin-top: 16rpx; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.type-3 .list-item .name { |
|||
font-size: 34rpx; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
line-height: 50rpx; |
|||
} |
|||
|
|||
.type-3 .list-item .info { |
|||
margin-top: 15rpx; |
|||
font-size: 28rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
|
|||
.type-3 .list-item .info .text { |
|||
line-height: 46rpx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-wrap: break-word; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
font-size: 30rpx; |
|||
} |
|||
/* type-3 end */ |
|||
|
|||
@keyframes loading { |
|||
0% { |
|||
background-position: 100% 50% |
|||
} |
|||
|
|||
100% { |
|||
background-position: 0 50% |
|||
} |
|||
} |
|||
@ -0,0 +1,314 @@ |
|||
// subpages/understandJs/pages/archives/archives.js
|
|||
const api = require('../../../../utils/understandJs') |
|||
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: '', //正在播放的视频
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
this.data.moduleInfo = { ...options } |
|||
this.setData({ |
|||
moduleInfo: this.data.moduleInfo |
|||
}) |
|||
wx.setNavigationBarTitle({ |
|||
title: options.categoryname |
|||
}) |
|||
if (options.bannerflag == '1') { |
|||
this.getBannerList(options.categorycode) |
|||
} |
|||
if (this.data.moduleInfo.modulestyle == '1' || this.data.moduleInfo.modulestyle == '3' || this.data.moduleInfo.modulestyle == '5' || this.data.moduleInfo.modulestyle == '6') { |
|||
this.setData({ |
|||
isLoadMore: true |
|||
}) |
|||
this.getNoticelist() |
|||
} else if (options.modulestyle == '2') { |
|||
this.getModuleCategory() |
|||
} else if (options.modulestyle == '4') { |
|||
wx.navigateTo({ |
|||
url: `../noticeDetail/noticeDetail?pid=${this.data.moduleInfo.pid}&bannerflag=${this.data.moduleInfo.bannerflag}&categorycode=${this.data.moduleInfo.categorycode}&modulestyle=${this.data.moduleInfo.modulestyle}&categoryname=${this.data.moduleInfo.categoryname}` |
|||
}) |
|||
} else if (options.modulestyle == '7') { |
|||
this.setData({ |
|||
isLoadMore: true |
|||
}) |
|||
this.getNoticelist() |
|||
} else if (options.modulestyle == '8') { |
|||
this.getModuleCategoryList().then(() => { |
|||
this.getNoticelist(this.data.newsCategoryList[0].value) |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
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.data.moduleInfo.modulestyle == '1' || this.data.moduleInfo.modulestyle == '3' || this.data.moduleInfo.modulestyle == '5' || this.data.moduleInfo.modulestyle == '6') { |
|||
this.getNoticelist() |
|||
} else if (this.data.moduleInfo.modulestyle == '2') { |
|||
this.getModuleCategory() |
|||
} else if (this.data.moduleInfo.modulestyle == '7') { |
|||
this.getNoticelist() |
|||
} else if (this.data.moduleInfo.modulestyle == '8') { |
|||
this.getNoticelist(this.data.newsCategoryList[0].value) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
//获取模块列表
|
|||
getModuleCategory() { |
|||
let params = { |
|||
pageIndex: this.data.pageIndex, |
|||
pageSize: this.data.pageSize, |
|||
pid: this.data.moduleInfo.pid |
|||
} |
|||
api.moduleCategory(params).then(res => { |
|||
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: that.data.pageIndex, |
|||
pageSize: that.data.pageSize, |
|||
noticeCategory: categoryCode == '' ? that.data.moduleInfo.categorycode : categoryCode |
|||
} |
|||
|
|||
api.noticelist(params).then(res => { |
|||
let list = [ ...res.data ] |
|||
if (that.data.moduleInfo.modulestyle == '7') { |
|||
list = [] |
|||
res.data.forEach(item => { |
|||
if (item.noticeVideoUrl) { |
|||
item.showTitle = false |
|||
list.push(item) |
|||
} |
|||
}) |
|||
} |
|||
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) |
|||
}) |
|||
}, |
|||
|
|||
// 获取type-8 分类列表
|
|||
getModuleCategoryList () { |
|||
let params = { |
|||
pageIndex: this.data.pageIndex, |
|||
pageSize: this.data.pageSize, |
|||
pid: this.data.moduleInfo.pid |
|||
} |
|||
return new Promise((resolve, reject) => { |
|||
api.moduleCategory(params).then(res => { |
|||
console.log('获取分类列表', res) |
|||
// const newsCategoryList = [{
|
|||
// value: 'all',
|
|||
// select: true,
|
|||
// label: '全部'
|
|||
// }]
|
|||
const newsCategoryList = [] |
|||
res.data.forEach(item => { |
|||
newsCategoryList.push({ |
|||
value: item.categoryCode, |
|||
select: false, |
|||
label: item.categoryName |
|||
}) |
|||
}) |
|||
newsCategoryList[0].select = true |
|||
this.setData({ |
|||
newsCategoryList |
|||
}) |
|||
resolve(true) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
reject(false) |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
//获取视频banner列表
|
|||
getBannerList: function(bannerNum) { |
|||
let that = this |
|||
api.bannerList(bannerNum).then(function(res) { |
|||
// console.log('res==', res.data)
|
|||
that.setData({ |
|||
swiperBannerList: res.data |
|||
}) |
|||
}) |
|||
}, |
|||
swiperChange: function(e) { |
|||
wx.createVideoContext('video'+this.data.currentSwiper).pause() |
|||
this.setData({ |
|||
currentSwiper: e.detail.current, |
|||
autoplay: true |
|||
}) |
|||
}, |
|||
bindplay() { |
|||
this.setData({ |
|||
autoplay: false |
|||
}) |
|||
wx.getNetworkType({ |
|||
success (res) { |
|||
const networkType = res.networkType |
|||
if (res.networkType != 'wifi') { |
|||
wx.showToast({ |
|||
title: '当前为非WI-FI环境，请注意流量消耗', |
|||
icon: 'none', |
|||
duration: 3000 |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
bindended() { |
|||
this.setData({ |
|||
autoplay: true |
|||
}) |
|||
}, |
|||
bindcontrolstoggle(e) { |
|||
this.setData({ |
|||
showTitle: e.detail.show |
|||
}) |
|||
}, |
|||
videoitemplay (e) { |
|||
wx.createVideoContext(this.data.lastPlayVideo).pause() |
|||
this.setData({ |
|||
lastPlayVideo: e.currentTarget.id |
|||
}) |
|||
wx.getNetworkType({ |
|||
success (res) { |
|||
const networkType = res.networkType |
|||
if (res.networkType != 'wifi') { |
|||
wx.showToast({ |
|||
title: '当前为非WI-FI环境，请注意流量消耗', |
|||
icon: 'none', |
|||
duration: 3000 |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
videoitemtoggle (e) { |
|||
this.data.noticelist[e.currentTarget.dataset.index].showTitle = e.detail.show |
|||
this.setData({ |
|||
noticelist: this.data.noticelist |
|||
}) |
|||
}, |
|||
/** |
|||
* module 跳转模块页面 |
|||
*/ |
|||
navigateToType (e) { |
|||
const info = e.currentTarget.dataset.info |
|||
wx.navigateTo({ |
|||
url: `./moduleList?pid=${info.id}&bannerflag=${info.bannerFlag}&categorycode=${info.categoryCode}&modulestyle=${info.moduleStyle}&categoryname=${info.categoryName}` |
|||
}) |
|||
}, |
|||
|
|||
//notice 跳转详情页面
|
|||
toDetail(e){ |
|||
const info = e.currentTarget.dataset |
|||
wx.navigateTo({ |
|||
url: `../noticeDetail/noticeDetail?id=${info.id}&title=${this.data.moduleInfo.categoryname}` |
|||
}) |
|||
}, |
|||
|
|||
//type-8 tab切换回调函数
|
|||
newsCategoryCallback (e) { |
|||
// if (e.detail.newsCategoryId === 'all') {
|
|||
// this.data.newsCategoryId = ''
|
|||
// } else {
|
|||
// this.data.newsCategoryId = e.detail.newsCategoryId
|
|||
// }
|
|||
this.setData({ |
|||
pageIndex: 1, |
|||
noticelist: [], |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false, |
|||
preloadVisible: true, |
|||
nodata: false |
|||
}) |
|||
this.getNoticelist(e.detail.newsCategoryId) |
|||
} |
|||
}) |
|||
@ -0,0 +1,8 @@ |
|||
{ |
|||
"navigationBarTitleText": "", |
|||
"usingComponents": { |
|||
"load-more": "../../../../components/loadMore/loadMore", |
|||
"no-data":"../../../../components/nodata/nodata", |
|||
"news-list": "./components/newsList/newsList" |
|||
} |
|||
} |
|||
@ -0,0 +1,128 @@ |
|||
<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="{{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> |
|||
|
|||
<!-- 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> |
|||
</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> |
|||
<!-- 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> |
|||
<!-- 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> |
|||
</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> |
|||
|
|||
<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> |
|||
|
|||
@ -0,0 +1,467 @@ |
|||
page { |
|||
background: #f7f7f7; |
|||
height: auto; |
|||
} |
|||
|
|||
/* 列表 */ |
|||
/* .dept-list { |
|||
display: grid; |
|||
grid-template-columns: 1fr; |
|||
place-items: center; |
|||
gap: 24rpx 0; |
|||
width: 690rpx; |
|||
padding: 20rpx 0; |
|||
margin: 0rpx auto; |
|||
position: relative; |
|||
z-index: 999; |
|||
} */ |
|||
|
|||
|
|||
/* 轮播图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 .list-li:first-child { |
|||
margin-top: 27rpx; |
|||
} |
|||
|
|||
.type-1 .list-li { |
|||
width: 100%; |
|||
background: #fff; |
|||
padding: 38rpx 30rpx; |
|||
margin-top: 16rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.type-1 .list-li .item-name { |
|||
width: 100%; |
|||
font-size: 34rpx; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
line-height: 52rpx; |
|||
} |
|||
|
|||
.type-1 .list-li .item-info { |
|||
width: calc(100% - 60rpx); |
|||
height: 28rpx; |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.type-1 .list-li .item-info image { |
|||
width: 28rpx; |
|||
height: 28rpx; |
|||
} |
|||
|
|||
.type-1 .list-li .item-info .street { |
|||
margin-left: 11rpx; |
|||
font-size: 24rpx; |
|||
font-weight: 500; |
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
|
|||
.type-1 .list-li .item-info .time { |
|||
margin-left: 22rpx; |
|||
font-size: 24rpx; |
|||
font-weight: 500; |
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
/* type-1 end */ |
|||
|
|||
/* type-2 start */ |
|||
.type-2 { |
|||
width: 690rpx; |
|||
margin: 40rpx auto; |
|||
} |
|||
.type-2 .list-item { |
|||
width: 100%; |
|||
height: 160rpx; |
|||
background: #fff; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border-radius: 14rpx; |
|||
margin-top: 12rpx; |
|||
} |
|||
|
|||
.type-2 .list-item .list-name { |
|||
font-size:32rpx; |
|||
font-family:PingFang SC; |
|||
font-weight:bold; |
|||
color:rgba(51,51,51,1); |
|||
margin-left: 42rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.type-2 .list-item .list-arrow { |
|||
width: 16rpx; |
|||
height: 26rpx; |
|||
margin-right: 42rpx; |
|||
} |
|||
.type-2 .list-item .list-name .list-icon { |
|||
width: 106rpx; |
|||
height: 106rpx; |
|||
margin-right: 14rpx; |
|||
} |
|||
/* type-2 end */ |
|||
|
|||
/* type-3 start */ |
|||
|
|||
.type-3 .list-item { |
|||
width: 100%; |
|||
padding: 40rpx 28rpx; |
|||
margin-top: 16rpx; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.type-3 .list-item .name { |
|||
/* width: calc(100% - 56rpx); */ |
|||
font-size: 34rpx; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
line-height: 50rpx; |
|||
} |
|||
|
|||
.type-3 .list-item .info { |
|||
/* margin-top: 15rpx; |
|||
width: calc(100% - 56rpx); |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
color: rgba(153, 153, 153, 1); |
|||
line-height: 44rpx; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
overflow: hidden; */ |
|||
|
|||
margin-top: 15rpx; |
|||
/* width: calc(100% - 56rpx); */ |
|||
/* height: 75rpx; */ |
|||
font-size: 28rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
|
|||
.type-3 .list-item .info rich-text { |
|||
/* width:100%; */ |
|||
line-height: 44rpx; |
|||
display: -webkit-box; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-wrap: break-word; |
|||
white-space: normal !important; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.type-3 .list-item .info text { |
|||
line-height: 46rpx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-wrap: break-word; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
font-size: 30rpx; |
|||
} |
|||
/* type-3 end */ |
|||
|
|||
/* type-5 start */ |
|||
|
|||
.type-5 .list-all { |
|||
width: 100%; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.type-5 .list-all .list-item { |
|||
border-bottom: 1rpx solid #eaeaea; |
|||
margin-top: 16rpx; |
|||
padding: 40rpx 18rpx 30rpx 16rpx; |
|||
display: flex; |
|||
} |
|||
|
|||
.type-5 .list-all .list-item:first-child { |
|||
border-top: 1rpx solid #eaeaea; |
|||
} |
|||
|
|||
.type-5 .list-all .list-item:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.type-5 .list-all .list-item .item-info { |
|||
width: calc(100% - 220rpx); |
|||
height: 146rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.type-5 .list-all .list-item .item-info .item-info-name { |
|||
width: calc(100% - 47rpx); |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
color: rgba(63, 63, 63, 1); |
|||
line-height: 50rpx; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
overflow: hidden; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.type-5 .list-all .list-item .item-info .item-info-time { |
|||
width: calc(100% - 47rpx); |
|||
height: 22rpx; |
|||
position: absolute; |
|||
bottom: 5rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
left: 22rpx; |
|||
} |
|||
|
|||
.type-5 .list-all .list-item .item-info .item-info-time text { |
|||
font-size: 22rpx; |
|||
font-weight: 500; |
|||
color: rgba(170, 170, 170, 1); |
|||
line-height: 22rpx; |
|||
} |
|||
|
|||
.type-5 .list-all .list-item image { |
|||
width: 220rpx; |
|||
height: 146rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
|
|||
.type-5 .list-all .list-item .label { |
|||
position: absolute; |
|||
z-index: 999; |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
right: 45rpx; |
|||
} |
|||
|
|||
.type-5 .list-all .list-item .label image { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
/* type-5 end */ |
|||
|
|||
/* type-6 start */ |
|||
.type-6 .box { |
|||
background: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
border-top: 1rpx solid #F4F4F4; |
|||
padding: 50rpx 30rpx; |
|||
} |
|||
|
|||
.type-6 .box .item:first-child { |
|||
margin-top: 0rpx; |
|||
} |
|||
|
|||
.type-6 .box .item:nth-child(2) { |
|||
margin-top: 0rpx; |
|||
} |
|||
|
|||
.type-6 .box .item { |
|||
margin-top: 40rpx; |
|||
width: calc(50% - 10rpx); |
|||
height: 257rpx; |
|||
} |
|||
|
|||
.type-6 .box .item image { |
|||
width: 100%; |
|||
height: 206rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
|
|||
.type-6 .box .item .name { |
|||
width: 100%; |
|||
height: 51rpx; |
|||
line-height: 60.5rpx; |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: rgba(36, 36, 36, 1); |
|||
overflow: hidden; |
|||
text-overflow:ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
/* type-6 end */ |
|||
|
|||
/* type-7 start */ |
|||
.type-7 .video-list { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
background-color: #fff; |
|||
} |
|||
.type-7 .video-list .video-item { |
|||
height: 310rpx; |
|||
width: 690rpx; |
|||
border-radius: 16rpx; |
|||
margin: 30rpx; |
|||
position: relative; |
|||
} |
|||
.type-7 .video-list .video-line { |
|||
width: 702rpx; |
|||
height: 1px; |
|||
background: rgba(234, 234, 234, 0.95); |
|||
} |
|||
.type-7 .video-list .video-item video{ |
|||
height: 100%; |
|||
width: 100%; |
|||
border-radius: 16rpx; |
|||
} |
|||
.type-7 .video-title { |
|||
width: 650rpx; |
|||
border-radius: 16rpx; |
|||
} |
|||
.type-7 .video-list .video-line:last-child { |
|||
display: none; |
|||
} |
|||
@ -1,5 +1,6 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"no-data": "../../../../components/nodata/nodata", |
|||
"parser": "../../../../components/parser/parser" |
|||
}, |
|||
"navigationBarTitleText": "" |
|||
|
|||
Loading…
Reference in new issue