吴亚瑞 / basicEnglish · 提交

转到一个项目

作者 xuyangjie
提交 51d4126c24d5d10ec8648f2c683e2bd8727e6948 1 个父辈 e713d436

补卡任务对接

内嵌 并排对比
正在显示 4 个修改的文件 包含 259 行增加 和 8 行删除
1 // pages/eight/eight.js 1 // pages/eight/eight.js
  2 +const app = getApp()
2 Page({ 3 Page({
3 4
4 /** 5 /**
5 * 页面的初始数据 6 * 页面的初始数据
6 */ 7 */
7 data: { 8 data: {
8 - sbox: [{ 9 + data_arr:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],//周
  10 + year:"",//当前年
  11 + month:"",//当前月份
  12 + today:'',//当前选中的日期
  13 + fixed_today:'',//当前日期
  14 + sbox: [{ // 打卡任务列表
9 img: '/img/ic_date_dangri@2x.png', 15 img: '/img/ic_date_dangri@2x.png',
10 text: '当日任务', 16 text: '当日任务',
11 bool: true 17 bool: true
@@ -22,7 +28,8 @@ Page({ @@ -22,7 +28,8 @@ Page({
22 } 28 }
23 ] 29 ]
24 }, 30 },
25 - gotoday(){ 31 + gotoday(e){
  32 + var data = e.currentTarget.dataset.id;
26 wx.redirectTo({ 33 wx.redirectTo({
27 url: '/pages/mission/mission', 34 url: '/pages/mission/mission',
28 }) 35 })
@@ -41,9 +48,95 @@ Page({ @@ -41,9 +48,95 @@ Page({
41 * 生命周期函数--监听页面加载 48 * 生命周期函数--监听页面加载
42 */ 49 */
43 onLoad: function (options) { 50 onLoad: function (options) {
44 - 51 + let now = new Date()//获取年
  52 + let year = now.getFullYear()//获取月
  53 + let today = now.getDate()//获取月
  54 + let fixed_today = now.getDate()//获取月
  55 + // month获取是从 0~11
  56 + let month = now.getMonth() + 1
  57 + this.setData({
  58 + year,month,today,
  59 + fixed_today
  60 + })
  61 + this.showCalendar()
  62 + this.DayList()
  63 + },
  64 + showCalendar(){
  65 + let {year,month} = this.data
  66 + //以下两个month已经+1
  67 + let currentMonthDays = new Date(year,month,0).getDate() //获取当前月份的天数
  68 + let calendar = []
  69 + // for(var i=1;i <= currentMonthDays; i++){
  70 + // ({
  71 + // "date": i, //日期
  72 + // "TodayStatus": null, //今日任务状态 打卡类型:2=未打卡,1=正常打卡,0=补卡 null是没有今日任务
  73 + // "TodayId": null,//今日任务ID null是没有今日任务 用于今日任务状态未未打卡状态时 去补卡
  74 + // "MatchId": null, //比赛任务ID 用户判断当日是否有比赛任务 null未没有 不为空 则有
  75 + // "EvaluationId": null //测评任务ID 用户判断当日是否有测评任务 null未没有 不为空 则有
  76 + // })
  77 + // }
  78 + let startWeek = new Date(year + '/' + month + '/' + 1).getDay(); //本月第一天是从星期几开始的
  79 + this.setData({
  80 + currentMonthDays,startWeek,calendar
  81 + })
  82 + },
  83 + DayList(){
  84 + var that = this;
  85 + var month = this.data.year + '-' + this.data.month
  86 + app.post("index/DayList", {month}).then(res => {
  87 + if(res.code == 1){
  88 + //打卡 补卡状态
  89 + let calendar = []
  90 + //相应日期的任务列表
  91 + var sbox = [];
  92 + res.data.forEach((val,ind) => {
  93 + //打卡 补卡状态判断
  94 + if(val.TodayStatus == 1){
  95 + val.clock = 'clock';//正常打卡
  96 + }else if(val.TodayStatus == 0){
  97 + val.clock = 'no_clock';//缺卡
  98 + }else{
  99 + val.clock = ''
  100 + }
  101 + val.day = ind+1;
  102 + calendar.push(val)
  103 + //相应日期的任务列表判断
  104 + if(val.day == this.data.today){
  105 + if(val.TodayId){
  106 + sbox.push({
  107 + img: '/img/ic_date_dangri@2x.png',
  108 + text: '当日任务',
  109 + id:val.TodayId
  110 + })
  111 + }
  112 + if(val.MatchId){
  113 + sbox.push({
  114 + img: '/img/ic_date_dangri@2x.png',
  115 + text: '比赛任务',
  116 + id:val.MatchId
  117 + })
  118 + }
  119 + if(val.EvaluationId){
  120 + sbox.push({
  121 + img: '/img/ic_date_dangri@2x.png',
  122 + text: '测评任务',
  123 + id:val.EvaluationId
  124 + })
  125 + }
  126 + }
  127 + })
  128 + that.setData({
  129 + calendar,
  130 + sbox
  131 + })
  132 + }
  133 + }).catch(err => {
  134 + wx.showToast({
  135 + title: err.msg,
  136 + icon: 'none'
  137 + })
  138 + })
45 }, 139 },
46 -  
47 /** 140 /**
48 * 生命周期函数--监听页面初次渲染完成 141 * 生命周期函数--监听页面初次渲染完成
49 */ 142 */
@@ -91,5 +184,39 @@ Page({ @@ -91,5 +184,39 @@ Page({
91 */ 184 */
92 onShareAppMessage: function () { 185 onShareAppMessage: function () {
93 186
  187 + },
  188 + //切换日期 打卡任务
  189 + handoffDate(e){
  190 + let sbox = []
  191 + var data = e.currentTarget.dataset.item;
  192 + if(this.data.fixed_today < data.day){
  193 + return
  194 + }
  195 + if(data.TodayId){
  196 + sbox.push({
  197 + img: '/img/ic_date_dangri@2x.png',
  198 + text: '当日任务',
  199 + id:data.TodayId
  200 + })
  201 + }
  202 + if(data.MatchId){
  203 + sbox.push({
  204 + img: '/img/ic_date_dangri@2x.png',
  205 + text: '比赛任务',
  206 + id:data.MatchId
  207 + })
  208 + }
  209 + if(data.EvaluationId){
  210 + sbox.push({
  211 + img: '/img/ic_date_dangri@2x.png',
  212 + text: '测评任务',
  213 + id:data.EvaluationId
  214 + })
  215 + }
  216 +
  217 + this.setData({
  218 + today:data.day,
  219 + sbox
  220 + })
94 } 221 }
95 }) 222 })
1 1
2 -<view>日历组件</view> 2 +<view class="context">
  3 + <!-- 当前月份 -->
  4 + <view class="top">
  5 + <view>{{year}}年{{month}}月</view>
  6 + </view>
  7 + <!-- 周 -->
  8 + <view class="middle">
  9 + <view wx:for="{{data_arr}}" wx:key="index" class="middle_num">
  10 + {{item}}
  11 + </view>
  12 + </view>
  13 + <!-- 日期 -->
  14 + <view class="calen">
  15 + <view wx:for="{{startWeek}}" wx:key="index" class="calen_blank"></view>
  16 + <view wx:for="{{calendar}}"
  17 + bindtap="handoffDate"
  18 + data-item="{{item}}"
  19 + class='{{index+1 == today ? "active": "calen_num"}}'
  20 + wx:key="index">
  21 + <text class="{{item.day > fixed_today ? 'today_after' : ''}}">{{item.day}}</text>
  22 + <view class="{{item.clock}}">
  23 +
  24 + </view>
  25 + </view>
  26 + </view>
  27 +</view>
  28 +
3 <view class="line" wx:for="{{sbox}}" wx:key="id"> 29 <view class="line" wx:for="{{sbox}}" wx:key="id">
4 <view style="display:flex;flex:1;align-items:center"> 30 <view style="display:flex;flex:1;align-items:center">
5 <image src="{{item.img}}"></image> 31 <image src="{{item.img}}"></image>
6 <view>{{item.text}}</view> 32 <view>{{item.text}}</view>
7 </view> 33 </view>
8 - <view bindtap="dianji" data-bool="{{item.bool}}" data-index="{{index}}">  
9 - <view class="{{item.bool?'buka':' buka yibuka'}}" bindtap="gotoday">{{item.bool?'打卡':'已打卡'}}</view> 34 + <view bindtap="dianji" data-id="{{item.id}}" data-index="{{index}}">
  35 + <view class="buka" bindtap="gotoday">打卡</view>
10 </view> 36 </view>
  37 + <!-- <view bindtap="dianji" data-bool="{{item.bool}}" data-index="{{index}}">
  38 + <view class="{{item.bool?'buka':' buka yibuka'}}" bindtap="gotoday">{{item.bool?'打卡':'已打卡'}}</view>
  39 + </view> -->
11 </view> 40 </view>
1 page { 1 page {
2 background: #f8f8f8; 2 background: #f8f8f8;
  3 + padding-bottom: 100rpx;
3 } 4 }
4 5
5 .line { 6 .line {
@@ -14,6 +15,7 @@ page { @@ -14,6 +15,7 @@ page {
14 margin-top: 24rpx; 15 margin-top: 24rpx;
15 border-radius: 32rpx; 16 border-radius: 32rpx;
16 align-items: center; 17 align-items: center;
  18 + padding: 0 32rpx;
17 } 19 }
18 20
19 /* .line view:first-child { 21 /* .line view:first-child {
@@ -39,4 +41,91 @@ page { @@ -39,4 +41,91 @@ page {
39 .yibuka{ 41 .yibuka{
40 background: rgb(189, 187, 187); 42 background: rgb(189, 187, 187);
41 color: #fff; 43 color: #fff;
42 -}  
  44 +}
  45 +
  46 +/* 日历样式 */
  47 +.context{
  48 + width: 100%;
  49 + background-color: #fff;
  50 + margin: 0 auto;
  51 + }
  52 + .top{
  53 + height: 80rpx;
  54 + display: flex;
  55 + justify-content: space-around;
  56 + }
  57 + .top image{
  58 + height: 30rpx;
  59 + width: 30rpx;
  60 + }
  61 + .top view{
  62 + font-size: 28rpx;
  63 + }
  64 + .middle{
  65 + display: flex;
  66 + padding: 14rpx 18rpx;
  67 + box-shadow: 0rpx 20rpx 20rpx rgb(238, 238, 238);
  68 + }
  69 + .middle_num{
  70 + width: 107rpx;
  71 + display: flex;
  72 + justify-content: center;
  73 + align-items: center;
  74 + font-size: 24rpx;
  75 + }
  76 + .calen{
  77 + display: flex;
  78 + /* height: 480rpx; */
  79 + padding: 18rpx 18rpx;
  80 + flex-wrap: wrap; /* 必要的时候拆行或拆列。 */
  81 + }
  82 + .calen_blank{
  83 + width: 102rpx;
  84 + height: 102rpx;
  85 + /* background-color: pink; */
  86 + }
  87 + .calen_num{
  88 + width: 102rpx;
  89 + height: 102rpx;
  90 + display: flex;
  91 + justify-content: center;
  92 + align-items: center;
  93 + font-size: 32rpx;
  94 + }
  95 + .active{
  96 + background-color: #FFFAEF;
  97 + width: 102rpx;
  98 + height: 102rpx;
  99 + display: flex;
  100 + justify-content: center;
  101 + align-items: center;
  102 + border-radius: 40rpx;
  103 + border: 1rpx solid #FFC83D;
  104 + }
  105 +
  106 + .clock{
  107 + width: 8rpx;
  108 + height: 8rpx;
  109 + opacity: 1;
  110 + border-radius: 50%;
  111 + background: rgba(255,200.09,61.2,1)
  112 + }
  113 + .no_clock{
  114 + width: 8rpx;
  115 + height: 8rpx;
  116 + opacity: 1;
  117 + border-radius: 50%;
  118 + background: rgba(139,139,141,1)
  119 + }
  120 + .calen>view{
  121 + position: relative;
  122 + }
  123 + .calen>view>view{
  124 + position: absolute;
  125 + bottom: 20rpx;
  126 + left: 50%;
  127 + margin-left: -4rpx;
  128 + }
  129 + .today_after{
  130 + color: #C4C4C4;
  131 + }
@@ -551,6 +551,12 @@ @@ -551,6 +551,12 @@
551 "pathName": "pages/requre/requre", 551 "pathName": "pages/requre/requre",
552 "query": "goods_data=%7B%22goods_id%22%3A3%2C%22image%22%3A%22http%3A%2F%2Fenglish.brofirst.cn%2Fuploads%2F20210715%2F8bb3479d5444f4c45de0ae8e449a2b9d.png%22%2C%22title%22%3A%22%E9%98%BF%E8%8B%A5%E6%8B%89%E9%A3%9E%E6%9C%BA%22%2C%22number%22%3A10%7D", 552 "query": "goods_data=%7B%22goods_id%22%3A3%2C%22image%22%3A%22http%3A%2F%2Fenglish.brofirst.cn%2Fuploads%2F20210715%2F8bb3479d5444f4c45de0ae8e449a2b9d.png%22%2C%22title%22%3A%22%E9%98%BF%E8%8B%A5%E6%8B%89%E9%A3%9E%E6%9C%BA%22%2C%22number%22%3A10%7D",
553 "scene": null 553 "scene": null
  554 + },
  555 + {
  556 + "name": "pages/eight/eight",
  557 + "pathName": "pages/eight/eight",
  558 + "query": "",
  559 + "scene": null
554 } 560 }
555 ] 561 ]
556 } 562 }