ZhaoTongYao
4 years ago
14 changed files with 373 additions and 18 deletions
@ -0,0 +1,48 @@ |
|||||
|
const api = require("../../utils/api") |
||||
|
import util from "../../../../utils/util" |
||||
|
Page({ |
||||
|
data: { |
||||
|
activeDetail: {}, |
||||
|
activeDetailContent: '', |
||||
|
id: '', |
||||
|
actStartTime: '', |
||||
|
actEndTime: '', |
||||
|
imageList: [], // 精彩瞬间
|
||||
|
}, |
||||
|
onLoad: function (options) { |
||||
|
if (options.id) { |
||||
|
this.setData({ |
||||
|
id: options.id |
||||
|
}) |
||||
|
this.getVolunteerUnionActDetail(options.id) |
||||
|
} |
||||
|
}, |
||||
|
// 获取
|
||||
|
getVolunteerUnionActDetail (id) { |
||||
|
api.getVolunteerUnionActDetail(id).then(res => { |
||||
|
let startTime = res.data.actStartTime.replace(/-/g, '.') |
||||
|
let endTime = res.data.actEndTime.replace(/-/g, '.') |
||||
|
// let arr = res.data.images.sort(util.compare('imgSort'))
|
||||
|
// console.log(arr)
|
||||
|
let imageList = [] |
||||
|
res.data.images.forEach(item => { |
||||
|
imageList.push(item.url) |
||||
|
}) |
||||
|
this.setData({ |
||||
|
activeDetail: res.data, |
||||
|
actStartTime: startTime.substring(0, startTime.length - 3), |
||||
|
actEndTime: endTime.substring(0, endTime.length - 3), |
||||
|
activeDetailContent: util.formatRichText(res.data.content), |
||||
|
imageList |
||||
|
}) |
||||
|
}).catch(err => { |
||||
|
console.log(err) |
||||
|
}) |
||||
|
}, |
||||
|
preViewImage (e) { |
||||
|
wx.previewImage({ |
||||
|
urls: this.data.imageList, |
||||
|
current: e.currentTarget.dataset.src |
||||
|
}) |
||||
|
}, |
||||
|
}) |
||||
@ -0,0 +1,6 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "活动详情", |
||||
|
"usingComponents": { |
||||
|
"parser": "../../../../components/parser/parser" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,14 @@ |
|||||
|
<view class="alliance-act-detail"> |
||||
|
<view class="alliance-act"> |
||||
|
<view class="title">{{activeDetail.title}}</view> |
||||
|
<view class="time">活动时间: {{actStartTime}}-{{actEndTime}}</view> |
||||
|
<view class="intro">活动简介: </view> |
||||
|
<parser html="{{activeDetailContent}}"></parser> |
||||
|
</view> |
||||
|
<block wx:if="{{imageList.length > 0}}"> |
||||
|
<view class="wonderful-title">精彩瞬间</view> |
||||
|
<view class="wonderful-list"> |
||||
|
<image class="wonderful-image" src="{{item}}" wx:for="{{imageList}}" bindtap="preViewImage" data-src="{{item}}" /> |
||||
|
</view> |
||||
|
</block> |
||||
|
</view> |
||||
@ -0,0 +1,42 @@ |
|||||
|
page { |
||||
|
background-color: #f7f7f7; |
||||
|
} |
||||
|
.alliance-act-detail { |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
background: #fff; |
||||
|
padding: 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.alliance-act { |
||||
|
width: 100%; |
||||
|
margin-bottom: 100rpx; |
||||
|
} |
||||
|
.alliance-act .title{ |
||||
|
font-size: 40rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.alliance-act .time{ |
||||
|
font-size: 32rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
.alliance-act .intro{ |
||||
|
font-size: 32rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
.wonderful-title { |
||||
|
font-size: 32rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
.wonderful-list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
.wonderful-list .wonderful-image { |
||||
|
width: 320rpx; |
||||
|
height: 240rpx; |
||||
|
margin: 0 15rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
@ -1,6 +1,7 @@ |
|||||
{ |
{ |
||||
"navigationBarTitleText": "详情", |
"navigationBarTitleText": "详情", |
||||
"usingComponents": { |
"usingComponents": { |
||||
|
"load-more": "/components/loadMore/loadMore", |
||||
"parser": "../../../../components/parser/parser" |
"parser": "../../../../components/parser/parser" |
||||
} |
} |
||||
} |
} |
||||
@ -1,3 +1,40 @@ |
|||||
<view class="alliance-detail"> |
<!-- <view class="alliance-detail"> |
||||
<parser html="{{noticeObjContent}}"></parser> |
<parser html="{{noticeObjContent}}"></parser> |
||||
|
</view> --> |
||||
|
<view class="alliance-detail-card"> |
||||
|
<view class="alliance-info"> |
||||
|
<view class="info-head-img"><image src="{{noticeObj.headPic}}" /></view> |
||||
|
<view class="info-content"> |
||||
|
<view class="unionName">{{noticeObj.unionName}}</view> |
||||
|
<view class="contacts">{{noticeObj.contacts}}</view> |
||||
|
<view class="phone">{{noticeObj.phone}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="alliance-introduce {{ isShow ? 'intro-show' : 'intro-hide' }}"> |
||||
|
<view class="title">联盟简介</view> |
||||
|
<parser html="{{noticeObjContent}}"></parser> |
||||
|
<view class="bottom" bindtap="isShowOrHide" wx:if="{{isShowBtn}}">{{isShow ? '收起' : '展开'}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="alliance-detail-card" wx:if="{{activeList.length > 0}}"> |
||||
|
<view class="active-list"> |
||||
|
<view class="title">共建活动</view> |
||||
|
<block wx:for="{{activeList}}" wx:key="index"> |
||||
|
<view class="active-item" bindtap="navigateToActDetail" data-id="{{item.id}}"> |
||||
|
<view class="active-img"><image src="{{item.headPic}}" /></view> |
||||
|
<view class="active-content"> |
||||
|
<view class="active-contacts">{{item.title}}</view> |
||||
|
<view class="time-box"> |
||||
|
<view class="time-label">时间: </view> |
||||
|
<view class="time-content"> |
||||
|
<view class="active-time">{{item.actStartTime}} 至</view> |
||||
|
<view class="active-time">{{item.actEndTime}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="active-line" wx:if="{{index < activeList.length - 1}}"></view> |
||||
|
</block> |
||||
|
</view> |
||||
</view> |
</view> |
||||
|
<load-more loadMoreType="{{loadMoreType}}" loadMoreVisible="{{loadMoreVisible}}"></load-more> |
||||
|
|||||
@ -1,4 +1,105 @@ |
|||||
|
page { |
||||
|
background-color: #f7f7f7; |
||||
|
} |
||||
.alliance-detail { |
.alliance-detail { |
||||
padding: 20rpx; |
padding: 20rpx; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
} |
} |
||||
|
.alliance-detail-card { |
||||
|
width: 690rpx; |
||||
|
overflow: hidden; |
||||
|
margin: 20rpx auto; |
||||
|
background: #fff; |
||||
|
box-shadow: 0rpx 5rpx 32rpx 0rpx hsla(0,0%,78%,.56); |
||||
|
border-radius: 14rpx; |
||||
|
padding: 20rpx 20rpx 0 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.alliance-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
margin-bottom: 40rpx; |
||||
|
} |
||||
|
.alliance-info .info-head-img { |
||||
|
width: 180rpx; |
||||
|
height: 180rpx; |
||||
|
} |
||||
|
.alliance-info .info-head-img image{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.alliance-info .info-content { |
||||
|
width: 400rpx; |
||||
|
} |
||||
|
.alliance-introduce { |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
padding-bottom: 84rpx; |
||||
|
} |
||||
|
.intro-show { |
||||
|
height: auto; |
||||
|
padding-bottom: 80rpx; |
||||
|
} |
||||
|
.intro-hide { |
||||
|
max-height: 350rpx; |
||||
|
} |
||||
|
.alliance-introduce .title{ |
||||
|
font-size: 34rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.alliance-introduce .bottom { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
background: rgba(255, 255, 255, 1); |
||||
|
color: royalblue; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
padding: 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.alliance-detail-card .active-list { |
||||
|
|
||||
|
} |
||||
|
.active-list .title { |
||||
|
font-size: 34rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.active-list .active-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin: 20rpx; |
||||
|
} |
||||
|
.active-list .active-item .active-img { |
||||
|
width: 150rpx; |
||||
|
height: 120rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
.active-img image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.active-list .active-item .active-content { |
||||
|
|
||||
|
} |
||||
|
.active-list .active-item .active-content .active-contacts { |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
.time-box { |
||||
|
display: flex; |
||||
|
} |
||||
|
.time-box .time-label { |
||||
|
font-size: 24rpx; |
||||
|
color: silver; |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
.active-list .active-item .active-content .active-time { |
||||
|
font-size: 24rpx; |
||||
|
color: silver; |
||||
|
} |
||||
|
.active-list .active-line { |
||||
|
width: 95%; |
||||
|
height: 1px; |
||||
|
background: #eeeeee; |
||||
|
margin: 20rpx auto; |
||||
|
} |
||||
Loading…
Reference in new issue