优惠券，明细，使用失效页面调整

pages/signIn/record/record.js

@@ -13,14 +13,21 @@ Page({
         lock: false,
         noResult: false,
         noMore: false,
+        noCoupon: false,
+        noDetail: false,
+        noUtility: false,
         isLogin: false,
-        hidden1: false,
-        hidden2: false,
+        hiddenCoupon: false,
+        hiddenDetail: false,
+        hiddenUtility: false,
         mobileTop: 'TONY WU',
         couponNum: 0,
         productNum: 0,
         activityId: 1,
-        couponList: []
+        couponList: [],
+        detailList: [],
+        stateList: [],
+        notUseNum: 0
 
     },
 
@@ -33,14 +40,22 @@ Page({
         })
         if(this.data.isLogin){
             this.setData({
-                hidden1: false,
-                hidden2: true,
+                hiddenCoupon: false,
+                hiddenDetail: true,
+                hiddenUtility: true,
+                noCoupon: true,
+                noDetail: false,
+                noUtility: false,
             })
             this.getUserAwardCouponList();
+            this.getUserAwardCouponNum();
+            this.getUserSignInList();
+            this.getCouponStateList();
         }
         
     },
 
+    // 优惠券数据
     getUserAwardCouponList: function() {
         SignIn.getUserAwardCouponList({
             page: this.data.page,
@@ -88,17 +103,191 @@ Page({
         })
     },
 
+    //未使用的券数量
+    getUserAwardCouponNum: function() {
+        SignIn.getUserAwardCouponNum({
+            page: this.data.page,
+            pageSize: this.data.pageSize,
+            mobile: "16602120168",
+            activityId: this.data.activityId
+        }).then(res => {
+            if (res.code == 200) {
+                this.setData({
+                    notUseNum: res.data.notUseNum
+                })
+            }
+            this.data.lock = false
+        }).catch(_ => {
+            console.log(_)
+            this.data.lock = false
+        })
+    },
+
+    // 签到明细
+    getUserSignInList: function() {
+        SignIn.getUserSignInList({
+            page: this.data.page,
+            pageSize: this.data.pageSize,
+            mobile: "16602120168",
+            activityId: this.data.activityId
+        }).then(res => {
+            if (res.code == 200) {
+                this.userDetailListView(res.data)
+            }
+            this.data.lock = false
+        }).catch(_ => {
+            console.log(_)
+            this.data.lock = false
+        })
+    },
+
+    userDetailListView: function(data) {
+        if (!Array.isArray(data) || data.length == 0) {
+            console.log("获取明细数据为空");
+            if (this.data.page == 1) {
+                this.setData({
+                    mobileTop:getMobileCache(),
+                    noResult: true
+                })
+            } else {
+                this.setData({
+                    mobileTop:getMobileCache(),
+                    noMore: true
+                })
+            }
+            return
+        }
+        data.forEach(v => {
+            let crateTime = v.crateTime
+            v.crateTime = parseTime(crateTime, "{y}-{m}-{d} {h}:{i}")
+        })
+
+        this.data.detailList = this.data.detailList.concat(...data)
+        this.setData({
+            mobileTop:getMobileCache(),
+            detailList: this.data.detailList
+        })
+    },
+
+    // 使用失效
+    getCouponStateList: function() {
+        SignIn.getUserAwardCouponUseStateList({
+            page: this.data.page,
+            pageSize: this.data.pageSize,
+            mobile: "16602120168",
+            activityId: this.data.activityId
+        }).then(res => {
+            if (res.code == 200) {
+                this.userStateListView(res.data)
+            }
+            this.data.lock = false
+        }).catch(_ => {
+            console.log(_)
+            this.data.lock = false
+        })
+    },
+
+    userStateListView: function(data) {
+        if (!Array.isArray(data) || data.length == 0) {
+            console.log("使用失效数据为空");
+            if (this.data.page == 1) {
+                this.setData({
+                    mobileTop:getMobileCache(),
+                    noResult: true
+                })
+            } else {
+                this.setData({
+                    mobileTop:getMobileCache(),
+                    noMore: true
+                })
+            }
+            return
+        }
+        data.forEach(v => {
+            let crateTime = v.crateTime
+            v.crateTime = parseTime(crateTime, "{y}-{m}-{d} {h}:{i}")
+        })
+
+        this.data.stateList = this.data.stateList.concat(...data)
+        this.setData({
+            mobileTop:getMobileCache(),
+            stateList: this.data.stateList
+        })
+    },
+
     // 授权手机号
     getPhoneNumber(e) {
         getPhoneNumberSync(e, _ => {
             this.setData({
                 isLogin: true,
                 mobileTop: getMobileCache(),
-                hidden1: false,
-                hidden2: true,
+                // hidden1: false,
+                // hidden2: true,
             })
-            this.getUserAwardCouponList()
+            this.getUserAwardCouponList();
+            this.getUserAwardCouponNum();
+            this.getUserSignInList();
+            this.getCouponStateList();
+        })
+    },
+
+    // 优惠券
+    getCoupon(e) {
+        this.setData({
+            hiddenCoupon: false,
+            hiddenDetail: true,
+            hiddenUtility: true,
+            page: 1,
+            goodsType: 1,
+            noMore: false,
+            noResult: false,
+            noCoupon: true,
+            noDetail: false,
+            noUtility: false,
+        })
+        this.data.couponList= [],
+        this.data.detailList= [],
+        this.data.stateList= [],
+        this.getUserAwardCouponList()
+    },
+    //明细
+    getDetail(e) {
+        this.setData({
+            hiddenCoupon: true,
+            hiddenDetail: false,
+            hiddenUtility: true,
+            page: 1,
+            goodsType: 2,
+            noMore: false,
+            noResult: false,
+            noDetail: true,
+            noCoupon: false,
+            noUtility: false,
+        })
+        this.data.couponList= [],
+        this.data.detailList= [],
+        this.data.stateList= [],
+        this.getUserSignInList()
+            
+    },
+   //使用失效
+    getUtility(e) {
+        this.setData({
+            hiddenCoupon: true,
+            hiddenDetail: true,
+            hiddenUtility: false,
+            page: 1,
+            goodsType: 2,
+            noMore: false,
+            noResult: false,
+            noUtility: true,
+            noCoupon: false,
+            noDetail: false,
         })
+        this.data.couponList= [],
+        this.data.detailList= [],
+        this.data.stateList= [],
+        this.getCouponStateList()
     },
 
     /**

pages/signIn/record/record.wxml

@@ -2,23 +2,24 @@
 <view class="record flex-column">
   <!-- 首部信息 -->
   <view class="head flex-column">
-    <view class="head_num">4</view>
+    <view class="head_num" wx:if="{{!isLogin}}">{{notUseNum}}</view>
+    <view class="head_num" wx:if="{{isLogin}}">{{notUseNum?notUseNum:0}}</view>
     <view class="head_text" wx:if="{{isLogin}}">请在优惠券有效期内尽快使用</view>
     <button class="sigin-isLogin" wx:if="{{!isLogin}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" >登录</button>
   </view>
   <!-- 中部说明 -->
   <view class="explain flex-row">
-    <view class="explain-left flex-column">
+    <view class="explain-left flex-column" catchtap="getCoupon">
       <view class="explain-discount">我的优惠</view>
-      <view class="explain-column"></view>
+      <view class="explain-column" wx:if="{{noCoupon}}"></view>
     </view>
-    <view class="explain-center flex-column">
+    <view class="explain-center flex-column" catchtap="getDetail">
       <view class="explain-detailed">获取明细</view>
-      <view class="explain-column"></view>
+      <view class="explain-column" wx:if="{{noDetail}}"></view>
     </view>
-    <view class="explain-right flex-column">
+    <view class="explain-right flex-column" catchtap="getUtility">
       <view class="explain-utility">使用/失效</view>
-      <view class="explain-column"></view>
+      <view class="explain-column" wx:if="{{noUtility}}"></view>
     </view>
   </view>
 
@@ -27,6 +28,7 @@
     <!-- 主要内容 -->
     <view class="check-in-content flex-column">
       <!-- 优惠券内容 -->
+      <view hidden="{{hiddenCoupon}}">
       <view class="{{item.coupon.couponType == 'C'?'coupon flex-row':'coupon2 flex-row'}}" wx:for="{{couponList}}" wx:key="index" data-id="{{item.id}}">
         <view class="coupon-left flex-row">
           <!-- 代金券 -->
@@ -57,11 +59,37 @@
           </view>
         </view>
       </view>
+    </view>
       <!-- 获得明细 -->
-      <view></view>
+      <view class="detailed flex-column" hidden="{{hiddenDetail}}">
+        <view class="detailed-content" wx:for="{{detailList}}" wx:key="index" data-id="{{item.id}}">
+          <view class="detailed-date flex-column">2021年10月</view>
+          <view class="detailed-sign flex-row">
+            <view class="detailed-sign-index flex-column">
+              <view class="detailed-sign-text">{{item.source =='1'?'签到':'任务'}}</view>
+              <view class="detailed-sign-date">{{item.crateTime}}</view>
+            </view>
+            <view class="detailed-coupon flex-column">{{item.coupon.couponTitle}}</view>
+          </view>
+          
+        </view>
+      </view>
       <!-- 使用/失效 -->
-      <view></view>
-      <view></view>  
+      <view class="detailed flex-column" hidden="{{hiddenUtility}}">
+        <view class="detailed-content" wx:for="{{stateList}}" wx:key="index" data-id="{{item.id}}">
+          <view class="detailed-date flex-column">2021年11月</view>
+          <view class="detailed-sign flex-row">
+            <view class="detailed-sign-index flex-column">
+              <view class="detailed-sign-text">{{item.coupon.couponTitle}}</view>
+              <view class="detailed-sign-date">{{item.crateTime}}</view>
+            </view>
+            <view class="detailed-coupon flex-column" style="color: #8F8F8F;">已失效</view>
+          </view>
+          
+        </view>
+      </view>
+        <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可用优惠券 ————</view>
+        <view class="no_result" wx:if="{{noMore}}">———— 更多优惠券 | 敬请期待 ————</view>
     </view>
   </view>
 </view>

pages/signIn/record/record.wxss

@@ -2,8 +2,7 @@
 .record{
   width: 750rpx;
   height: auto;
-  padding-bottom: 119rpx;
-  
+  padding-bottom: 119rpx; 
 }
 
 /* 垂直方向布局，水平居中 **/
@@ -222,4 +221,74 @@
   height: 100%;
 }
 
+.no_result {
+  font-size: 24rpx;
+  color: #B1B1B1;
+  line-height: 100rpx;
+  font-weight: 1000;
+}
+
+.detailed{
+  width: 100%;
+  height: auto;
+  background: #F3F3F3;
+}
+
+.detailed-content{
+  width: 750rpx;
+  height: auto;
+  margin-top: 4px;
+}
+
+.detailed-date{
+  width: 100%;
+  height: 40px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #6E6E6E;
+  align-items: flex-start;
+  justify-content: center;
+  margin-left: 26px;
+}
+
+.detailed-sign{
+  width: 750rpx;
+  height: 178rpx;
+  background: #FFFFFF;
+}
+
+.detailed-sign-index,.detailed-coupon{
+  width: 50%;
+  height: 100%;
+}
+
+.detailed-sign-index{
+  align-items: flex-start !important;
+  justify-content: space-between;
+}
+
+.detailed-sign-text{
+  font-size: 18px;
+  font-weight: 500;
+  color: #6E6E6E;
+  margin-left: 27px;
+  margin-top: 22px;
+}
+
+.detailed-sign-date{
+  font-size: 14px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #6E6E6E;
+  margin-left: 26px;
+  margin-bottom: 20px;
+}
+
+.detailed-coupon{
+  font-size: 20px;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  color: #BF2637;
+  justify-content: center;
+}