微信小程序–卡券/优惠券–radio组件
预期:
实际:
实现思路:
1.构造优惠券样式:左、优惠券内容,右、选择组件(radio,checkbox)
2.写入数据,实现整体样式
3.编写逻辑代码(我这里设置为单选)
代码:
wxml,很简单就两个细节(lable, radiobox )
<view class="container coupons">
//top
<label> //增加点击范围
<view class="recommend" bindtap="chooseDefault">
<view class="recommend-content">
<view class="left">
<text>推荐使用</text>
<text>可抵扣<text class="red">¥{{ biggest }}</text>元</text>
</view>
<view class="right">
<radio value="{{ couponId }}" color="#f9364f" checked="{{ checked }}" />选择
</view>
</view>
</view>
</label>
//body
<radio-group bindchange="changeChoose"> //触发点击切换
<view class="top">
<block wx:for="{{ coupons.result }}" wx:key="id">
<label>
<view class="row">
<view class="left">
<view class="value">
<text class="red">¥{{ item.lose_price }}元</text>
<text>满{{ item.price }}元可用</text>
</view>
<view class="during">
{{ item.begin_time }}--{{ item.end_time }}
</view>
</view>
<view class="right">
<radio value="{{ item.id }}" color="#f9364f" checked="{{ item.id==couponId ? true : false }}"/>选择
</view>
</view>
</label>
</block>
</view>
</radio-group>
//botton
<view class="verify">
<view class="tips">
<text style="font-size:24rpx;color:#bbb;">已选择一张,可抵扣<text class="red">¥{{ checkedMoney }}</text>元</text>
</view>
<view class="wrap" bindtap="confirmChoose">
<button class="btn">确认使用</button>
</view>
</view>
</view>
css,超简单的盒型布局
page{
background-color: #F8F8F8;
}
.coupons{
background: #F8F8F8;
}
.recommend{
padding: 20rpx;
background: #ff7440;
height: 100rpx;
}
.recommend-content{
display: flex;
background: #fff;
height: 82rpx;
}
.top{
padding:10px;
}
.row{
display:flex;
height:200rpx;
margin-bottom: 10px;
background: #fff;
}
.left{
border: 1px solid #d1d1d1;
width:70%;
display:flex;
flex-flow:column wrap;
justify-content:center;
align-items:center;
}
.right{
width:30%;
display:flex;
justify-content:center;
align-items:center;
}
.value{
color:#696969;
display: flex;
flex-direction: column;
align-items: center;
}
.red{
color:#ff3452;
font-weight:bold;
font-size:17px;
}
.during{
font-size:12px;
margin-top:5px;
color:#989898;
}
.verify{
background: #ffffff;
padding:10px;
display:flex;
justify-content:space-between;
align-items:center;
position: fixed;
bottom: 0rpx;
width: 100%;
}
.wrap{
width:30%;
display:flex;
justify-content:center;
margin-right: 40rpx;
}
.btn{
line-height:25px;
font-size:19px;
padding:5px 10px;
width:58px;
background-color:#ff7440;
color:#ffffff;
}
js,也不难,很简单的逻辑,默认选择最大面值,切换时选中的数据随之变化即可
涉及到项目隐私,提供部分代码(我很水!大佬勿喷)
// 切换选择
changeChoose: function (event) {
let chooseId = event.detail.value;
// 是否选择推荐
if (chooseId != this.data.defaultCouponId ){
this.data.choosedCouponId = chooseId;
this.data.choosedCouponMoney = this.data.couponsBox[chooseId].lose_price;
this.setData({
'checked': false,
'checkedMoney': this.data.choosedCouponMoney,
});
}
else{
this.data.choosedCouponId = this.data.defaultCouponId;
this.data.choosedCouponMoney = this.data.defaultCouponMoney;
this.setData({
'checked': true,
'checkedMoney': this.data.choosedCouponMoney,
});
};
},
// 选择默认推荐
chooseDefault:function(){
this.data.choosedCouponId = this.data.defaultCouponId;
this.data.choosedCouponMoney = this.data.defaultCouponMoney;
this.setData({
'checked': true,
'checkedMoney': this.data.choosedCouponMoney,
'couponId': this.data.choosedCouponId,
});
},