<view class="task-page"> <!-- 切换菜单 --> <view class="t-menu"> <view class="t-menu-btn {{tabIndex ? '' : 'selected'}}" bindtap="changeTab" id="myTask"> <text>我的任务</text> </view> <view class="t-menu-btn {{tabIndex ? 'selected' : ''}}" bindtap="changeTab" id="hotTask"> <text>热门任务</text> </view> </view> <!-- 任务分类 --> <view class="t-inner"> <!-- 邀请码 --> <view class="invitation" bindtap="inputCode"> <text>填写邀请码</text> <image class="write" src="../../image/write.png"></image> </view> <view class="t-content-wrap"> <!-- 我的任务 --> <view id="myTaskList" class="t-content {{tabIndex ? '' : 't-content-show'}}"> <scroll-view scroll-y="true" style="height: 900rpx;"> <block wx:for-items="{{myTasks}}"> <view class="task-item-wrap"> <view class="task-item type{{item.state}}"> <view class="flag"></view> <view class="task-item-inner {{item.open ? 'task-info-show' : ''}}"> <view class="task-info" id="record_{{item._id}}" data-taskname="{{item.name}}" data-taskstart="{{item.startTime}}" data-taskend="{{item.endTime}}" bindtap="showRecord"> <!-- 进行时 --> <block wx:if="{{item.state == 0}}"> <view class="task-name"> <text>{{item.name}}</text> </view> <view class="cate-item"> <image class="cate-icon" src="../../image/icon_clock_red@3x.png"></image> <text>{{item.disTime}}</text> </view> <view class="cate-item"> <image class="cate-icon" src="../../image/icon_location_red@3x.png"></image> <text>{{item.address}}</text> </view> <view class="statistics"> <view class="statistics-cate"> <image class="cate-icon" src="../../image/icon_complete-person@3x.png"></image> <text class="num">{{item.signedNum}}</text> </view> <view class="statistics-cate"> <image class="cate-icon" src="../../image/icon_total-people@3x.png"></image> <text class="num">{{item.totalNum}}</text> </view> </view> </block> <!-- 已打卡 --> <block wx:if="{{item.state == 1}}"> <text class="task-name">{{item.name}}</text> <view class="cate-item"> <image class="cate-icon" src="../../image/icon_complete_green@3x.png"></image> <text>已打卡</text> </view> <view class="cate-item"> <image class="cate-icon" src="../../image/icon_location_green@3x.png"></image> <text>{{item.address}}</text> </view> <view class="statistics"> <view class="statistics-cate"> <image class="cate-icon" src="../../image/icon_complete-person@3x.png"></image> <text class="num">{{item.signedNum}}</text> </view> <view class="statistics-cate"> <image class="cate-icon" src="../../image/icon_total-people@3x.png"></image> <text class="num">{{item.totalNum}}</text> </view> </view> </block> <!-- 已请假 --> <block wx:if="{{item.state == 2}}"> <text class="task-name">{{item.name}}</text> <view class="cate-item"> <image class="cate-icon" src="../../image/icon_complete_green@3x.png"></image> <text>已请假</text> </view> <view class="cate-item"> <image class="cate-icon" src="../../image/icon_location_green@3x.png"></image> <text>{{item.address}}</text> </view> <view class="statistics"> <view class="statistics-cate"> <image class="cate-icon" src="../../image/icon_complete-person@3x.png"></image> <text class="num">{{item.signedNum}}</text> </view> <view class="statistics-cate"> <image class="cate-icon" src="../../image/icon_total-people@3x.png"></image> <text class="num">{{item.totalNum}}</text> </view> </view> </block> <!-- 将来时 --> <block wx:if="{{item.state == 3}}"> <view class="task-name"> <text>{{item.name}}</text> </view> <view class="cate-item"> <image class="cate-icon" src="../../image/icon_clock_yellow@3x.png"></image> <text>任务开始日期{{item.startTime}}</text> </view> </block> <!-- 过去时 --> <block wx:if="{{item.state == 4}}"> <view class="task-name"> <text>{{item.name}}</text><text>【已过期】</text> </view> </block> </view> <view class="task-icon" id="{{item._id}}" bindtap="taskToggle"> <image class="more" src="../../image/icon_more@3x.png"></image> </view> </view> </view> <view class="{{item.open ? 'task-item-controls-show' : 'task-item-controls-hide'}}"> <view class="task-item-controls"> <view class="fun" bindtap="myDeatil" id="info_{{item._id}}"> <image class="icon info" src="../../image/icon_info@3x.png"></image> </view> <view class="fun" bindtap="shareTask" id="share_{{item._id}}"> <image class="icon share" src="../../image/icon_share@3x.png"></image> </view> <view class="fun" bindtap="taskDelete" id="task_{{item._id}}"> <image class="icon delete" src="../../image/icon_delete@3x.png"></image> </view> <!--<view class="fun"> <image class="icon top" src="../../image/icon_top@3x.png"></image> </view>--> </view> </view> </view> </block> </scroll-view> </view> <!-- 热门任务 --> <view id="hotTaskList" class="t-content {{tabIndex ? 't-content-show' : ''}}"> <scroll-view scroll-y="true" style="height: 920rpx;"> <block wx:if="{{hotTasks.length == 0}}"> <view class="empty-tips"> <text>暂无热门任务</text> </view> </block> <block wx:else> <block wx:for-items="{{hotTasks}}" wx:for-index="idx"> <view class="task-item-wrap"> <view class="task-item"> <view class="task-item-inner {{item.open ? 'task-info-show' : ''}}"> <view class="task-info" id="task_{{item._id}}" bindtap="hotDeatil"> <view class="task-name"> <text>{{item.name}}</text> </view> <view class="cate-item"> <image class="cate-icon" src="../../image/icon_location_red@3x.png"></image> <text>{{item.address}}</text> </view> <view class="statistics"> <view class="statistics-cate"> <image class="cate-icon" src="../../image/icon_total-people@3x.png"></image> <text class="num">{{item.userList.length}}</text> </view> </view> </view> <view class="task-icon" id="{{idx}}_{{item._id}}" bindtap="haddleHotTask"> <image class="more" src="{{item.added ? '../../image/added.png' : '../../image/add_green.png'}}"></image> </view> </view> </view> </view> </block> </block> </scroll-view> </view> </view> </view> </view> |
.task-page{ display: flex; flex-direction: column; justify-content:space-between; height: 100%; width: 100%; overflow: hidden; } .t-menu{ flex: none; display: flex; flex-direction: row; justify-content:space-between; background-color: #fff; border-bottom: 1px solid #f0f0f0; height: 80rpx; } .t-menu-btn{ display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 50%; font-size: 32rpx; } .selected{ color: #2fcc85; border-bottom: 1px solid #2fcc85; } .t-inner{ display: flex; flex-direction: column; justify-content:space-between; height: 100%; padding: 0 26rpx; } .invitation{ flex: none; display: flex; flex-direction: row; justify-content:space-between; align-items: center; background-color: #2fcc85; height: 80rpx; padding: 0 40rpx; margin-top: 30rpx; font-size: 36rpx; color: #fff; border-radius: 10rpx; } .write{ width: 43rpx; height: 40rpx; } .t-content-wrap{ display: flex; flex-direction: row; justify-content: space-between; width: 100%; height: 100%; } .t-content{ margin-top: 20rpx; width: 100%; display: none; } .t-content-show{ display: block; } .new-task{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: #fff; font-size: 36rpx; font-weight: bold; height: 114rpx; border-radius: 10rpx; background-color: #2fcc85; padding: 0 40rpx; margin-top: 30rpx; } .new-task .txt{ display: flex; flex-direction: column; justify-content: center; } .new-task .add{ width: 44rpx; height: 44rpx; } .task-icon{ display: flex; flex-direction: column; justify-content: center; } .task-icon .more{ width: 44rpx; height: 44rpx; transition: transform .4s; } .task{ flex: 1; display: flex; flex-direction: column; margin: 20rpx 0 30rpx; } .task-item-wrap{ margin-bottom: 20rpx; width: 100%; } .task-item{ display: flex; flex-direction: row; justify-content: space-between; border: 1px solid #f0f0f0; border-radius: 10rpx; background-color: #fff; overflow: hidden; } .type0 .flag{ background-color: #fb7a7a; } .type1 .flag{ background-color: #2fcc85; } .type2 .flag{ background-color: #facb5b; } .type3 .flag{ background-color: #facb5b; } .type4 .flag{ background-color: #b2b2b2; } .type3 .task-name{ color: #b2b2b2; } .task-item .flag{ width: 16rpx; } .task-item-inner{ flex: 1; display: flex; flex-direction: row; justify-content: space-between; padding: 28rpx 40rpx 28rpx 24rpx; } .task-info{ width: 560rpx; } .task-info-show .task-icon .more{ transform: rotate(-180deg); } .task-name{ font-size: 36rpx; font-weight: 400; line-height: 56rpx; color:#676767; } .cate-item{ display: flex; flex-direction: row; align-items: center; height: 46rpx; } .cate-item text{ height: 46rpx; line-height: 46rpx; width: 520rpx; overflow: hidden } .cate-item .cate-icon{ width: 40rpx; height: 40rpx; } .statistics{ display: flex; flex-direction: row; align-items: center; height: 42rpx; margin-top: 7rpx; } .statistics-cate{ display: flex; flex-direction: row; align-items:flex-end; color: #b2b2b2; margin-right: 40rpx; font-size: 32rpx; line-height: 38rpx; } .statistics-cate .cate-icon{ width: 42rpx; height: 42rpx; margin-right: 5rpx; } .task-item-controls{ display: flex; flex-direction: row; justify-content: space-around; align-items:center; height: 88rpx; margin-top: 10rpx; border: 1px solid #f0f0f0; border-radius: 10rpx; background-color: #fff; } .task-item-controls-show{ display: block; } .task-item-controls-hide{ display: none; } .task-item-controls .icon{ width: 44rpx; height: 44rpx; } .empty-tips{ display: flex; justify-content: center; align-items: center; height: 100rpx; } |
var util = require('../../utils/util.js'); var app = getApp(); Page({ data: { tabIndex: 0, myTasks: [], hotTasks: [], userInfo: {}, openId: '' }, // tab menu 切换 changeTab: function (e) { var id = e.currentTarget.id; var that = this; if (id == 'myTask') { this.setData({ tabIndex: 0 }) } if (id == 'hotTask') { this.setData({ tabIndex: 1 }) } }, // 跳转输入口令 inputCode: function () { wx.navigateTo({ url: '/pages/invitation/invitation', success: function(res){ // success }, fail: function() { // fail }, complete: function() { // complete } }) }, // 更新我的任务列表 updateTask: function (openId) { var that = this; wx.request({ url: 'https://www.cpcsign.com/api/task', data: { openId: openId }, method: 'GET', success: function(res){ // success var now = new Date(); var tasks = res.data.data.sort(function (a, b) { return a.state - b.state }); console.log(tasks); for (var i = 0, len = tasks.length; i < len; ++i) { if (tasks[i].state == 0) { var sign; var nowDate = util.getYMD(now); var time_str = nowDate + ' ' + tasks[i].signTime + ':00'; sign = new Date(time_str.replace(/-/g, '/')); var disTime = Math.abs(now.getTime() - sign.getTime()); // 倒计时状态 : // 已迟到状态 tasks[i].disTime = (now.getTime() < sign.getTime() ? '距离签到还有': '您已经迟到') + (Math.floor(disTime/(3600*1000)) > 0 ? (util.formatNumber(Math.floor(disTime/(3600*1000))) + '小时' + util.formatNumber(Math.floor(disTime%(3600*1000)/(60*1000))) + '分钟') : (util.formatNumber(Math.floor(disTime%(3600*1000)/(60*1000))) + '分钟')) } if (tasks[i].state == 3) { tasks[i].disTime = Math.floor(disTime/(3600*1000*24)) } } that.setData({ myTasks: tasks }); } }) }, // 删除任务 taskDelete: function (e) { var taskid = e.currentTarget.id.split('_')[1]; var openId = wx.getStorageSync('openId'); var deleteUrl = 'https://www.cpcsign.com/api/task/' + taskid + '/' + openId; var that = this; wx.showModal({ title: '删除操作', content: '您确定要删除这条打卡任务吗?', success: function(res) { if (res.confirm) { wx.request({ url: deleteUrl, data: {}, method: 'DELETE', success: function(res){ // success that.updateTask(openId); wx.showToast({ title: '删除成功', icon: 'success', duration: 1000 }) } }) } } }); }, // 显示控制面板 taskToggle: function (e) { var id = e.currentTarget.id, list = this.data.myTasks; for (var i = 0, len = list.length; i < len; ++i) { if (list[i]._id == id) { list[i].open = !list[i].open; } else { list[i].open = false; } } this.setData({ myTasks: list }); }, // 分享任务 shareTask: function (e) { var taskId = e.currentTarget.id.split('_')[1]; wx.navigateTo({ url: '/pages/task/share/share?taskID=' + taskId, success: function(res){ // success }, fail: function() { // fail }, complete: function() { // complete } }) }, // 跳转到记录页 showRecord: function (e) { var taskId = e.currentTarget.id.split('_')[1]; var dataset = e.currentTarget.dataset; var taskName = dataset.taskname; var taskStart = dataset.taskstart; var taskEnd = dataset.taskend; console.log(e); wx.navigateTo({ url: '/pages/record/record?taskID=' + taskId + '&taskName='+ taskName + '&taskStart='+ taskStart +'&taskEnd='+ taskEnd, success: function(res){ // success }, fail: function() { // fail }, complete: function() { // complete } }) }, // 跳转我的任务详情页 myDeatil: function (e) { var taskId = e.currentTarget.id.split('_')[1]; wx.navigateTo({ url: '/pages/detail/detail?taskID=' + taskId, success: function(res){ // success }, fail: function() { // fail }, complete: function() { // complete } }) }, // 跳转热门任务详情页 hotDeatil: function (e) { var taskId = e.currentTarget.id.split('_')[1]; wx.navigateTo({ url: '/pages/add/add?taskID=' + taskId, success: function(res){ // success }, fail: function() { // fail }, complete: function() { // complete } }) }, // 热门任务 haddleHotTask: function (e) { var openId = wx.getStorageSync('openId'); var userInfo = this.data.userInfo; var id = e.currentTarget.id; var index = id.split('_')[0]; var taskId = id.split('_')[1]; var list = this.data.hotTasks; var that = this; wx.showToast({ title: '请求中', icon: 'loading', duration: 10000 }); if (list[index].added) { wx.request({ url: 'https://www.cpcsign.com/api/task/' + taskId + '/' + openId, data: {}, method: 'DELETE', success: function(res){ for (var i = 0, len = list.length; i < len; ++i) { if (index == i) { list[i].added = !list[i].added; } } that.setData({ hotTasks: list }) wx.showToast({ title: '您已加入', icon: 'success', duration: 1000 }) } }) } else { wx.request({ url: 'https://www.cpcsign.com/api/task/' + taskId, data: { openId: openId, nickName: userInfo.nickName, avatarUrl: userInfo.avatarUrl }, method: 'PUT', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // 设置请求的 header success: function(res){ for (var i = 0, len = list.length; i < len; ++i) { if (index == i) { list[i].added = !list[i].added; } } that.setData({ hotTasks: list }) wx.showToast({ title: '您已退出', icon: 'success', duration: 1000 }) }, fail: function() { // fail }, complete: function() { // complete } }) } }, onShow: function () { var that = this; this.updateTask(this.data.openId); }, // 初始化设置 onLoad: function () { var that = this; var openId = wx.getStorageSync('openId'); var hotTasks = this.data.hotTasks; app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }); that.setData({ openId: openId }) }); for (var i = 0, len = hotTasks.length; i < len; ++i) { hotTasks[i].added = false; for (var j = 0, l = hotTasks[i].userList.length; j < l; ++j) { if (hotTasks[i].userList[j].openId == openId) { hotTasks[i].added = true; break; } } } that.setData({ hotTasks: hotTasks }) } }) |
模板简介:该模板名称为【微信小程序包含邀请码的任务列表样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。