积分任务

src/project/fengdu/AppNewFarmerBank/taskDetail.vue

@@ -17,7 +17,7 @@
           <label>活动地点：</label>
           <div class="value">丰都县金牛区XXXX大厦XXX楼2101</div>
         </div>
-        <div class="address">
+        <div class="address" @click="toAddress">
           <img src="https://cdn.cunwuyun.cn/fengdu/ic-daohang.png" alt="">
           <i>导航</i>
         </div>
@@ -44,11 +44,16 @@
         </div>
       </div>
     </div>
-
-    <!-- <div class="right" @click="toAddress">
-      <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/dh.png" />
-      <i>导航</i>
+    <!-- <div class="btn-wrapper">
+      <div class="btn" @click="toReport" hover-class="text-hover">报名得积分/积分+5,已报名</div>
     </div> -->
+    <div class="btn-clock">
+      <div class="btn-circle" @click="toReport" hover-class="text-hover">
+        <div class="daka">打卡签到</div>
+        <div class="text">积分+5</div>
+      </div>
+      <div class="tips">符合打卡条件,未到打卡时间,无法重复打卡</div>
+    </div>
   </div>
 </template>
 
@@ -58,7 +63,8 @@ export default {
   appName: "任务详情",
   data() {
     return {
-
+      info: {},
+      id: ''
     }
   },
   methods: {
@@ -75,18 +81,28 @@ export default {
     //     current: url
     //   })
     // },
-
+    getDetail() {
+      this.$instance.post(`/app/appintegraltask/queryDetailById?id=${this.id}`).then(res=> {
+        if(res?.data) {
+          console.log(res);
+        }
+      })
+    }
   },
-  onShow() {
+  onLoad(o) {
+    this.id = o.id
     uni.setNavigationBarTitle({
       title: '任务详情'
     });
+    this.getDetail()
   },
 }
 </script>
 
 <style lang="scss" scoped>
 .taskDetail {
+  padding-bottom: 400px;
+  box-sizing: border-box;
   .task,
   .info {
     margin-top: 24px;
@@ -161,5 +177,57 @@ export default {
       }
     }
   }
+  ::v-deep .btn-wrapper {
+    background: #FFF;
+  }
+
+  ::v-deep .btn-wrapper .btn {
+    height: 80px;
+    line-height: 80px;
+    border-radius: 40px;
+  }
+
+  .opacity {
+    opacity: 0.6000000238418579;
+  }
+
+  .gray {
+    background: #b5b5bcff;
+  }
+
+  .btn-clock {
+    height: 372px;
+    width: 100%;
+    background: #FFF;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    .btn-circle {
+      width: 226px;
+      height: 226px;
+      background: #2D7DFF;
+      border-radius: 50%;
+      margin: 40px auto 24px;
+      text-align: center;
+      .text,
+      .daka {
+        color: #FFF;
+        font-size: 34px;
+        font-weight: 500;
+      }
+      .daka {
+        padding-top: 62px;
+        box-sizing: border-box;
+        font-size: 40px;
+        font-weight: 500;
+      }
+    }
+    .tips {
+      text-align: center;
+      color: #666666;
+      font-size: 28px;
+      font-weight: 400;
+    }
+  }
 }
 </style>