ZhaoTongYao
4 years ago
34 changed files with 1316 additions and 35 deletions
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 73 KiB |
@ -0,0 +1,23 @@ |
|||
const api = require("../../utils/api") |
|||
import util from "../../../../utils/util" |
|||
Page({ |
|||
data: { |
|||
noticeObj: '', |
|||
noticeObjContent: '' |
|||
}, |
|||
onLoad: function (options) { |
|||
if (options.id) { |
|||
this.getVolunteerUnionDetail(options.id) |
|||
} |
|||
}, |
|||
getVolunteerUnionDetail (id) { |
|||
api.getVolunteerUnionDetail({ id }).then(res => { |
|||
this.setData({ |
|||
noticeObj: res.data, |
|||
noticeObjContent: util.formatRichText(res.data.content) |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"navigationBarTitleText": "详情", |
|||
"usingComponents": { |
|||
"parser": "../../../../components/parser/parser" |
|||
} |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
<view class="alliance-detail"> |
|||
<parser html="{{noticeObjContent}}"></parser> |
|||
</view> |
|||
@ -0,0 +1,4 @@ |
|||
.alliance-detail { |
|||
padding: 20rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
@ -0,0 +1,67 @@ |
|||
const api = require("../../utils/api") |
|||
Page({ |
|||
data: { |
|||
pageIndex: 1, |
|||
pageSize: 10, |
|||
nodata: false, |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false, |
|||
allianceList: [], // 联盟列表
|
|||
}, |
|||
onLoad: function (options) { |
|||
this.setData({ |
|||
pageIndex: 1, |
|||
dropbylist: [] |
|||
}) |
|||
this.getVolunteerUnionList() |
|||
}, |
|||
onReachBottom: function () { |
|||
this.setData({ |
|||
loadMoreVisible: true |
|||
}) |
|||
if (this.data.loadMoreType === "loading") { |
|||
this.setData({ |
|||
pageIndex: this.data.pageIndex + 1 |
|||
}) |
|||
this.getVolunteerUnionList() |
|||
} |
|||
}, |
|||
// 前往联盟详情
|
|||
toAllianceDetail (e) { |
|||
let id = e.currentTarget.dataset.id |
|||
wx.navigateTo({ |
|||
url: `../allianceDetail/allianceDetail?id=${id}` |
|||
}) |
|||
}, |
|||
//
|
|||
getVolunteerUnionList () { |
|||
const para = { |
|||
pageIndex: this.data.pageIndex, |
|||
pageSize: this.data.pageSize |
|||
} |
|||
api.getVolunteerUnionList(para).then(res => { |
|||
console.log(res) |
|||
this.setData({ |
|||
allianceList: [...this.data.allianceList,...res.data], |
|||
loadMoreType: res.data.length === this.data.pageSize ? 'loading' : 'none', |
|||
loadMoreVisible: res.data.length === this.data.pageSize ? false : true, |
|||
nodata: false, |
|||
}) |
|||
if (this.data.allianceList.length == 0) { |
|||
this.setData({ |
|||
nodata: true, |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false, |
|||
}) |
|||
} |
|||
}).catch(err => { |
|||
this.setData({ |
|||
allianceList: [], |
|||
nodata: true, |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false, |
|||
}) |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
}) |
|||
@ -0,0 +1,7 @@ |
|||
{ |
|||
"navigationBarTitleText": "共建联盟", |
|||
"usingComponents": { |
|||
"load-more": "/components/loadMore/loadMore", |
|||
"no-data": "/components/nodata/nodata" |
|||
} |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
<view class="alliance-list"> |
|||
<block wx:for="{{allianceList}}" wx:key="index"> |
|||
<view class="alliance-item" bindtap="toAllianceDetail" data-id="{{item.id}}"> |
|||
<view class="alliance-title">{{item.unionName}}</view> |
|||
<image class="alliance-icon" src="../../images/ic_jinruxiayiye@2x.png"/> |
|||
</view> |
|||
<view class="list-line" wx:if="{{index < allianceList.length - 1}}"></view> |
|||
</block> |
|||
</view> |
|||
|
|||
<load-more loadMoreType="{{loadMoreType}}" loadMoreVisible="{{loadMoreVisible}}"></load-more> |
|||
|
|||
<no-data isShow="{{nodata}}"></no-data> |
|||
@ -0,0 +1,37 @@ |
|||
page { |
|||
background-color: #f7f7f7; |
|||
} |
|||
.alliance-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background-color: #fff; |
|||
margin-top: 20rpx; |
|||
} |
|||
.alliance-list .alliance-item { |
|||
width: 690rpx; |
|||
height: 110rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.alliance-list .alliance-item .alliance-title { |
|||
width: 650rpx; |
|||
font-size: 34rpx; |
|||
color: #333333; |
|||
overflow: hidden; |
|||
text-overflow:ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
.alliance-list .alliance-item .alliance-icon { |
|||
width: 22rpx; |
|||
height: 22rpx; |
|||
} |
|||
.alliance-list .list-line { |
|||
width: 690rpx; |
|||
height: 1px; |
|||
background-color: #eeeeee; |
|||
border-radius: 1px; |
|||
opacity: 0.5; |
|||
} |
|||
@ -0,0 +1,205 @@ |
|||
const api = require('../../utils/api') |
|||
import { getTimestamp } from "../../../../utils/common" |
|||
const app = getApp() |
|||
Page({ |
|||
data: { |
|||
statusHeight: 0, // 自定义头部状态栏高度
|
|||
navigationHeight: 0, // 自定义头部导航栏高度
|
|||
selectTab: "tab1", |
|||
pageIndex: 1, |
|||
pageSize: 10, |
|||
loadMoreVisible: false, |
|||
loadMoreType: "none", |
|||
list: [], // 团队成员列表
|
|||
teamDetail: {}, |
|||
teamId: '', |
|||
dialogVisible: false, |
|||
dialogTitle: "", |
|||
dialogContent: "", |
|||
dialogConfirmText: "", |
|||
dialogCancelText: "", |
|||
}, |
|||
onLoad: function (options) { |
|||
this.setData({ |
|||
statusHeight: app.globalData.deviceInfo.statusHeight, |
|||
navigationHeight: app.globalData.deviceInfo.navigationHeight |
|||
}) |
|||
if (options.id) { |
|||
this.setData({ |
|||
teamId: options.id |
|||
}) |
|||
this.getAppTeamDetail() |
|||
} |
|||
let params = { |
|||
pageIndex: 1, |
|||
pageSize: 10, |
|||
timestamp: getTimestamp(), |
|||
actType: 0, |
|||
qkdat: true, |
|||
selectedTab: 'tab0', |
|||
teamId: this.data.teamId |
|||
} |
|||
this.selectComponent("#state-0").getActivityList(params) |
|||
}, |
|||
onShow: function () { |
|||
|
|||
}, |
|||
onReachBottom: function () { |
|||
this.setData({ |
|||
loadMoreVisible: true |
|||
}) |
|||
if (this.data.loadMoreType === "loading") { |
|||
this.setData({ |
|||
pageIndex: this.data.pageIndex + 1 |
|||
}) |
|||
this.getTeamVolunteerList() |
|||
} |
|||
}, |
|||
// 返回上一级
|
|||
goback () { |
|||
wx.navigateBack({ |
|||
delta: 1 |
|||
}) |
|||
}, |
|||
// 志愿者认证
|
|||
confirmDialog () { |
|||
wx.navigateTo({ |
|||
url: "/subpages/heart/pages/volunteer/volunteer" |
|||
}) |
|||
}, |
|||
// 加入团队
|
|||
joinTeam () { |
|||
let that = this |
|||
api.getVolunteerVerify().then(res => { |
|||
if (res.code == 0) { |
|||
if (res.data && res.data.id) { |
|||
let param = { |
|||
volunteerId: this.data.teamDetail.volunteerId, |
|||
teamId: this.data.teamId |
|||
} |
|||
wx.showModal({ |
|||
content: '请确认加入团队', |
|||
confirmColor: '#04BCA0', |
|||
success (res) { |
|||
if (res.confirm) { |
|||
console.log('用户点击确定') |
|||
api.joinTeam(param).then(res => { |
|||
if (res.code == 0 && res.msg == 'success') { |
|||
wx.showToast({ |
|||
title: '加入成功', |
|||
icon: 'none', |
|||
durantion: 2000 |
|||
}) |
|||
that.getAppTeamDetail() |
|||
} else { |
|||
wx.showToast({ |
|||
title: res.msg, |
|||
icon: 'none', |
|||
durantion: 2000 |
|||
}) |
|||
} |
|||
}) |
|||
} else if (res.cancel) { |
|||
console.log('用户点击取消') |
|||
} |
|||
} |
|||
}) |
|||
} else { |
|||
this.setData({ |
|||
dialogVisible: !this.data.dialogVisible, |
|||
dialogTitle: "志愿者认证", |
|||
dialogContent: ["是否前往认证志愿者"], |
|||
dialogConfirmText: "是", |
|||
dialogCancelText: "否" |
|||
}) |
|||
} |
|||
} |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// tab 切换
|
|||
onTabChange (e) { |
|||
this.setData({ |
|||
selectTab: e.currentTarget.dataset.tab, |
|||
pageIndex: 1 |
|||
}) |
|||
|
|||
if (e.currentTarget.dataset.tab == "tab1") { |
|||
this.setData({ |
|||
list: [], |
|||
nodata: false |
|||
}) |
|||
let params = { |
|||
pageIndex: 1, |
|||
pageSize: 10, |
|||
timestamp: getTimestamp(), |
|||
actType: 0, |
|||
qkdat: true, |
|||
sponsor: '', |
|||
selectedTab: 'tab0', |
|||
teamId: this.data.teamId |
|||
} |
|||
this.selectComponent("#state-0").getActivityList(params) |
|||
} else { |
|||
this.setData({ |
|||
list: [], |
|||
}) |
|||
this.getTeamVolunteerList() |
|||
} |
|||
}, |
|||
// 通过判断列表的长度断定是否显示加载中
|
|||
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 |
|||
}) |
|||
}, |
|||
// 团队详情
|
|||
getAppTeamDetail () { |
|||
api.getAppTeamDetail({ id: this.data.teamId }).then(res => { |
|||
this.setData({ |
|||
teamDetail: res.data |
|||
}) |
|||
}) |
|||
}, |
|||
// 团队成员列表
|
|||
|
|||
// 获取团队列表
|
|||
getTeamVolunteerList () { |
|||
const para = { |
|||
pageIndex: this.data.pageIndex, |
|||
pageSize: this.data.pageSize, |
|||
id: this.data.teamId |
|||
} |
|||
api.getTeamVolunteerList(para).then(res => { |
|||
this.setData({ |
|||
list: [...this.data.list,...res.data], |
|||
loadMoreType: res.data.length === this.data.pageSize ? 'loading' : 'none', |
|||
loadMoreVisible: res.data.length === this.data.pageSize ? false : true, |
|||
nodata: false, |
|||
}) |
|||
if (this.data.list.length == 0) { |
|||
this.setData({ |
|||
nodata: true, |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false, |
|||
}) |
|||
} |
|||
}).catch(err => { |
|||
this.setData({ |
|||
list: [], |
|||
nodata: true, |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false, |
|||
}) |
|||
console.log(err) |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,11 @@ |
|||
{ |
|||
"navigationBarTitleText": "团队介绍", |
|||
"navigationStyle": "custom", |
|||
"navigationBarTextStyle": "white", |
|||
"usingComponents": { |
|||
"activity": "/components/activity/activity", |
|||
"coverview-dialog": "../../components/coverViewDialog/coverViewDialog", |
|||
"load-more": "/components/loadMore/loadMore", |
|||
"no-data": "/components/nodata/nodata" |
|||
} |
|||
} |
|||
@ -0,0 +1,62 @@ |
|||
<wxs module="filter" src="../../../../utils/filter.wxs"></wxs> |
|||
<view class="header" style="height: {{statusHeight + navigationHeight}}px;"> |
|||
<image class="header-bg" src="../../images/team-top-bar.png" /> |
|||
<view class="navigation" style="height: {{navigationHeight}}px; top: {{statusHeight}}px;"> |
|||
<view class="goback" bindtap="goback"> |
|||
<image src="../../images/goback.png" /> |
|||
</view> |
|||
<view class="title" bindtap="goback"> |
|||
<view class="title-right">团队介绍</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="top" style="margin-top: {{statusHeight + navigationHeight}}px"> |
|||
<view class="top-bg"> |
|||
<image class="top-bg-img" src="../../images/team-top-bg.png" /> |
|||
<view class="top-text"> |
|||
<view class="top-text-title">{{teamDetail.teamName}}</view> |
|||
<view class="top-text-desc">{{filter.getHtmlContent(teamDetail.content)}}</view> |
|||
</view> |
|||
<image class="top-button" src="../../images/join-team.png" bindtap="joinTeam" wx:if="{{!teamDetail.joinFlag}}"/> |
|||
</view> |
|||
</view> |
|||
<view class="content"> |
|||
<!-- tabbar --> |
|||
<view class="tab-bar"> |
|||
<view class="tab tab1 {{selectTab === 'tab1' ? 'select-tab' : ''}}" data-tab="tab1" bindtap="onTabChange">团队活动</view> |
|||
<view class="tab tab2 {{selectTab === 'tab2' ? 'select-tab' : ''}}" data-tab="tab2" bindtap="onTabChange">团队成员</view> |
|||
<view class="select-bar {{selectTab}}"></view> |
|||
</view> |
|||
|
|||
<view class="team-active-list" wx:if="{{selectTab === 'tab1'}}"> |
|||
<activity bind:toActDetail="toActDetailDown" id="state-0" state="0"></activity> |
|||
</view> |
|||
<view class="team-member-list" wx:else> |
|||
<view class="list-left"> |
|||
<block wx:for="{{list}}" wx:key="index"> |
|||
<view class="member-item" wx:if="{{index % 2 == 0}}"> |
|||
<image class="member-img" src="{{item.faceImg}}" /> |
|||
<view class="member-name">{{item.realName}}</view> |
|||
<view class="member-intro">{{item.introduce}}</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
<view class="list-right"> |
|||
<block wx:for="{{list}}" wx:key="index"> |
|||
<view class="member-item" wx:if="{{index % 2 == 1}}"> |
|||
<image class="member-img" src="{{item.faceImg}}" /> |
|||
<view class="member-name">{{item.realName}}</view> |
|||
<view class="member-intro">{{item.introduce}}</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<coverview-dialog bind:confirm="confirmDialog" dialogVisible="{{dialogVisible}}" title="{{dialogTitle}}" |
|||
content="{{dialogContent}}" confirmText="{{dialogConfirmText}}" cancelText="{{dialogCancelText}}"> |
|||
</coverview-dialog> |
|||
|
|||
<load-more loadMoreType="{{loadMoreType}}" loadMoreVisible="{{loadMoreVisible}}"></load-more> |
|||
|
|||
<no-data isShow="{{nodata}}"></no-data> |
|||
@ -0,0 +1,193 @@ |
|||
page { |
|||
background-color: #f7f7f7; |
|||
} |
|||
/* 自定义标题栏 start */ |
|||
.header { |
|||
position: fixed; |
|||
width: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 999; |
|||
} |
|||
.header .header-bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
z-index: 10; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.header .navigation { |
|||
display: flex; |
|||
align-items: center; |
|||
position: relative; |
|||
z-index: 100; |
|||
} |
|||
.header .navigation .goback { |
|||
width: 40rpx; |
|||
padding-left: 14rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 100%; |
|||
} |
|||
.header .navigation .goback image { |
|||
width: 16rpx; |
|||
height: 28rpx; |
|||
} |
|||
.header .navigation .title { |
|||
display: flex; |
|||
align-items: center; |
|||
width: calc(100% - 46rpx); |
|||
margin-left: 46rpx; |
|||
color: rgba(255, 255, 255, 0.9); |
|||
font-size: 32rpx; |
|||
letter-spacing: 2rpx; |
|||
} |
|||
/* 自定义标题栏 end */ |
|||
.top { |
|||
width: 100%; |
|||
} |
|||
.top-bg { |
|||
width: 100%; |
|||
height: 280rpx; |
|||
box-sizing: border-box; |
|||
padding-top: 16rpx; |
|||
position: relative; |
|||
} |
|||
.top-bg .top-bg-img { |
|||
width: 100%; |
|||
height: 110%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
.top-bg .top-text { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 10; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 0 30rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.top-bg .top-text .top-text-title { |
|||
font-size: 52rpx; |
|||
color: #ffffff; |
|||
margin-bottom: 48rpx; |
|||
} |
|||
.top-bg .top-text .top-text-desc { |
|||
font-size: 30rpx; |
|||
color: #ffffff; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-wrap:break-word; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 3; |
|||
display: -webkit-box; |
|||
} |
|||
.top-bg .top-button { |
|||
width: 140rpx; |
|||
height: 60rpx; |
|||
position: absolute; |
|||
right: 0; |
|||
z-index: 11; |
|||
} |
|||
/* tab bar start */ |
|||
|
|||
.tab-bar { |
|||
width: 100%; |
|||
height: 90rpx; |
|||
background: #fff; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
position: relative; |
|||
padding: 0 40rpx; |
|||
box-sizing: border-box; |
|||
border-radius: 16rpx 16rpx 0rpx 0rpx; |
|||
margin-bottom: 18rpx; |
|||
} |
|||
|
|||
.tab-bar .tab { |
|||
flex: 1; |
|||
height: 90rpx; |
|||
line-height: 90rpx; |
|||
text-align: center; |
|||
width: 50%; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
|
|||
.tab-bar .select-tab { |
|||
color: #E50F00; |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.tab-bar .select-bar { |
|||
width: 40rpx; |
|||
height: 8rpx; |
|||
border-radius: 5rpx; |
|||
background: #E50F00; |
|||
position: absolute; |
|||
bottom: 0rpx; |
|||
} |
|||
|
|||
.tab-bar .select-bar.tab1 { |
|||
left: 25%; |
|||
transition: left linear 0.4s; |
|||
} |
|||
|
|||
.tab-bar .select-bar.tab2 { |
|||
left: calc(75% - 35rpx); |
|||
transition: left linear 0.4s; |
|||
} |
|||
/* tab bar end */ |
|||
.content .team-member-list { |
|||
display: flex; |
|||
padding: 0 25rpx; |
|||
} |
|||
.team-member-list .member-item { |
|||
width: 320rpx; |
|||
min-height: 282rpx; |
|||
margin: 20rpx 15rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background-color: #fff; |
|||
border-radius: 20rpx; |
|||
} |
|||
.member-item .member-img { |
|||
width: 110rpx; |
|||
height: 110rpx; |
|||
background-color: #909090; |
|||
margin-top: 40rpx; |
|||
border-radius: 50%; |
|||
} |
|||
.member-item .member-name { |
|||
font-size: 30rpx; |
|||
color: #333333; |
|||
margin-top: 20rpx; |
|||
} |
|||
.member-item .member-intro { |
|||
font-size: 26rpx; |
|||
color: #c1c1c1; |
|||
margin: 18rpx 0 36rpx; |
|||
width: 85%; |
|||
text-align: center; |
|||
/* overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-wrap:break-word; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 3; |
|||
display: -webkit-box; */ |
|||
} |
|||
@ -0,0 +1,142 @@ |
|||
const api = require('../../utils/api') |
|||
const typePageSize = 99 |
|||
const typePageIndex = 1 |
|||
Page({ |
|||
data: { |
|||
pageIndex: 1, |
|||
pageSize: 10, |
|||
nodata: false, |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false, |
|||
selectBarLeft: 0, |
|||
teamCategoryList: [], |
|||
volunteerTeamList: [], |
|||
typeCode: '', // 当前类别code
|
|||
}, |
|||
onLoad: function (options) { |
|||
|
|||
}, |
|||
onShow: function () { |
|||
this.setData({ |
|||
pageIndex: 1, |
|||
volunteerTeamList: [] |
|||
}) |
|||
const _this = this |
|||
const query = wx.createSelectorQuery().in(this) |
|||
this.getTeamTypeList().then(getType => { |
|||
if (getType) { |
|||
query.select('#item1').boundingClientRect() |
|||
query.exec(function(res){ |
|||
_this.setData({ |
|||
selectBarLeft: res[0].width/2 |
|||
}) |
|||
console.log(_this.data.selectBarLeft) |
|||
}) |
|||
this.getAppTeamListByType() |
|||
} else { |
|||
|
|||
} |
|||
}) |
|||
}, |
|||
onReachBottom: function () { |
|||
this.setData({ |
|||
loadMoreVisible: true |
|||
}) |
|||
if (this.data.loadMoreType === "loading") { |
|||
this.setData({ |
|||
pageIndex: this.data.pageIndex + 1 |
|||
}) |
|||
this.getAppTeamListByType() |
|||
} |
|||
}, |
|||
// 前往团队介绍
|
|||
toTeamDetail (e) { |
|||
let id = e.currentTarget.dataset.id |
|||
wx.navigateTo({ |
|||
url: `../teamIntroduction/teamIntroduction?id=${id}` |
|||
}) |
|||
}, |
|||
// 分类导航切换
|
|||
onChangeClassifyTab (e) { |
|||
let code = e.currentTarget.dataset.code |
|||
this.data.teamCategoryList.forEach((item, index) => { |
|||
if (index === e.currentTarget.dataset.tab) { |
|||
item.select = true |
|||
const _this = this |
|||
const query = wx.createSelectorQuery().in(this) |
|||
query.select(`#item${index + 1}`).boundingClientRect() |
|||
query.exec(function(res){ |
|||
_this.setData({ |
|||
selectBarLeft: res[0].width/2 |
|||
}) |
|||
console.log(_this.data.selectBarLeft) |
|||
}) |
|||
} else { |
|||
item.select = false |
|||
} |
|||
}) |
|||
this.setData({ |
|||
teamCategoryList: this.data.teamCategoryList, |
|||
typeCode: code, |
|||
pageIndex: 1, |
|||
volunteerTeamList: [] |
|||
}, () => { |
|||
this.getAppTeamListByType() |
|||
}) |
|||
}, |
|||
// 获取团队类别列表
|
|||
getTeamTypeList () { |
|||
let param = { |
|||
pageSize : typePageSize, |
|||
pageIndex : typePageIndex, |
|||
teamId: '' |
|||
} |
|||
return new Promise ((resolve, reject) => { |
|||
api.getTeamTypeList(param).then(res => { |
|||
if (res.code == 0 && res.msg == 'success') { |
|||
res.data[0].select = true |
|||
this.setData({ |
|||
teamCategoryList: res.data, |
|||
typeCode: res.data[0].typeCode |
|||
}) |
|||
resolve(true) |
|||
} |
|||
reject(false) |
|||
}).catch(err => { |
|||
reject(false) |
|||
}) |
|||
}) |
|||
}, |
|||
// 获取团队列表
|
|||
getAppTeamListByType () { |
|||
const para = { |
|||
pageIndex: this.data.pageIndex, |
|||
pageSize: this.data.pageSize, |
|||
typeCode: this.data.typeCode |
|||
} |
|||
api.getAppTeamListByType(para).then(res => { |
|||
console.log(res) |
|||
this.setData({ |
|||
volunteerTeamList: [...this.data.volunteerTeamList,...res.data], |
|||
loadMoreType: res.data.length === this.data.pageSize ? 'loading' : 'none', |
|||
loadMoreVisible: res.data.length === this.data.pageSize ? false : true, |
|||
nodata: false, |
|||
}) |
|||
if (this.data.volunteerTeamList.length == 0) { |
|||
this.setData({ |
|||
nodata: true, |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false, |
|||
}) |
|||
} |
|||
}).catch(err => { |
|||
this.setData({ |
|||
volunteerTeamList: [], |
|||
nodata: true, |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false, |
|||
}) |
|||
console.log(err) |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,7 @@ |
|||
{ |
|||
"navigationBarTitleText": "志愿团队", |
|||
"usingComponents": { |
|||
"load-more": "/components/loadMore/loadMore", |
|||
"no-data": "/components/nodata/nodata" |
|||
} |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
<view class="volunteer-team"> |
|||
<scroll-view class="classify-tab" scroll-x="{{true}}"> |
|||
<view class="tab-list"> |
|||
<view |
|||
class="item {{item.select ? 'select' : ''}}" |
|||
id="{{'item' + (index + 1)}}" |
|||
wx:for="{{teamCategoryList}}" |
|||
wx:for-item="item" |
|||
wx:for-index="index" |
|||
data-tab="{{index}}" |
|||
data-code="{{item.typeCode}}" |
|||
bindtap="onChangeClassifyTab" |
|||
wx:key="index"> |
|||
{{item.typeName}} |
|||
<view style="left: calc({{selectBarLeft}}px - 15rpx)" wx:if="{{item.select}}" class="select-bar"></view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="volunteer-list"> |
|||
<block wx:for="{{volunteerTeamList}}" wx:key="index"> |
|||
<view class="volunteer-item" bindtap="toTeamDetail" data-id="{{item.id}}"> |
|||
<view class="volunteer-title">{{item.teamName}}</view> |
|||
<image class="volunteer-icon" src="../../images/ic_jinruxiayiye@2x.png"/> |
|||
</view> |
|||
<view class="list-line" wx:if="{{index < volunteerTeamList.length - 1}}"></view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
|
|||
<load-more loadMoreType="{{loadMoreType}}" loadMoreVisible="{{loadMoreVisible}}"></load-more> |
|||
|
|||
<no-data isShow="{{nodata}}"></no-data> |
|||
@ -0,0 +1,91 @@ |
|||
page { |
|||
background-color: #f7f7f7; |
|||
} |
|||
.classify-tab { |
|||
width: 100%; |
|||
height: 90rpx; |
|||
border-bottom: 1rpx solid #eaeaea; |
|||
background-color: #fff; |
|||
padding: 0rpx 20rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
::-webkit-scrollbar{ |
|||
width: 0; |
|||
height: 0; |
|||
color: transparent; |
|||
display:none; |
|||
} |
|||
.classify-tab .tab-list { |
|||
width: auto; |
|||
min-width: 100%; |
|||
height: 90rpx; |
|||
display: flex; |
|||
} |
|||
.tab-list .item { |
|||
height: 90rpx; |
|||
color: #ababab; |
|||
font-size: 30rpx; |
|||
margin: 0 20rpx; |
|||
line-height: 90rpx; |
|||
flex-shrink: 0; |
|||
position: relative; |
|||
width: 150rpx; |
|||
text-align: center; |
|||
} |
|||
.tab-list .item.select { |
|||
color: #FF4848; |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
.tab-list .item:first-child { |
|||
margin-left: 0; |
|||
} |
|||
.tab-list .item:last-child { |
|||
margin-right: 0; |
|||
} |
|||
.classify-tab .tab-list .item .select-bar { |
|||
width: 30rpx; |
|||
height: 8rpx; |
|||
border-radius: 4rpx; |
|||
background: #FF4848; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
/* list */ |
|||
|
|||
.volunteer-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background-color: #fff; |
|||
margin-top: 20rpx; |
|||
} |
|||
.volunteer-list .volunteer-item { |
|||
width: 690rpx; |
|||
height: 110rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.volunteer-list .volunteer-item .volunteer-title { |
|||
width: 650rpx; |
|||
font-size: 34rpx; |
|||
color: #333333; |
|||
overflow: hidden; |
|||
text-overflow:ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
.volunteer-list .volunteer-item .volunteer-icon { |
|||
width: 22rpx; |
|||
height: 22rpx; |
|||
} |
|||
.volunteer-list .list-line { |
|||
width: 690rpx; |
|||
height: 1px; |
|||
background-color: #eeeeee; |
|||
border-radius: 1px; |
|||
opacity: 0.7; |
|||
} |
|||
Loading…
Reference in new issue