bobo 3 lat temu
rodzic
commit
f5436da09e

+ 145 - 10
pages/signIn/activity/activity.js

@@ -1,14 +1,16 @@
 // pages/signIn/index.js
 import SignIn from '../../../api/signIn'
 import { isEmpty } from '../../../utils/util'
+import { getMobileCache, getPhoneNumber as getPhoneNumberSync } from '../../../utils/user'
+const app = getApp();
  
 Page({
-
     /**
      * 页面的初始数据
      */
     data: {
         showPage: false,
+        showSignInSuccessDlg: false,
         activity: {},
         signInNodes: [{ pos: 1, text: '星期一' }, 
                       { pos: 2,  text: '星期二' }, 
@@ -16,14 +18,23 @@ Page({
                       { pos: 4, text: '星期四' }, 
                       { pos: 5, text: '星期五' }, 
                       { pos: 6, text: '星期六' }],
-        lastSignInNode: { pos: 7, text: '星期天' }
+        lastSignInNode: { pos: 7, text: '星期天' },
+        todayIsSigned: false,
+        isLogin: getMobileCache() != "",
+        notUseNum: 0
     },
 
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
-        SignIn.getActivityData("").then(res => {
+        this.data.dayOfWeek = this.getDayOfWeek()
+        this.startLoadActivityData()
+        this.setPageStyle()
+    },
+
+    startLoadActivityData() {
+        SignIn.getActivityData(getMobileCache()).then(res => {
             console.log(res)
             if (res.code == 200) {
                 this.setData({
@@ -38,7 +49,19 @@ Page({
                 showPage: true
             })
         })
-        this.setPageStyle();
+        if (this.data.isLogin) {
+            SignIn.getUserAwardCouponNum({
+                mobile: getMobileCache()
+            }).then( res => {
+                if (res.code == 200) {
+                    this.setData({
+                        notUseNum: res.data.notUseNum || 0
+                    })
+                }
+                console.log(res)
+            }).catch(_ => {})
+        }
+        
     },
 
     setPageStyle() {
@@ -56,13 +79,14 @@ Page({
     },
 
     mapToView(data) {
+        this.setColors(data.color)
         if (data.dayAwardList && data.dayAwardList.length > 0) {
             data.dayAwardList.forEach(item => {
                 if (item.dayNo == 7) {
-                    Object.assign(this.data.lastSignInNode, item);
+                    this.preDealItemData(this.data.lastSignInNode, item);
                 } else {
                     if (this.data.signInNodes[item.dayNo - 1]) {
-                        Object.assign(this.data.signInNodes[item.dayNo - 1], item)
+                        this.preDealItemData(this.data.signInNodes[item.dayNo - 1], item)
                     }
                 }
             });
@@ -72,7 +96,31 @@ Page({
                 lastSignInNode: this.data.lastSignInNode
             })
         }
-        this.setColors(data.color)
+    },
+
+    preDealItemData(target, item) {
+        // 未签到的情况下,计算是否属于过签
+        Object.assign(target, item);
+        if (target.isSignIn == 0 && target.pos < this.data.dayOfWeek) {
+            target.isSignIn = -1;
+            target.textBgGround = this.data.grayBackGroudStyle
+        } else {
+            target.textBgGround = this.data.backGroundStyle
+        }
+        if (target.pos == this.data.dayOfWeek) {
+            this.setData({
+                todayIsSigned: target.isSignIn == 1
+            })
+        }
+    },
+
+    getDayOfWeek(date) {
+        var now = date || new Date();
+        var day = now.getDay();
+        if (day == 0) {
+            return 7
+        }
+        return day;
     },
 
     setColors(color) {
@@ -82,15 +130,102 @@ Page({
         if (color.length == 4) {
             color = color.replace(/#(.)(.)(.)$/, "#$1$1$2$2$3$3")
         }
+        let newColor = "#";
         for (let i = 1; i <= 6; i++) {
-            console.log(color.charAt(i))
+            if (color.charAt(i) == 'a' || color.charAt(i) == 'A') {
+                newColor += "9"
+            } else if (color.charAt(i) == '0') {
+                newColor += "0"
+            } else {
+                newColor += String.fromCharCode(color.charCodeAt(i) - 1)
+            }
         }
+        this.setData({
+            mainColor: color,
+            secColor: newColor,
+            backGroundStyle:  "background: linear-gradient(" +color+", "+ newColor+ ", "+color+");",
+            grayBackGroudStyle: "background: #c6c6c6"
+        })
+    },
+
+    popMessage(message) {
+        app.showToast(message, "none")
     },
 
     tapSignIn: function() {
-        SignIn.triggerSignIn(5, "16602120168").then(res => {
+        if (!this.data.isLogin) {
+            return;
+        }
+        if (!this.data.activity.id) {
+            app.popMessage("未找到签到活动")
+            return;
+        }
+
+        if (this.isLocked) {
+            return
+        }
+        this.isLocked = true
+
+        SignIn.triggerSignIn(this.data.activity.id, getMobileCache()).then(res => {
             console.log(res)
-        }).catch(_ => {})
+            if (res.code == 200) {
+                this.dealSignResult(res.data)
+                this.startLoadActivityData()
+            }
+        }).catch(_ => {
+        }).finally(_ => {
+            this.isLocked = false
+        })
+    },
+
+    /**
+     * 处理签到结果
+     */
+    dealSignResult(data) {
+        if (data.isHit == 0 || data.coupon == null) {
+            // 没有配置奖品的情况下
+            postMessage("签到成功!")
+            return
+        }
+
+        const hitResult = data.coupon;
+
+        if (hitResult.couponType == "C") {
+            // 现金券
+            if (hitResult.formatReduceCost.length >= 3) {
+                hitResult._classSmallStyle = "_small"
+            }
+
+        } else if (hitResult.couponType == "D") {
+            // 折扣券
+            if (hitResult.formatReduceCost.length >= 3) {
+                hitResult._classSmallStyle = "_small"
+            }
+        }
+        if (hitResult.formatLeastCost == "0") {
+            hitResult.formatLeastCostStr = "无门槛使用"
+        } else {
+            hitResult.formatLeastCostStr = "满" + formatLeastCost + "元使用"
+        }
+
+        this.setData({
+            hitResult: hitResult,
+            showSignInSuccessDlg: true
+        })
+    },
+
+    // 授权手机号
+    getPhoneNumber(e) {
+        getPhoneNumberSync(e, _ => {
+            this.setData({ isLogin: true })
+            this.startLoadActivityData()
+        })
+    },
+
+    closeDlg() {
+        this.setData({
+            showSignInSuccessDlg: false
+        })
     },
 
     /**

+ 4 - 3
pages/signIn/activity/activity.json

@@ -1,5 +1,6 @@
 {
-  "usingComponents": {},
-  "navigationStyle": "custom",
-  "navigationBarColor": "#fff"
+  "usingComponents": {
+    "jumpmallapp": "../../../components/jumpmallapp"
+  },
+  "navigationStyle": "custom"
 }

+ 71 - 18
pages/signIn/activity/activity.wxml

@@ -7,9 +7,11 @@
         <view class="coupon_num_box">
           <view class="my_coupon_title">我的优惠券</view>
           <view class="_num_arear">
-              <text class="_num">4</text>
+              <text class="_num">{{notUseNum}}</text>
               <text class="_unit">张</text>
-              <view class="_btn">去使用</view>
+              <view class="_btn" wx:if="{{notUseNum > 0}}">
+               <jumpmallapp>去使用</jumpmallapp>
+              </view>
           </view>
         </view>
         <view class="_look_btn">明细 | 查看</view>
@@ -19,21 +21,31 @@
         <view class="sign-item-box">
             <view class="_left">
                 <view class="_item" wx:for="{{signInNodes}}" wx:key="index" >
-                    <image src="{{item.figure}}" mode="aspectFill" />
-                    <view class="_no">{{item.text}}</view>
+                    <image class="_figure" src="{{item.figure}}" mode="aspectFill" />
+                    <view class="_no" style="{{item.textBgGround}}">{{item.text}}</view>
+                    <image wx:if="{{item.isSignIn == -1}}" class="_lose_sign_in" src="/images/signIn/losesign.png" />
+                    <image wx:if="{{item.isSignIn == 1}}" class="_finish_sign_in" src="/images/signIn/finishsign.png" />
                 </view>
             </view>
             <view class="_right">
                 <view class="_item">
-                    <image src="{{lastSignInNode.figure}}" mode="aspectFill" />
-                    <view class="_no">{{lastSignInNode.text}}</view>
+                    <image class="_figure" src="{{lastSignInNode.figure}}" mode="aspectFill" />
+                    <view class="_no" style="{{lastSignInNode.textBgGround}}">{{lastSignInNode.text}}</view>
+                    <image wx:if="{{lastSignInNode.isSignIn == -1}}" class="_lose_sign_in" src="/images/signIn/losesign.png" />
+                    <image wx:if="{{lastSignInNode.isSignIn == 1}}" class="_finish_sign_in" src="/images/signIn/finishsign.png" />
                 </view>
             </view>
         </view>
-
-        <view class="_sign_in_btn" catchtap="tapSignIn">
-            签到领好礼
-        </view>
+        
+        <block wx:if="{{todayIsSigned}}">
+            <view class="_sign_in_btn">今日已签到</view>
+        </block>
+        <block wx:else>
+            <view class="_sign_in_btn" style="{{backGroundStyle}}" catchtap="tapSignIn">
+                签到领好礼
+                <button wx:if="{{!isLogin}}" class="phone-button" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" />
+            </view>
+        </block>
 
     </view>
 
@@ -42,16 +54,24 @@
         <view class="_task_title">做任务领优惠券</view>
         <view class="_task_list">
             <!-- 签到项 -->
-            <view class="_task_item">
+            <view wx:for="{{activity.taskAwardList}}" wx:key="index" class="_task_item">
                <view  class="_task_item_left">
                    <view class="_ico">
+                     <image src="{{item.figure}}" mode="aspectFill" />
                    </view>
                    <view class="_info">
-                        <view class="_title">连续签到4天</view>
-                        <view class="_des">可获得10元代金券X1</view>
+                        <view class="_title">{{item.taskTitle}}</view>
+                        <view class="_des">{{item.taskSubtitle}}</view>
+                   </view>
+               </view>
+               <view class="_task_item_right">
+                   <view style="{{backGroundStyle}}" class="_btn" wx:if="{{item.isComplete == 1}}">
+                    已完成
+                   </view>
+                   <view style="{{backGroundStyle}}" class="_btn" wx:else>
+                    未完成
                    </view>
                </view>
-               <view class="_task_item_right">未完成</view>
             </view>
         </view>
     </view>
@@ -60,9 +80,7 @@
     <view class="activity-des">
        <view class="_title">活动说明</view>
        <view class="_des">
-          <text>
-            放大放大是范德萨发大师傅的撒 的撒发射点
-          </text>
+          <text>{{activity.activityDesc}}</text>
        </view>
     </view>
 
@@ -79,8 +97,43 @@
 </view>
 
 
+<!-- 签到成功弹窗 -->
+<view class="dlg" wx:if="{{showSignInSuccessDlg}}">
+    <view class="sign-pop-body">
+        <view class="_body">
+           <view class="gift_wrap">
+                <view class="coupon_node">
+                    <view wx:if="{{hitResult.couponType=='D'}}" class="_node_left _zk {{hitResult._classSmallStyle}}">
+                        <view class="_num">{{hitResult.formatDiscount}}</view>
+                        <view class="_zhe">折</view>
+                    </view>
+                    <view wx:if="{{hitResult.couponType=='C'}}" class="_node_left _cash {{hitResult._classSmallStyle}}">
+                        <view class="_unit">¥</view>
+                        <view class="_num">{{hitResult.formatReduceCost}}</view>
+                    </view>
+                    <view class="_node_right">
+                        <view class="_coupont_title">{{hitResult.couponTitle}}</view>
+                        <view class="_coupon_sub_title">{{hitResult.formatLeastCostStr}}</view>
+                        <view class="_coupon_times"></view>
+                    </view>
+                    <image wx:if="{{hitResult.couponType=='D'}}" class="_bg" src="/images/signIn/coupon1.png" />
+                    <image wx:if="{{hitResult.couponType=='C'}}" class="_bg" src="/images/signIn/cash_coupon.png" />
+                </view>
+           </view>
+           <view class="award_des" style="color:{{secColor}};">恭喜您签到成功 获得9折扣折扣券</view>
 
+           <view class="_btn" style="{{backGroundStyle}}">
+            <jumpmallapp>去使用</jumpmallapp>
+           </view>
 
-
+        </view>
+        
+        <image class="_layer_bg" src="{{activity.popBgPic}}" />
+    </view>
+    
+    <view class="_layer" catchtap="closeDlg" >
+        <image class="_close" src="/images/signIn/close.png" />
+    </view>
+</view>
 
 </view>

+ 305 - 4
pages/signIn/activity/activity.wxss

@@ -126,7 +126,7 @@ page {
     margin-bottom: 28rpx;
 }
 
-.sign-item-box ._left ._item image {
+.sign-item-box ._left ._item ._figure {
     width: 112rpx;
     height: 154rpx;
     position: absolute;
@@ -135,6 +135,23 @@ page {
     top: 0;
     z-index: 0;
 }
+.sign-item-box ._left ._item ._lose_sign_in {
+    width: 110rpx;
+    height: 82rpx;
+    position: absolute;
+    left: 2rpx;
+    display: block;
+    top: 36rpx;
+    z-index: 3;
+}
+.sign-item-box ._left ._item ._finish_sign_in {
+    width: 36rpx;
+    height: 22rpx;
+    position: absolute;
+    z-index: 3;
+    left: 38rpx;
+    top: 66rpx;
+}
 
 .sign-item-box ._left ._item ._no {
     height: 32rpx;
@@ -163,7 +180,7 @@ page {
     overflow: hidden;
 }
 
-.sign-item-box ._left ._item image {
+.sign-item-box ._right ._item ._figure {
     width: 202rpx;
     height: 340rpx;
     display: block;
@@ -172,6 +189,25 @@ page {
     top: 0;
 }
 
+.sign-item-box ._right ._item ._lose_sign_in {
+    width: 186rpx;
+    height: 140rpx;
+    display: block;
+    position: absolute;
+    left: 8rpx;
+    top: 122rpx;
+    z-index: 3;
+}
+
+.sign-item-box ._right ._item ._finish_sign_in {
+    width: 82rpx;
+    height: 50rpx;
+    position: absolute;
+    z-index: 3;
+    left: 60rpx;
+    top: 145rpx;
+}
+
 .sign-item-box ._right ._item ._no {
     height: 46rpx;
     width: 100%;
@@ -183,7 +219,29 @@ page {
     font-size: 24rpx;
     text-align: center;
     line-height: 46rpx;
-    background: linear-gradient(#EE5A5A, #cc4949,  #EE5A5A);
+}
+
+._sign_in_btn {
+    width: 480rpx;
+    height: 68rpx;
+    border-radius: 68rpx;
+    margin: 46rpx auto 0;
+    text-align: center;
+    color: #fff;
+    position: relative;
+    line-height: 68rpx;
+    font-size: 36rpx;
+    font-weight: 500;
+    background: #c6c6c6;
+}
+._sign_in_btn button.phone-button {
+    width: 480rpx;
+    height: 68rpx;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 3;
+    opacity: 0;
 }
 
 
@@ -193,10 +251,253 @@ page {
     background: #fff;
     border-radius: 8px;
     margin-top: 28rpx;
+    box-sizing: border-box;
+    padding: 42rpx 28rpx;
+}
+.sign-task-box ._task_title {
+    font-size: 36rpx;
+    color: #303030;
+    font-weight: 400;
+}
+.sign-task-box ._task_list {
+    margin-top: 40rpx;
+}
+.sign-task-box ._task_item {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 46rpx;
+}
+.sign-task-box ._task_item_left {
+    width: 650rpx;
+    display: flex;
+    flex-direction: row;
+}
+._task_item_left ._ico {
+    width: 52rpx;
+    height: 52rpx;
+    padding-top: 10rpx;
 }
+._task_item_left ._ico image {
+    width: 52rpx;
+    height: 52rpx;
+    display: block;
+}
+._task_item_left ._info {
+    margin-left: 20rpx;
+}
+._task_item_left ._title {
+    font-size: 28rpx;
+    color: #303030;
+    vertical-align: top;
+}
+._task_item_left ._des {
+    font-size: 24rpx;
+    color: #a2a2a2;
+}
+
+
+.sign-task-box ._task_item_right {
+    width: 148rpx;
+    padding-top: 10rpx;
+}
+.sign-task-box ._task_item_right ._btn {
+    width: 148rpx;
+    height: 52rpx;
+    text-align: center;
+    line-height: 52rpx;
+    color: #fff;
+    border-radius: 52rpx;
+    font-size: 28rpx;
+}
+
 
 .activity-des {
     width: 704rpx;
     margin: auto;
     margin-top: 40rpx;
-}
+    font-size: 28rpx;
+    color: #979797;
+    padding-bottom: 100rpx;
+}
+
+.activity-des ._des {
+    padding-top: 20rpx;
+    font-size: 24rpx;
+}
+
+.dlg {
+    width: 100vw;
+    height: 100vh;
+    z-index: 1001;
+    background: rgba(0, 0, 0, 0.9);
+    left: 0;
+    top: 0;
+    position: fixed;
+}
+.dlg ._layer {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 0;
+}
+
+.sign-pop-body {
+    width: 622rpx;
+    height: 896rpx;
+    position: absolute;
+    left: calc(100vw / 2 - 622rpx / 2);
+    top: calc(100vh / 2 - 896rpx / 2 - 60rpx);
+}
+
+.sign-pop-body ._body {
+    width: 568rpx;
+    height: 484rpx;
+    position: absolute;
+    left: 26rpx;
+    top: 412rpx;
+    z-index: 2;
+}
+.gift_wrap {
+    width: 100%;
+    height: 232rpx;
+    box-sizing: border-box;
+}
+
+.coupon_node {
+    width: 522rpx;
+    height: 176rpx;
+    margin: auto;
+    display: flex;
+    flex-direction: row;
+    position: relative;
+}
+.coupon_node ._bg {
+    width: 522rpx;
+    height: 176rpx;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 0;
+}
+
+.coupon_node ._node_left {
+    width: 160rpx;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    z-index: 1;
+    position: relative;
+    justify-content: center;
+    align-items: baseline;
+    color: #443E5B;
+}
+
+._node_left._zk ._num {
+    padding-top: 48rpx;
+    height: 176rpx;
+    font-size: 100rpx;
+    font-weight: 600;
+    box-sizing:border-box;
+}
+
+._node_left._zk._small ._num {
+    font-size: 56rpx;
+    padding-top: 72rpx;
+}
+
+._node_left._zk ._zhe {
+    font-size: 32rpx;
+}
+
+
+._node_left._cash ._num {
+    padding-top: 48rpx;
+    height: 176rpx;
+    font-size: 100rpx;
+    font-weight: 600;
+    box-sizing:border-box;
+}
+
+._node_left._cash._small ._num {
+    font-size: 56rpx;
+    padding-top: 72rpx;
+}
+
+._node_left._cash ._unit {
+    font-size: 32rpx;
+    position: relative;
+    top: -2rpx;
+    padding-right: 2rpx;
+}
+
+.coupon_node ._node_right {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    white-space: nowrap;
+    box-sizing: border-box;
+    padding: 20rpx;
+}
+._node_right ._coupont_title {
+    font-size: 32rpx;
+    font-weight: 600;
+}
+._node_right ._coupon_sub_title {
+    font-size: 28rpx;
+    padding: 14rpx 0;
+}
+._node_right ._coupon_sub_title:before, ._node_right ._coupon_sub_title:after {
+    width: 5px;
+    height: 5px;
+    background: #443E5B;
+    transform:rotate(45deg);
+    margin: 0 10rpx;
+    display: inline-block;
+    content: "";
+    vertical-align: middle;
+}
+
+._node_right ._coupon_times {
+    font-size: 24rpx;
+}
+
+.sign-pop-body .award_des {
+    text-align: center;
+    color: #BF2637;
+    font-size: 28rpx;
+    height: 120rpx;
+    line-height: 120rpx;
+}
+
+.sign-pop-body ._btn {
+    width: 360rpx;
+    height: 76rpx;
+    border-radius: 76rpx;
+    text-align: center;
+    color: #fff;
+    line-height: 76rpx;
+    margin: auto;
+    font-size: 42rpx;
+}
+
+.sign-pop-body ._layer_bg {
+    width: 622rpx;
+    height: 896rpx;
+    position: absolute;
+    z-index: 0;
+    left: 0;
+    top: 0;
+    display: block;
+}
+
+.dlg ._close {
+    width: 54rpx;
+    height: 54rpx;
+    position: absolute;
+    display: block;
+    left: calc(100vw / 2 - 54rpx / 2);
+    top: calc(100vh / 2 + 896rpx / 2 + 10rpx);
+}
+