商家红包活动

 <!--components/reserve/seller/quan.wxml-->
 <wxs src="../../../utils/util.wxs" module="util" />
 <view class="quan flex-lr {{cla}}">
-    <view class="money flex-ll" style="align-items: flex-end">
+    <view class="money flex-cc money-{{util.toFixed(quan.price,0).length}}" style="align-items: flex-end">
         <view class="dot">￥</view>
         <view class="number">{{util.toFixed(quan.price,0)}}</view>
     </view>

@@ -7,6 +7,7 @@
     box-sizing: border-box;
     padding: 36rpx;
     padding-right: 22rpx;
+    padding-left: 0;
     border-radius:10rpx 10rpx 0rpx 0rpx;
     border-right: 14rpx solid #fefefe;
     position: relative;
@@ -21,7 +22,19 @@
     height: 170rpx;
     content: "";
 }
-
+.quan .money{
+    min-width: 186rpx;
+    width: 186rpx;
+    overflow: hidden;
+}
+.quan .money-4,.quan .money-5{
+    min-width: 226rpx;
+    width: 226rpx;
+    overflow: hidden;
+}
+.quan .type{
+    width: 80%;
+}
 .dot{
     width:22rpx;
     height:50rpx;
@@ -47,6 +60,7 @@
     height: 100rpx;
     width:2rpx;
     box-sizing: border-box;
+    margin-right: 38rpx;
 }
 .card_title{
     height:40rpx;
@@ -84,4 +98,20 @@
 
 .quan.bg-f5f5f5{
     border-right: 14rpx solid #f5f5f5;
+}
+
+.quan-disabled{
+    background:rgba(245,245,245,1);
+}
+.quan-disabled:after{
+    background-image: url("http://nosqn.colorcun.com/sellerbaobao/rx2.png");
+}
+.quan-disabled .dot,.quan-disabled .number{
+    color:rgba(136,136,136,1);
+}
+.quan-disabled .line{
+    border-right-color:#888888;
+}
+.quan-disabled .card_title,.quan-disabled .card-date{
+    color:rgba(136,136,136,1);
 }
\ No newline at end of file

@@ -8,8 +8,11 @@ Page({
    */
   data: {
     list:[],
+    status:1,
   },
-
+  page:1,
+  size:10,
+  hasMore:true,
   /**
    * 生命周期函数--监听页面加载
    */
@@ -56,35 +59,41 @@ Page({
    * 页面上拉触底事件的处理函数
    */
   onReachBottom: function () {
+    if(this.hasMore){
+      this.GetUserCard()
+    }
 
   },
   GetUserCard(){
     App.Customer.GetUserCard({
-      status:0,
+      status:this.data.status,
+      page:this.page,
+      size:this.size,
     }).then(res=> {
+      let list=this.data.list
+      list=list.concat(res.data)
+      if(res.data.length<this.size){
+        this.hasMore=false
+      }
       this.setData({
-        list: res.data
+        list: list
       })
     })
   },
-  useCard(e){
-    let sid=util.attr(e,'sid')
-    if(sid>0) {
-      wx.navigateTo({
-        url: '/pages/reserve/detail?id=' + sid + '&activeTab=reserve'
-      })
-    }else{
-      //lat=39.62420161&lng=118.1174469&multiIndex=0&centre_pos=39.62420161,118.1174469&hasSuggestion=
-      wx.navigateTo({
-        url: util.http_build_query({
-          lat:34.216529,
-          lng:108.894677,
-          centre_pos:'34.216529,108.894677',
-          keyword:' ',
-          isopen_md:1,
-          multiIndex:0,
-        },'/pages/reserve/indexList'),
-      })
-    }
+  searchInit(){
+    this.page=1;
+    this.hasMore=true;
+  },
+  switchTab(e){
+    let status=util.attr(e,'status')
+    if(status==this.data.status) return;
+    this.searchInit();
+    this.setData({
+      status:status,
+      list:[],
+    })
+    setTimeout(()=>{
+      this.GetUserCard()
+    },0)
   },
 })
\ No newline at end of file

@@ -2,25 +2,25 @@
 <wxs src="../../utils/util.wxs" module="util" />
 <nav hasHome>我的红包</nav>
 <view class="tabs flex-lr">
-    <view class="tabs-item flex-vc active">
+    <view class="tabs-item flex-vc {{status==2?'':'active'}}" bindtap="switchTab" data-status="1">
         <view class="tabs-txt">已使用</view>
     </view>
-    <view class="tabs-item flex-vc">
+    <view class="tabs-item flex-vc {{status==2?'active':''}}"  bindtap="switchTab" data-status="2">
         <view class="tabs-txt">已失效</view>
     </view>
 </view>
 <view class="pages" wx:if="{{list.length>0}}">
     <view class="list-view list-view-{{item.sid}}" wx:for="{{list}}" wx:key="list">
         <view class="quan" wx:for="{{item.card_list}}" wx:key="card_list" wx:for-item="quan">
-            <quan quan="{{quan}}" cla="{{item.sid==0?'quan-pt bg-f5f5f5':''}}">
-                <view class="button-use" bindtap="useCard" data-sid="{{item.sid}}">立即使用</view>
+            <quan quan="{{quan}}" cla="quan-disabled">
+                <view class="button-use status-{{quan.status}}"></view>
             </quan>
-            <view class="quan-tips pingtai" wx:if="{{item.sid==0}}">适用于平台所有商家，预订包间、在线买单时使用</view>
-            <view class="quan-tips" wx:else="">仅可在“{{seller.sellername}}”预订包间、在线买单时使用</view>
+            <view class="quan-tips" wx:if="{{item.sid==0}}">适用于平台所有商家，预订包间、在线买单时使用</view>
+            <view class="quan-tips" wx:else="">仅可在“{{item.sellername}}”预订包间、在线买单时使用</view>
         </view>
     </view>
 </view>
 <view class="flex-vc" wx:else="">
     <view class="empty-img"></view>
-    <view class="empty-txt">哎呀一个红包都没有呢</view>
+    <view class="empty-txt">{{status==1?'暂时没有已经使用的哦':'暂时没有已经失效的哦'}}</view>
 </view>

 /* pack-activity/pages/money.wxss */
+.pages{
+    padding-bottom: 50rpx;
+}
 .list-view{
     width: calc(100% - 40rpx);
     margin-left: 20rpx;
     background:rgba(255,255,255,1);
     border-radius:20rpx;
     box-sizing: border-box;
-    padding: 20rpx 20rpx 40rpx;
-    margin-bottom: 20rpx;
-}
-.list-view-0{
-    background: none;
-    margin-top: 0rpx;
-    padding-bottom: 20rpx;
+    padding: 20rpx 20rpx 0rpx;
 }
 .sellername{
     height:40rpx;
@@ -25,40 +22,38 @@
     margin-left: 10rpx;
 }
 .quan{
-    margin-top: 20rpx;
+    margin-top: 10rpx;
 }
 .quan-tips{
     height:50rpx;
-    background:rgba(245,245,245,1);
+    background:rgba(250,250,250,1);
     border-radius:0rpx 0rpx 10rpx 10rpx;
     font-size:22rpx;
     font-family:PingFangSC-Regular,PingFang SC;
     font-weight:400;
-    color:rgba(136,136,136,1);
+    color:rgba(174,174,174,1);
     line-height:50rpx;
     padding-left: 36rpx;
     width: 100%;
     box-sizing: border-box;
 }
-.pingtai{
-    background:rgba(255,255,255,1);
-    color:rgba(136,136,136,1);
-}
 
 .button-use{
-    width:120rpx;
-    height:44rpx;
-    background:linear-gradient(180deg,rgba(231,66,88,1) 0%,rgba(243,53,78,1) 100%);
-    border-radius:6rpx;
-    font-size:24rpx;
-    font-family:PingFangSC-Medium,PingFang SC;
-    font-weight:500;
-    color:rgba(255,227,192,1);
-    line-height:44rpx;
-    text-align: center;
+    position: absolute;
+    top:-12rpx;
+    right:14rpx;
+    width:117rpx;
+    height:117rpx;
+    background-size: 100% 100%;
+}
+.status-1{
+    background-image: url("http://nosqn.colorcun.com/sellerbaobao/use.png");
+}
+.status-2{
+    background-image: url("http://nosqn.colorcun.com/sellerbaobao/lose.png");
 }
 .empty-img{
-    background-image: url("http://nosqn.colorcun.com/sellerbaobao/empty.png");
+    background-image: url("http://nosqn.colorcun.com/sellerbaobao/empty2.png");
     background-size: 100% 100%;
     width:302rpx;
     height:408rpx;

@@ -17,7 +17,7 @@
                 <view class="button-use" bindtap="useCard" data-sid="{{item.sid}}">立即使用</view>
             </quan>
             <view class="quan-tips pingtai" wx:if="{{item.sid==0}}">适用于平台所有商家，预订包间、在线买单时使用</view>
-            <view class="quan-tips" wx:else="">仅可在“{{seller.sellername}}”预订包间、在线买单时使用</view>
+            <view class="quan-tips" wx:else="">仅可在“{{item.sellername}}”预订包间、在线买单时使用</view>
         </view>
     </view>
 </view>