Showing
6 changed files
with
91 additions
and
57 deletions
| 1 | <!--components/reserve/seller/quan.wxml--> | 1 | <!--components/reserve/seller/quan.wxml--> |
| 2 | <wxs src="../../../utils/util.wxs" module="util" /> | 2 | <wxs src="../../../utils/util.wxs" module="util" /> |
| 3 | <view class="quan flex-lr {{cla}}"> | 3 | <view class="quan flex-lr {{cla}}"> |
| 4 | - <view class="money flex-ll" style="align-items: flex-end"> | 4 | + <view class="money flex-cc money-{{util.toFixed(quan.price,0).length}}" style="align-items: flex-end"> |
| 5 | <view class="dot">¥</view> | 5 | <view class="dot">¥</view> |
| 6 | <view class="number">{{util.toFixed(quan.price,0)}}</view> | 6 | <view class="number">{{util.toFixed(quan.price,0)}}</view> |
| 7 | </view> | 7 | </view> |
| @@ -7,6 +7,7 @@ | @@ -7,6 +7,7 @@ | ||
| 7 | box-sizing: border-box; | 7 | box-sizing: border-box; |
| 8 | padding: 36rpx; | 8 | padding: 36rpx; |
| 9 | padding-right: 22rpx; | 9 | padding-right: 22rpx; |
| 10 | + padding-left: 0; | ||
| 10 | border-radius:10rpx 10rpx 0rpx 0rpx; | 11 | border-radius:10rpx 10rpx 0rpx 0rpx; |
| 11 | border-right: 14rpx solid #fefefe; | 12 | border-right: 14rpx solid #fefefe; |
| 12 | position: relative; | 13 | position: relative; |
| @@ -21,7 +22,19 @@ | @@ -21,7 +22,19 @@ | ||
| 21 | height: 170rpx; | 22 | height: 170rpx; |
| 22 | content: ""; | 23 | content: ""; |
| 23 | } | 24 | } |
| 24 | - | 25 | +.quan .money{ |
| 26 | + min-width: 186rpx; | ||
| 27 | + width: 186rpx; | ||
| 28 | + overflow: hidden; | ||
| 29 | +} | ||
| 30 | +.quan .money-4,.quan .money-5{ | ||
| 31 | + min-width: 226rpx; | ||
| 32 | + width: 226rpx; | ||
| 33 | + overflow: hidden; | ||
| 34 | +} | ||
| 35 | +.quan .type{ | ||
| 36 | + width: 80%; | ||
| 37 | +} | ||
| 25 | .dot{ | 38 | .dot{ |
| 26 | width:22rpx; | 39 | width:22rpx; |
| 27 | height:50rpx; | 40 | height:50rpx; |
| @@ -47,6 +60,7 @@ | @@ -47,6 +60,7 @@ | ||
| 47 | height: 100rpx; | 60 | height: 100rpx; |
| 48 | width:2rpx; | 61 | width:2rpx; |
| 49 | box-sizing: border-box; | 62 | box-sizing: border-box; |
| 63 | + margin-right: 38rpx; | ||
| 50 | } | 64 | } |
| 51 | .card_title{ | 65 | .card_title{ |
| 52 | height:40rpx; | 66 | height:40rpx; |
| @@ -84,4 +98,20 @@ | @@ -84,4 +98,20 @@ | ||
| 84 | 98 | ||
| 85 | .quan.bg-f5f5f5{ | 99 | .quan.bg-f5f5f5{ |
| 86 | border-right: 14rpx solid #f5f5f5; | 100 | border-right: 14rpx solid #f5f5f5; |
| 101 | +} | ||
| 102 | + | ||
| 103 | +.quan-disabled{ | ||
| 104 | + background:rgba(245,245,245,1); | ||
| 105 | +} | ||
| 106 | +.quan-disabled:after{ | ||
| 107 | + background-image: url("http://nosqn.colorcun.com/sellerbaobao/rx2.png"); | ||
| 108 | +} | ||
| 109 | +.quan-disabled .dot,.quan-disabled .number{ | ||
| 110 | + color:rgba(136,136,136,1); | ||
| 111 | +} | ||
| 112 | +.quan-disabled .line{ | ||
| 113 | + border-right-color:#888888; | ||
| 114 | +} | ||
| 115 | +.quan-disabled .card_title,.quan-disabled .card-date{ | ||
| 116 | + color:rgba(136,136,136,1); | ||
| 87 | } | 117 | } |
| @@ -8,8 +8,11 @@ Page({ | @@ -8,8 +8,11 @@ Page({ | ||
| 8 | */ | 8 | */ |
| 9 | data: { | 9 | data: { |
| 10 | list:[], | 10 | list:[], |
| 11 | + status:1, | ||
| 11 | }, | 12 | }, |
| 12 | - | 13 | + page:1, |
| 14 | + size:10, | ||
| 15 | + hasMore:true, | ||
| 13 | /** | 16 | /** |
| 14 | * 生命周期函数--监听页面加载 | 17 | * 生命周期函数--监听页面加载 |
| 15 | */ | 18 | */ |
| @@ -56,35 +59,41 @@ Page({ | @@ -56,35 +59,41 @@ Page({ | ||
| 56 | * 页面上拉触底事件的处理函数 | 59 | * 页面上拉触底事件的处理函数 |
| 57 | */ | 60 | */ |
| 58 | onReachBottom: function () { | 61 | onReachBottom: function () { |
| 62 | + if(this.hasMore){ | ||
| 63 | + this.GetUserCard() | ||
| 64 | + } | ||
| 59 | 65 | ||
| 60 | }, | 66 | }, |
| 61 | GetUserCard(){ | 67 | GetUserCard(){ |
| 62 | App.Customer.GetUserCard({ | 68 | App.Customer.GetUserCard({ |
| 63 | - status:0, | 69 | + status:this.data.status, |
| 70 | + page:this.page, | ||
| 71 | + size:this.size, | ||
| 64 | }).then(res=> { | 72 | }).then(res=> { |
| 73 | + let list=this.data.list | ||
| 74 | + list=list.concat(res.data) | ||
| 75 | + if(res.data.length<this.size){ | ||
| 76 | + this.hasMore=false | ||
| 77 | + } | ||
| 65 | this.setData({ | 78 | this.setData({ |
| 66 | - list: res.data | 79 | + list: list |
| 67 | }) | 80 | }) |
| 68 | }) | 81 | }) |
| 69 | }, | 82 | }, |
| 70 | - useCard(e){ | ||
| 71 | - let sid=util.attr(e,'sid') | ||
| 72 | - if(sid>0) { | ||
| 73 | - wx.navigateTo({ | ||
| 74 | - url: '/pages/reserve/detail?id=' + sid + '&activeTab=reserve' | ||
| 75 | - }) | ||
| 76 | - }else{ | ||
| 77 | - //lat=39.62420161&lng=118.1174469&multiIndex=0¢re_pos=39.62420161,118.1174469&hasSuggestion= | ||
| 78 | - wx.navigateTo({ | ||
| 79 | - url: util.http_build_query({ | ||
| 80 | - lat:34.216529, | ||
| 81 | - lng:108.894677, | ||
| 82 | - centre_pos:'34.216529,108.894677', | ||
| 83 | - keyword:' ', | ||
| 84 | - isopen_md:1, | ||
| 85 | - multiIndex:0, | ||
| 86 | - },'/pages/reserve/indexList'), | ||
| 87 | - }) | ||
| 88 | - } | 83 | + searchInit(){ |
| 84 | + this.page=1; | ||
| 85 | + this.hasMore=true; | ||
| 86 | + }, | ||
| 87 | + switchTab(e){ | ||
| 88 | + let status=util.attr(e,'status') | ||
| 89 | + if(status==this.data.status) return; | ||
| 90 | + this.searchInit(); | ||
| 91 | + this.setData({ | ||
| 92 | + status:status, | ||
| 93 | + list:[], | ||
| 94 | + }) | ||
| 95 | + setTimeout(()=>{ | ||
| 96 | + this.GetUserCard() | ||
| 97 | + },0) | ||
| 89 | }, | 98 | }, |
| 90 | }) | 99 | }) |
| @@ -2,25 +2,25 @@ | @@ -2,25 +2,25 @@ | ||
| 2 | <wxs src="../../utils/util.wxs" module="util" /> | 2 | <wxs src="../../utils/util.wxs" module="util" /> |
| 3 | <nav hasHome>我的红包</nav> | 3 | <nav hasHome>我的红包</nav> |
| 4 | <view class="tabs flex-lr"> | 4 | <view class="tabs flex-lr"> |
| 5 | - <view class="tabs-item flex-vc active"> | 5 | + <view class="tabs-item flex-vc {{status==2?'':'active'}}" bindtap="switchTab" data-status="1"> |
| 6 | <view class="tabs-txt">已使用</view> | 6 | <view class="tabs-txt">已使用</view> |
| 7 | </view> | 7 | </view> |
| 8 | - <view class="tabs-item flex-vc"> | 8 | + <view class="tabs-item flex-vc {{status==2?'active':''}}" bindtap="switchTab" data-status="2"> |
| 9 | <view class="tabs-txt">已失效</view> | 9 | <view class="tabs-txt">已失效</view> |
| 10 | </view> | 10 | </view> |
| 11 | </view> | 11 | </view> |
| 12 | <view class="pages" wx:if="{{list.length>0}}"> | 12 | <view class="pages" wx:if="{{list.length>0}}"> |
| 13 | <view class="list-view list-view-{{item.sid}}" wx:for="{{list}}" wx:key="list"> | 13 | <view class="list-view list-view-{{item.sid}}" wx:for="{{list}}" wx:key="list"> |
| 14 | <view class="quan" wx:for="{{item.card_list}}" wx:key="card_list" wx:for-item="quan"> | 14 | <view class="quan" wx:for="{{item.card_list}}" wx:key="card_list" wx:for-item="quan"> |
| 15 | - <quan quan="{{quan}}" cla="{{item.sid==0?'quan-pt bg-f5f5f5':''}}"> | ||
| 16 | - <view class="button-use" bindtap="useCard" data-sid="{{item.sid}}">立即使用</view> | 15 | + <quan quan="{{quan}}" cla="quan-disabled"> |
| 16 | + <view class="button-use status-{{quan.status}}"></view> | ||
| 17 | </quan> | 17 | </quan> |
| 18 | - <view class="quan-tips pingtai" wx:if="{{item.sid==0}}">适用于平台所有商家,预订包间、在线买单时使用</view> | ||
| 19 | - <view class="quan-tips" wx:else="">仅可在“{{seller.sellername}}”预订包间、在线买单时使用</view> | 18 | + <view class="quan-tips" wx:if="{{item.sid==0}}">适用于平台所有商家,预订包间、在线买单时使用</view> |
| 19 | + <view class="quan-tips" wx:else="">仅可在“{{item.sellername}}”预订包间、在线买单时使用</view> | ||
| 20 | </view> | 20 | </view> |
| 21 | </view> | 21 | </view> |
| 22 | </view> | 22 | </view> |
| 23 | <view class="flex-vc" wx:else=""> | 23 | <view class="flex-vc" wx:else=""> |
| 24 | <view class="empty-img"></view> | 24 | <view class="empty-img"></view> |
| 25 | - <view class="empty-txt">哎呀一个红包都没有呢</view> | 25 | + <view class="empty-txt">{{status==1?'暂时没有已经使用的哦':'暂时没有已经失效的哦'}}</view> |
| 26 | </view> | 26 | </view> |
| 1 | /* pack-activity/pages/money.wxss */ | 1 | /* pack-activity/pages/money.wxss */ |
| 2 | +.pages{ | ||
| 3 | + padding-bottom: 50rpx; | ||
| 4 | +} | ||
| 2 | .list-view{ | 5 | .list-view{ |
| 3 | width: calc(100% - 40rpx); | 6 | width: calc(100% - 40rpx); |
| 4 | margin-left: 20rpx; | 7 | margin-left: 20rpx; |
| 5 | background:rgba(255,255,255,1); | 8 | background:rgba(255,255,255,1); |
| 6 | border-radius:20rpx; | 9 | border-radius:20rpx; |
| 7 | box-sizing: border-box; | 10 | box-sizing: border-box; |
| 8 | - padding: 20rpx 20rpx 40rpx; | ||
| 9 | - margin-bottom: 20rpx; | ||
| 10 | -} | ||
| 11 | -.list-view-0{ | ||
| 12 | - background: none; | ||
| 13 | - margin-top: 0rpx; | ||
| 14 | - padding-bottom: 20rpx; | 11 | + padding: 20rpx 20rpx 0rpx; |
| 15 | } | 12 | } |
| 16 | .sellername{ | 13 | .sellername{ |
| 17 | height:40rpx; | 14 | height:40rpx; |
| @@ -25,40 +22,38 @@ | @@ -25,40 +22,38 @@ | ||
| 25 | margin-left: 10rpx; | 22 | margin-left: 10rpx; |
| 26 | } | 23 | } |
| 27 | .quan{ | 24 | .quan{ |
| 28 | - margin-top: 20rpx; | 25 | + margin-top: 10rpx; |
| 29 | } | 26 | } |
| 30 | .quan-tips{ | 27 | .quan-tips{ |
| 31 | height:50rpx; | 28 | height:50rpx; |
| 32 | - background:rgba(245,245,245,1); | 29 | + background:rgba(250,250,250,1); |
| 33 | border-radius:0rpx 0rpx 10rpx 10rpx; | 30 | border-radius:0rpx 0rpx 10rpx 10rpx; |
| 34 | font-size:22rpx; | 31 | font-size:22rpx; |
| 35 | font-family:PingFangSC-Regular,PingFang SC; | 32 | font-family:PingFangSC-Regular,PingFang SC; |
| 36 | font-weight:400; | 33 | font-weight:400; |
| 37 | - color:rgba(136,136,136,1); | 34 | + color:rgba(174,174,174,1); |
| 38 | line-height:50rpx; | 35 | line-height:50rpx; |
| 39 | padding-left: 36rpx; | 36 | padding-left: 36rpx; |
| 40 | width: 100%; | 37 | width: 100%; |
| 41 | box-sizing: border-box; | 38 | box-sizing: border-box; |
| 42 | } | 39 | } |
| 43 | -.pingtai{ | ||
| 44 | - background:rgba(255,255,255,1); | ||
| 45 | - color:rgba(136,136,136,1); | ||
| 46 | -} | ||
| 47 | 40 | ||
| 48 | .button-use{ | 41 | .button-use{ |
| 49 | - width:120rpx; | ||
| 50 | - height:44rpx; | ||
| 51 | - background:linear-gradient(180deg,rgba(231,66,88,1) 0%,rgba(243,53,78,1) 100%); | ||
| 52 | - border-radius:6rpx; | ||
| 53 | - font-size:24rpx; | ||
| 54 | - font-family:PingFangSC-Medium,PingFang SC; | ||
| 55 | - font-weight:500; | ||
| 56 | - color:rgba(255,227,192,1); | ||
| 57 | - line-height:44rpx; | ||
| 58 | - text-align: center; | 42 | + position: absolute; |
| 43 | + top:-12rpx; | ||
| 44 | + right:14rpx; | ||
| 45 | + width:117rpx; | ||
| 46 | + height:117rpx; | ||
| 47 | + background-size: 100% 100%; | ||
| 48 | +} | ||
| 49 | +.status-1{ | ||
| 50 | + background-image: url("http://nosqn.colorcun.com/sellerbaobao/use.png"); | ||
| 51 | +} | ||
| 52 | +.status-2{ | ||
| 53 | + background-image: url("http://nosqn.colorcun.com/sellerbaobao/lose.png"); | ||
| 59 | } | 54 | } |
| 60 | .empty-img{ | 55 | .empty-img{ |
| 61 | - background-image: url("http://nosqn.colorcun.com/sellerbaobao/empty.png"); | 56 | + background-image: url("http://nosqn.colorcun.com/sellerbaobao/empty2.png"); |
| 62 | background-size: 100% 100%; | 57 | background-size: 100% 100%; |
| 63 | width:302rpx; | 58 | width:302rpx; |
| 64 | height:408rpx; | 59 | height:408rpx; |
| @@ -17,7 +17,7 @@ | @@ -17,7 +17,7 @@ | ||
| 17 | <view class="button-use" bindtap="useCard" data-sid="{{item.sid}}">立即使用</view> | 17 | <view class="button-use" bindtap="useCard" data-sid="{{item.sid}}">立即使用</view> |
| 18 | </quan> | 18 | </quan> |
| 19 | <view class="quan-tips pingtai" wx:if="{{item.sid==0}}">适用于平台所有商家,预订包间、在线买单时使用</view> | 19 | <view class="quan-tips pingtai" wx:if="{{item.sid==0}}">适用于平台所有商家,预订包间、在线买单时使用</view> |
| 20 | - <view class="quan-tips" wx:else="">仅可在“{{seller.sellername}}”预订包间、在线买单时使用</view> | 20 | + <view class="quan-tips" wx:else="">仅可在“{{item.sellername}}”预订包间、在线买单时使用</view> |
| 21 | </view> | 21 | </view> |
| 22 | </view> | 22 | </view> |
| 23 | </view> | 23 | </view> |
-
Please register or login to post a comment