签到页面

pages/signIn/activity/activity.js

@@ -1,6 +1,7 @@
 // pages/signIn/index.js
 import SignIn from '../../../api/signIn'
-
+import { isEmpty } from '../../../utils/util'
+ 
 Page({
 
     /**
@@ -9,8 +10,13 @@ Page({
     data: {
         showPage: false,
         activity: {},
-        signInNodes: [{ pos : 1 }, { pos: 2 }, { pos: 3 }, { pos : 4 }, { pos: 5 }, { pos: 6 }],
-        lastSignInNode: { pos: 7 }
+        signInNodes: [{ pos: 1, text: '星期一' }, 
+                      { pos: 2,  text: '星期二' }, 
+                      { pos: 3, text: '星期三' }, 
+                      { pos: 4, text: '星期四' }, 
+                      { pos: 5, text: '星期五' }, 
+                      { pos: 6, text: '星期六' }],
+        lastSignInNode: { pos: 7, text: '星期天' }
     },
 
     /**
@@ -66,6 +72,19 @@ Page({
                 lastSignInNode: this.data.lastSignInNode
             })
         }
+        this.setColors(data.color)
+    },
+
+    setColors(color) {
+        if (isEmpty(color)) {
+            color = "#EE5A5A"
+        }
+        if (color.length == 4) {
+            color = color.replace(/#(.)(.)(.)$/, "#$1$1$2$2$3$3")
+        }
+        for (let i = 1; i <= 6; i++) {
+            console.log(color.charAt(i))
+        }
     },
 
     tapSignIn: function() {

pages/signIn/activity/activity.json

@@ -1,4 +1,5 @@
 {
   "usingComponents": {},
-  "navigationStyle": "custom"
+  "navigationStyle": "custom",
+  "navigationBarColor": "#fff"
 }

pages/signIn/activity/activity.wxml

@@ -12,17 +12,23 @@
               <view class="_btn">去使用</view>
           </view>
         </view>
-        <view class="_look_btn">明细|查看</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>
+                    <image src="{{item.figure}}" mode="aspectFill" />
+                    <view class="_no">{{item.text}}</view>
+                </view>
+            </view>
+            <view class="_right">
+                <view class="_item">
+                    <image src="{{lastSignInNode.figure}}" mode="aspectFill" />
+                    <view class="_no">{{lastSignInNode.text}}</view>
                 </view>
             </view>
-            <view class="_right"></view>
         </view>
 
         <view class="_sign_in_btn" catchtap="tapSignIn">
@@ -48,7 +54,6 @@
                <view class="_task_item_right">未完成</view>
             </view>
         </view>
-
     </view>
 
     <!-- 活动说明 -->

pages/signIn/activity/activity.wxss

@@ -8,6 +8,10 @@ page {
     left: 0;
     top: 0;
     z-index: 0;
+    width: 100vw;
+}
+.head-bg image{
+    width: 100vw;
 }
 
 .head-bar {
@@ -28,18 +32,163 @@ page {
 
 .sign-info-extra {
     height: 285rpx;
+    width: 100vw;
+    display: flex;
+    flex-direction: row;
+}
+
+.coupon_num_box {
+    flex: 1;
+    box-sizing: border-box;
+    padding: 52rpx 0 20rpx 80rpx;
+}
+
+.coupon_num_box {
+    color: #fff;
+}
+.my_coupon_title {
+    font-size: 24rpx;
+    font-weight: 400;
+}
+.coupon_num_box ._num_arear {
+    padding: 18rpx 0  0 20rpx;
+    box-sizing: border-box;
+    height: 162rpx;
+    width: 480rpx;
+    white-space: nowrap;
+}
+._num_arear ._num {
+    font-size: 128rpx;
+    vertical-align: baseline;
+    height: 144rpx;
+    display: inline-block;
+}
+._num_arear ._unit {
+    padding-left: 10rpx;
+    font-size: 52rpx;
+    font-weight: 400;
+    vertical-align: baseline;
+    display: inline-block;
+}
+
+._num_arear ._btn {
+    display: inline-block;
+    font-size: 24rpx;
+    border: 1px solid #fff;
+    height: 26rpx;
+    border-radius: 24rpx;
+    padding: 4rpx 12rpx;
+    margin-left: 20rpx;
+    line-height: 24rpx;
+}
+
+.sign-info-extra ._look_btn {
+    width: 180rpx;
+    box-sizing: border-box;
+    padding: 140rpx 60rpx 0 0;
+    font-size: 24rpx;
+    color: #fff;
+    font-weight: 400;
 }
 
+
 .sign-card-box {
-    width: 706rpx;
+    width: 704rpx;
     height: 550rpx;
     margin: auto;
     background: #fff;
     border-radius: 8px;
+    box-sizing: border-box;
+    padding: 56rpx 40rpx 40rpx 40rpx;
+}
+
+.sign-item-box {
+    display: flex;
+    flex-direction: row;
+}
+
+.sign-item-box ._left {
+    width: 390rpx;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.sign-item-box ._left ._item {
+    width: 112rpx;
+    height: 156rpx;
+    border-radius: 12rpx;
+    background: #F4F4F4;
+    position: relative;
+    overflow: hidden;
+}
+.sign-item-box ._left ._item:nth-child(1), .sign-item-box ._left ._item:nth-child(2) , .sign-item-box ._left ._item:nth-child(2)  {
+    margin-bottom: 28rpx;
+}
+
+.sign-item-box ._left ._item image {
+    width: 112rpx;
+    height: 154rpx;
+    position: absolute;
+    display: block;
+    left: 0;
+    top: 0;
+    z-index: 0;
+}
+
+.sign-item-box ._left ._item ._no {
+    height: 32rpx;
+    width: 100%;
+    position: absolute;
+    z-index: 2;
+    left: 0;
+    bottom: 0;
+    color: #fff;
+    font-size: 24rpx;
+    text-align: center;
+    line-height: 32rpx;
+    background: linear-gradient(#EE5A5A, #cc4949,  #EE5A5A);
+}
+
+.sign-item-box ._right {
+    width: 202rpx;
+    margin-left: 32rpx;
+}
+.sign-item-box ._right ._item {
+    width: 202rpx;
+    height: 340rpx;
+    border-radius: 12rpx;
+    background: #F4F4F4;
+    position: relative;
+    overflow: hidden;
 }
 
+.sign-item-box ._left ._item image {
+    width: 202rpx;
+    height: 340rpx;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.sign-item-box ._right ._item ._no {
+    height: 46rpx;
+    width: 100%;
+    position: absolute;
+    z-index: 2;
+    left: 0;
+    bottom: 0;
+    color: #fff;
+    font-size: 24rpx;
+    text-align: center;
+    line-height: 46rpx;
+    background: linear-gradient(#EE5A5A, #cc4949,  #EE5A5A);
+}
+
+
 .sign-task-box {
-    width: 706rpx;
+    width: 704rpx;
     margin: auto;
     background: #fff;
     border-radius: 8px;
@@ -47,7 +196,7 @@ page {
 }
 
 .activity-des {
-    width: 706rpx;
+    width: 704rpx;
     margin: auto;
     margin-top: 40rpx;
 }

utils/util.js

@@ -100,11 +100,29 @@ function getQueryVariable(variable,query)
        return(false);
 }
 
+function isEmpty(v, eZ) {
+  if (typeof v == "undefined") {
+    return true
+  }
+  if (typeof v === "string") {
+    return /^\s*$/g.test(v) || (!eZ && v === '0')
+  }
+  if (!eZ && Number.isInteger(v)) {
+    return v === 0
+  }
+  if (Array.isArray(v)) {
+    return v.length === 0
+  }
+  return v === null
+}
+
 module.exports = {
   formatTime,
   sha1,
   getUnixTime,
   format,
   add0,
-  getQueryVariable
+  getQueryVariable,
+  isEmpty
 }
+