微信小程序--卡券优惠券--radio组件

微信小程序–卡券/优惠券–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,
    });
  },