<view>
<!-- 搜尋框 -->
<view class="inp-box">
<van-search value="{{ searchVal }}" placeholder="請輸入名稱" use-action-slot bind:change="searchInp">
<view style="color: #ff6700;" slot="action" bind:tap="searchClick">搜尋</view>
</van-search>
</view>
<!-- tab切換 -->
<view class="node-tab">
<view class="tab-item {{currentTab == 0 ? 'active' : ''}}" data-current="0" bindtap="changeNav">全部</view>
<view class="tab-item {{currentTab == 1 ? 'active' : ''}}" data-current="1" bindtap="changeNav">我參與</view>
<view class="tab-item {{currentTab == 2 ? 'active' : ''}}" data-current="2" bindtap="changeNav">我釋出</view>
</view>
<swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="changeTab" style="height:{{winHeight}}rpx">
<!-- 全部 -->
<swiper-item>
<scroll-view scroll-y="true" class="new-list-box" bindscrolltolower="allLoadMore" scroll-top='{{scrollTop}}' scroll-with-animation refresher-enabled="{{true}}" refresher-threshold="{{80}}" refresher-default-style="white" refresher-background="#ff6700" refresher-triggered="{{triggered}}" bindrefresherrefresh="onAllRefresh">
<block wx:if="{{allTabList.length > 0}}">
<view class="new-list-item" wx:for="{{allTabList}}" wx:key="index">
<view class="item-content" data-posid="{{item.id}}" catchtap="goDetails">
<view class="content-left">
<view class="dis-flex-between">
<view class="content-title">{{item.name}}</view>
<view style="min-width: 130rpx;">
<view class="list-tag-item">{{item.status}}</view>
</view>
</view>
<view class="content-des elli_psis">{{item.remark}}</view>
</view>
</view>
<view class="item-tag dis-flex-between">
<view class="content-deadline">發起人:{{item.providerName}}</view>
<view class="content-deadline">總金額:{{item.amount}}</view>
<view class="content-deadline">共{{item.count || 0}}人參與</view>
<!-- participationState; //0 為不可參與,隐藏按鈕,1為可以參與,2為過期或者未到期置灰 -->
<view wx:if="{{item.participationState === 1}}" class="content-right" data-posid="{{item.id}}" catchtap="joinTask">參與任務</view>
<view wx:if="{{item.participationState === 2}}" class="content-right content-right-is-no">參與任務</view>
</view>
</view>
</block>
<view wx:if="{{allTabList.length >= recordCount}}" class="no-data-txt" bindtap="pScrollTo">沒有更多資料了</view>
</scroll-view>
</swiper-item>
<!-- 我參與 -->
<swiper-item>
<scroll-view scroll-y="true" class="new-list-box" bindscrolltolower="allLoadMore" scroll-top='{{scrollTop}}' scroll-with-animation refresher-enabled="{{true}}" refresher-threshold="{{80}}" refresher-default-style="white" refresher-background="#ff6700" refresher-triggered="{{triggered}}" bindrefresherrefresh="onAllRefresh">
<block wx:if="{{myAttendList.length > 0}}">
<view class="new-list-item" wx:for="{{myAttendList}}" wx:key="index">
<view class="item-content" data-posid="{{item.id}}" catchtap="toNodeDetails">
<view class="content-left">
<view class="dis-flex-between">
<view class="content-title">{{item.name}}</view>
<view style="min-width: 130rpx;">
<view class="list-tag-item">{{item.status}}</view>
</view>
</view>
<view class="content-des elli_psis">{{item.remark}}</view>
</view>
</view>
<view class="item-tag dis-flex-between">
<view class="content-deadline">發起人:{{item.providerName}}</view>
<view class="content-deadline">總金額:{{item.amount}}</view>
<view class="content-deadline">共{{item.count || 0}}人參與</view>
</view>
</view>
</block>
<view wx:if="{{myAttendList.length >= recordCount}}" class="no-data-txt" bindtap="pScrollTo">沒有更多資料了</view>
</scroll-view>
</swiper-item>
<!-- 我釋出 -->
<swiper-item>
<scroll-view scroll-y="true" class="new-list-box" bindscrolltolower="allLoadMore" scroll-top='{{scrollTop}}' scroll-with-animation refresher-enabled="{{true}}" refresher-threshold="{{80}}" refresher-default-style="white" refresher-background="#ff6700" refresher-triggered="{{triggered}}" bindrefresherrefresh="onAllRefresh">
<block wx:if="{{myPublishList.length > 0}}">
<view class="new-list-item" wx:for="{{myPublishList}}" wx:key="index">
<view class="item-content" data-posid="{{item.id}}" catchtap="toNodeDetails">
<view class="content-left">
<view class="dis-flex-between">
<view class="content-title">{{item.name}}</view>
<view style="min-width: 130rpx;">
<view class="list-tag-item">{{item.status}}</view>
</view>
</view>
<view class="content-des elli_psis">{{item.remark}}</view>
</view>
</view>
<view class="item-tag dis-flex-between">
<view class="content-deadline">發起人:{{item.providerName}}</view>
<view class="content-deadline">總金額:{{item.amount}}</view>
<view class="content-deadline">共{{item.count || 0}}人參與</view>
<view wx:if="{{item.participationState === 1}}" class="content-right" data-posid="{{item.id}}" catchtap="joinTask">參與任務</view>
<view wx:if="{{item.participationState === 2}}" class="content-right content-right-is-no">參與任務</view>
</view>
</view>
</block>
<view wx:if="{{myPublishList.length >= recordCount}}" class="no-data-txt" bindtap="pScrollTo">沒有更多資料了</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
let app = getApp();
let startPoint;
let tabName = ['allTabList', 'myAttendList', 'myPublishList']; // 清單名稱
Page({
onShow() {
this.getTabBar().init();
},
data: {
triggered: false,
searchVal: '', // 搜尋
winHeight: "",// 視窗高度
currentTab: 0, // 目前所在滑塊的 index
allTabList:[], // 全部
myAttendList:[], // 我參與
myPublishList:[], // 我釋出
scrollTop: 0, // 設定豎向滾動條位置
windowHeight: '',
windowWidth: '',
recordCount: 0, //清單總條數
pageNo: 1 //頁碼
},
onLoad: function(options) {
// 計算drawer高度,占滿window
let that = this;
// 高度自适應
wx.getSystemInfo({
success: function (res) {
let clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
let calc = (clientHeight - 50 - 54) * rpxR - 130;
// console.log(calc)
that.setData({
windowHeight: res.windowHeight,
windowWidth: res.windowWidth,
winHeight: calc
});
}
});
this._requestPageList(true);
},
// 參數
_requestPageList(isLoadMore = false, callback) {
// isLoadMore 為true是上拉加載,不需要置空數組
if(!isLoadMore){
this.setData({
allTabList:[], // 全部
myAttendList:[], // 我參與
myPublishList:[], // 我釋出
pageNo: 1
});
}
let opt = {
name: this.data.searchVal,
number: "", //任務編号
searchType: this.data.currentTab == 0 ? null : this.data.currentTab * 2, // null 全部 2我參與的 4我釋出的
}
this._requestPageListCom("virtualTaskList", opt, callback);
},
// 清單接口
_requestPageListCom(url, params, callback) {
let opt = Object.assign({}, params, {
pageData: {
pageNo: this.data.pageNo,
pageSize: 10
},
})
app.$request.post(app.$config[url], opt).then(res => {
if (res.returnResult === 200) {
let oldList = [];
if(this.data.currentTab == 0){
oldList = this.data.allTabList;
} else if(this.data.currentTab == 1){
oldList = this.data.myAttendList;
} else if(this.data.currentTab == 2){
oldList = this.data.myPublishList;
}
const newGoodsList = res.returnData.data
const allData = [...oldList, ...newGoodsList]
console.log(allData,'allData')
let newData = {}; // 新變更資料
for(let i in allData){
newData[`${tabName[this.data.currentTab]}[${i}]`] = allData[i];
}
this.setData(newData); // 指派清單資料
console.log(newData,'newData')
this.setData({
recordCount: res.returnData.recordCount
})
if(callback && typeof callback === 'function'){
callback()
}
}
})
},
// 輸入搜尋 event.detail 為目前輸入的值
searchInp(e) {
this.setData({
searchVal: e.detail
})
},
// 搜尋
searchClick(){
this._requestPageList();
},
// tip: 如果在 bindchange 的事件回調函數中使用 setData 改變 current 值,則有可能導緻 setData 被不停地調用,
// 因而通常情況下請在改變 current 值前檢測 source 字段來判斷是否是由于使用者觸摸引起 event.detail = {current, source}
// 滾動切換标簽樣式
changeTab: function (e) {
console.log(e,e.detail.current,'e') // 0 1 2
this.setData({
currentTab: e.detail.current
});
this._requestPageList();
},
// 點選标題切換目前頁時改變樣式
changeNav: function (e) {
let currentIndex = e.target.dataset.current;
if (this.data.currentTaB == currentIndex) {
return false;
} else {
this.setData({
currentTab: currentIndex
})
}
},
// 參與任務
joinTask:function(events){
let opt = {
id: events.currentTarget.dataset.posid
}
app.$request.post(app.$config.virtualTaskCheckIn, opt).then(res => {
if (res.returnResult === 200) {
wx.showToast({
title: '參與成功',
icon: 'none',
duration: 3000
})
// this._requestPageList();
}
})
},
// 詳情
goDetails:function(events){
let meetId = events.currentTarget.dataset.posid;
wx.navigateTo({
url: `../../taskDes/taskDes?id=${meetId}`
})
},
// 上拉加載 滾動到底部/右邊時觸發
allLoadMore(e){
let _self = this;
if (this._allLoadMore || _self.data[tabName[this.data.currentTab]].length >= _self.data.recordCount || _self.data.recordCount === 0) return
this._allLoadMore = true;
this.setData({
pageNo: ++_self.data.pageNo
});
this._requestPageList(true, () => {
_self._allLoadMore = false;
});
},
// 下拉重新整理接口
onAllRefresh() {
if (this._allFreshing) return
this._allFreshing = true
this._requestPageList(false, () => {
// 當處理完資料重新整理後,wx.stopPullDownRefresh可以停止目前頁面的下拉重新整理
this.setData({
triggered: false
})
this._allFreshing = false
});
},
pScrollTo(){
// 傳回頂部
this.setData({
scrollTop:0
});
}
})
{
"navigationBarBackgroundColor": "#ff6700",
"navigationBarTextStyle": "white",
"backgroundColor": "#ff6700",
"backgroundTextStyle":"light",
"navigationBarTitleText": "任務",
"usingComponents": {
"van-popup": "@vant/weapp/popup/index",
"van-button": "@vant/weapp/button/index",
"van-search": "@vant/weapp/search/index"
}
}
page{
background-color: #f3f6fb;
}
/* .inp-box{
padding:10rpx 20rpx 10rpx;
box-sizing: border-box;
position:relative;
background-color: #ffffff;
} */
.node-tab{
background-color: #ffffff;
height:88rpx;
font-size:28rpx;
line-height: 88rpx;
display: flex;
}
.node-tab .tab-item{
flex:1;
text-align: center;
color: #666;
}
.node-tab .active{
color: #ff6700;
position: relative;
}
.node-tab .active::before{
position:absolute;
content: " ";
bottom:10rpx;
left: 50%;
transform: translateX(-50%);
width: 30rpx;
height: 6rpx;
background-color: #ff6700;
border-radius: 3rpx;
}
.tab-content{
margin-top:20rpx;
}
.no-data{
text-align: center;
box-sizing: border-box;
padding-top:230rpx;
color: #999999;
}
/* 更新樣式 */
.node-tab {
position: relative;
}
.new-list-box {
height: 100%;
}
.new-list-item {
box-sizing:border-box;
/* height:260rpx; */
position: relative;
background-color: #fff;
margin-bottom: 20rpx;
padding: 20rpx 30rpx 0;
}
.new-list-item:last-child {
margin-bottom: 0;
}
.new-list-item view {
box-sizing: border-box;
}
.item-content {
display: flex;
justify-content: space-between;
border-bottom: 1rpx solid #eaeaea;
align-items: center;
position: relative;
}
.content-left {
width: 100%;
padding-bottom: 30rpx;
}
.content-left .content-title {
font-size: 32rpx;
color: #333;
}
.content-left .content-des {
font-size: 28rpx;
color: #666;
margin-top: 10rpx;
}
.content-deadline {
font-size: 24rpx;
color: #999;
}
.content-right {
width: 130rpx;
flex-shrink: 0;
height: 48rpx;
border: 1rpx solid #ff6700;
color: #ff6700;
border-radius: 8rpx;
font-size: 24rpx;
text-align: center;
line-height: 48rpx;
}
.content-right-is-no {
opacity: 0.8;
border-color: #999;
color: #999;
}
.item-tag {
padding: 10rpx 0 10rpx;
font-size: 24rpx;
}
.list-tag-item {
padding: 5rpx 12rpx;
text-align: center;
background-color: #e5efff;
border-radius: 4rpx;
margin-right: 10rpx;
color: #ff6700;
border-radius: 8rpx;
margin-bottom: 10rpx;
font-size: 24rpx;
}
.content-right.bg-green {
background-color:#e6ffca;
border-color: #e6ffca;
color:#ff6700;
margin-right: 20rpx;
}
.exchange-btn{
text-align: center;
margin: 10px 0 0;
}
.dialog-box{
font-size: 28rpx;
padding: 30rpx 30rpx 0;
}
.textarea_css{
margin-top: 15rpx;
color: #333;
height: 160px;
border: 1px solid #999;
border-radius: 6rpx;
padding: 20rpx;
}
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
.elli_psis{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.dis-flex-between{
display: flex;
justify-content: space-between;
align-items: center;
}
.dis-flex-center{
display: flex;
justify-content: center;
align-items: center;
}
.dis-flex-start{
display: flex;
justify-content: center;
}
.dis-flex-items{
display: flex;
align-items: center;
}
.dis-flex-column{
display: flex;
flex-direction:column;
justify-content: center;
}
.no-data-txt{
color: #ff6700;
font-size: 12px;
text-align: center;
margin: 10px 0;
}