lihenian
6 years ago
126 changed files with 7601 additions and 199 deletions
@ -0,0 +1,74 @@ |
|||
var api = require('../../utils/activity.js') |
|||
|
|||
const app = getApp() |
|||
Component({ |
|||
properties: { |
|||
state: Number |
|||
}, |
|||
data: { |
|||
activityList: [], |
|||
nomore: false |
|||
}, |
|||
attached: function() {}, |
|||
ready: function() {}, |
|||
pageLifetimes: { |
|||
show: function() {}, |
|||
}, |
|||
methods: { |
|||
getActivityList(params) { |
|||
let that = this |
|||
if (params.qkdat == true) { |
|||
console.log('清空') |
|||
that.setData({ |
|||
activityList: [], |
|||
nomore: false |
|||
}) |
|||
} |
|||
|
|||
api.getActivityList(params).then((res) => { |
|||
console.log(res.data) |
|||
that.setData({ |
|||
activityList: that.data.activityList.concat(res.data) |
|||
}) |
|||
console.log(res.data.length) |
|||
//数据访问成功
|
|||
var myEventDetail = { |
|||
listLength: res.data.length |
|||
} |
|||
that.triggerEvent('toActDetail', myEventDetail) |
|||
if (res.data.length == 0) { |
|||
that.setData({ |
|||
nomore: true |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
toActDetail(e) { |
|||
const id = e.currentTarget.dataset.id |
|||
const actcurrentstate = e.currentTarget.dataset.actcurrentstate |
|||
const signupflag = e.currentTarget.dataset.signupflag |
|||
this.triggerEvent('toActDetail', { |
|||
actId: id |
|||
}) |
|||
wx.navigateTo({ |
|||
url: `/subpages/heart/pages/heartDetail/heartDetail?id=${id}&actcurrentstate=${actcurrentstate}&signupflag=${signupflag}` |
|||
}) |
|||
}, |
|||
updateActivityList(params) { |
|||
api.getActivityList(params).then(res => { |
|||
console.log('详情回列表刷新数据', res) |
|||
const index = this.data.activityList.findIndex(item => item.id === res.data[0].id) |
|||
if (index > -1) { |
|||
this.data.activityList.splice(index, 1, res.data[0]) |
|||
} else { |
|||
this.data.activityList.splice(index, 1) |
|||
} |
|||
this.setData({ |
|||
activityList: this.data.activityList |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,38 @@ |
|||
<view class="layout" wx:for="{{activityList}}"> |
|||
<view data-id="{{item.id}}" |
|||
data-actCurrentState="{{item.actCurrentState}}" |
|||
data-signupFlag="{{item.signupFlag}}" |
|||
bindtap="toActDetail"> |
|||
<view class="img"> |
|||
<image class="imgsrc" src="{{item.headPic}}" mode="aspectFill"/> |
|||
<view class="user-state" wx:if="{{item.actCurrentState=='0'}}">报名中</view> |
|||
<view class="user-state" wx:if="{{item.actCurrentState=='1'}}">已报满</view> |
|||
<view class="user-state" wx:if="{{item.actCurrentState=='2'}}">未开始</view> |
|||
<view class="user-state" wx:if="{{item.actCurrentState=='3'}}">进行中</view> |
|||
<view class="user-state" wx:if="{{item.actCurrentState=='4'}}">已结束</view> |
|||
</view> |
|||
<view class="infos"> |
|||
<view class="infos_title">{{item.title}}</view> |
|||
<view class="infos_times"> |
|||
<view> |
|||
<image class="imgsize" src="/images/when.png" /> |
|||
活动时间：{{item.actStartTime}}至 |
|||
</view> |
|||
<view class="endtime">{{item.actEndTime}}</view> |
|||
<view> |
|||
<image class="imgsize" src="/images/where.png" /> |
|||
<text>活动地点：{{item.actAddress}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="infos_nums"> |
|||
|
|||
<span wx:if="{{item.actQuotaCategory == 0}}" class="total">不限名额</span> |
|||
<span wx:else class="total">活动名额 {{item.actQuota}}人</span> |
|||
<span class="signed">已报名 {{item.signupNum}}人</span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<image class="signed-logo" wx:if="{{item.signupFlag=='1'}}" src="/images/signed.png" /> |
|||
</view> |
|||
<!-- <view hidden="{{nomore}}" class="loadmore">上滑加载更多</view> |
|||
<view hidden="{{!nomore}}" class="loadmore">没有更多了~</view> --> |
|||
@ -0,0 +1,160 @@ |
|||
.layout { |
|||
display: table; |
|||
width: calc(100% - 40rpx); |
|||
height: 276rpx; |
|||
border-radius: 10rpx; |
|||
background: #fff; |
|||
margin: 20rpx 20rpx 0rpx 20rpx; |
|||
/* flex-direction: column; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; */ |
|||
} |
|||
|
|||
.img { |
|||
display: table-cell; |
|||
width: 220rpx; |
|||
padding: 20rpx 20rpx 10rpx 20rpx; |
|||
height: 246rpx; |
|||
} |
|||
|
|||
.img .imgsrc { |
|||
width: 220rpx; |
|||
height: 246rpx; |
|||
background: #f1f1f1; |
|||
border-radius: 16rpx; |
|||
position: absolute; |
|||
} |
|||
|
|||
.left { |
|||
display: table-cell; |
|||
padding: 20rpx 20rpx 10rpx 20rpx; |
|||
width: 220rpx; |
|||
height: 246rpx; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
margin-right: 20rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.activity-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.user-state { |
|||
position: absolute; |
|||
z-index: 999; |
|||
font-size: 24rpx; |
|||
color: #fff; |
|||
width: 92rpx; |
|||
height: 36rpx; |
|||
line-height: 37rpx; |
|||
text-align: center; |
|||
border-radius: 16rpx 0; |
|||
background: #d1d1d1; |
|||
} |
|||
|
|||
.signed-logo { |
|||
width: 174rpx; |
|||
height: 118rpx; |
|||
right: 20rpx; |
|||
margin: -262rpx 20rpx 0rpx 0rpx; |
|||
/* object-fit: cover; *//* right: 0; |
|||
top: 20rpx; */ |
|||
position: absolute; |
|||
z-index: 9999; |
|||
} |
|||
|
|||
.infos { |
|||
display: table-cell; |
|||
padding: 20rpx 20rpx 10rpx 0rpx; |
|||
height: 246rpx; |
|||
vertical-align: top; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.infos .infos_title { |
|||
font-size: 36rpx; |
|||
line-height: 50rpx; |
|||
height: 100rpx; |
|||
overflow: hidden; |
|||
color: #333; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
} |
|||
|
|||
.infos .infos_times { |
|||
font-size: 24rpx; |
|||
height: 100rpx; |
|||
overflow: hidden; |
|||
color: #a8a8a8; |
|||
} |
|||
|
|||
.infos .infos_times view { |
|||
height: 28rpx; |
|||
padding-top: 4rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.infos .infos_times view text { |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 1; |
|||
} |
|||
|
|||
.endtime { |
|||
text-indent: 145rpx; |
|||
} |
|||
|
|||
.imgsize { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
} |
|||
|
|||
.infos .infos_nums { |
|||
font-size: 26rpx; |
|||
height: 36rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.infos .infos_nums { |
|||
height: 40rpx; |
|||
width: 100%; |
|||
display: table; |
|||
} |
|||
|
|||
.loadmore { |
|||
width: 100%; |
|||
text-align: center; |
|||
height: 50px; |
|||
line-height: 50px; |
|||
background: #f6f8f8; |
|||
font-size: 12px; |
|||
color: #999; |
|||
} |
|||
|
|||
.total, .signed { |
|||
display: block; |
|||
font-size: 26rpx; |
|||
padding: 0px 20rpx 0px 20rpx; |
|||
height: 40rpx; |
|||
line-height: 40rpx; |
|||
border-radius: 20rpx; |
|||
margin: 10rpx 20rpx 0rpx 0rpx; |
|||
float: left; |
|||
} |
|||
|
|||
.total { |
|||
background: #d9d9d9; |
|||
color: #666; |
|||
} |
|||
|
|||
.signed { |
|||
background: #ffeaea; |
|||
color: #fc5555; |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
Component({ |
|||
properties: { |
|||
isShow: { |
|||
type: Boolean |
|||
} |
|||
}, |
|||
data: {}, |
|||
methods: {} |
|||
}); |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
<!--components/nodata/nodata.wxml--> |
|||
<view class="box" wx:if="{{isShow}}"> |
|||
<image src="../../images/nodata.png" class="image"/> |
|||
<text class="text">暂无数据~</text> |
|||
</view> |
|||
@ -0,0 +1,19 @@ |
|||
/* components/nodata/nodata.wxss */ |
|||
.box{ |
|||
width: 100%; |
|||
height: auto; |
|||
box-sizing: border-box; |
|||
text-align: center; |
|||
margin-top: 100rpx; |
|||
} |
|||
.image{ |
|||
width: 450rpx; |
|||
height: 240rpx; |
|||
} |
|||
.text{ |
|||
width: 100%; |
|||
height: auto; |
|||
font-size: 28rpx; |
|||
color: #BCBCBC; |
|||
display: block; |
|||
} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
<view class="wux-class {{ classes.wrap }}"> |
|||
<view class="{{ classes.files }}"> |
|||
<block wx:if="{{ listType === 'picture-card' && showUploadList && uploadFileList.length }}"> |
|||
<block wx:for="{{ uploadFileList }}" wx:for-item="file" wx:key="uid"> |
|||
<view class="{{ classes.file }} {{ file.status ? prefixCls + '__file--' + file.status : '' }}" data-file="{{ file }}" data-index="{{ index }}" bindtap="onPreview"> |
|||
<video id="{{ file.uid }}" class="{{ classes.thumb }}" src="{{ file.url }}" wx:if="{{ isVideo }}" /> |
|||
<image class="{{ classes.thumb }}" src="{{ file.url }}" wx:else /> |
|||
<view class="{{ classes.remove }}" data-file="{{ file }}" data-index="{{ index }}" catchtap="onRemove" wx:if="{{ showRemoveIcon }}"></view> |
|||
</view> |
|||
</block> |
|||
</block> |
|||
<view class="{{ classes.select }}" bindtap="onSelect" wx:if="{{ uploadMax === -1 || uploadMax > uploadFileList.length }}"> |
|||
<view class="{{ classes.button }}"> |
|||
<slot></slot> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1 @@ |
|||
.wux-upload{position:relative;display:block}.wux-upload:after,.wux-upload:before{display:table;content:" "}.wux-upload:after{clear:both}.wux-upload--disabled{opacity:.3}.wux-upload--picture-card .wux-upload__select{border:2rpx dashed #d9d9d9;width:156rpx;height:156rpx;border-radius:8rpx;margin:0 16rpx 16rpx 0;background-color:#fafafa;transition:border-color .3s ease;box-sizing:border-box;float:left}.wux-upload--picture-card .wux-upload__button{width:100%;height:100%;display:-ms-flexbox;display:flex;text-align:center;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;vertical-align:middle;padding:8rpx;box-sizing:border-box}.wux-upload--picture-card .wux-upload__button image{width:100%;height:100%;display:inline-block;overflow:hidden}.wux-upload--picture-card .wux-upload__files{position:relative;display:block;float:left}.wux-upload--picture-card .wux-upload__files:after,.wux-upload--picture-card .wux-upload__files:before{display:table;content:" "}.wux-upload--picture-card .wux-upload__files:after{clear:both}.wux-upload--picture-card .wux-upload__file{float:left;width:156rpx;height:156rpx;margin:0 16rpx 16rpx 0;padding:8rpx;border-radius:8rpx;border:2rpx solid #d9d9d9;position:relative;box-sizing:border-box}.wux-upload--picture-card .wux-upload__file--uploading{border-style:dashed}.wux-upload--picture-card .wux-upload__file--error{border-color:#f5222d}.wux-upload--picture-card .wux-upload__thumb{width:100%;height:100%;display:inline-block;overflow:hidden}.wux-upload--picture-card .wux-upload__remove{width:30rpx;height:30rpx;position:absolute;right:12rpx;top:12rpx;text-align:right;vertical-align:top;z-index:2;background-size:30rpx auto;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill-opacity='.4' fill='%23404040' cx='8' cy='8' r='8'/%3E%3Cpath d='M11.898 4.101a.345.345 0 0 0-.488 0L8 7.511l-3.411-3.41a.345.345 0 0 0-.488.488l3.411 3.41-3.41 3.412a.345.345 0 0 0 .488.488L8 8.487l3.411 3.411a.345.345 0 0 0 .488-.488L8.488 8l3.41-3.412a.344.344 0 0 0 0-.487z' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E")} |
|||
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 746 B |
@ -0,0 +1,209 @@ |
|||
var api = require('../../utils/activity.js') |
|||
import { |
|||
getTimestamp |
|||
} from '../../utils/common' |
|||
Page({ |
|||
data: { |
|||
index: 0, |
|||
zml: false, |
|||
qkdat: false, |
|||
loadMoreVisible: false, //false
|
|||
loadMoreType: 'none', //loading none
|
|||
indexPage: 1, |
|||
indexPage2: 1, |
|||
pageSize: 10, |
|||
tabs: [{ |
|||
key: 'tab1', |
|||
title: 'Tab 1', |
|||
}, |
|||
{ |
|||
key: 'tab2', |
|||
title: 'Tab 2', |
|||
}, |
|||
{ |
|||
key: 'tab3', |
|||
title: 'Tab 3', |
|||
}, |
|||
], |
|||
key: '', |
|||
actId: '', |
|||
banner: [], |
|||
indicatorDots: false, //指示点
|
|||
autoplay: false, //true,//自动播放
|
|||
circular: false, //衔接滑动
|
|||
interval: 2000, //自动播放间隔时长(ms)
|
|||
duration: 500, //幻灯片切换时长(ms)
|
|||
currentSwiper: 0 |
|||
}, |
|||
onLoad: function(options) { |
|||
this.getBannerList() |
|||
const temp = Number(options.state) + 1 |
|||
this.setData({ |
|||
key: 'tab' + temp, |
|||
index: 0 //options.state
|
|||
}) |
|||
let parms = { |
|||
pageIndex: this.data.indexPage, |
|||
pageSize: this.data.pageSize, |
|||
timestamp: getTimestamp(), |
|||
actType: 0, |
|||
qkdat: true |
|||
} |
|||
this.selectComponent("#state-0").getActivityList(parms) |
|||
}, |
|||
onShow() { |
|||
if (this.data.key === 'tab3') { |
|||
this.setData({ |
|||
key: 'tab1', |
|||
zml: false, |
|||
qkdat: true |
|||
}) |
|||
let parms = { |
|||
pageIndex: 1, |
|||
pageSize: this.data.pageSize, |
|||
qkdat: this.data.qkdat, |
|||
timestamp: getTimestamp(), |
|||
actType: 0 |
|||
} |
|||
this.selectComponent("#state-0").getActivityList(parms) |
|||
} |
|||
if (this.data.actId) { |
|||
this.updateActivityList() |
|||
} |
|||
}, |
|||
onPullDownRefresh: function() { |
|||
this.getBannerList() |
|||
}, |
|||
getBannerList: function() { |
|||
let that = this |
|||
api.bannerList().then(function(res) { |
|||
that.setData({ |
|||
banner: res.data |
|||
}) |
|||
wx.stopPullDownRefresh(); |
|||
}) |
|||
}, |
|||
onReachBottom: function() { |
|||
if (this.data.key == 'tab1') { |
|||
this.setData({ |
|||
index: 0 |
|||
}) |
|||
} |
|||
if (this.data.index == 0) { |
|||
this.setData({ |
|||
indexPage: this.data.indexPage + 1 |
|||
}) |
|||
let parms = { |
|||
pageIndex: this.data.indexPage, |
|||
pageSize: this.data.pageSize, |
|||
timestamp: getTimestamp(), |
|||
actType: 0 |
|||
} |
|||
this.selectComponent("#state-" + this.data.index).getActivityList(parms) |
|||
} else { |
|||
this.setData({ |
|||
indexPage2: this.data.indexPage2 + 1 |
|||
}) |
|||
let parms = { |
|||
pageIndex: this.data.indexPage2, |
|||
pageSize: this.data.pageSize, |
|||
timestamp: getTimestamp(), |
|||
actType: 1 |
|||
} |
|||
this.selectComponent("#state-" + this.data.index).getActivityList(parms) |
|||
} |
|||
}, |
|||
changeProperty: function(e) { |
|||
var propertyName = e.currentTarget.dataset.propertyName |
|||
var newData = {} |
|||
newData[propertyName] = e.detail.value |
|||
this.setData(newData) |
|||
}, |
|||
swiperChange: function(e) { |
|||
this.setData({ |
|||
currentSwiper: e.detail.current |
|||
}) |
|||
}, |
|||
onTabsChange(e) { |
|||
const { |
|||
key |
|||
} = e.detail |
|||
const index = this.data.tabs.map((n) => n.key).indexOf(key) |
|||
if (index == 0) { |
|||
this.setData({ |
|||
zml: false |
|||
}) |
|||
} else { |
|||
this.setData({ |
|||
zml: true |
|||
}) |
|||
} |
|||
this.setData({ |
|||
key, |
|||
index, |
|||
indexPage: 1, |
|||
indexPage2: 1 |
|||
}) |
|||
if (key == 'tab3') { |
|||
wx.navigateTo({ |
|||
url: '/subpages/heart/pages/signed/signed' |
|||
}) |
|||
} else { |
|||
let parms = { |
|||
pageIndex: this.data.indexPage, |
|||
pageSize: this.data.pageSize, |
|||
timestamp: getTimestamp(), |
|||
actType: this.data.index, |
|||
qkdat: true |
|||
} |
|||
this.selectComponent("#state-" + this.data.index).getActivityList(parms) |
|||
} |
|||
}, |
|||
|
|||
toActDetail(e) { |
|||
const id = e.currentTarget.dataset.id |
|||
wx.navigateTo({ |
|||
url: `/subpages/heart/pages/heartDetail/heartDetail?id=${id}` |
|||
}) |
|||
}, |
|||
|
|||
toActDetailDown(e) { |
|||
if (e.detail.listLength !== this.data.pageSize) { |
|||
this.setData({ |
|||
loadMoreVisible: true, |
|||
loadMoreType: 'none', |
|||
}) |
|||
} |
|||
this.setData({ |
|||
actId: e.detail.actId, |
|||
listLength: e.detail.listLength |
|||
}) |
|||
}, |
|||
toLeaderboard() { |
|||
wx.navigateTo({ |
|||
url: `/subpages/heart/pages/leaderboard/leaderboard` |
|||
}) |
|||
}, |
|||
updateActivityList() { |
|||
if ((this.data.key === 'tab1')) { |
|||
this.setData({ |
|||
index: 0 |
|||
}) |
|||
} else if (this.data.key === 'tab2') { |
|||
this.setData({ |
|||
index: 1 |
|||
}) |
|||
} |
|||
let params = { |
|||
pageIndex: 1, |
|||
pageSize: 10, |
|||
timestamp: getTimestamp(), |
|||
actType: this.data.index, |
|||
actId: this.data.actId |
|||
} |
|||
this.selectComponent("#state-" + this.data.index).updateActivityList(params) |
|||
this.setData({ |
|||
actId: '' |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,12 @@ |
|||
{ |
|||
"navigationBarTitleText": "爱心互助", |
|||
"usingComponents": { |
|||
"wux-tabs": "/dist/tabs/index", |
|||
"wux-tab": "/dist/tab/index", |
|||
"activity": "../../components/activity/activity", |
|||
"load-more": "../../components/loadMore/loadMore" |
|||
}, |
|||
"enablePullDownRefresh": true, |
|||
"backgroundColor": "#f8f8f8", |
|||
"backgroundTextStyle": "dark" |
|||
} |
|||
@ -0,0 +1,65 @@ |
|||
<view class="container"> |
|||
<view class="page-body"> |
|||
<view class="page-section page-section-spacing swiper"> |
|||
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange"> |
|||
<block wx:if="{{banner.length > 0}}"> |
|||
<block wx:for="{{banner}}" wx:key="*this"> |
|||
<swiper-item> |
|||
<view bindtap="toActDetail" class="swiper-item" data-id="{{item.actId}}"> |
|||
<image class="banner" src='{{item.bannerImg}}' mode="aspectFill" /> |
|||
</view> |
|||
</swiper-item> |
|||
</block> |
|||
</block> |
|||
<block wx:else> |
|||
<swiper-item> |
|||
<view> |
|||
<image class="banner" src="https://epdc-shibei.elinkservice.cn/epdcFile/M00/02/B2/rBAAM16W7SqAY1XjAAMWUuGo2D4654.jpg" mode="aspectFill" /> |
|||
</view> |
|||
</swiper-item> |
|||
</block> |
|||
|
|||
</swiper> |
|||
<!-- 重置小圆点的样式 --> |
|||
<view class="dots"> |
|||
<block wx:for="{{ banner }}" wx:key="index"> |
|||
<view class="dot {{index == currentSwiper ? ' active' : '' }}"></view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="toptabs"> |
|||
<wux-tabs controlled scroll current="{{ key }}" bindchange="onTabsChange"> |
|||
<wux-tab key="tab1" title="招募令"></wux-tab> |
|||
<wux-tab key="tab2" title="精彩活动"></wux-tab> |
|||
<wux-tab key="tab3" title="已报名"></wux-tab> |
|||
</wux-tabs> |
|||
<view class="top" bindtap="toLeaderboard"> |
|||
<view class="imgtop"> |
|||
<image class="topimg" src="/images/top.png" /> |
|||
</view> |
|||
<view class="toptxt">爱心榜</view> |
|||
</view> |
|||
</view> |
|||
<block> |
|||
|
|||
<view class="swiper-item-con" hidden="{{zml}}"> |
|||
<activity bind:toActDetail="toActDetailDown" id="state-0" state="0"></activity> |
|||
</view> |
|||
|
|||
<block wx:if="{{ index == '1' }}"> |
|||
<view class="swiper-item-con"> |
|||
<activity bind:toActDetail="toActDetailDown" id="state-1" state="1"></activity> |
|||
</view> |
|||
</block> |
|||
<block wx:if="{{ index == '2' }}"> |
|||
<view class="swiper-item-con"> |
|||
<activity bind:toActDetail="toActDetailDown" id="state-2" state="2"></activity> |
|||
</view> |
|||
</block> |
|||
</block> |
|||
|
|||
|
|||
<load-more loadMoreVisible="{{loadMoreVisible}}" loadMoreType="{{loadMoreType}}"></load-more> |
|||
</view> |
|||
@ -0,0 +1,195 @@ |
|||
page { |
|||
height: 100%; |
|||
font-size: 32rpx; |
|||
line-height: 1.6; |
|||
} |
|||
.container{ |
|||
width: 100vw; |
|||
} |
|||
.page-body{ |
|||
padding-top: 30rpx; |
|||
background: #ffffff; |
|||
} |
|||
.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; |
|||
} |
|||
.page-section-title{ |
|||
font-size: 28rpx; |
|||
color: #999999; |
|||
margin-bottom: 10rpx; |
|||
padding-left: 30rpx; |
|||
padding-right: 30rpx; |
|||
} |
|||
.page-section-gap .page-section-title{ |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
} |
|||
|
|||
.demo-text-1{ |
|||
position: relative; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background-color: #1AAD19; |
|||
color: #FFFFFF; |
|||
font-size: 36rpx; |
|||
} |
|||
.demo-text-1:before{ |
|||
content: 'A'; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
.demo-text-2{ |
|||
position: relative; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background-color: #2782D7; |
|||
color: #FFFFFF; |
|||
font-size: 36rpx; |
|||
} |
|||
.demo-text-2:before{ |
|||
content: 'B'; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
.demo-text-3{ |
|||
position: relative; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background-color: #F1F1F1; |
|||
color: #353535; |
|||
font-size: 36rpx; |
|||
} |
|||
.demo-text-3:before{ |
|||
content: 'C'; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
button{ |
|||
margin-bottom: 30rpx; |
|||
} |
|||
button:last-child{ |
|||
margin-bottom: 0; |
|||
} |
|||
.page-section-title{ |
|||
padding: 0; |
|||
} |
|||
.swiper-item{ |
|||
display: block; |
|||
height: 300rpx; |
|||
|
|||
} |
|||
.banner { |
|||
overflow: hidden; |
|||
height: 300rpx; |
|||
display: flex; |
|||
width: 100%; |
|||
border-radius: 16rpx; |
|||
} |
|||
.dots { |
|||
display: flex; |
|||
justify-content: center; |
|||
padding-bottom: 10rpx; |
|||
} |
|||
|
|||
.dots .dot { |
|||
width: 22rpx; |
|||
height: 16rpx; |
|||
border-radius: 8rpx; |
|||
margin-left: 10rpx; |
|||
background: #D2D5DA; |
|||
transition: all .3s; |
|||
} |
|||
|
|||
.dots .dot.active { |
|||
width: 40rpx; |
|||
background-image: linear-gradient(90deg, #FC5555 58%, #FC5555 100%); |
|||
} |
|||
.page-section-title{ |
|||
margin-top: 60rpx; |
|||
position: relative; |
|||
} |
|||
.info{ |
|||
position: absolute; |
|||
right: 0; |
|||
color: #353535; |
|||
font-size: 30rpx; |
|||
} |
|||
.page-foot{ |
|||
margin-top: 50rpx; |
|||
} |
|||
swiper{ |
|||
height: 320rpx; |
|||
} |
|||
|
|||
|
|||
|
|||
.tab-view{ |
|||
height: 98rpx; |
|||
width: 100wh; |
|||
background-color: #FFFFFF; |
|||
margin-top: 30rpx; |
|||
} |
|||
.wux-tabs__tab { |
|||
font-size:32rpx!important; |
|||
color: #8393A0!important; |
|||
} |
|||
.wux-tabs__tab--current { |
|||
color:#333333!important; |
|||
font-weight: bold; |
|||
font-size: 40rpx!important; |
|||
} |
|||
.wux-tabs__tab-bar{ |
|||
background: #FB3535!important; |
|||
height: 10rpx!important; |
|||
border-radius: 6rpx!important; |
|||
margin-top: -40rpx!important; |
|||
width: 80%!important; |
|||
margin-left: 10%!important; |
|||
} |
|||
.top{ |
|||
position: absolute; |
|||
width: 200rpx; |
|||
height: 80rpx; |
|||
right: 20rpx; |
|||
margin-top: -80rpx; |
|||
} |
|||
.toptxt{ |
|||
color: #8393A0; |
|||
line-height: 80rpx; |
|||
} |
|||
.imgtop{ |
|||
width: 44rpx; |
|||
height: 32rpx; |
|||
float: left; |
|||
margin-top: 28rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
.topimg{ |
|||
float: left; |
|||
width: 44rpx; |
|||
height: 32rpx; |
|||
} |
|||
@ -0,0 +1,89 @@ |
|||
Component({ |
|||
data: { |
|||
visible: false, |
|||
textareaValue: '' |
|||
}, |
|||
properties: { |
|||
cancelSignupVisible: { |
|||
type: Boolean, |
|||
value: false, |
|||
observer: function (newValue) { |
|||
this.setData({ |
|||
visible: !this.data.visible |
|||
}) |
|||
} |
|||
}, |
|||
title: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
cancelText: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
confirmText: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
tipVisible: { |
|||
type: Boolean, |
|||
value: false |
|||
}, |
|||
tipValue: { |
|||
type: String, |
|||
value: '*通过后直接入群，不通过无法入群' |
|||
} |
|||
}, |
|||
lifetimes: { |
|||
attached () { |
|||
|
|||
}, |
|||
deattached () { |
|||
|
|||
} |
|||
}, |
|||
pageLifetimes: { |
|||
show () { |
|||
|
|||
}, |
|||
hide () { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
close () { |
|||
this.triggerEvent('close', {data: this.data.textareaValue}) |
|||
this.setData({ |
|||
visible: !this.data.visible |
|||
}) |
|||
}, |
|||
confirm () { |
|||
if (this.data.textareaValue === '') { |
|||
wx.showToast({ |
|||
title: '原因不能为空', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
return false |
|||
} |
|||
this.triggerEvent('confirm', {data: this.data.textareaValue}) |
|||
this.setData({ |
|||
visible: !this.data.visible |
|||
}) |
|||
}, |
|||
textareaInput (e) { |
|||
this.setData({ |
|||
textareaValue: e.detail.value |
|||
}) |
|||
console.log(this.data.textareaValue) |
|||
}, |
|||
closeDialog () { |
|||
this.setData({ |
|||
visible: !this.data.visible |
|||
}) |
|||
}, |
|||
move () { |
|||
|
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
<view class="notice-verify" wx:if="{{visible}}" catchmove="move"> |
|||
<view class="content"> |
|||
<view class="close" bindtap="closeDialog"> |
|||
<image src="../../images/delete.png" /> |
|||
</view> |
|||
<view class="title">{{title}}</view> |
|||
<view class="textarea"> |
|||
<textarea value="{{textareaValue}}" bindblur="textareaInput" bindinput="textareaInput" placeholder-class="textarea-placeholder" placeholder="请您填写取消报名的原因，提交后您无法参加本次活动"/> |
|||
</view> |
|||
<view class="note" wx:if="{{tipVisible}}">{{tipValue}}</view> |
|||
<view class="footer"> |
|||
<view class="unpass" bindtap="unpass" wx:if="{{cancelText != ''}}" bindtap="close">{{cancelText}}</view> |
|||
<view class="pass" bindtap="pass" wx:if="{{confirmText != ''}}" bindtap="confirm">{{confirmText}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,100 @@ |
|||
.notice-verify { |
|||
width: 100%; |
|||
height: 100vh; |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
background: rgba(0,0,0,0.3); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 1000; |
|||
} |
|||
.notice-verify .content { |
|||
width: 610rpx; |
|||
height: auto; |
|||
border-radius: 16rpx; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
padding: 0 30rpx; |
|||
} |
|||
.notice-verify .content .close { |
|||
width: 100%; |
|||
height: 62rpx; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
} |
|||
.notice-verify .content .close image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
object-fit:cover; |
|||
position: relative; |
|||
left: 7px; |
|||
top: 2px; |
|||
} |
|||
.notice-verify .content .title { |
|||
font-size: 40rpx; |
|||
color: #333; |
|||
line-height: 57rpx; |
|||
height: 57rpx; |
|||
width:100%; |
|||
text-align:center; |
|||
margin-bottom: 26rpx; |
|||
} |
|||
.notice-verify .content .textarea { |
|||
width: 100%; |
|||
height: 345rpx; |
|||
border-radius: 16rpx; |
|||
background: #f7f7f7; |
|||
box-sizing: border-box; |
|||
padding: 27rpx 17rpx 0; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.notice-verify .content .textarea textarea { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
color: #666; |
|||
} |
|||
.notice-verify .content .textarea .textarea-placeholder { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
line-height: 40rpx; |
|||
} |
|||
.notice-verify .content .note { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
height:58rpx; |
|||
line-height: 58rpx; |
|||
} |
|||
.notice-verify .content .footer { |
|||
width: 100%; |
|||
height: 107rpx; |
|||
box-sizing: border-box; |
|||
padding: 15rpx 0; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
border-top: 1rpx solid #eaeaea; |
|||
} |
|||
.notice-verify .content .unpass { |
|||
height: 100%; |
|||
line-height: 77rpx; |
|||
font-size: 36rpx; |
|||
flex: 1; |
|||
color: #999; |
|||
text-align: center; |
|||
} |
|||
.notice-verify .content .unpass + .pass { |
|||
border-left: 1rpx solid #eaeaea; |
|||
} |
|||
.notice-verify .content .pass { |
|||
height: 100%; |
|||
line-height: 77rpx; |
|||
font-size: 36rpx; |
|||
flex: 1; |
|||
color: #04BCA0; |
|||
text-align: center; |
|||
} |
|||
@ -0,0 +1,65 @@ |
|||
Component({ |
|||
data: { |
|||
visible: false |
|||
}, |
|||
properties: { |
|||
dialogVisible: { |
|||
type: Boolean, |
|||
value: false, |
|||
observer: function (value) { |
|||
this.setData({ |
|||
visible: !this.data.visible |
|||
}) |
|||
} |
|||
}, |
|||
title: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
content: { |
|||
type: Array, |
|||
value: [] |
|||
}, |
|||
confirmText: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
cancelText: { |
|||
type: String, |
|||
value: '' |
|||
} |
|||
}, |
|||
pageLifetimes: { |
|||
show () { |
|||
|
|||
}, |
|||
hide () { |
|||
|
|||
} |
|||
}, |
|||
lifetimes: { |
|||
attached () { |
|||
|
|||
}, |
|||
detached () { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
close () { |
|||
this.triggerEvent('close') |
|||
this.setData({ |
|||
visible: false |
|||
}) |
|||
}, |
|||
confirm () { |
|||
this.triggerEvent('confirm') |
|||
this.setData({ |
|||
visible: false |
|||
}) |
|||
}, |
|||
catchmove () { |
|||
|
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
<cover-view class="coverview-dialog" wx:if="{{visible}}" catchmove="catchmove"> |
|||
<cover-view class="box"> |
|||
<cover-view class="close"> |
|||
<!-- <cover-image bindtap="close" src="../../images/delete.png" /> --> |
|||
</cover-view> |
|||
<cover-view class="title">{{title}}</cover-view> |
|||
<cover-view class="content"> |
|||
<cover-view wx:for="{{content}}" wx:key="index" wx:for-item="item" wx:for-index="index">{{item}} |
|||
</cover-view> |
|||
</cover-view> |
|||
<cover-view wx:if="{{cancelText !== '' || confirmText !== ''}}" class="border"></cover-view> |
|||
<cover-view class="operation"> |
|||
<cover-view wx:if="{{cancelText !== ''}}" class="cancel" bindtap="close">{{cancelText}}</cover-view> |
|||
<cover-view wx:if="{{confirmText !== ''}}" class="confirm" bindtap="confirm">{{confirmText}}</cover-view> |
|||
</cover-view> |
|||
</cover-view> |
|||
</cover-view> |
|||
@ -0,0 +1,84 @@ |
|||
.coverview-dialog { |
|||
width: 100%; |
|||
height: 100vh; |
|||
position: fixed; |
|||
z-index: 1000; |
|||
left: 0; |
|||
top: 0; |
|||
background: rgba(0,0,0, 0.4); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.coverview-dialog .box { |
|||
padding: 0rpx 20rpx; |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
position: relative; |
|||
min-width: 490rpx; |
|||
} |
|||
.coverview-dialog .box .close { |
|||
width:100%; |
|||
height: 60rpx; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
} |
|||
.coverview-dialog .box .close cover-image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
object-fit: cover; |
|||
margin-right: 20rpx; |
|||
} |
|||
.coverview-dialog .box .title { |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
width: 100%; |
|||
text-align:center; |
|||
font-size: 36rpx; |
|||
color: #333; |
|||
margin-bottom: 23rpx; |
|||
} |
|||
.coverview-dialog .box .content { |
|||
height: auto; |
|||
width: 100%; |
|||
padding-bottom: 35rpx; |
|||
} |
|||
.coverview-dialog .box .content cover-view { |
|||
font-size: 30rpx; |
|||
line-height: 50rpx; |
|||
height: 50rpx; |
|||
/* width: calc(100% - 20rpx); */ |
|||
text-align: center; |
|||
color: #666; |
|||
padding: 0 10rpx; |
|||
} |
|||
.coverview-dialog .box .border { |
|||
width: 100%; |
|||
height: 1rpx; |
|||
background: #eaeaea; |
|||
position: absolute; |
|||
left:0; |
|||
bottom: 105rpx; |
|||
} |
|||
.coverview-dialog .box .operation { |
|||
width: 100%; |
|||
height: 75rpx; |
|||
padding: 15rpx 0; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
} |
|||
.coverview-dialog .box .operation cover-view { |
|||
flex: 1; |
|||
color: #999; |
|||
font-size: 36rpx; |
|||
width: 49%; |
|||
height: 100%; |
|||
line-height: 75rpx; |
|||
text-align:center; |
|||
} |
|||
.coverview-dialog .box .operation .confirm{ |
|||
color: #04BCA0; |
|||
} |
|||
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 615 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 708 B |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 629 B |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 879 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 223 KiB |
|
After Width: | Height: | Size: 728 B |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 940 B |
|
After Width: | Height: | Size: 55 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,44 @@ |
|||
const api = require('../../../../utils/api.js') |
|||
|
|||
Page({ |
|||
data: { |
|||
detailObj: { |
|||
id: '', |
|||
title: '', |
|||
signupEndTime: '', |
|||
actStartTime: '', |
|||
actEndTime: '', |
|||
cancelReason: '' |
|||
}, |
|||
signupEndTime:'',//报名截止时间
|
|||
actStartTime:'', |
|||
actEndTime:'' |
|||
}, |
|||
onLoad (options) { |
|||
this.getUnPassActivityDetail(options.id) |
|||
}, |
|||
onShow () { |
|||
|
|||
}, |
|||
getUnPassActivityDetail (id) { |
|||
api.cancelDetail(id).then(res => { |
|||
console.log('取消活动详情', res) |
|||
for(const key in this.data.detailObj) { |
|||
this.data.detailObj[key] = res.data[key] |
|||
} |
|||
this.setData({ |
|||
detailObj: this.data.detailObj, |
|||
signupEndTime: this.data.detailObj.signupEndTime.substring(0, 16), |
|||
actStartTime: this.data.detailObj.actStartTime.substring(0, 16), |
|||
actEndTime: this.data.detailObj.actEndTime.substring(0, 16), |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
toDetail () { |
|||
wx.navigateTo({ |
|||
url: `/subpages/heart/pages/heartDetail/heartDetail?id=${this.data.detailObj.id}` |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"usingComponents": {}, |
|||
"navigationBarTitleText": "活动取消" |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
<view class="refuse-or-end"> |
|||
|
|||
<view class="top"> |
|||
<view class="title">{{detailObj.title}}</view> |
|||
<view class="endtime"> |
|||
<view class="left"> |
|||
<image class="endtime-img" src="../../images/endtime.png" /> |
|||
<view class="endtime-tip">报名截止时间</view> |
|||
</view> |
|||
<view class="content">{{signupEndTime}}</view> |
|||
</view> |
|||
<view class="activitytime"> |
|||
<view class="left"> |
|||
<image class="activitytime-img" src="../../images/activitytime.png" /> |
|||
<view class="activitytime-tip">活动时间</view> |
|||
</view> |
|||
<view class="content">{{actStartTime}}至{{actEndTime}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="bottom"> |
|||
<view class="reason"> |
|||
<image src="../../images/reason.png" /> |
|||
<view class="tip">活动取消原因</view> |
|||
</view> |
|||
<view class="reason-content"> |
|||
{{detailObj.cancelReason}} |
|||
</view> |
|||
<view class="look-detail"> |
|||
<button hover-class="hover-button" bindtap="toDetail">进入详情</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,148 @@ |
|||
page { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
height: auto; |
|||
overflow-y: auto; |
|||
background: #f7f7f7; |
|||
} |
|||
.refuse-or-end { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #f7f7f7; |
|||
box-sizing: border-box; |
|||
padding: 15rpx 20rpx 20rpx; |
|||
} |
|||
|
|||
.refuse-or-end .top { |
|||
width: 100%; |
|||
border-radius: 16rpx; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
} |
|||
.refuse-or-end .top .title { |
|||
color: #333333; |
|||
font-size: 44rpx; |
|||
font-weight: bolder; |
|||
padding: 50rpx 0 40rpx; |
|||
line-height: 60rpx; |
|||
border-bottom: 1rpx solid #EAEAEA; |
|||
} |
|||
.refuse-or-end .top .endtime { |
|||
width: 100%; |
|||
border-bottom: 1rpx solid #EAEAEA; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 100rpx; |
|||
} |
|||
.refuse-or-end .top .endtime .left { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 100%; |
|||
} |
|||
.refuse-or-end .top .endtime .left image { |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
object-fit: cover; |
|||
margin-right: 6rpx; |
|||
} |
|||
.refuse-or-end .top .endtime .left .endtime-tip { |
|||
font-size: 32rpx; |
|||
color: #999; |
|||
} |
|||
.refuse-or-end .top .endtime .content { |
|||
font-size: 32rpx; |
|||
color: #333333; |
|||
} |
|||
.refuse-or-end .top .activitytime { |
|||
width: 100%; |
|||
border-bottom: 1rpx solid #EAEAEA; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 100rpx; |
|||
} |
|||
.refuse-or-end .top .activitytime .left { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 100%; |
|||
} |
|||
.refuse-or-end .top .activitytime .left image { |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
object-fit: cover; |
|||
margin-right: 6rpx; |
|||
} |
|||
.refuse-or-end .top .activitytime .left .activitytime-tip { |
|||
font-size: 32rpx; |
|||
color: #999; |
|||
} |
|||
.refuse-or-end .top .activitytime .content { |
|||
font-size: 32rpx; |
|||
color: #333333; |
|||
width: 50%; |
|||
text-align: right; |
|||
} |
|||
|
|||
.refuse-or-end .bottom { |
|||
width: 100%; |
|||
border-radius: 16rpx; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
margin-top: 15rpx; |
|||
min-height: calc(100vh - 15rpx - 15rpx - 15rpx - 450rpx); |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
.refuse-or-end .bottom .reason { |
|||
width: 100%; |
|||
height: 108rpx; |
|||
border-bottom: 1rpx solid #EAEAEA; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.refuse-or-end .bottom .reason image { |
|||
width: 38rpx; |
|||
height: 38rpx; |
|||
object-fit: cover; |
|||
margin-right: 6rpx; |
|||
} |
|||
.refuse-or-end .bottom .reason .tip { |
|||
font-size: 34rpx; |
|||
color: #333333; |
|||
font-weight: bolder; |
|||
} |
|||
.refuse-or-end .bottom .reason-content { |
|||
color: #333; |
|||
font-size:34rpx; |
|||
line-height: 52rpx; |
|||
margin-top: 12rpx; |
|||
margin-bottom: 125rpx; |
|||
} |
|||
.look-detail { |
|||
width: 100%; |
|||
height: 85rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: absolute; |
|||
bottom: 20rpx; |
|||
left: 0rpx; |
|||
} |
|||
.look-detail button { |
|||
width: 560rpx; |
|||
height: 85rpx; |
|||
line-height: 85rpx; |
|||
text-align:center; |
|||
margin: 0rpx; |
|||
padding: 0rpx; |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
border-radius: 16rpx; |
|||
background: linear-gradient(to right, #f70e0f, #ff4c4b); |
|||
} |
|||
.look-detail .hover-button { |
|||
background: red; |
|||
} |
|||
@ -0,0 +1,310 @@ |
|||
import { |
|||
BASEURL |
|||
} from '../../../../utils/config'; |
|||
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js'); |
|||
const api = require('../../../../utils/api') |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
BASEURL: BASEURL(), |
|||
qqmapsdk:"", |
|||
signin: {},//活动打卡地点详情
|
|||
actId: "",//活动ID
|
|||
operationDesc: "",//打卡描述
|
|||
operationDesc_:"", |
|||
locationLongitude: Number,//打卡位置经度
|
|||
locationLatitude: Number,// 打卡位置纬度
|
|||
operationAddress:"",//打卡地址
|
|||
images: [],//图片
|
|||
clockType: Number,//打卡类型（0-打卡，1-更新打卡）
|
|||
effectiveFlag: Number,//打卡是否有效（0-否，1-是）
|
|||
phraseList:[],//常用于列表
|
|||
phraseId:"",//常用语id
|
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
const qqmapsdk = new QQMapWX({ |
|||
key: 'CMJBZ-4DECI-JXGGN-5B4WU-QLV2H-B5BEJ' |
|||
}) |
|||
this.setData({ |
|||
qqmapsdk, |
|||
id: options.id, |
|||
clockType:1, |
|||
effectiveFlag:1 |
|||
}) |
|||
this.getPhraseList();//常用语列表
|
|||
this.getPosition(); |
|||
this.clockAddressDetail(); |
|||
}, |
|||
getPhraseList(){ |
|||
let that = this; |
|||
api.getPhraseList().then(function (res) {//常用语列表
|
|||
console.log('常用语列表:' + JSON.stringify(res.data)) |
|||
that.setData({ |
|||
phraseList: res.data, |
|||
}) |
|||
}) |
|||
}, |
|||
toOperationDesc(phrase){//常用于点击事件
|
|||
console.log(phrase.currentTarget.dataset.phrase) |
|||
this.setData({ |
|||
operationDesc: this.data.operationDesc + phrase.currentTarget.dataset.phrase, |
|||
phraseId: phrase.currentTarget.dataset.id |
|||
}) |
|||
console.log(phrase.currentTarget.dataset.phrase) |
|||
}, |
|||
//获取经纬度
|
|||
getPosition() { |
|||
wx.showLoading({ |
|||
title: '正在获取位置', |
|||
}) |
|||
wx.getLocation({ |
|||
type: 'gcj02', |
|||
success: (res) => { |
|||
this.reverseGeocoder(res) |
|||
this.setData({ |
|||
location: { |
|||
locationLongitude: res.latitude, |
|||
locationLatitude: res.longitude |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 逆地址解析
|
|||
reverseGeocoder({ latitude, longitude }) { |
|||
var that = this; |
|||
that.data.qqmapsdk.reverseGeocoder({ |
|||
location: { |
|||
latitude, |
|||
longitude |
|||
}, |
|||
success: (res) => { |
|||
wx.hideLoading(); |
|||
if (res.message === 'query ok') { |
|||
that.setData({ |
|||
operationAddress: res.result.address |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
|
|||
// 上传图片
|
|||
onChange(e) { |
|||
// console.log('onChange', e)
|
|||
const { |
|||
file |
|||
} = e.detail |
|||
if (file.status === 'uploading') { |
|||
this.setData({ |
|||
progress: 0, |
|||
}) |
|||
wx.showLoading() |
|||
} else if (file.status === 'done') { |
|||
this.setData({ |
|||
imageUrl: file.url, |
|||
}) |
|||
} |
|||
|
|||
let images = [] |
|||
e.detail.fileList.forEach((item, index, array) => { |
|||
if (item.res !== undefined) { |
|||
const imageUrl = JSON.parse(e.detail.fileList[index].res.data).data |
|||
images.push(imageUrl) |
|||
} |
|||
}) |
|||
this.setData({ |
|||
images: images |
|||
}) |
|||
|
|||
console.log("~~~~~~@@@@@@@@" + JSON.stringify(images)) |
|||
|
|||
}, |
|||
onSuccess(e) { |
|||
// console.log('onSuccess', e)
|
|||
|
|||
}, |
|||
onFail(e) { |
|||
// console.log('onFail', e)
|
|||
}, |
|||
// 上传完成
|
|||
onComplete(e) { |
|||
// console.log('onComplete', e)
|
|||
wx.hideLoading() |
|||
}, |
|||
// 点击图片放大
|
|||
onPreview(e) { |
|||
// console.log('onPreview', e)
|
|||
const { |
|||
file, |
|||
fileList |
|||
} = e.detail |
|||
wx.previewImage({ |
|||
current: file.url, |
|||
urls: fileList.map((n) => n.url), |
|||
}) |
|||
}, |
|||
// 填写意见
|
|||
// bindInput: function (e) {
|
|||
// this.setData({
|
|||
// operationDesc: e.detail.value + this.data.operationDesc,
|
|||
// operationDesc_: e.detail.value
|
|||
// })
|
|||
// if (this.data.operationDesc_.length == 0){
|
|||
// this.setData({
|
|||
// operationDesc: e.detail.value,
|
|||
// operationDesc_: e.detail.value
|
|||
// })
|
|||
// }
|
|||
// console.log(this.data.operationDesc_)
|
|||
// },
|
|||
getbindinput(e) { |
|||
this.setData({ |
|||
operationDesc: e.detail.value, |
|||
}) |
|||
}, |
|||
/** |
|||
* 数据提交方法 |
|||
*/ |
|||
submission() { |
|||
// this.setData({
|
|||
// clockType: 1
|
|||
// })
|
|||
|
|||
|
|||
if (this.data.operationDesc === '') { |
|||
wx.showToast({ |
|||
title: '请先输入打卡描述', |
|||
icon: 'none', |
|||
duration: 3000 |
|||
}) |
|||
return false |
|||
} |
|||
|
|||
if (this.data.images.length==0){ |
|||
wx.showToast({ |
|||
title: '请上传打卡图片', |
|||
icon: 'none', |
|||
duration: 3000 |
|||
}) |
|||
return false |
|||
} |
|||
|
|||
if (this.data.phraseId) { |
|||
api.sagenumAddOne(this.data.phraseId).then(function (res) { |
|||
console.log('常用语言：' + res) |
|||
}) |
|||
} |
|||
|
|||
const signinLongitude = this.data.signin.signinLongitude; |
|||
const signinLatitude = this.data.signin.signinLatitude; |
|||
|
|||
const clockLongitude = this.data.location.locationLongitude; |
|||
const clockLatitude = this.data.location.clockLatitude; |
|||
|
|||
// Lat1 Lung1 表示A点纬度和经度，Lat2 Lung2 表示B点纬度和经度；
|
|||
// a = Lat1 – Lat2 为两点纬度之差 b = Lung1 - Lung2 为两点经度之差；
|
|||
// 6378.137为地球半径，单位为公里；计算出来的结果单位为公里；
|
|||
|
|||
// var a = rad(signinLatitude) - rad(clockLatitude);
|
|||
// var b = rad(signinLongitude) - rad(clockLongitude);
|
|||
// var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
|
|||
// s = s * 6378.137;
|
|||
// s = Math.round(s * 10000) / 10000;
|
|||
|
|||
const params={ |
|||
actId: this.data.id, |
|||
clockDesc: this.data.operationDesc, |
|||
clockLongitude: this.data.location.locationLongitude, |
|||
clockLatitude: this.data.location.locationLatitude, |
|||
clockAddress: this.data.operationAddress, |
|||
images: this.data.images, |
|||
clockType: this.data.clockType,//打卡类型（0-打卡，1-更新打卡）
|
|||
effectiveFlag: this.data.effectiveFlag//打卡是否有效（0-否，1-是）
|
|||
} |
|||
console.log('~~~~~~~":::::' + JSON.stringify(params)) |
|||
api.clock(params).then(function (res) { |
|||
console.log('打卡成功' + JSON.stringify(res)) |
|||
if (res.code == 0) { |
|||
wx.showToast({ |
|||
title: '打卡成功', |
|||
icon: 'none', |
|||
duration: 3000, |
|||
complete: function () { |
|||
setTimeout(function () { |
|||
wx.navigateBack() |
|||
}, 1000); |
|||
} |
|||
}) |
|||
} |
|||
|
|||
}) |
|||
}, |
|||
|
|||
clockAddressDetail() {//活动打卡地点详情
|
|||
const id = this.data.id; |
|||
api.clockAddressDetail(id).then(function (res) { |
|||
if (res.data.code == 0) { |
|||
this.setData({ |
|||
signin: res.data |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage: function () { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"navigationBarTitleText": "志愿者打卡", |
|||
"usingComponents": { |
|||
"wux-upload": "../../../../dist/upload/index" |
|||
} |
|||
} |
|||
@ -0,0 +1,41 @@ |
|||
<view class="container"> |
|||
<view class="info"> |
|||
<textarea bindinput="getbindinput" value="{{operationDesc}}" placeholder="请拍摄活动图片打卡签到500字以内" maxlength="500"></textarea> |
|||
|
|||
<view wx:for="{{phraseList}}" wx:key="{{index}}" class="info-tips" |
|||
bindtap="toOperationDesc" |
|||
data-phrase="{{item.phrase}}" |
|||
data-id="{{item.id}}"> |
|||
<view class="tips"> |
|||
<view class="spot"></view> |
|||
<view class="content display-inline">{{item.phrase}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="info-line"></view> |
|||
<view class="photo"> |
|||
<wux-upload listType="picture-card" defaultFileList="{{ fileList }}" max="3" count="3" url="{{BASEURL}}group/topic/upload" bind:change="onChange" bind:success="onSuccess" bind:fail="onFail" bind:complete="onComplete" bind:preview="onPreview"> |
|||
<image src="../../images/uploadImg3.png"></image> |
|||
</wux-upload> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- <view class="location">222</view> --> |
|||
|
|||
<view class="location"> |
|||
<view class="info-box"> |
|||
打卡地点 |
|||
</view> |
|||
<view class="info-box-last-require"> |
|||
{{operationAddress}} |
|||
</view> |
|||
<view bindtap="getPosition" class="refresh"> |
|||
<image src="../../images/ic_chongxindingwei.png"></image> |
|||
<view class="refresh-name">重新选定</view> |
|||
</view> |
|||
|
|||
<view class="clear"></view> |
|||
</view> |
|||
|
|||
<view class="button" bindtap="submission">提交打卡</view> |
|||
</view> |
|||
@ -0,0 +1,137 @@ |
|||
.container{ |
|||
width: 100%; |
|||
} |
|||
.info{ |
|||
background-color: #fff; |
|||
border-radius: 20rpx; |
|||
margin: 20rpx 20rpx 0rpx 20rpx; |
|||
padding-bottom: 10rpx; |
|||
} |
|||
textarea{ |
|||
padding-top: 39rpx; |
|||
width: calc(100% - 50rpx); |
|||
margin-left: 25rpx; |
|||
/* padding: 39rpx 25rpx 39rpx 25rpx; */ |
|||
} |
|||
.info-tips{ |
|||
width: 100%; |
|||
height: auto; |
|||
} |
|||
.tips{ |
|||
background-color: #D9D9D9; |
|||
border-radius: 20rpx; |
|||
margin: 20rpx 20rpx 0rpx 20rpx; |
|||
display:inline-block; |
|||
padding: 8rpx 10rpx; |
|||
} |
|||
.spot{ |
|||
width: 14rpx; |
|||
height: 14rpx; |
|||
background-color: #C1C1C1; |
|||
border-radius: 50%; |
|||
position: relative; |
|||
float: left; |
|||
top: 10rpx; |
|||
} |
|||
.display-inline{display:inline} |
|||
.content{ |
|||
float: left; |
|||
font-size:28rpx; |
|||
font-weight:500; |
|||
margin-left: 10rpx; |
|||
color:rgba(102,102,102,1); |
|||
} |
|||
.info-line{ |
|||
height: 3rpx; |
|||
background-color: #EAEAEA; |
|||
width: 100whh; |
|||
margin: 30rpx 24rpx 20rpx; |
|||
} |
|||
.photo{ |
|||
padding: 18rpx; |
|||
} |
|||
.wux-upload--picture-card .wux-upload__select{ |
|||
width: 220rpx !important; |
|||
height: 220rpx !important; |
|||
} |
|||
.wux-upload--picture-card .wux-upload__file{ |
|||
width: 220rpx !important; |
|||
height: 220rpx !important; |
|||
border: 2rpx solid #EAEAEA !important; |
|||
margin: 0 40rpx 40rpx 0 !important; |
|||
} |
|||
.wux-upload--picture-card .wux-upload__remove{ |
|||
width: 46rpx !important; |
|||
height: 46rpx !important; |
|||
background-size: 46rpx auto !important; |
|||
right: -20rpx !important; |
|||
top: -18rpx !important; |
|||
} |
|||
|
|||
/* 定位 */ |
|||
.location{ |
|||
margin: 20rpx 20rpx 0rpx 20rpx; |
|||
padding-bottom: 35rpx; |
|||
margin-bottom: 14rpx; |
|||
background-color: #fff; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.info-box { |
|||
width: 100wh; |
|||
height: auto; |
|||
border-bottom: 1rpx solid #e7eeee; |
|||
padding: 35rpx 0rpx; |
|||
margin: 0rpx 20rpx; |
|||
font-size:34rpx; |
|||
font-weight:bold; |
|||
color:rgba(51,51,51,1); |
|||
} |
|||
|
|||
|
|||
.info-box-last-require |
|||
{ |
|||
width: 100wh; |
|||
height: auto; |
|||
padding: 30rpx 0rpx 0 0; |
|||
margin: 0rpx 20rpx; |
|||
font-size:34rpx; |
|||
font-weight:500; |
|||
color:rgba(51,51,51,1); |
|||
line-height:54rpx; |
|||
} |
|||
.refresh{ |
|||
margin: 30rpx 20rpx; |
|||
} |
|||
.refresh image{ |
|||
width: 30.3rpx; |
|||
height: 30.3rpx; |
|||
float: left; |
|||
position: relative; |
|||
top: 5rpx |
|||
} |
|||
.refresh-name{ |
|||
font-size:28rpx; |
|||
font-weight:500; |
|||
color:rgba(0,179,152,1); |
|||
float: left; |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
.clear{ |
|||
clear: both; |
|||
} |
|||
|
|||
.button{ |
|||
background:linear-gradient(90deg,rgba(244,12,12,1),rgba(255,78,78,1)); |
|||
margin-left: 95rpx; |
|||
width: 560rpx; |
|||
height: 84rpx; |
|||
font-size:36rpx; |
|||
font-weight:500; |
|||
color:rgba(255,255,255,1); |
|||
text-align: center; |
|||
line-height: 84rpx; |
|||
border-radius: 20rpx; |
|||
margin: 78rpx 95rpx 48rpx 95rpx; |
|||
} |
|||
@ -0,0 +1,213 @@ |
|||
const api = require('../../../../utils/api') |
|||
import { |
|||
getTimestamp |
|||
} from '../../../../utils/common' |
|||
Page({ |
|||
data: { |
|||
detail: {}, |
|||
actCurrentState: 0, //活动当前状态（0-报名中，1-已报满，2-未开始，3-进行中，4-已结束）
|
|||
actStartTime: '', |
|||
actEndTime: '', |
|||
signupEndTime: '', |
|||
signupFlag: 0, //用户报名状态（0-未报名，1已报名）
|
|||
clocks: [], //打卡列表
|
|||
clockNum: 0, //打卡人次
|
|||
actContent: '', //富文本
|
|||
dialogTitle: '', |
|||
dialogContent: '', |
|||
dialogConfirmText: '', |
|||
dialogCancelText: '', |
|||
uservolunteerflag: '', |
|||
cancelSignupVisible: false, |
|||
cancelSignupTipValue: '', |
|||
cancelSignupTipVisible: false |
|||
}, |
|||
onLoad: function(options) { |
|||
this.setData({ |
|||
id: options.id, |
|||
actCurrentState: options.actcurrentstate, |
|||
signupFlag: options.signupflag |
|||
}) |
|||
// this.getDetail();//活动详情
|
|||
// this.clockList();//打卡列表
|
|||
// if (this.data.actCurrentState == 2 || this.data.actCurrentState == 3 || this.data.actCurrentState == 4){
|
|||
// this.clockList();//打卡列表
|
|||
// }
|
|||
}, |
|||
// 获取详情信息
|
|||
getDetail() { |
|||
let id = this.data.id |
|||
api.detail(id).then(res => { |
|||
if (res.code === 0 && res.msg === 'success') { |
|||
this.setData({ |
|||
detail: res.data, |
|||
actContent: res.data.actContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto"'), |
|||
actStartTime: res.data.actStartTime.substring(0, 16), |
|||
actEndTime: res.data.actEndTime.substring(0, 16), |
|||
signupEndTime: res.data.signupEndTime.substring(0, 16), |
|||
}) |
|||
} |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
//打卡列表
|
|||
clockList() { |
|||
let id = this.data.id |
|||
api.clockList(id).then(res => { |
|||
// console.log("打卡列表：" + JSON.stringify(res.data))
|
|||
if (res.code === 0 && res.msg === 'success') { |
|||
this.setData({ |
|||
clockNum: res.data.clockNum, |
|||
clocks: res.data.clocks |
|||
}) |
|||
} |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
goClockIn(e) { //前往打卡页面
|
|||
const id = e.currentTarget.dataset.id |
|||
wx.navigateTo({ |
|||
url: `../clockIn/clockIn?id=${id}` |
|||
}) |
|||
}, |
|||
goVolunteer(e) { //我要报名 用户认证志愿者标识（0-未认证，1-已认证）
|
|||
// 0-待审核 提醒用户志愿者身份认证审核中，不能报名也不用去认证
|
|||
// 1 - 认证通过 直接报名
|
|||
// 2 - 待认证 提示用户去认证
|
|||
// 3 - 黑名单 提示用户已被拉入黑名单，不能报名
|
|||
const uservolunteerflag = e.currentTarget.dataset.uservolunteerflag |
|||
this.setData({ |
|||
uservolunteerflag: uservolunteerflag |
|||
}) |
|||
if (uservolunteerflag == 0) { |
|||
// this.setData({
|
|||
// dialogVisible: !this.data.dialogVisible,
|
|||
// dialogTitle: '正在审核',
|
|||
// dialogContent: ['志愿者身份审核中'],
|
|||
// dialogConfirmText: '确定',
|
|||
// dialogCancelText: ''
|
|||
// })
|
|||
this.setData({ |
|||
dialogVisible: !this.data.dialogVisible, |
|||
dialogTitle: '报名提醒', |
|||
dialogContent: ['报名时间截止之前可取消', `缺席活动扣除${this.data.detail.punishmentPoints}积分，是否确定报名`], |
|||
dialogConfirmText: '是', |
|||
dialogCancelText: '否' |
|||
}) |
|||
} else if (uservolunteerflag == 1) { |
|||
this.setData({ |
|||
dialogVisible: !this.data.dialogVisible, |
|||
dialogTitle: '报名提醒', |
|||
dialogContent: ['报名时间截止之前可取消', `缺席活动扣除${this.data.detail.punishmentPoints}积分，是否确定报名`], |
|||
dialogConfirmText: '是', |
|||
dialogCancelText: '否' |
|||
}) |
|||
|
|||
} else if (uservolunteerflag == 2) { |
|||
this.setData({ |
|||
dialogVisible: !this.data.dialogVisible, |
|||
dialogTitle: '志愿者认证', |
|||
dialogContent: ['是否认证志愿者,完成报名'], |
|||
dialogConfirmText: '是', |
|||
dialogCancelText: '否' |
|||
}) |
|||
} else if (uservolunteerflag == 3) { |
|||
this.setData({ |
|||
dialogVisible: !this.data.dialogVisible, |
|||
dialogTitle: '已被拉入黑名单', |
|||
dialogContent: ['您已被拉入黑名单，不能报名'], |
|||
dialogConfirmText: '确定', |
|||
dialogCancelText: '' |
|||
}) |
|||
} |
|||
}, |
|||
//已报满
|
|||
signUpFull() { |
|||
this.setData({ |
|||
dialogVisible: !this.data.dialogVisible, |
|||
dialogTitle: '已报满', |
|||
dialogContent: ['活动名额报名已满', '快去“招募令”中参加其他活动吧'], |
|||
dialogConfirmText: '确定', |
|||
dialogCancelText: '' |
|||
}) |
|||
}, |
|||
// 取消报名
|
|||
prompt() { |
|||
const now = getTimestamp() |
|||
if (now > this.data.detail.signupEndTime) { |
|||
this.setData({ |
|||
cancelSignupVisible: !this.data.cancelSignupVisible, |
|||
cancelSignupTipValue: `报名时间已结束，取消活动将扣除${this.data.detail.punishmentPoints}积分`, |
|||
cancelSignupTipVisible: true |
|||
}) |
|||
} else { |
|||
this.setData({ |
|||
cancelSignupVisible: !this.data.cancelSignupVisible, |
|||
cancelSignupTipVisible: false, |
|||
cancelSignupTipValue: '' |
|||
}) |
|||
} |
|||
}, |
|||
onShow: function() { |
|||
this.getDetail(); //活动详情
|
|||
this.clockList(); //打卡列表
|
|||
// if (this.data.actCurrentState == 2 || this.data.actCurrentState == 3 || this.data.actCurrentState == 4) {
|
|||
// this.clockList();//打卡列表
|
|||
// }
|
|||
}, |
|||
// 弹框确认
|
|||
confirmDialog() { |
|||
console.log('::::::' + this.data.uservolunteerflag.length) |
|||
if (this.data.uservolunteerflag.length > 0) { |
|||
if (this.data.uservolunteerflag == 0 || this.data.uservolunteerflag == 1) { |
|||
let id = this.data.id |
|||
api.signup(id).then(res => { |
|||
if (res.code == 0) { |
|||
this.setData({ |
|||
dialogVisible: !this.data.dialogVisible, |
|||
dialogTitle: '报名成功', |
|||
dialogContent: ['正在审核中', '请耐心等待消息通知！'], |
|||
dialogConfirmText: '确定', |
|||
dialogCancelText: '', |
|||
uservolunteerflag: '' |
|||
}) |
|||
this.getDetail() |
|||
} else { //点击我要报名，刚好已经报满，此时弹出已报满的提示框，点击确定后，我要报名按钮变成已报满按钮（置灰）
|
|||
this.getDetail() |
|||
} |
|||
}) |
|||
} else if (this.data.uservolunteerflag == 2) { |
|||
wx.navigateTo({ |
|||
url: '/subpages/heart/pages/volunteer/volunteer' |
|||
}) |
|||
} |
|||
} else { |
|||
console.log('报名成功以后不进行操作') |
|||
} |
|||
}, |
|||
cancelSignupCallback(e) { |
|||
let id = this.data.id |
|||
let reason = e.detail.data |
|||
api.cancelsignup(id, reason).then(res => { |
|||
wx.showToast({ |
|||
title: '取消报名成功', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
this.getDetail() |
|||
setTimeout(() => { |
|||
wx.navigateBack({ |
|||
delta: 1 |
|||
}) |
|||
}, 2000) |
|||
}) |
|||
}, |
|||
preViewImage(e) { |
|||
wx.previewImage({ |
|||
urls: e.currentTarget.dataset.list, |
|||
current: e.currentTarget.dataset.src |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,8 @@ |
|||
{ |
|||
"navigationBarTitleText": "详情", |
|||
"usingComponents": { |
|||
"wux-dialog": "../../../../dist/dialog/index", |
|||
"coverview-dialog": "../../components/coverViewDialog/coverViewDialog", |
|||
"cancel-signup-dialog": "../../components/cancelSignupDialog/cancelSignupDialog" |
|||
} |
|||
} |
|||
@ -0,0 +1,267 @@ |
|||
<wux-dialog id="wux-dialog" /> |
|||
<view class="container"> |
|||
<view class="top-bg"> |
|||
<image src="../../images/heartDetail-bg.png" /> |
|||
</view> |
|||
<view class="top-font">{{detail.title}}</view> |
|||
|
|||
<view class="{{detail.title.length < 32 ? 'position-absolute-top1' : 'position-absolute-top2'}} position-absolute"> |
|||
<!-- 详细内容 --> |
|||
<view class="info"> |
|||
<view class="info-box"> |
|||
<view class="info-left"> |
|||
<image src="../../images/rili.png"></image> |
|||
<view class="info-font display-inline">报名截止时间</view> |
|||
</view> |
|||
<view class="info-right color"> |
|||
{{signupEndTime}} |
|||
</view> |
|||
<view class="clear"></view> |
|||
</view> |
|||
<view class="info-box"> |
|||
<view class="info-left"> |
|||
<image src="../../images/shijian.png"></image> |
|||
<view class="info-font display-inline">活动时间</view> |
|||
</view> |
|||
<view class="info-right color"> |
|||
<view>{{actStartTime}}至</view> |
|||
<view>{{actEndTime}}</view> |
|||
</view> |
|||
<view class="clear"></view> |
|||
</view> |
|||
|
|||
<view class="info-box"> |
|||
<view class="info-left"> |
|||
<image src="../../images/didian.png"></image> |
|||
<view class="info-font display-inline">活动地点</view> |
|||
</view> |
|||
<view class="info-right color"> |
|||
{{detail.actAddress}} |
|||
</view> |
|||
<view class="clear"></view> |
|||
</view> |
|||
|
|||
<view class="info-box"> |
|||
<view class="info-left"> |
|||
<image src="../../images/mdsz.png"></image> |
|||
<view class="info-font display-inline">活动名额</view> |
|||
</view> |
|||
<view class="info-right color"> |
|||
{{ detail.actQuotaCategory === 0 ? '不限名额' : detail.actQuota + '人'}} |
|||
</view> |
|||
<view class="clear"></view> |
|||
</view> |
|||
|
|||
<view class="info-box"> |
|||
<view class="info-left"> |
|||
<image src="../../images/ren.png"></image> |
|||
<view class="info-font display-inline">联系人</view> |
|||
</view> |
|||
<view class="info-right color"> |
|||
{{detail.contacts}} |
|||
</view> |
|||
<view class="clear"></view> |
|||
</view> |
|||
|
|||
<view class="info-box"> |
|||
<view class="info-left"> |
|||
<image src="../../images/dianhua.png"></image> |
|||
<view class="info-font display-inline">联系电话</view> |
|||
</view> |
|||
<view class="info-right color"> |
|||
{{detail.tel}} |
|||
</view> |
|||
<view class="clear"></view> |
|||
</view> |
|||
|
|||
<view class="info-box-last"> |
|||
<view class="info-left"> |
|||
<image src="../../images/jifen.png"></image> |
|||
<view class="info-font display-inline">积分奖励</view> |
|||
</view> |
|||
<view class="info-right color"> |
|||
{{detail.reward}} |
|||
</view> |
|||
<view class="clear"></view> |
|||
</view> |
|||
</view> |
|||
<!-- 招募要求 --> |
|||
<view class="require"> |
|||
<view class="info-box-title"> |
|||
<view class="info-left"> |
|||
<image src="../../images/dingdan.png"></image> |
|||
<view class="info-font-zhaomu display-inline">招募要求</view> |
|||
</view> |
|||
<view class="clear"></view> |
|||
</view> |
|||
<view class="info-box-last-require"> |
|||
{{detail.requirement}} |
|||
<!-- 1. 年满18周岁，具有独立民事行为能力的年满18周岁，具有独立民事行为能力的 --> |
|||
</view> |
|||
<!-- <view class="info-box-last-require"> |
|||
2. 认同志愿者精神，热爱生活，心态阳光，具 有较强的创新能力，影响他人能力，良好的组 织能力，解决能力。 |
|||
</view> |
|||
<view class="info-box-last-require"> |
|||
3. 专业不限，具有美术教育者优先。 |
|||
</view> --> |
|||
</view> |
|||
<!-- 活动详情 --> |
|||
<view class="require {{detail.currentUserStatus == 0||detail.currentUserStatus == 1||detail.currentUserStatus == 2||detail.currentUserStatus == 3? 'margin-bottom':''}}"> |
|||
<view class="info-box-title"> |
|||
<view class="info-left"> |
|||
<image src="../../images/xiangqing.png"></image> |
|||
<view class="info-font-zhaomu display-inline">活动详情</view> |
|||
</view> |
|||
<view class="clear"></view> |
|||
</view> |
|||
<view class="info-box-last-require"> |
|||
<rich-text space="nbsp" nodes="{{actContent}}"></rich-text> |
|||
</view> |
|||
</view> |
|||
<!-- 志愿者打卡 --> |
|||
<block wx:if="{{detail.currentUserStatus == 4 || detail.currentUserStatus == 5 || detail.currentUserStatus == 6 || detail.currentUserStatus == 7 || detail.currentUserStatus == 8 || detail.currentUserStatus == 9}}"> |
|||
<view class="require {{detail.currentUserStatus == 4||detail.currentUserStatus == 5? 'margin-bottom':''}}"> |
|||
<view class="info-box-title"> |
|||
<view class="info-left"> |
|||
<image src="../../images/ren_red.png"></image> |
|||
<view class="info-font-zhaomu display-inline">志愿者打卡</view> |
|||
</view> |
|||
<view class="info-right volunteer"> |
|||
{{clockNum}}次 |
|||
</view> |
|||
<view class="clear"></view> |
|||
</view> |
|||
|
|||
|
|||
<!-- 志愿者打卡列表循环 --> |
|||
<!-- info-box-volunteer-last --> |
|||
<block wx:for="{{clocks}}" wx:key="index"> |
|||
<view class="info-box-volunteer"> |
|||
<!-- <view class="info-box-volunteer-ph"></view> --> |
|||
<image class="info-box-volunteer-ph" src="{{item.faceImg}}"></image> |
|||
<view class="info-box-volunteer-name"> |
|||
<view class="info-box-volunteer-name-t">{{item.nickname}}</view> |
|||
<view class="info-box-volunteer-name-b">{{item.createdTime}}</view> |
|||
</view> |
|||
<view class="info-box-volunteer-content"> |
|||
<text>{{item.clockDesc}}</text> |
|||
</view> |
|||
<!-- <view wx:if='{{item.images.length > 0 }}' class="photo"> |
|||
<block wx:for="{{item.images}}" wx:key="index" wx:for-index="index" wx:for-item="val"> |
|||
<image data-src="{{val}}" data-list="{{item.images}}" bindtap="preViewImage" class="image-a" src="{{val}}"></image> |
|||
</block> |
|||
</view> --> |
|||
|
|||
<view class="photo"> |
|||
<!-- 只有一张图片的时候 --> |
|||
<block wx:if='{{item.images.length == 1 }}'> |
|||
<image data-src="{{item.images[0]}}" data-list="{{item.images}}" bindtap="preViewImage" src="{{item.images[0]}}" class="photo-one"></image> |
|||
</block> |
|||
<!-- 有两张图片时的布局 --> |
|||
<block wx:if='{{item.images.length == 2 }}'> |
|||
<block wx:for="{{item.images}}" wx:key="index" wx:for-index="index" wx:for-item="val"> |
|||
<image data-src="{{val}}" data-list="{{item.images}}" bindtap="preViewImage" src="{{val}}" class="{{index==0 ? 'photo-two-left' : 'photo-two-right'}}"></image> |
|||
</block> |
|||
</block> |
|||
<!-- 有三张图片时的布局 --> |
|||
<block wx:if='{{item.images.length == 3 }}'> |
|||
<block wx:for="{{item.images}}" wx:key="index" wx:for-index="index" wx:for-item="val"> |
|||
<image data-src="{{val}}" data-list="{{item.images}}" bindtap="preViewImage" src="{{val}}" class="{{index==0 ? 'photo-three-left' : index==1 ? 'photo-three-center' : index==2 ? 'photo-three-right' : ''}}"></image> |
|||
|
|||
</block> |
|||
</block> |
|||
</view> |
|||
<view class="clear"></view> |
|||
</view> |
|||
</block> |
|||
|
|||
<!-- 志愿者打卡列表循环**********end*************** --> |
|||
</view> |
|||
<!-- 志愿者打卡 *************** end **************** --> |
|||
</block> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view class="bottom" wx:if="{{detail.currentUserStatus != 6 && detail.currentUserStatus != 7 &&detail.currentUserStatus != 8 && detail.currentUserStatus != 9}}"> |
|||
<block> |
|||
<view class="button-left" wx:if="{{detail.currentUserStatus == 0 || detail.currentUserStatus == 1 || detail.currentUserStatus == 2 || detail.currentUserStatus == 3 }}"> |
|||
已报名 {{detail.signupNum}}人 |
|||
</view> |
|||
</block> |
|||
|
|||
<block wx:if="{{detail.currentUserStatus == 0}}"> |
|||
<!-- 0-我要报名 --> |
|||
<view class="button-right" data-userVolunteerFlag="{{detail.userVolunteerFlag}}" bindtap="goVolunteer"> |
|||
<view class="button-right3"> |
|||
<view class="button1"> |
|||
<image class='header-bg' src="../../images/yuanjiao-red.png"></image> |
|||
<view class="font"> 我要报名 </view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<block wx:elif="{{detail.currentUserStatus == 1}}"> |
|||
<!-- 1取消报名 --> |
|||
<view class="button-right"> |
|||
<view class="button-right3"> |
|||
<view class="button1" bindtap="prompt"> |
|||
<image class='header-bg' src="../../images/yuanjiao-orange.png"></image> |
|||
<view class="font"> 取消报名 </view> |
|||
</view> |
|||
</view> |
|||
<view class="button-right3"> |
|||
<view class="button1"> |
|||
<image class='header-bg' src="../../images/yuanjiao-gray.png"></image> |
|||
<view class="font"> 未开始 </view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
|
|||
<block wx:elif="{{detail.currentUserStatus == 2}}"> |
|||
<!-- 2-已报满 --> |
|||
<view class="button-right"> |
|||
<view class="button-right3" bindtap="signUpFull"> |
|||
<view class="button1"> |
|||
<image class='header-bg' src="../../images/yuanjiao-gray.png"></image> |
|||
<view class="font"> 已报满 </view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
|
|||
<block wx:elif="{{detail.currentUserStatus == 3}}"> |
|||
<!-- 3-未开始 --> |
|||
<view class="button-right"> |
|||
<!-- <view class="button-right3"> |
|||
<view class="button1" bindtap="prompt"> |
|||
<image class='header-bg' src="../../images/yuanjiao-orange.png"></image> |
|||
<view class="font"> 取消报名 </view> |
|||
</view> |
|||
</view> --> |
|||
<view class="button-right3"> |
|||
<view class="button1"> |
|||
<image class='header-bg' src="../../images/yuanjiao-gray.png"></image> |
|||
<view class="font"> 未开始 </view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
|
|||
<block wx:elif="{{detail.currentUserStatus == 4 || detail.currentUserStatus == 5}}"> |
|||
<!-- 4-我要打卡 5-更新打卡 6-已结束 bindtap="goClockIn" --> |
|||
<view class="button1 button2" bindtap="goClockIn" data-id="{{detail.id}}"> |
|||
<image class='header-bg' src="../../images/yuanjiao-red.png"></image> |
|||
<view wx:if="{{detail.currentUserStatus == 4}}" class="font"> 我要打卡 </view> |
|||
<view wx:elif="{{detail.currentUserStatus == 5}}" class="font"> 更新打卡 </view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
|
|||
<coverview-dialog bind:confirm="confirmDialog" dialogVisible="{{dialogVisible}}" title="{{dialogTitle}}" content="{{dialogContent}}" confirmText="{{dialogConfirmText}}" cancelText="{{dialogCancelText}}"> |
|||
</coverview-dialog> |
|||
|
|||
<cancel-signup-dialog title="取消报名" cancelText="否" confirmText="是" tipVisible="{{cancelSignupTipVisible}}" tipValue="{{cancelSignupTipValue}}" bind:confirm="cancelSignupCallback" cancelSignupVisible="{{cancelSignupVisible}}"> |
|||
</cancel-signup-dialog> |
|||
@ -0,0 +1,345 @@ |
|||
.container { |
|||
width: 100%; |
|||
} |
|||
|
|||
.top-bg { |
|||
width: 100%; |
|||
height: 354rpx; |
|||
} |
|||
|
|||
.top-bg image { |
|||
width: 100%; |
|||
height: 354rpx; |
|||
} |
|||
|
|||
.top-font { |
|||
color: #fff; |
|||
display: block; |
|||
position: absolute; |
|||
top: 67rpx; |
|||
left: 20rpx; |
|||
right: 20rpx; |
|||
font-size: 44rpx; |
|||
} |
|||
|
|||
.position-absolute { |
|||
position: absolute; |
|||
left: 20rpx; |
|||
right: 20rpx; |
|||
} |
|||
|
|||
.position-absolute-top1 { |
|||
top: 188rpx; |
|||
} |
|||
|
|||
.position-absolute-top2 { |
|||
top: 245rpx; |
|||
} |
|||
|
|||
.info { |
|||
background-color: #fff; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.info-box { |
|||
width: 100wh; |
|||
height: auto; |
|||
border-bottom: 1rpx solid #e7eeee; |
|||
padding: 20rpx 0rpx; |
|||
margin: 0rpx 20rpx; |
|||
} |
|||
|
|||
.info-box-title { |
|||
width: 100wh; |
|||
height: auto; |
|||
border-bottom: 1rpx solid #e7eeee; |
|||
padding: 35rpx 0rpx; |
|||
margin: 0rpx 20rpx; |
|||
} |
|||
|
|||
.display-inline { |
|||
display: inline; |
|||
} |
|||
|
|||
.info-left { |
|||
width: 40%; |
|||
float: left; |
|||
word-wrap: break-word; |
|||
} |
|||
|
|||
.info-right { |
|||
width: 60%; |
|||
float: left; |
|||
font-size: 32rpx; |
|||
text-align: right; |
|||
word-wrap: break-word; |
|||
position: relative; |
|||
top: 5rpx; |
|||
} |
|||
|
|||
.info-right .color { |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
} |
|||
|
|||
.info-left image { |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
position: relative; |
|||
top: 5rpx; |
|||
} |
|||
|
|||
.info-font { |
|||
font-size: 32rpx; |
|||
color: #999; |
|||
padding: 5rpx; |
|||
top: -4rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.info-box-last { |
|||
width: 100wh; |
|||
height: auto; |
|||
padding: 25rpx 0rpx; |
|||
margin: 0rpx 20rpx; |
|||
} |
|||
|
|||
.clear { |
|||
clear: both; |
|||
} |
|||
|
|||
.require { |
|||
margin-top: 14rpx; |
|||
padding-bottom: 35rpx; |
|||
margin-bottom: 14rpx; |
|||
background-color: #fff; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.margin-bottom { |
|||
margin-bottom: 134rpx; |
|||
} |
|||
|
|||
.require .info-box .info-left image { |
|||
width: 38rpx; |
|||
height: 38rpx; |
|||
position: relative; |
|||
top: 0rpx; |
|||
} |
|||
|
|||
.info-font-zhaomu { |
|||
font-size: 34rpx; |
|||
color: #333; |
|||
font-weight: bold; |
|||
padding: 10rpx; |
|||
} |
|||
|
|||
.info-box-last-require { |
|||
width: 100wh; |
|||
height: auto; |
|||
padding: 35rpx 0rpx 0 0; |
|||
margin: 0rpx 20rpx; |
|||
font-size: 34rpx; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
line-height: 54rpx; |
|||
} |
|||
|
|||
.bottom { |
|||
width: 100%; |
|||
height: 120rpx; |
|||
background-color: #fff; |
|||
position: fixed; |
|||
bottom: 0rpx; |
|||
z-index: 777; |
|||
padding: 0rpx 20rpx; |
|||
} |
|||
|
|||
.button-left { |
|||
width: 28%; |
|||
height: 100%; |
|||
float: left; |
|||
color: #fc5555; |
|||
text-align: left; |
|||
line-height: 120rpx; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.button-right { |
|||
width: 70%; |
|||
height: 100%; |
|||
float: left; |
|||
} |
|||
|
|||
.button-right1 { |
|||
width: 50%; |
|||
height: 100%; |
|||
float: left; |
|||
/* text-align: center; */ |
|||
padding: 24rpx 0; |
|||
} |
|||
|
|||
.button-right2 { |
|||
width: 50%; |
|||
height: 100%; |
|||
float: left; |
|||
/* text-align: center; */ |
|||
padding: 24rpx 0; |
|||
} |
|||
|
|||
.button-right3 { |
|||
width: 50%; |
|||
height: 100%; |
|||
float: right; |
|||
/* text-align: center; */ |
|||
padding: 24rpx 0; |
|||
} |
|||
|
|||
.button1 { |
|||
width: 240rpx; |
|||
height: 72rpx; |
|||
/* margin: 0 auto; */ |
|||
display: flex; |
|||
position: relative; |
|||
} |
|||
|
|||
.button2 { |
|||
margin-top: 24rpx; |
|||
margin-left: 255rpx; |
|||
} |
|||
|
|||
.header-bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.button1 .font { |
|||
width: 240rpx; |
|||
height: 72rpx; |
|||
text-align: center; |
|||
z-index: 1; |
|||
line-height: 72rpx; |
|||
color: #fff; |
|||
font-size: 32rpx; |
|||
position: absolute; |
|||
} |
|||
|
|||
.volunteer { |
|||
font-size: 26rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(153, 153, 153, 1); |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.info-box-volunteer { |
|||
width: 100wh; |
|||
height: auto; |
|||
border-bottom: 1rpx solid #e7eeee; |
|||
padding: 26rpx 0rpx; |
|||
margin: 0rpx 22rpx; |
|||
} |
|||
|
|||
.info-box-volunteer-last { |
|||
width: 100wh; |
|||
height: auto; |
|||
padding: 26rpx 0rpx; |
|||
margin: 0rpx 22rpx; |
|||
} |
|||
|
|||
.info-box-volunteer-ph { |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
border-radius: 50%; |
|||
float: left; |
|||
} |
|||
|
|||
.info-box-volunteer-name { |
|||
height: 64rpx; |
|||
width: auto; |
|||
padding: 8rpx 0rpx; |
|||
float: left; |
|||
margin-left: 12rpx; |
|||
} |
|||
|
|||
.info-box-volunteer-name-t { |
|||
height: 25rpx; |
|||
font-size: 25rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(85, 85, 85, 1); |
|||
} |
|||
|
|||
.info-box-volunteer-name-b { |
|||
height: 20rpx; |
|||
font-size: 20rpx; |
|||
font-weight: 500; |
|||
margin-top: 8rpx; |
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
|
|||
.info-box-volunteer-content { |
|||
width: 100%; |
|||
font-size: 34rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
line-height: 50rpx; |
|||
margin-top: 80rpx; |
|||
word-wrap: break-word; |
|||
} |
|||
|
|||
.photo { |
|||
margin-top: 27rpx; |
|||
} |
|||
|
|||
.image-a { |
|||
margin-left: 10rpx; |
|||
height: 160rpx; |
|||
width: calc(33.3333333% - 10rpx); |
|||
border-radius: 15rpx; |
|||
} |
|||
|
|||
.photo-one { |
|||
width: 100%; |
|||
height: 350rpx; |
|||
border-radius: 15rpx; |
|||
} |
|||
|
|||
.photo-two-left { |
|||
float: left; |
|||
width: 49%; |
|||
height: 206rpx; |
|||
border-radius: 15rpx; |
|||
} |
|||
|
|||
.photo-two-right { |
|||
float: left; |
|||
margin-left: 1%; |
|||
width: 49%; |
|||
height: 206rpx; |
|||
border-radius: 15rpx; |
|||
} |
|||
|
|||
.photo-three-left { |
|||
float: left; |
|||
width: 32.333333%; |
|||
height: 160rpx; |
|||
border-radius: 15rpx; |
|||
} |
|||
|
|||
.photo-three-center { |
|||
float: left; |
|||
width: 32.333333%; |
|||
height: 160rpx; |
|||
margin-left: 1%; |
|||
border-radius: 15rpx; |
|||
} |
|||
|
|||
.photo-three-right { |
|||
float: left; |
|||
width: 32.333333%; |
|||
height: 160rpx; |
|||
margin-left: 1%; |
|||
border-radius: 15rpx; |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
Component({ |
|||
data: { |
|||
|
|||
}, |
|||
properties: { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
<view class="preload-loveranking-item"> |
|||
<view class="avatar"></view> |
|||
<view class="info"> |
|||
<view class="top"></view> |
|||
<view class="bottom"></view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,42 @@ |
|||
.preload-loveranking-item { |
|||
width: 100%; |
|||
height: 140rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.preload-loveranking-item .avatar { |
|||
width: 90rpx; |
|||
height: 90rpx; |
|||
border-radius: 50%; |
|||
margin: 0 15rpx; |
|||
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
|||
animation: loading 1.4s ease infinite; |
|||
background-size: 400% 100%; |
|||
} |
|||
.preload-loveranking-item .info { |
|||
height: 90rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
width: calc(100% - 150rpx - 20rpx); |
|||
} |
|||
.preload-loveranking-item .info .top, .preload-loveranking-item .info .bottom { |
|||
width: 100%; |
|||
height: 30rpx; |
|||
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
|||
animation: loading 1.4s ease infinite; |
|||
background-size: 400% 100%; |
|||
} |
|||
.preload-loveranking-item .info .top { |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
@keyframes loading { |
|||
0% { |
|||
background-position: 100% 50% |
|||
} |
|||
|
|||
100% { |
|||
background-position: 0 50% |
|||
} |
|||
} |
|||
@ -0,0 +1,68 @@ |
|||
const api = require('../../../../utils/api') |
|||
|
|||
Page({ |
|||
data: { |
|||
datalenght:0, |
|||
loveRankingList: [], |
|||
preloadVisible: true, |
|||
first: { |
|||
nickname: '', |
|||
faceImg: '', |
|||
kindnessTime: '', |
|||
participationNum: '' |
|||
}, |
|||
second: { |
|||
nickname: '', |
|||
faceImg: '', |
|||
kindnessTime: '', |
|||
participationNum: '' |
|||
}, |
|||
third: { |
|||
nickname: '', |
|||
faceImg: '', |
|||
kindnessTime: '', |
|||
participationNum: '' |
|||
} |
|||
}, |
|||
onLoad () { |
|||
this.loadLoveRanking() |
|||
}, |
|||
// 加载 爱心互助排行榜
|
|||
loadLoveRanking () { |
|||
api.leaderboard().then(res => { |
|||
this.setData({ |
|||
datalenght: res.data.length |
|||
}) |
|||
console.log('爱心互助排行榜', res+":::::::::"+this.data.datalenght) |
|||
res.data.forEach((item,index) => { |
|||
if (index === 0) { |
|||
for(const key in this.data.first) { |
|||
this.data.first[key] = item[key] |
|||
} |
|||
} else if (index === 1) { |
|||
for(const key in this.data.second) { |
|||
this.data.second[key] = item[key] |
|||
} |
|||
} else if (index === 2) { |
|||
for(const key in this.data.third) { |
|||
this.data.third[key] = item[key] |
|||
} |
|||
} else { |
|||
this.data.loveRankingList.push(item) |
|||
} |
|||
}) |
|||
this.setData({ |
|||
loveRankingList: this.data.loveRankingList, |
|||
first: this.data.first, |
|||
second: this.data.second, |
|||
third: this.data.third, |
|||
preloadVisible: false |
|||
}) |
|||
}).catch(() => { |
|||
this.setData({ |
|||
loveRankingList: [], |
|||
preloadVisible: false |
|||
}) |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"navigationBarTitleText": "爱心排行榜", |
|||
"usingComponents": { |
|||
"preload-loveranking-item": "./components/preloadLoverankingItem/preloadLoverankingItem" |
|||
} |
|||
} |
|||
@ -0,0 +1,82 @@ |
|||
<block wx:if="{{datalenght > 0}}"> |
|||
<view class="love-ranking"> |
|||
|
|||
<view class="top"> |
|||
<image class="top-bg" src="../../images/bg-top.png" /> |
|||
<view class="top-content"> |
|||
<view class="second order"> |
|||
<view class="avatar"> |
|||
<image class="avatar-bg" src="../../images/second.png" /> |
|||
<image class="avatar-content" src="{{second.faceImg}}" /> |
|||
<view class="num">2</view> |
|||
</view> |
|||
<view class="name" style="visibility: {{second.nickname ? 'visible' : 'hidden'}}">{{second.nickname}}</view> |
|||
<view class="time"style="visibility: {{second.kindnessTime ? 'visible' : 'hidden'}}">爱心时长{{second.kindnessTime}}小时</view> |
|||
<view class="times" style="visibility: {{second.participationNum ? 'visible' : 'hidden'}}">参加次数{{second.participationNum}}次</view> |
|||
</view> |
|||
<view class="first order"> |
|||
<view class="avatar"> |
|||
<image class="avatar-bg" src="../../images/first.png" /> |
|||
<image class="avatar-content" src="{{first.faceImg}}" /> |
|||
<view class="num">1</view> |
|||
</view> |
|||
<view class="name" style="visibility: {{first.nickname ? 'visible' : 'hidden'}}">{{first.nickname}}</view> |
|||
<view class="time"style="visibility: {{first.kindnessTime ? 'visible' : 'hidden'}}">爱心时长{{first.kindnessTime}}小时</view> |
|||
<view class="times" style="visibility: {{first.participationNum ? 'visible' : 'hidden'}}">参加次数{{first.participationNum}}次</view> |
|||
</view> |
|||
<view class="third order"> |
|||
<view class="avatar"> |
|||
<image class="avatar-bg" src="../../images/third.png" /> |
|||
<image class="avatar-content" src="{{third.faceImg}}" /> |
|||
<view class="num">3</view> |
|||
</view> |
|||
<view class="name" style="visibility: {{third.nickname ? 'visible' : 'hidden'}}">{{third.nickname}}</view> |
|||
<view class="time"style="visibility: {{third.kindnessTime ? 'visible' : 'hidden'}}">爱心时长{{third.kindnessTime}}小时</view> |
|||
<view class="times" style="visibility: {{third.participationNum ? 'visible' : 'hidden'}}">参加次数{{third.participationNum}}次</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="bottom"> |
|||
<view class="love-ranking-list"> |
|||
<block wx:if="{{loveRankingList.length === 0 && preloadVisible}}"> |
|||
<preload-loveranking-item |
|||
wx:for="{{[1,2,3,4]}}" |
|||
wx:for-index="index" |
|||
wx:key="index"> |
|||
</preload-loveranking-item> |
|||
</block> |
|||
<block wx:elif="{{loveRankingList.length > 0}}"> |
|||
<view |
|||
class="list-item" |
|||
wx:for-item="item" |
|||
wx:key="index" |
|||
wx:for-index="index" |
|||
wx:for="{{loveRankingList}}"> |
|||
<view class="num">{{index + 4}}</view> |
|||
<image class="avatar" src="{{item.faceImg}}" /> |
|||
<view class="info"> |
|||
<view class="name">{{item.nickname}}</view> |
|||
<view class="info-detail"> |
|||
<image class="heart-time" src="../../images/aixin.png"></image> |
|||
<view> 爱心时长 {{item.kindnessTime}}小时</view> |
|||
<image class="enter-times" src="../../images/bofangcishu.png"></image> |
|||
<view> 参加次数 {{item.participationNum}}次</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</block> |
|||
|
|||
<block wx:if="{{datalenght == 0}}"> |
|||
<view class="project-nodata"> |
|||
<image class="nodata-image" src="../../../../images/mine/project-nodata.png" /> |
|||
<view class="nodata-tip">暂无排名</view> |
|||
<view class="nodata-tip">快来参加吧</view> |
|||
</view> |
|||
</block> |
|||
@ -0,0 +1,264 @@ |
|||
page { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
height: auto; |
|||
overflow-y: auto; |
|||
} |
|||
.love-ranking { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #f7f7f7; |
|||
} |
|||
|
|||
.love-ranking .top { |
|||
width: 100%; |
|||
height: 425rpx; |
|||
position: relative; |
|||
} |
|||
.love-ranking .top .top-bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.love-ranking .top .top-content { |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 100; |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
padding: 0 15rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.love-ranking .top .top-content .order { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
height: 100%; |
|||
} |
|||
.love-ranking .top .top-content .order .num { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
border-radius: 50%; |
|||
text-align:center; |
|||
line-height: 36rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
font-weight: bolder; |
|||
position: absolute; |
|||
bottom: -18rpx; |
|||
left: calc(50% - 18rpx); |
|||
z-index: 20; |
|||
} |
|||
.love-ranking .top .top-content .order .name { |
|||
font-size: 32rpx; |
|||
height: 40rpx; |
|||
color: #fff; |
|||
margin: 30rpx 0 30rpx; |
|||
width: 100%; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
.love-ranking .top .top-content .order .time { |
|||
font-size: 22rpx; |
|||
color:#FFE065; |
|||
line-height: 30rpx; |
|||
} |
|||
.love-ranking .top .top-content .order .times { |
|||
font-size: 22rpx; |
|||
color: #FFE065; |
|||
line-height: 30rpx; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
.love-ranking .top .top-content .first .avatar { |
|||
width: 150rpx; |
|||
height: 166rpx; |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.love-ranking .top .top-content .first .avatar .avatar-bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.love-ranking .top .top-content .first .avatar .avatar-content { |
|||
width: 134rpx; |
|||
height: 134rpx; |
|||
border-radius: 50%; |
|||
object-fit: cover; |
|||
position: relative; |
|||
z-index: 10; |
|||
top: 10rpx; |
|||
} |
|||
.love-ranking .top .top-content .first .num { |
|||
background: #FEDE66; |
|||
width: 40rpx; |
|||
height: 40rpxx; |
|||
line-height: 40rpx; |
|||
font-size: 30rpx; |
|||
bottom: -20rpx; |
|||
left: calc(50% - 20rpx); |
|||
} |
|||
.love-ranking .top .top-content .first .times { |
|||
margin-bottom: 50rpx |
|||
} |
|||
.love-ranking .top .top-content .second .avatar { |
|||
width: 108rpx; |
|||
height: 120rpx; |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.love-ranking .top .top-content .second .avatar .avatar-bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.love-ranking .top .top-content .second .avatar .avatar-content { |
|||
width: 92rpx; |
|||
height: 92rpx; |
|||
border-radius: 50%; |
|||
object-fit: cover; |
|||
position: relative; |
|||
z-index: 10; |
|||
top: 8rpx; |
|||
left: 2rpx; |
|||
} |
|||
.love-ranking .top .top-content .second .num { |
|||
background: #DEDFE4; |
|||
} |
|||
.love-ranking .top .top-content .third .avatar { |
|||
width: 108rpx; |
|||
height: 120rpx; |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.love-ranking .top .top-content .third .avatar .avatar-bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.love-ranking .top .top-content .third .avatar .avatar-content { |
|||
width: 92rpx; |
|||
height: 92rpx; |
|||
border-radius: 50%; |
|||
object-fit: cover; |
|||
position: relative; |
|||
z-index: 10; |
|||
top:4rpx; |
|||
top: 8rpx; |
|||
left: 2rpx; |
|||
} |
|||
.love-ranking .top .top-content .third .avatar .num { |
|||
background: #DAAF7C; |
|||
} |
|||
.love-ranking .top .top-content .third .times { |
|||
margin-bottom: 20rpx |
|||
} |
|||
|
|||
.love-ranking .bottom { |
|||
width: 100%; |
|||
min-height: calc(100vh - 425rpx); |
|||
background: linear-gradient(to bottom, #fd880c, #feae02); |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx 70rpx; |
|||
} |
|||
.love-ranking .bottom .love-ranking-list { |
|||
width: 100%; |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
position: relative; |
|||
top: -10rpx; |
|||
} |
|||
.love-ranking .bottom .list-item { |
|||
width: 100%; |
|||
height: 140rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.love-ranking .bottom .list-item + .list-item { |
|||
border-top: 1rpx solid #e5e5e5; |
|||
} |
|||
.love-ranking .bottom .list-item .num { |
|||
font-size: 36rpx; |
|||
color: #333; |
|||
font-weight: bolder; |
|||
width: 60rpx; |
|||
text-indent: 6rpx; |
|||
} |
|||
.love-ranking .bottom .list-item .avatar { |
|||
width: 90rpx; |
|||
height: 90rpx; |
|||
object-fit: cover; |
|||
border-radius: 50%; |
|||
margin-right: 15rpx; |
|||
} |
|||
.love-ranking .bottom .list-item .info .name { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
line-height: 52rpx; |
|||
} |
|||
.love-ranking .bottom .list-item .info .info-detail { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.love-ranking .bottom .list-item .info .info-detail .heart-time { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
object-fit: cover; |
|||
margin-right: 6rpx; |
|||
} |
|||
.love-ranking .bottom .list-item .info .info-detail .enter-times { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
object-fit: cover; |
|||
margin-right: 6rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
|
|||
.project-nodata { |
|||
width: 100%; |
|||
height: calc(100vh - 300rpx); |
|||
background: #f7f7f7; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.project-nodata .nodata-image { |
|||
width: 256rpx; |
|||
height:245rpx; |
|||
object-fit: cover; |
|||
} |
|||
.project-nodata .nodata-tip { |
|||
font-size: 28rpx; |
|||
color: #bcbcbc; |
|||
height: 50rpx; |
|||
line-height: 50rpx; |
|||
} |
|||
@ -0,0 +1,65 @@ |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage: function () { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"navigationBarTitleText": "我的消息" |
|||
} |
|||
@ -0,0 +1,20 @@ |
|||
<view class="container"> |
|||
<view class="info"> |
|||
<view class="info-box"> |
|||
<view class="info-left"> |
|||
<image src="../../images/ic_hudongtongzhi.png"></image> |
|||
<view class="info-font display-inline">互动通知</view> |
|||
<view class="info-red"></view> |
|||
</view> |
|||
<view class="info-right color"> |
|||
查看详情 |
|||
</view> |
|||
<view class="clear"></view> |
|||
</view> |
|||
|
|||
<view class="info-line"></view> |
|||
<view class="info-content-one">活动提醒</view> |
|||
<view class="info-content-two">2019-08-26 16:56:02</view> |
|||
<view class="info-content-three">您报名的活动还有2天开始，立即查看</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,95 @@ |
|||
.container{ |
|||
width: 100%; |
|||
} |
|||
.info{ |
|||
background-color: #fff; |
|||
border-radius: 20rpx; |
|||
margin: 13rpx 20rpx 0rpx 20rpx; |
|||
padding-bottom: 40rpx; |
|||
} |
|||
.info-box { |
|||
width: 100wh; |
|||
height: auto; |
|||
padding: 31rpx 25rpx; |
|||
} |
|||
.display-inline{display:inline} |
|||
.info-left{ |
|||
width: 50%; |
|||
float: left; |
|||
} |
|||
.info-right{ |
|||
width: 50%; |
|||
float: left; |
|||
text-align: right; |
|||
word-wrap:break-word; |
|||
} |
|||
.color{ |
|||
font-size:28rpx; |
|||
font-weight:500; |
|||
line-height: 56rpx; |
|||
color:rgba(255,197,41,1); |
|||
} |
|||
.info-left image{ |
|||
width: 46rpx; |
|||
height: 46rpx; |
|||
position: relative; |
|||
top: 5rpx; |
|||
} |
|||
.info-font{ |
|||
font-size:32rpx; |
|||
font-weight:500; |
|||
margin-left: 10rpx; |
|||
position: relative; |
|||
top: -5rpx; |
|||
color:rgba(51,51,51,1); |
|||
} |
|||
.info-red{ |
|||
width: 15rpx; |
|||
height: 15rpx; |
|||
border-radius: 50%; |
|||
background-color: #FC5555; |
|||
position: relative; |
|||
margin-left: 180rpx; |
|||
top: -50rpx; |
|||
} |
|||
.clear{ |
|||
clear: both; |
|||
} |
|||
|
|||
|
|||
.info-line{ |
|||
height: 1rpx; |
|||
background-color: #EAEAEA; |
|||
width: 100whh; |
|||
margin: 0 10rpx; |
|||
} |
|||
|
|||
.info-content-one{ |
|||
font-size:36rpx; |
|||
font-weight:bold; |
|||
color:rgba(51,51,51,1); |
|||
margin: 26rpx 25rpx 0rpx 25rpx; |
|||
} |
|||
|
|||
.info-content-two{ |
|||
font-size:20rpx; |
|||
font-weight:500; |
|||
color:rgba(153,153,153,1); |
|||
margin: 14rpx 25rpx 0rpx 25rpx; |
|||
} |
|||
|
|||
.info-content-three{ |
|||
font-size:32rpx; |
|||
font-weight:500; |
|||
color:rgba(51,51,51,1); |
|||
margin: 27rpx 25rpx 0rpx 25rpx; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
@ -0,0 +1,44 @@ |
|||
const api = require('../../../../utils/api.js') |
|||
|
|||
Page({ |
|||
data: { |
|||
detailObj: { |
|||
id: '', |
|||
title: '', |
|||
signupEndTime: '', |
|||
actStartTime: '', |
|||
actEndTime: '', |
|||
failureReason: '' |
|||
}, |
|||
signupEndTime: '', |
|||
actStartTime: '', |
|||
actEndTime: '', |
|||
}, |
|||
onLoad (options) { |
|||
this.getUnPassActivityDetail(options.id) |
|||
}, |
|||
onShow () { |
|||
|
|||
}, |
|||
getUnPassActivityDetail (id) { |
|||
api.unpassActivityDetail(id).then(res => { |
|||
console.log('未通过活动详情', res) |
|||
for(const key in this.data.detailObj) { |
|||
this.data.detailObj[key] = res.data[key] |
|||
} |
|||
this.setData({ |
|||
detailObj: this.data.detailObj, |
|||
signupEndTime: this.data.detailObj.signupEndTime.substring(0, 16), |
|||
actStartTime: this.data.detailObj.actStartTime.substring(0, 16), |
|||
actEndTime: this.data.detailObj.actEndTime.substring(0, 16), |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
toDetail () { |
|||
wx.navigateTo({ |
|||
url: `/subpages/heart/pages/heartDetail/heartDetail?id=${this.data.detailObj.id}` |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"usingComponents": {}, |
|||
"navigationBarTitleText": "未通过" |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
<view class="refuse-or-end"> |
|||
|
|||
<view class="top"> |
|||
<view class="title">{{detailObj.title}}</view> |
|||
<view class="endtime"> |
|||
<view class="left"> |
|||
<image class="endtime-img" src="../../images/endtime.png" /> |
|||
<view class="endtime-tip">报名截止时间</view> |
|||
</view> |
|||
<view class="content">{{signupEndTime}}</view> |
|||
</view> |
|||
<view class="activitytime"> |
|||
<view class="left"> |
|||
<image class="activitytime-img" src="../../images/activitytime.png" /> |
|||
<view class="activitytime-tip">活动时间</view> |
|||
</view> |
|||
<view class="content">{{actStartTime}}至{{actEndTime}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="bottom"> |
|||
<view class="reason"> |
|||
<image src="../../images/reason.png" /> |
|||
<view class="tip">未通过原因</view> |
|||
</view> |
|||
<view class="reason-content"> |
|||
{{detailObj.failureReason}} |
|||
</view> |
|||
<view class="look-detail"> |
|||
<button hover-class="hover-button" bindtap="toDetail">进入详情</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,148 @@ |
|||
page { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
height: auto; |
|||
overflow-y: auto; |
|||
background: #f7f7f7; |
|||
} |
|||
.refuse-or-end { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #f7f7f7; |
|||
box-sizing: border-box; |
|||
padding: 15rpx 20rpx 20rpx; |
|||
} |
|||
|
|||
.refuse-or-end .top { |
|||
width: 100%; |
|||
border-radius: 16rpx; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
} |
|||
.refuse-or-end .top .title { |
|||
color: #333333; |
|||
font-size: 44rpx; |
|||
font-weight: bolder; |
|||
padding: 50rpx 0 40rpx; |
|||
line-height: 60rpx; |
|||
border-bottom: 1rpx solid #EAEAEA; |
|||
} |
|||
.refuse-or-end .top .endtime { |
|||
width: 100%; |
|||
border-bottom: 1rpx solid #EAEAEA; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 100rpx; |
|||
} |
|||
.refuse-or-end .top .endtime .left { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 100%; |
|||
} |
|||
.refuse-or-end .top .endtime .left image { |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
object-fit: cover; |
|||
margin-right: 6rpx; |
|||
} |
|||
.refuse-or-end .top .endtime .left .endtime-tip { |
|||
font-size: 32rpx; |
|||
color: #999; |
|||
} |
|||
.refuse-or-end .top .endtime .content { |
|||
font-size: 32rpx; |
|||
color: #333333; |
|||
} |
|||
.refuse-or-end .top .activitytime { |
|||
width: 100%; |
|||
border-bottom: 1rpx solid #EAEAEA; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 100rpx; |
|||
} |
|||
.refuse-or-end .top .activitytime .left { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 100%; |
|||
} |
|||
.refuse-or-end .top .activitytime .left image { |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
object-fit: cover; |
|||
margin-right: 6rpx; |
|||
} |
|||
.refuse-or-end .top .activitytime .left .activitytime-tip { |
|||
font-size: 32rpx; |
|||
color: #999; |
|||
} |
|||
.refuse-or-end .top .activitytime .content { |
|||
font-size: 32rpx; |
|||
color: #333333; |
|||
width: 50%; |
|||
text-align: right; |
|||
} |
|||
|
|||
.refuse-or-end .bottom { |
|||
width: 100%; |
|||
border-radius: 16rpx; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
margin-top: 15rpx; |
|||
min-height: calc(100vh - 15rpx - 15rpx - 15rpx - 450rpx); |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
.refuse-or-end .bottom .reason { |
|||
width: 100%; |
|||
height: 108rpx; |
|||
border-bottom: 1rpx solid #EAEAEA; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.refuse-or-end .bottom .reason image { |
|||
width: 38rpx; |
|||
height: 38rpx; |
|||
object-fit: cover; |
|||
margin-right: 6rpx; |
|||
} |
|||
.refuse-or-end .bottom .reason .tip { |
|||
font-size: 34rpx; |
|||
color: #333333; |
|||
font-weight: bolder; |
|||
} |
|||
.refuse-or-end .bottom .reason-content { |
|||
color: #333; |
|||
font-size:34rpx; |
|||
line-height: 52rpx; |
|||
margin-top: 12rpx; |
|||
margin-bottom: 125rpx; |
|||
} |
|||
.look-detail { |
|||
width: 100%; |
|||
height: 85rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: absolute; |
|||
bottom: 20rpx; |
|||
left: 0rpx; |
|||
} |
|||
.look-detail button { |
|||
width: 560rpx; |
|||
height: 85rpx; |
|||
line-height: 85rpx; |
|||
text-align:center; |
|||
margin: 0rpx; |
|||
padding: 0rpx; |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
border-radius: 16rpx; |
|||
background: linear-gradient(to right, #f70e0f, #ff4c4b); |
|||
} |
|||
.look-detail .hover-button { |
|||
background: red; |
|||
} |
|||
@ -0,0 +1,39 @@ |
|||
const app = getApp() |
|||
|
|||
Component({ |
|||
data: { |
|||
imageUrl: '../../../../images/uploadImg3.png' |
|||
}, |
|||
properties: { |
|||
activityItemObj: { |
|||
type: Object, |
|||
value: {} |
|||
}, |
|||
actType: { |
|||
type: String, |
|||
value: 'tab0' |
|||
} |
|||
}, |
|||
lifetimes: { |
|||
attached () { |
|||
|
|||
} |
|||
}, |
|||
pageLifetimes: { |
|||
show () { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
// 预览图片
|
|||
previewImage (e) { |
|||
app.globalData.previewImage = true |
|||
wx.previewImage({ |
|||
urls: [e.currentTarget.dataset.src] |
|||
}) |
|||
}, |
|||
toDetail (e) { |
|||
this.triggerEvent('toDetail', {detailId: e.currentTarget.dataset.detailid, actCurrentState: e.currentTarget.dataset.state}) |
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,31 @@ |
|||
<view class="activity-item" data-detailid="{{activityItemObj.id}}" data-state="{{activityItemObj.actCurrentState}}" bindtap="toDetail"> |
|||
<view class="left"> |
|||
<image mode="aspectFill" catchtap="previewImage" data-src="{{activityItemObj.headPic}}" class="activity-image" src="{{activityItemObj.headPic}}" /> |
|||
<view wx:if="{{actType == 'tab1' || actType == 'tab5'}}" class="user-state">{{activityItemObj.actCurrentState == 0 ? '报名中' : activityItemObj.actCurrentState == 1 ? '已报满' : activityItemObj.actCurrentState == 2 ? '未开始' : activityItemObj.actCurrentState == 3 ? '进行中' : activityItemObj.actCurrentState == 4 ? '已结束' : activityItemObj.actCurrentState == 5 ? '已取消' : ''}}</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">{{activityItemObj.title}}</view> |
|||
<view class="activity-time"> |
|||
<view class="activity-time-title"> |
|||
<image src="../../../../images/shijian.png" /> |
|||
<view>活动时间：</view> |
|||
</view> |
|||
<view class="activity-time-content"> |
|||
<view>{{activityItemObj.actStartTime}}至</view> |
|||
<view>{{activityItemObj.actEndTime}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="activity-address"> |
|||
<view class="activity-address-title"> |
|||
<image src="../../../../images/didian.png" /> |
|||
<view>活动地点：</view> |
|||
</view> |
|||
<view class="activity-address-content">{{activityItemObj.actAddress}}</view> |
|||
</view> |
|||
<view class="activity-info"> |
|||
<view class="num">活动名额 {{activityItemObj.actQuotaCategory == 0 ? '不限' : activityItemObj.actQuota + '人'}}</view> |
|||
<view class="already">已报名 {{activityItemObj.signupNum}}人</view> |
|||
</view> |
|||
<!-- <image class="signed-logo" src="../../../../images/signed.png" /> --> |
|||
</view> |
|||
</view> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue