微信小程序新建打卡任务详细页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<!-- 新建任务 -->
<view class="add-page">

    <view class="mod-a">
        <!-- 任务名称 -->
        <view class="mod t-name">
            <text class="key">任务名称</text>
            <input bindinput="bindKeyInput" class="input" maxlength="100" placeholder="请输入任务名称" />
            <image class="arrow-r" src="../../image/arrow-r-0.png"></image>
        </view>         
    </view>

    <view class="mod-a mt20">
        <!-- 任务地点 -->
        <view class="mod t-address" bindtap="chooseLocation">
            <text class="key">任务地点</text>
            <text class="value">{{task.address}}</text>
            <image class="arrow-r" src="../../image/arrow-r-0.png"></image>
        </view>

        <!-- 打卡时间 -->
        <view class="mod t-sign-time">
            <text class="key">打卡时间</text>
            
            <picker mode="time" value="{{task.signTime}}" bindchange="setSignTime">
                <view class="value">{{task.signTime}}<image class="arrow-r" src="../../image/arrow-r-0.png"></image></view>
            </picker>
            
            
        </view>

        <!-- 最早打卡时间 -->
        <view class="mod t-early">
            <text class="key">最早可打卡时间</text>
            <text class="value">{{task.signEarlyTime}}</text>
        </view>

    </view>

    <view class="mod-a mt20">
        <!-- 起始时间 -->
        <view class="mod t-time">
            <view class="start">
                <text class="key">开始于</text>
                <picker mode="date" value="{{task.startDay}}" start="{{task.startDay}}" bindchange="startDateChange">
                    <view class="date">{{task.startDay}}<image class="arrow-d" src="../../image/arrow-d-0.png"></image></view>
                </picker>
            </view>
            <view class="pipe"></view>
            <view class="end">
                <text class="key">结束于</text>
                <picker mode="date" value="{{task.endDay}}" start="{{task.endDay}}" bindchange="endDateChange">
                    <view class="date">{{task.endDay}}<image class="arrow-d" src="../../image/arrow-d-0.png"></image></view>
                </picker>
            </view>
        </view>

        <!-- 重复日 -->
        <view class="mod days">
            <view class="key">
                <text>重复日</text>
            </view>
            <view class="week">
                <text id="monday" bindtap="changeMonday" class="d {{task.repeat.monday ? 'on' : ''}}">一</text>
                <text id="tuesday" bindtap="changeTuesday" class="d {{task.repeat.tuesday ? 'on' : ''}}">二</text>
                <text id="wednesday" bindtap="changeWednesday" class="d {{task.repeat.wednesday ? 'on' : ''}}">三</text>
                <text id="thursday" bindtap="changeThursday" class="d {{task.repeat.thursday ? 'on' : ''}}">四</text>
                <text id="friday" bindtap="changeFriday" class="d {{task.repeat.friday ? 'on' : ''}}">五</text>
                <text id="saturday" bindtap="changeSaturday" class="d {{task.repeat.saturday ? 'on' : ''}}">六</text>
                <text id="sunday" bindtap="changeSunday" class="d {{task.repeat.sunday ? 'on' : ''}}">日</text>
            </view>
        </view>
    </view>

    <!-- 我的昵称 -->
    <view class="mod-a mt20">
        <view class="mod my-nick">
            <text>我的昵称</text>
            <text>{{userInfo.nickName}}</text>
        </view>
    </view>

    <!-- 创建按钮 -->
    <view class="create">
        <button class="btn {{creating ? 'disabled' : ''}}" bindtap="bindSubmit">{{button.txt}}</button>
    </view>
    
    <!-- 提示信息 -->
    <modal confirm-text="确定"no-confirm  no-cancel hidden="{{modalHidden}}" mask bindconfirm="modalChange">
        请完善新建任务信息
    </modal>

</view>

二、wxss样式文件代码如下：

.mt20{
  margin-top: 20rpx;
}

.add-page{
  display: flex;
  flex-direction: column;
  font-size: 32rpx;
  color: #676767;
  padding: 30rpx 0;
}

.mod-a{
  padding: 0 20rpx;
  border: 1px solid #f0f0f0;
  background-color: #fff;
}

.mod{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 90rpx;
  padding: 0 20rpx;
}

.arrow-r{
  width: 9rpx;
  height: 17rpx;
  margin-left: 10rpx;
}
.arrow-d{
  width: 17rpx;
  height: 9rpx;
  margin-left: 10rpx;
}

.value{
  color: #b2b2b2;
}
.t-sign-time .value{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.t-early .value{
  padding-right: 20rpx;
}
.t-name .input, .t-address .value{
  text-align: right;
  width: 510rpx;
  overflow: hidden;
  color: #b2b2b2;
  height: 44rpx;
}

.t-address, .t-sign-time, .t-time{
  border-bottom: 1px solid #f0f0f0;
}

.t-time{
  justify-content:space-around;
}
.start, .end{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.pipe{
  height: 48rpx;
  border-left: 1px solid #f0f0f0;
}
.date{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 10rpx;
  color: #2fcc85;
}
.week{
  display: flex;
  flex-direction: row;
  justify-content:space-around;
  align-items: center;
}
.week .d{
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background-color: #b2b2b2;
  text-align: center;
  color: #fff;
  margin: 0 15rpx;
}
.week .on{
  background-color: #2fcc85;
}
.create{
  margin-top: 80rpx;
  padding: 0 26rpx;
}
.create .btn{
  height: 80rpx;
  line-height: 80rpx;
  background-color: #2fcc85;
  color: #fff;
}
.create .button-hover{
  background-color: #2caf6d;
  color: #aadfc4;
}

.create .disabled{
  opacity: 0.4
}

三、js页面代码如下：

var util = require('../../utils/util.js');
var app = getApp();

Page({
  data: {
    task: {
      name: '',
      address: '点击选择地点',
      signTime: '00:00',
      signEarlyTime: '00:00',
      startDay: '2016-11-00',
      endDay: '2016-11-00',
      repeat: {
        'monday': 1,
        'tuesday': 1,
        'wednesday': 1,
        'thursday': 1,
        'friday': 1,
        'saturday': 0,
        'sunday': 0
      }
    },
    openId: '',
    userInfo: {},
    creating: false,
    button: {
      txt: '新建'
    },
    modalHidden: true
  },

  // 设置任务名称
  bindKeyInput: function (e) {
    this.setData({
      'task.name': e.detail.value
    });
  },

  // 设置任务地点
  chooseLocation: function () {
    var that = this;

    wx.chooseLocation({
      success: function(res){
        that.setData({
          'task.address': res.address,
          'task.latitude': res.latitude,
          'task.longitude': res.longitude
        })
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },

  // 设置打卡时间
  setSignTime: function (e) {
    var that = this;
    var hour = ((+e.detail.value.slice(0, 2) + 24 - 2) % 24).toString();
    that.setData({
      'task.signTime': e.detail.value,
      'task.signEarlyTime': (hour[1] ? hour : '0' + hour) + ':' + e.detail.value.slice(3, 5)
    });
  },
  
  // 设置开始日期
  startDateChange: function (e) {
    this.setData({
      'task.startDay': e.detail.value
    })
  },

  // 设置结束日期
  endDateChange: function (e) {
    this.setData({
      'task.endDay': e.detail.value
    })
  },

  // 设置重复日
  changeMonday: function (e) {
    var state = this.data.task.repeat.monday;
    this.setData({
      'task.repeat.monday': (state == 1 ? 0 : 1) 
    });
  },
  changeTuesday: function (e) {
    var state = this.data.task.repeat.tuesday;
    this.setData({
      'task.repeat.tuesday': (state == 1 ? 0 : 1) 
    });
  },
  changeWednesday: function (e) {
    var state = this.data.task.repeat.wednesday;
    this.setData({
      'task.repeat.wednesday': (state == 1 ? 0 : 1) 
    });
  },
  changeThursday: function (e) {
    var state = this.data.task.repeat.thursday;
    this.setData({
      'task.repeat.thursday': (state == 1 ? 0 : 1) 
    });
  },
  changeFriday: function (e) {
    var state = this.data.task.repeat.friday;
    this.setData({
      'task.repeat.friday': (state == 1 ? 0 : 1) 
    });
  },
  changeSaturday: function (e) {
    var state = this.data.task.repeat.saturday;
    this.setData({
      'task.repeat.saturday': (state == 1 ? 0 : 1) 
    });
  },
  changeSunday: function (e) {
    var state = this.data.task.repeat.sunday;
    this.setData({
      'task.repeat.sunday': (state == 1 ? 0 : 1) 
    });
  },

  // 隐藏提示弹层
  modalChange: function (e) {
    this.setData({
      modalHidden: true
    })
  },

  // 创建任务
  createTask: function () {
    var that = this;
    var task = this.data.task;
    var openId = this.data.openId;
    var userInfo = this.data.userInfo;

    wx.showToast({
      title: '新建中',
      icon: 'loading',
      duration: 10000
    });

    wx.request({
      url: 'https://www.cpcsign.com/api/task',
      data: {
        name: task.name,
        address: task.address,
        startTime: task.startDay,
        endTime: task.endDay,
        signTime: task.signTime,
        latitude: task.latitude,
        longitude: task.longitude,
        repeat: {
          'monday': task.repeat.monday,
          'tuesday': task.repeat.tuesday,
          'wednesday': task.repeat.wednesday,
          'thursday': task.repeat.thursday,
          'friday': task.repeat.friday,
          'saturday': task.repeat.saturday,
          'sunday': task.repeat.sunday
        },
        userInfo: {
          openId: openId,
          nickName: userInfo.nickName,
          avatarUrl: userInfo.avatarUrl

        }
      },
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {
        'Content-Type': 'application/json'
      }, // 设置请求的 header
      success: function(res){
        // success

        wx.hideToast();
        
        var command = res.data.taskID;

        wx.navigateTo({
          url: '/pages/new/success/success?command=' + command,
          success: function(res){
            // success
          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
          }
        })
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },

  // 提交、检验
  bindSubmit: function (e) {
    var that = this;
    var task = this.data.task;
    var creating = this.data.creating;

    if (task.name == '' || task.address == '点击选择地点' ) {
      this.setData({
        modalHidden: false
      });
    } else {
      if (!creating) {
        this.setData({
          'creating': true
        });
        that.createTask();
      }
    }
  },
  
  onShow: function () {
    // 恢复新建按钮状态
    this.setData({
      'creating': false
    });
  },

  onHide: function () {
  },

  // 初始化设置
  onLoad: function () {
    var that = this;
    var now = new Date();
    var openId = wx.getStorageSync('openId');

    // 初始化打卡时间
    that.setData({
      'task.signTime': util.getHM(now),
      'task.signEarlyTime': util.getHM(new Date(now.getTime() - 1000 * 3600 * 2))
    });
    
    // 初始化日期
    that.setData({
      'task.startDay': util.getYMD(now),
      'task.endDay': util.getYMD(now)
    });


    // 初始化昵称
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      });

      that.setData({
        openId: openId
      })
    });

  }  
})

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