签到中心

pages/signIn/activity/activity.js

@@ -7,7 +7,10 @@ Page({
      * 页面的初始数据
      */
     data: {
-        showPage: false
+        showPage: false,
+        activity: {},
+        signInNodes: [{ pos : 1 }, { pos: 2 }, { pos: 3 }, { pos : 4 }, { pos: 5 }, { pos: 6 }],
+        lastSignInNode: { pos: 7 }
     },
 
     /**
@@ -16,7 +19,12 @@ Page({
     onLoad: function (options) {
         SignIn.getActivityData("").then(res => {
             console.log(res)
-        
+            if (res.code == 200) {
+                this.setData({
+                    activity: res.data
+                })
+                this.mapToView(res.data)
+            }
         }).catch(_ => {
 
         }).finally(_ => {
@@ -24,7 +32,40 @@ Page({
                 showPage: true
             })
         })
-        
+        this.setPageStyle();
+    },
+
+    setPageStyle() {
+        let dwObj = wx.getMenuButtonBoundingClientRect()
+        let navHeight_ = (dwObj.top + dwObj.height)
+        let capsuleTop_ = dwObj.top
+        let windowHeight = wx.getSystemInfoSync().windowHeight
+
+        this.setData({
+            navHeight: navHeight_,
+            capsuleTop:capsuleTop_, 
+            capHeight: dwObj.height,
+            bodyHeight: windowHeight - navHeight_,
+        });
+    },
+
+    mapToView(data) {
+        if (data.dayAwardList && data.dayAwardList.length > 0) {
+            data.dayAwardList.forEach(item => {
+                if (item.dayNo == 7) {
+                    Object.assign(this.data.lastSignInNode, item);
+                } else {
+                    if (this.data.signInNodes[item.dayNo - 1]) {
+                        Object.assign(this.data.signInNodes[item.dayNo - 1], item)
+                    }
+                }
+            });
+
+            this.setData({
+                signInNodes: this.data.signInNodes,
+                lastSignInNode: this.data.lastSignInNode
+            })
+        }
     },
 
     tapSignIn: function() {

pages/signIn/activity/activity.json

@@ -1,3 +1,4 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "navigationStyle": "custom"
 }

pages/signIn/activity/activity.wxml

@@ -1,5 +1,81 @@
 <!--pages/signIn/index.wxml-->
 <view wx:if="{{showPage}}">
 
-<view catchtap="tapSignIn">签到</view>
+<!-- 页面主体 -->
+<view class="sign-scroll-body" style="margin-top:{{navHeight}}px; height: {{bodyHeight}}px;">
+    <view class="sign-info-extra">
+        <view class="coupon_num_box">
+          <view class="my_coupon_title">我的优惠券</view>
+          <view class="_num_arear">
+              <text class="_num">4</text>
+              <text class="_unit">张</text>
+              <view class="_btn">去使用</view>
+          </view>
+        </view>
+        <view class="_look_btn">明细|查看</view>
+    </view>
+    <!-- 签到卡片 -->
+    <view class="sign-card-box">
+        <view class="sign-item-box">
+            <view class="_left">
+                <view class="_item" wx:for="{{signInNodes}}" wx:key="index" >
+                    <view class="_no">第{{item.pos}}天</view>
+                </view>
+            </view>
+            <view class="_right"></view>
+        </view>
+
+        <view class="_sign_in_btn" catchtap="tapSignIn">
+            签到领好礼
+        </view>
+
+    </view>
+
+    <!-- 签到任务列表 -->
+    <view class="sign-task-box">
+        <view class="_task_title">做任务领优惠券</view>
+        <view class="_task_list">
+            <!-- 签到项 -->
+            <view class="_task_item">
+               <view  class="_task_item_left">
+                   <view class="_ico">
+                   </view>
+                   <view class="_info">
+                        <view class="_title">连续签到4天</view>
+                        <view class="_des">可获得10元代金券X1</view>
+                   </view>
+               </view>
+               <view class="_task_item_right">未完成</view>
+            </view>
+        </view>
+
+    </view>
+
+    <!-- 活动说明 -->
+    <view class="activity-des">
+       <view class="_title">活动说明</view>
+       <view class="_des">
+          <text>
+            放大放大是范德萨发大师傅的撒 的撒发射点
+          </text>
+       </view>
+    </view>
+
+</view>
+
+<!-- 页面头部 -->
+<view class="sign-head">
+   <view class="head-bg">
+    <image src="{{activity.themePic}}" />
+   </view>
+   <view class="head-bar" style="height:{{navHeight}}px">
+      <view style="margin-top: {{capsuleTop}}px;line-height: {{capHeight}}px;">签到中心</view>
+   </view>
+</view>
+
+
+
+
+
+
 </view>

pages/signIn/activity/activity.wxss

@@ -1 +1,53 @@
-/* pages/signIn/index.wxss */
+/* pages/signIn/index.wxss */
+page {
+    background: #EDEDED;
+}
+
+.sign-head {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 0;
+}
+
+.head-bar {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    text-align: center;
+    color: #fff;
+    font-size: 32rpx;
+}
+.sign-scroll-body {
+    position: relative;
+    z-index: 2;
+    height: 10000rpx;
+    overflow-y: auto;
+}
+
+.sign-info-extra {
+    height: 285rpx;
+}
+
+.sign-card-box {
+    width: 706rpx;
+    height: 550rpx;
+    margin: auto;
+    background: #fff;
+    border-radius: 8px;
+}
+
+.sign-task-box {
+    width: 706rpx;
+    margin: auto;
+    background: #fff;
+    border-radius: 8px;
+    margin-top: 28rpx;
+}
+
+.activity-des {
+    width: 706rpx;
+    margin: auto;
+    margin-top: 40rpx;
+}