|
|
|
|
|
<!-- 这是一个优惠券展示的视图组件，根据canUse属性的值来决定是否添加'gray'类名，从而控制优惠券的样式（比如是否为灰色不可用状态） -->
|
|
|
|
|
|
<view class="coupon-item {{canUse?'':'gray'}}">
|
|
|
|
|
|
<!-- 优惠券左边部分的视图容器，用于展示优惠券金额、折扣、使用条件等信息 -->
|
|
|
|
|
|
<view class='left'>
|
|
|
|
|
|
<!-- 当优惠券类型（couponType）为1时，展示固定金额优惠的相关信息 -->
|
|
|
|
|
|
<view class="num" wx:if="{{item.couponType == 1}}">
|
|
|
|
|
|
<!-- 先展示人民币符号 -->
|
|
|
|
|
|
￥
|
|
|
|
|
|
<!-- 展示具体的优惠金额，金额数据从item对象的reduceAmount属性获取 -->
|
|
|
|
|
|
<text class="coupon-price">{{item.reduceAmount}}</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 当优惠券类型（couponType）为2时，展示折扣优惠的相关信息 -->
|
|
|
|
|
|
<view class="num" wx:if="{{item.couponType == 2}}">
|
|
|
|
|
|
<!-- 展示具体的折扣数值，折扣数据从item对象的couponDiscount属性获取 -->
|
|
|
|
|
|
<text class="coupon-price">{{item.couponDiscount}}</text>折
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 展示优惠券的使用条件，满多少金额可用，金额数据从item对象的cashCondition属性获取 -->
|
|
|
|
|
|
<view class='condition'>
|
|
|
|
|
|
满{{item.cashCondition}}元可用
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 优惠券右边部分的视图容器，用于展示优惠券适用商品类型、有效期、领取/使用按钮等信息 -->
|
|
|
|
|
|
<view class='right'>
|
|
|
|
|
|
<!-- 展示优惠券适用商品类型相关的描述信息 -->
|
|
|
|
|
|
<view class="c-des">
|
|
|
|
|
|
<!-- 根据suitableProdType的值判断是通用还是指定商品可用，并展示相应文字描述 -->
|
|
|
|
|
|
<text class="c-type">{{item.suitableProdType==0?'通用':'商品'}}</text> {{item.suitableProdType==0?'全场通用':'指定商品可用'}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 展示优惠券有效期相关的信息 -->
|
|
|
|
|
|
<view class="c-date">
|
|
|
|
|
|
<!-- 当showTimeType为1且优惠券类型（couponType）为2时，展示领券后多少天失效的信息，天数从item对象的validDays属性获取 -->
|
|
|
|
|
|
<text wx:if="{{showTimeType==1 && item.couponType==2}}" class="c-data-info">领券{{item.validDays}}天后失效</text>
|
|
|
|
|
|
<!-- 其他情况展示具体的开始时间到结束时间的有效期范围，时间数据分别从item对象的startTime和endTime属性获取 -->
|
|
|
|
|
|
<text wx:else class="c-data-info">{{item.startTime}}~{{item.endTime}}</text>
|
|
|
|
|
|
<!-- 当优惠券可领取（canReceive为true）且不在订单场景（!order为true）时，展示“立即领取”按钮，并绑定点击事件'receiveCoupon'，点击可触发领取优惠券的操作 -->
|
|
|
|
|
|
<text class="c-btn" wx:if="{{item.canReceive &&!order}}" bindtap='receiveCoupon'>立即领取</text>
|
|
|
|
|
|
<!-- 当优惠券不可领取（!item.canReceive为true）且不在订单场景（!order为true）时，展示“立即使用”按钮，并绑定点击事件'useCoupon'，点击可触发使用优惠券的操作 -->
|
|
|
|
|
|
<text class="c-btn get-btn" wx:if="{{!item.canReceive &&!order}}" bindtap='useCoupon'>立即使用</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 当处于订单场景（order为true）且优惠券可用（canUse为true）时，展示选择按钮（checkbox）用于选择该优惠券，同时绑定点击事件'checkCoupon'，并传递优惠券ID（从item对象的couponId属性获取）等相关数据 -->
|
|
|
|
|
|
<view wx:if="{{order && canUse}}" class="sel-btn">
|
|
|
|
|
|
<checkbox color="#eb2444" data-couponid="{{item.couponId}}" checked="{{item.choose}}" bindtap="checkCoupon"></checkbox>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 当优惠券类型（type）为1时，展示对应的标签图片（已使用的优惠券图标） -->
|
|
|
|
|
|
<image class="tag-img" src="../../images/icon/coupon-used.png" wx:if="{{type==1}}"></image>
|
|
|
|
|
|
<!-- 当优惠券类型（type）为2时，展示对应的标签图片（其他类型的优惠券图标，具体需看实际图标含义） -->
|
|
|
|
|
|
<image class="tag-img" src="../../images/icon/coupon-ot.png" wx:if="{{type==2}}"></image>
|
|
|
|
|
|
</view>
|
