微信小程序包含邀请码的任务列表样式模板制作设计下载 立即下载
首页 > 小程序教程 > 微信小程序包含邀请码的任务列表样式模板制作设计下载

微信小程序包含邀请码的任务列表样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下：
一、wxml页面代码如下：
<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>
 
二、wxss样式文件代码如下：
.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;
}
三、js页面代码如下：
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
    })
  }

})

模板简介：该模板名称为【微信小程序包含邀请码的任务列表样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
立即下载
  • 下载密码 lanrenmb
  • 下载次数 26,174次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-12
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信模板 微信素材 微信文章 响应式 自适应 微信公众平台 html5 单页式简历模板 微信图片 企业网站
您可能会喜欢的其他模板
我如何删除一个特定的项目从一个数组?
我如何删除一个特定的项目从一个数组?
01-18 632
立即下载
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
01-10 710
立即下载
微信小程序新湘会会员问题发布页面设计制作开发教程
微信小程序新湘会会员问题发布页面设计制作开发教程
08-02 11,951
立即下载
微信小程序金忠食品个人页面设计制作开发教程
微信小程序金忠食品个人页面设计制作开发教程
08-02 10,307
立即下载
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
09-02 16,752
立即下载
微信小程序购物会场个人中心页面设计制作开发教程
微信小程序购物会场个人中心页面设计制作开发教程
09-02 24,533
立即下载
懒人模板 关于我们| 在线投稿| 广告合作| 免责声明| 联系我们
备案号：鄂ICP备19006660号-6 鄂公网安备42011302000988号 懒人模板-Copyright © 2023 版权所有