update

css/qiandao.css

+#qiandaoBox .monthDiv{
+    margin-top: 0.5rem;
+    width: 100%;
+    height: 19rem;
+    position: relative;
+}
+#qiandaoBox .bottomDiv{
+    width: 80%;
+    margin: 1rem auto;
+    text-align: center;
+}
+#qiandaoBox .qiandaoBtn img{
+    width: 100%;
+}
+#qiandaoBox .bottomDiv .white{
+    color: #fff;
+    font-size: 1.1rem;
+}
+#qiandaoBox .bottomDiv .orange{
+    color: #FF8400;
+    font-size: 1.5rem;
+    margin:0 0.5rem;
+}
+#qiandaoBox .monthDiv .monthItem{
+    display: inline-block;
+    width: 12%;
+    height: 2.5rem;
+    margin-right:0.7%;
+    background: #FF8400;
+    position: relative;
+    text-align: center;
+    color: #fff;
+    margin-top: 0.8rem;
+}
+#qiandaoBox .monthDiv .monthItem .monthtop{
+    width: 100%;
+    height: 60%;
+    padding-top: 4%;
+    box-sizing: border-box;
+}
+#qiandaoBox .monthDiv .monthItem .monthbottom{
+    width: 100%;
+    height: 40%;
+    font-size: 0.5rem;
+}
+#qiandaoBox .monthDiv .monthItem .monthtop .wjx{
+    width: 50%;
+}
+#qiandaoBox .monthDiv .monthItem .grey{
+    background: #cccccc;
+}
+#qiandaoBox .monthDiv .monthItem .qiandaoImg{
+    position: absolute;
+    width: 0.8rem;
+    height: 0.8rem;
+    top: -0.2rem;
+    right: -0.2rem;
+}
+#qiandaoBox .monthDiv .monthItem .orange{
+    background: #FFF5B9;
+}

html/task/home.html

@@ -16,6 +16,7 @@
 	<title>暑期活动</title>
 	<link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon" />
 	<link rel="stylesheet" href="../../css/task.css">
+	<link rel="stylesheet" href="../../css/qiandao.css">
 	<link rel="stylesheet" href="../../css/bts/bootstrap.min.css">
 	<link rel="stylesheet" href="../../css/cssReset.css">
 </head>
@@ -198,10 +199,20 @@
       </div>
     </div>
   </div>
-  <!-- 签到 -->
-  <div id="qiandaoBox" class="none">
+  <!-- 签到class="none" -->
+  <div id="qiandaoBox">
     <div class="qiandaoBox_bg">
-      
+      <div class="monthDiv">
+      </div>
+      <div class="bottomDiv">
+          <div>
+            <img style="width:1rem;height: 1rem" src="../../images/task/ass/circle.png"></img>
+            <span class="white">本月已累计签到<span class="orange">8</span>天</span>
+            <img style="width:1rem;height: 1rem" src="../../images/task/ass/circle.png"></img></div>
+          <div class="qiandaoBtn" onclick="setSignTask()">
+            <img src="../../images/task/ass/qiandao_btn.png"></img>
+          </div>
+      </div>
     </div>
   </div>
   <!-- 商城 -->
@@ -229,33 +240,12 @@
 	<script type="text/javascript" src="../../js/awardRotate.js"></script>
 	<script type="text/javascript" src="../../js/bts/bootstrap.min.js"></script> 
 	<script type="text/javascript" src="../../js/autosize.js"></script>
+	<script type="text/javascript" src="../../js/qiandao.js"></script>
   <script> 
-    let TaskHistory = [], IceList = [], UserMaterials = [], activityId = 1, customerId = 1549, taskId = 26;
+    var  IceList = [], UserMaterials = [], activityId = 1, customerId = 1549, taskId = 26;
     // let url = 'http://efficient.oytour.com/'
