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": "详情", |
|||
"usingComponents": { |
|||
"load-more": "/components/loadMore/loadMore", |
|||
"parser": "../../../../components/parser/parser" |
|||
} |
|||
} |
|||
@ -1,3 +1,40 @@ |
|||
<view class="alliance-detail"> |
|||
<!-- <view class="alliance-detail"> |
|||
<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> |
|||
<load-more loadMoreType="{{loadMoreType}}" loadMoreVisible="{{loadMoreVisible}}"></load-more> |
|||
|
|||
@ -1,4 +1,105 @@ |
|||
page { |
|||
background-color: #f7f7f7; |
|||
} |
|||
.alliance-detail { |
|||
padding: 20rpx; |
|||
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