Skip to content

7
7-Eleven
Commit 0210596a by 高淑倩
Options

modify: 积分商城&&兑换详情_点击事件

parent 3941066d
Showing with 39 additions and 38 deletions
src/pages/IntegralMall/IntegralMall.wxml
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<view class='integral-vip-rules' wx:if="{{integralCouponList.length}}" bindtap="handleGoMemberRulesRules">会员规则</view> <view class='integral-vip-rules' wx:if="{{integralCouponList.length}}" bindtap="handleGoMemberRulesRules">会员规则</view>
<view class='coupon-wrap' wx:if="{{integralCouponList.length}}"> <view class='coupon-wrap' wx:if="{{integralCouponList.length}}">
<view class='coupon-list' wx:for="{{integralCouponList}}" wx:for-item="item" wx:for-index="k" wx:key="{{k}}" data-id="{{item.id}}" bindtap="goCouponDetail"> <view class='coupon-list' wx:for="{{integralCouponList}}" wx:for-item="item" wx:for-index="k" wx:key="{{k}}" data-id="{{item.id}}" bindtap="goCouponDetail">
<image class='coupon-bg' src='/assets/imgs/coupon-bg.png'></image> <view class="coupon-item">
<view class='coupon-img'> <view class='coupon-img'>
<image wx:if="{{item.thumbnail}}" src='{{item.thumbnail}}'></image> <image wx:if="{{item.thumbnail}}" src='{{item.thumbnail}}'></image>
<image wx:else src='/assets/imgs/qr-code.png'></image> <image wx:else src='/assets/imgs/qr-code.png'></image>
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
<view class='coupon-desc fs-24'>查看详情 >>></view> <view class='coupon-desc fs-24'>查看详情 >>></view>
</view> </view>
<view class='coupon-code fs-24' data-id="{{item.id}}" data-point="{{item.point}}" catchtap='exchange'>立即兑换</view> <view class='coupon-code fs-24' data-id="{{item.id}}" data-point="{{item.point}}" catchtap='exchange'>立即兑换</view>
</view>
</view> </view>
</view> </view>
<view class='empty-wrap' wx:if="{{!integralCouponList.length}}"> <view class='empty-wrap' wx:if="{{!integralCouponList.length}}">
......
src/pages/IntegralMall/IntegralMall.wxss
...@@ -37,54 +37,51 @@ ...@@ -37,54 +37,51 @@
clear: both; clear: both;
} }
.coupon-list{ .coupon-list{
width: 712rpx;
height: 209rpx;
position: relative;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.coupon-bg{ .coupon-item {
width: 712rpx; display: flex;
height: 209rpx; background-repeat: no-repeat;
position: absolute; background-position: center;
top: 0; background-size: 100% 100%;
left: 0; background-image: url("data:image/png;base64,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")
/* z-index: -1; */ }
.coupon-img {
padding: 15rpx;
box-sizing: border-box;
} }
.coupon-img image{ .coupon-img image{
width: 172rpx; width: 172rpx;
height: 172rpx; height: 172rpx;
position: absolute;
top: 18rpx;
left: 16rpx;
} }
.coupon-info{ .coupon-info{
position: absolute; padding: 42rpx 39rpx;
top: 30rpx; box-sizing: border-box;
left: 236rpx;
} }
.coupon-name{ .coupon-name{
color:#333; color:#333;
} }
.coupon-time{ .coupon-time{
color:#fc921e; color:#fc921e;
margin-top: 10rpx; margin-bottom: 18rpx;
font-size: 26rpx; font-size: 26rpx;
} }
.coupon-desc{ .coupon-desc{
color:#999; color:#999;
margin-top: 20rpx; margin-top: 11rpx;
width: 360rpx; width: 360rpx;
font-size: 24rpx; font-size: 24rpx;
} }
.coupon-code{ .coupon-code{
height: 208rpx;
color: #ffffff; color: #ffffff;
position: absolute;
right: 20rpx;
top: 43rpx;
width: 24rpx;
word-wrap: break-word; word-wrap: break-word;
font-weight: bold; font-weight: bold;
margin: 0 10rpx;
padding: 35rpx 20rpx;
box-sizing: content-box;
width: 40rpx;
line-height: 35rpx;
} }
.invalid-coupon{ .invalid-coupon{
width: 100%; width: 100%;
......
src/pages/integralMallDetail/integralMallDetail.wxml
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view class='page-integral-detail'> <view class='page-integral-detail'>
<view class='coupon-wrap'> <view class='coupon-wrap'>
<view class='coupon-list'> <view class='coupon-list'>
<image class='coupon-bg' src='/assets/imgs/coupon-bg.png' />
<view class='coupon-img'> <view class='coupon-img'>
<image wx:if="{{integralMallDetail.thumbnail}}" src='{{integralMallDetail.thumbnail}}'></image> <image wx:if="{{integralMallDetail.thumbnail}}" src='{{integralMallDetail.thumbnail}}'></image>
<image wx:else src='/assets/imgs/qr-code.png'></image> <image wx:else src='/assets/imgs/qr-code.png'></image>
......
src/pages/integralMallDetail/integralMallDetail.wxss
...@@ -6,10 +6,12 @@ ...@@ -6,10 +6,12 @@
margin-bottom: 150rpx; margin-bottom: 150rpx;
} }
.coupon-list{ .coupon-list{
width: 712rpx;
height: 209rpx; height: 209rpx;
position: relative; display: flex;
margin-bottom: 20rpx; background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
background-image: url("data:image/png;base64,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")
} }
.coupon-bg{ .coupon-bg{
width: 712rpx; width: 712rpx;
...@@ -19,17 +21,17 @@ ...@@ -19,17 +21,17 @@
left: 0; left: 0;
z-index: -1; z-index: -1;
} }
.coupon-img {
padding: 15rpx;
box-sizing: border-box;
}
.coupon-img image{ .coupon-img image{
width: 172rpx; width: 172rpx;
height: 172rpx; height: 172rpx;
position: absolute;
top: 18rpx;
left: 16rpx;
} }
.coupon-info{ .coupon-info{
position: absolute; padding: 42rpx 39rpx;
top: 30rpx; box-sizing: border-box;
left: 236rpx;
} }
.coupon-name{ .coupon-name{
color:#fc9210; color:#fc9210;
...@@ -41,12 +43,13 @@ ...@@ -41,12 +43,13 @@
} }
.coupon-code{ .coupon-code{
color: #ffffff; color: #ffffff;
position: absolute;
right: 20rpx;
top: 38rpx;
width: 24rpx;
word-wrap: break-word; word-wrap: break-word;
font-weight: bold; font-weight: bold;
margin: 0 10rpx;
padding: 35rpx 20rpx;
box-sizing: content-box;
width: 40rpx;
line-height: 35rpx;
} }
.integral-detail{ .integral-detail{
margin-top: 90rpx; margin-top: 90rpx;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment