任务明细页面
This commit is contained in:
limqhz
194
pages/task/index.js
Normal file
194
pages/task/index.js
Normal file
@@ -0,0 +1,194 @@
|
||||
// pages/task/index.js
|
||||
const app = getApp();
|
||||
import ActionSheet, { ActionSheetTheme } from '../../components/action-sheet/index';
|
||||
let pageStart = 1;
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
tapCheckHandle: undefined,
|
||||
dateVisible: true,
|
||||
aIconList: ['check-rectangle', 'star-filled', 'notification', 'info-circle'],
|
||||
taskList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'},{'taskId':'2','title':'标题德外旗舰店2','note':'2022-11-11'}],
|
||||
todayList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'},{'taskId':'2','title':'标题德外旗舰店2','note':'2022-11-11'}],
|
||||
delayList: [{'taskId':'1','title':'si哦大家艾吉奥是我','note':'2022-11-11','complete':true,'notification':false},
|
||||
{'taskId':'2','title':'si哦大家艾吉奥是2321','note':'2022-11-11','complete':true,'notification':true},
|
||||
{'taskId':'3','title':'打SD卡我怕','note':'2022-11-11','complete':true,'notification':true},
|
||||
{'taskId':'4','title':'标无间道i文件舰店1','note':'2022-11-11','complete':true,'notification':false},
|
||||
{'taskId':'5','title':'标题大家啊我i家1','note':'2022-11-11','complete':false,'notification':true},
|
||||
{'taskId':'6','title':'标题德外而我却','note':'2022-11-11','complete':true,'notification':true},
|
||||
{'taskId':'7','title':'标题德外旗额我去问1','note':'2022-11-11','complete':false,'notification':true},
|
||||
{'taskId':'8','title':'千而万请问确京东卡来接我i的骄傲问你，我就是准备看看最棒的是的多长定德外旗舰店1','note':'2022-11-11','complete':true,'notification':true},
|
||||
{'taskId':'9','title':'标请问请问破千万1','note':'2022-11-11','complete':true,'notification':true},
|
||||
{'taskId':'10','title':'标而且我请问请问1','note':'2022-11-11','complete':true,'notification':true},
|
||||
{'taskId':'11','title':'代欧王大炮物品代码','note':'2022-11-11','complete':true,'notification':true},
|
||||
{'taskId':'12','title':'到ID我们','note':'2022-11-11','complete':true,'notification':true},
|
||||
{'taskId':'13','title':'我去哦额陪娃欧美大片请我们','note':'2022-11-11','complete':true,'notification':true},
|
||||
{'taskId':'14','title':'请问哦气雾剂群殴','note':'2022-11-11','complete':true,'notification':true}
|
||||
],
|
||||
duration: 300, // swiper-item 切换过渡时间
|
||||
categoryCur: 0, // 当前数据列索引
|
||||
categoryMenu: ['任务清单','收藏任务','延期任务'], // 分类菜单数据, 字符串数组格式
|
||||
categoryData: [], // 所有数据列
|
||||
},
|
||||
getList(type, currentPage) {
|
||||
let currentCur = this.data.categoryCur;
|
||||
let pageData = this.getCurrentData(currentCur);
|
||||
if (pageData.end) return;
|
||||
pageData.requesting = true;
|
||||
this.setCurrentData(currentCur, pageData);
|
||||
wx.showLoading({
|
||||
title: '请稍候...',
|
||||
mask: true,
|
||||
})
|
||||
app.$api.taskList({}).then(res =>{
|
||||
this.setData({
|
||||
taskList:res.data.taskList,
|
||||
})
|
||||
let data = res.data || {
|
||||
taskList: [],
|
||||
over: false
|
||||
};
|
||||
let listData = this.data.delayList || [];
|
||||
pageData.requesting = false;
|
||||
if (type === 'refresh') {
|
||||
pageData.listData = listData;
|
||||
pageData.end = data.over;
|
||||
pageData.page = currentPage + 1;
|
||||
} else {
|
||||
pageData.listData = pageData.listData.concat(listData);
|
||||
pageData.end = data.over;
|
||||
pageData.page = currentPage + 1;
|
||||
}
|
||||
this.setCurrentData(currentCur, pageData);
|
||||
})
|
||||
},
|
||||
// 更新页面数据
|
||||
setCurrentData(currentCur, pageData) {
|
||||
let categoryData = this.data.categoryData
|
||||
categoryData[currentCur] = pageData
|
||||
this.setData({
|
||||
categoryData: categoryData
|
||||
})
|
||||
},
|
||||
// 获取当前激活页面的数据
|
||||
getCurrentData() {
|
||||
return this.data.categoryData[this.data.categoryCur]
|
||||
},
|
||||
// 顶部tab切换事件
|
||||
toggleCategory(e) {
|
||||
this.setData({
|
||||
duration: 0
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
categoryCur: e.detail.index
|
||||
});
|
||||
}, 0);
|
||||
},
|
||||
// 页面滑动切换事件
|
||||
animationFinish(e) {
|
||||
this.setData({
|
||||
duration: 300
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
categoryCur: e.detail.current
|
||||
});
|
||||
let pageData = this.getCurrentData();
|
||||
if (pageData.listData.length === 0) {
|
||||
this.getList('refresh', pageStart);
|
||||
}
|
||||
}, 0);
|
||||
},
|
||||
// 刷新数据
|
||||
refresh() {
|
||||
this.getList('refresh', pageStart);
|
||||
},
|
||||
// 加载更多
|
||||
more() {
|
||||
this.getList('more', this.getCurrentData(this.data.categoryCur).page);
|
||||
},
|
||||
changeCheck(e){
|
||||
let currentCur = this.data.categoryCur;
|
||||
let categoryData = this.getCurrentData();
|
||||
let currentCheck = categoryData.listData;
|
||||
currentCheck.forEach(x => {
|
||||
if (x.taskId == e.target.dataset.id){
|
||||
x.complete = e.detail.checked;
|
||||
//TODO 请求,将完成状态更新
|
||||
}
|
||||
});
|
||||
this.setCurrentData(currentCur,categoryData);
|
||||
},
|
||||
handleAction(e) {
|
||||
let itemId = e.currentTarget.dataset.id;
|
||||
let items = [];
|
||||
items.push({
|
||||
label: '配置',
|
||||
operate: '0',
|
||||
dataId: itemId,
|
||||
});
|
||||
if (e.currentTarget.dataset.notify){
|
||||
items.push({
|
||||
label: '取消提醒',
|
||||
operate: '1',
|
||||
dataId: itemId,
|
||||
disabled: !e.currentTarget.dataset.notify,
|
||||
});
|
||||
}
|
||||
items.push({
|
||||
label: '删除',
|
||||
operate: '2',
|
||||
dataId: itemId,
|
||||
color: '#e34d59',
|
||||
});
|
||||
this.data.tapCheckHandle = ActionSheet.show({
|
||||
theme: ActionSheetTheme.List,
|
||||
selector: '#t-action-sheet',
|
||||
context: this,
|
||||
items: items
|
||||
});
|
||||
},
|
||||
handleSelected(e) {
|
||||
let operate = e.detail.selected.operate;
|
||||
let dataId = e.detail.selected.dataId;
|
||||
if (operate == 0){
|
||||
//进入详情页面 TODO
|
||||
wx.navigateTo({
|
||||
url: '/pages/taskDetail/index?id=' + dataId
|
||||
});
|
||||
}
|
||||
if (operate == 1){
|
||||
//取消提醒 //TODO
|
||||
}
|
||||
if (operate == 2){
|
||||
//删除 TODO
|
||||
}
|
||||
},
|
||||
selectCancel() {
|
||||
this.data.tapCheckHandle.close();
|
||||
},
|
||||
onLoad() {
|
||||
let categoryData = [];
|
||||
this.data.categoryMenu.forEach(index =>{
|
||||
categoryData.push({
|
||||
categoryCur: index,
|
||||
requesting: false,
|
||||
end: false,
|
||||
emptyShow: false,
|
||||
page: pageStart,
|
||||
listData: []
|
||||
});
|
||||
})
|
||||
this.setData({
|
||||
categoryData
|
||||
});
|
||||
// 第一次加载延迟 350 毫秒 防止第一次动画效果不能完全体验
|
||||
setTimeout(() => {
|
||||
this.refresh();
|
||||
}, 350);
|
||||
}
|
||||
})
|
||||
9
pages/task/index.json
Normal file
9
pages/task/index.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"foot-tab": "../foot-tab/foot-tab",
|
||||
"tab": "../../components/tab/index",
|
||||
"scroll": "../../components/scroll/index",
|
||||
"t-action-sheet": "../../components/action-sheet/action-sheet",
|
||||
"t-fab": "../../components/fab/fab"
|
||||
}
|
||||
}
|
||||
51
pages/task/index.wxml
Normal file
51
pages/task/index.wxml
Normal file
@@ -0,0 +1,51 @@
|
||||
<!--pages/task/index.wxml-->
|
||||
<view class="top-wrap">
|
||||
<tab id="category"
|
||||
tab-data="{{categoryMenu}}"
|
||||
tab-cur="{{categoryCur}}"
|
||||
size="{{80}}"
|
||||
scroll="{{false}}"
|
||||
bindchange="toggleCategory">
|
||||
</tab>
|
||||
</view>
|
||||
|
||||
<swiper current="{{categoryCur}}" duration="{{duration}}" bindanimationfinish="animationFinish">
|
||||
<swiper-item wx:for="{{categoryData}}" wx:key="index">
|
||||
<scroll requesting="{{item.requesting}}"
|
||||
end="{{item.end}}"
|
||||
list-count="{{item.listData.length}}"
|
||||
has-top="{{true}}"
|
||||
refresh-size="{{80}}"
|
||||
bind:refresh="refresh"
|
||||
bind:more="more">
|
||||
<view class="cells">
|
||||
<view class="cell"
|
||||
wx:for="{{item.listData}}"
|
||||
wx:key="index"
|
||||
data-id="{{item.taskId}}"
|
||||
data-notify="{{item.notification}}"
|
||||
bind:longpress="handleAction">
|
||||
<view class="name">
|
||||
<t-checkbox wx:if="{{item.complete}}" borderless data-id="{{item.taskId}}" class="checkedBox" label="{{item.title}}" checked bind:change="changeCheck"/>
|
||||
<t-checkbox wx:else borderless data-id="{{item.taskId}}" label="{{item.title}}" bind:change="changeCheck"/>
|
||||
</view>
|
||||
<view class="remark">
|
||||
<!--截止时间-->
|
||||
<t-icon name="calendar"/>{{item.note}}
|
||||
<!--重复-->
|
||||
<t-icon wx:if="!{{item.repeat}}" name="refresh"/>
|
||||
<!--任务备注-->
|
||||
<t-icon wx:if="!{{item.repeat}}" name="books"/>
|
||||
<!--提醒-->
|
||||
<t-icon wx:if="{{item.notification}}" name="notification"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<t-fab icon="add" bind:click="handleClick"></t-fab>
|
||||
<t-action-sheet id="t-action-sheet" bind:selected="handleSelected" bind:cancel="selectCancel"/>
|
||||
<view>
|
||||
<foot-tab iconList="{{aIconList}}"/>
|
||||
</view>
|
||||
50
pages/task/index.wxss
Normal file
50
pages/task/index.wxss
Normal file
@@ -0,0 +1,50 @@
|
||||
/* pages/task/index.wxss */
|
||||
.top-wrap {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
z-index: 99;
|
||||
box-shadow: 0 0 20rpx -5rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
swiper {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.cells {
|
||||
background: #ffffff;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.cell {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.cell:not(:last-child) {
|
||||
border-bottom: 1rpx solid #ebedf0;
|
||||
}
|
||||
|
||||
.cell .name {
|
||||
overflow: hidden; /* 超出部分不显示 */
|
||||
height: 50rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
checkbox {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cell .remark {
|
||||
display: flex;
|
||||
align-items:center;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.checkedBox .t-checkbox__content {
|
||||
text-decoration:line-through;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user