-    let url = getApiUrl().urlJava
-    // 获取签到记录
-    function getQiandao(){
-      let msg = {
-        activityId: activityId,
-        customerId: customerId,
-        taskId: taskId
-      }
-      $.ajax({
-        type: "POST",
-        url: `${url}api/mactivity/getTaskHistory`,
-        contentType: "application/json",
-        data: getJavaData(msg),
-        async: false,
-        success: function (res) {
-          if (res.resultCode === 1) {
-            TaskHistory = res.data.data
-          }
-        },
-        error: function (res) {
-
-        }
-      })
-    }
+    var url = getApiUrl().urlJava;
+ 
     // 获取用户所有材料列表
     function getUserMaterials(){
       let msg = {

js/qiandao.js

+var url = getApiUrl().urlJava;
+var dayList=[],TaskHistory=[],activityId = 1, customerId = 1549, taskId = 26;
+let date = new Date();
+let newDate = date.getFullYear()+"-"+((date.getMonth()+1) < 9 ? '0' + (date.getMonth()+1) : date.getMonth()+1) + "-" + (date.getDate() < 9 ? '0' + date.getDate() : date.getDate() );
+let Year=date.getFullYear();
+let Month=date.getMonth()+1;
+let daynum=mGetDate(Year,Month)
+console.log("Year",newDate,Year,Month,daynum)    
+let qiandaonum=0;
+getQiandao();
+    // 获取签到记录
+    function getQiandao(){
+      
+      let msg = {
+        activityId: activityId,
+        customerId: customerId,
+        taskId: taskId
+      }
+      $.ajax({
+        type: "POST",
+        url: `${url}api/mactivity/getTaskHistory`,
+        contentType: "application/json",
+        data: getJavaData(msg),
+        async: false,
+        success: function (res) {
+          if (res.resultCode === 1) {
+            TaskHistory = res.data;
+            dayList=[];
+            
+            for(let i=1;i<=daynum;i++){
+                let obj={
+                    taskDate:Year+"-"+((Month<10)?'0'+Month:Month)+"-"+((i<10)?'0'+i:i),
+                    day:i
+                }
+                dayList.push(obj);
+            }
+            
+            dayList.forEach(day=>{
+                day.comday=false;
+                if(CompareDate(day.taskDate,newDate)){
+                    day.comday=true;
+                }
+                TaskHistory.forEach(x=>{
+                    
+                    if(day.taskDate==x.taskDate){
+                        
+                        day.amount=x.amount;
+                        day.awardMaterials=x.awardMaterials;
+                        day.finishTime=x.finishTime;
+                        day.materialId=x.materialId;
+                        day.taskId=x.taskId;
+                        day.taskStatus=x.taskStatus;
+                    }
+                    
+                })
+            })
+            let dayitem="";
+            qiandaonum=0;
+            dayList.forEach(item=>{
+                if(item.taskStatus==1){
+                    qiandaonum=qiandaonum+1;
+                }
+                // 今天之前
+                if(!item.comday){
+                    // 已经签到
+                    if(item.taskStatus&&item.taskStatus==1){
+                        dayitem+=`
+                        <div class="monthItem">
+                            <div class="monthtop grey">
+                                <img class="qiandaoImg" src="../../images/task/ass/xuan.png" alt="">
+                                <img class="wjx" src="../../images/task/ass/wjx1.png" alt="">
+                            </div>
+                            <div class="monthbottom">${item.day}</div>
+                            </div>
+                        `;
+                    }else{
+                        dayitem+=`
+                        <div class="monthItem">
+                            <div class="monthtop grey">
+                                <img class="wjx" src="../../images/task/ass/wjx1.png" alt="">
+                            </div>
+                            <div class="monthbottom">${item.day}</div>
+                            </div>
+                        `;
+                    }
+                }else{
+                    // 今天之后包括今天（今天已经签到）
+                    if(item.taskStatus&&item.taskStatus==1){
+                        dayitem+=`
+                        <div class="monthItem">
+                            <div class="monthtop grey">
+                                <img class="qiandaoImg" src="../../images/task/ass/xuan.png" alt="">
+                                <img class="wjx" src="../../images/task/ass/wjx1.png" alt="">
+                            </div>
+                            <div class="monthbottom">${item.day}</div>
+                            </div>
+                        `;
+                    }else{
+                        dayitem+=`
+                            <div class="monthItem">
+                                <div class="monthtop orange">
+                                    <img class="wjx" src="../../images/task/ass/wjx2.png" alt="">
+                                </div>
+                                <div class="monthbottom">${item.day}</div>
+                            </div>
+                        `
+                    }
+                }
+
+                
+            })
+            $('.monthDiv').html(dayitem)
+            $('.bottomDiv .orange').html(qiandaonum)
+            
+          }
+        },
+        error: function (res) {
+
+        }
+      })
+    }
+    function mGetDate(year, month){
+        var d = new Date(year, month, 0);
+        return d.getDate();
+    }
+    function CompareDate(date1, date2){
+        var oDate1 = new Date(date1);
+        var oDate2 = new Date(date2);
+        if (oDate1.getTime() >= oDate2.getTime()) {
+         return true;
+        } else {
+          return false;
+        }
+      }
+    // 点击我要签到
+    function setSignTask(){
+        $.ajax({
+            type: "POST",
+            url: `${url}api/mactivity/setSignTask`,
+            contentType: "application/json",
+            data: getJavaData(),
+            async: false,
+            success: function (res) {
+                console.log("woyao",res)
+              if (res.resultCode === 1) {
+                if (res.award === null) {
+                    this.$message.success('您今天已经签过到了！')
+                  } else {
+                    
+                    getQiandao()
+                  }
+                
+                
+              }
+            },
+            error: function (res) {
+    
+            }
+          })
+    }
+