微信小程序之 优惠券选择

需求:进入优惠券选择页面,默认一个也不选择,在进行选择的时候只能选中一个。

  1. wxml部分代码如下:
<view class="page"> <view class="page__bd"> <radio-group bindchange="radioChange"> <label wx:for="{{items}}" wx:key="{{item.value}}"> <view class="wehx-card_box wehx-two"> <view class="weui-cell wehx-box_top"> <view class="weui-cell__hd wehx-box_left iconfont-white"> <text class="wehx_amount">30</text> <span class="wehx_unit"> 元</span> </view> <view class="weui-cell__bd"> <view class="wehx-title iconfont-white">全网无门槛折扣券</view> <view class="wehx-date iconfont-white">2019.12.22~2020.12.12</view> </view> <radio value="{{item.value}}" checked="true" color="#2ea7e0" /> </view> <view class="weui-cell wehx-box_bottom"> <view class="weui-cell__bd wehx_rule iconfont-white">满3000元可用</view> </view> </view> </label> </radio-group> <!-- 底部按钮 --> <view class="footer" style="background:#ffffff;position:fixed;bottom:0px;width:100%;"> <view class='weui-cell'> <view class="weui-cell__hd"></view> <view class="weui-cell__bd"> 已选择<text class="color-primary">1</text>张,可抵扣<text class="color-primary">¥30</text> </view> <view class="weui-cell__ft"> <button class="footer-btn weui-btn_mini" data-submit-type="send" hover-class="footer-border_hover">确认使用</button> </view> </view> </view> </view> </view> 
  1. wxss部分代码如下:
/* pages/coupon/coupon.wxss */ radio-group { padding: 20rpx 20rpx 70px; } .wehx-two { background-image: url('data:image/png;base64,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'); } .wehx-two { background-size: cover; background-position: 10%; } .wehx-box_top { position: relative; height: 160rpx; padding-left: 46rpx; padding-right: 48rpx; } .wehx-box_left{ padding-right: 40rpx; } .wehx-title { font-size: 40rpx; } .wehx-date { font-size: 26rpx; padding-top: 24rpx; } .wehx_amount { font-size: 70rpx; } .wehx_unit { font-size: 36rpx; padding-right: 16rpx; } .wehx-box_bottom { border-top: 1rpx dashed rgb(255, 255, 255, 0.3); } .wehx_rule { font-size: 26rpx; } /* radio自定义样式.... */ radio .wx-radio-input { height: 36rpx;/* 对勾大小 */ width: 36rpx; border-radius: 50%; border: 2rpx solid #2ea7e0; background: transparent; } /* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */ radio .wx-radio-input.wx-radio-input-checked::before { border-radius: 50%; width: 36rpx; height: 36rpx; line-height:36rpx; text-align: center; font-size: 24rpx; color: #2ea7e0; border: none; background: #ffffff; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); } .wehx-foot-btn{ background:#f42a67; } .footer-border_hover{ opacity: 0.7; } .footer-btn{ font-size: 32rpx; } 
  1. js部分代码如下:
Page({ /** 1. 页面的初始数据 */ data: { items: [ {value: 'USA', name: '美国'}, {value: 'CHN', name: '中国', checked: 'true'}, {value: 'BRA', name: '巴西'}, {value: 'JPN', name: '日本'}, {value: 'ENG', name: '英国'}, {value: 'FRA', name: '法国'}, ] }, radioChange(e) { console.log('radio发生change事件,携带value值为:', e.detail.value) const items = this.data.items for (let i = 0, len = items.length; i < len; ++i) { items[i].checked = items[i].value === e.detail.value } this.setData({ items }) }, /** 2. 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** 3. 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** 4. 生命周期函数--监听页面显示 */ onShow: function () { }, /** 5. 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** 6. 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** 7. 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** 8. 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** 9. 用户点击右上角分享 */ onShareAppMessage: function () { } }) 
  1. json部分代码如下:
{ "navigationBarTitleText": "选择红包/卡券", "navigationBarBackgroundColor": "#f7f7f5", "navigationBarTextStyle": "black", "usingComponents": {} } 

最终效果如图所示:
在这里插入图片描述

原文链接:https://blog.csdn.net/gyueh/article/details/106187792?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277499316782184681137%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277499316782184681137&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-16-106187792-null-null.nonecase&utm_term=%E4%BC%98%E6%83%A0

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片