微信小程序之优惠券选择

最新推荐文章于 2024-08-04 12:09:11 发布

gyuei

最新推荐文章于 2024-08-04 12:09:11 发布

阅读量7.4k

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/gyueh/article/details/106187792

版权

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

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>

wxss部分代码如下：

/* pages/coupon/coupon.wxss */
radio-group {
  padding: 20rpx 20rpx 70px;
}
.wehx-two {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqMAAAEdCAYAAAA4t27wAAASJElEQVR4nO3dX