seahorsesShop_miniapp/pages/couponCenter/couponCenter.wxml

<view class="container">
  <view class="coupons">
    <view class="banner">
      <view class="bg"><image src="../../images/icon/coupon-bg.png"></image></view>
      <view class="img"><image src="../../images/icon/coupon-banner.png"></image></view>
    </view>
    <view class="con-box">
      <view class="c-tit" wx:if="{{couponList.length}}">通用神券</view>
      <scroll-view scroll-x="true" class="general-box" wx:if="{{couponList.length}}">
        <view class="general">
          <view class="item" wx:for='{{couponList}}' wx:key='couponId'>
           <view class="item-box {{(item.canGoUse) ? 'received' : ((!item.stocks && !item.curUserReceiveCount) ? 'robbed' : '') }}">
            <view class="item-con">
              <view class="number" wx:if="{{item.couponType == 1}}">
                <view class="symbol">￥</view>
                <view class="text">{{item.reduceAmount}}</view>
              </view>
              <view class="number" wx:if="{{item.couponType == 2}}">
                <view class="text">{{item.couponDiscount}}</view>
                <view class="symbol">折</view>
              </view>
              <view class="condition">满{{item.cashCondition}}元可用</view>
              <view class="scope" wx:if="{{item.suitableProdType == 0}}">全品类商品通用</view>
              <view class="scope" wx:if="{{item.suitableProdType != 0}}">仅可购买平台部分商品</view>
              <view class="progress-box">
                <view class="text" wx:if="{{item.stocks == 0}}">已抢光</view>
                <view class="text" wx:if="{{item.stocks != 0}}">已抢{{wxs.rounding((item.sourceStock - item.stocks) * 100 / item.sourceStock)}}%</view>
                <view class="progress" style="width: {{wxs.rounding((item.sourceStock - item.stocks) * 100 / item.sourceStock)}}%"></view>
              </view>
            </view>
            <view class="item-btn" wx-if="{{!item.canGoUse && item.stocks}}" data-couponid="{{item.couponId}}" data-coupontype="1" data-couponindex="{{index}}" bindtap='receiveCoupon'>立即领取</view>
            <view class="item-btn" wx-if="{{item.canGoUse}}" data-couponid="{{item.couponId}}" bindtap='useCoupon'>去使用</view>
            <view class="item-btn" wx-if="{{!item.canGoUse && !item.stocks}}">已抢光</view>
            <view class="icon" wx-if="{{item.canGoUse}}"><image src="../../images/icon/coupon-received.png"></image></view>
            <view class="icon" wx-if="{{!item.canGoUse && !item.stocks}}"><image src="../../images/icon/coupon-robbed.png"></image></view>
           </view>
          </view>
        </view>
      </scroll-view>
      <view class="c-tit" wx:if="{{prodCouponList.length}}">推荐好券</view>
      <view class="special" wx:if="{{prodCouponList.length}}">
        <view class="item" wx:for='{{prodCouponList}}' wx:key='couponId'>
          <view class="item-box {{(item.canGoUse) ? 'received' : ((!item.stocks && !item.curUserReceiveCount) ? 'robbed' : '')}}">
            <!-- 多商品券 -->
            <view class="item-con" wx:if="{{item.prods.length > 1}}">
              <view class="shop-msg">
                <view class="logo"><image src="{{item.shopLogo}}"></image></view>
                <view class="name">{{item.shopName}}</view>
              </view>
              <view class="prod-msg">
                <view class="p-item" wx:for='{{item.prods}}' wx:for-item="prod" wx:for-index="prodIndex" wx:key='prodIndex'>
                  <view class="img"><image src="{{prod.pic}}"></image></view>
                  <view class="price">￥{{prod.price}}</view>
                </view>
              </view>
            </view>
            <view class="item-btn" wx:if="{{item.prods.length > 1}}">
              <view class="btn-box">
                <view class="number" wx:if="{{item.couponType == 1}}">
                  <view class="symbol">￥</view>
                  <view class="text">{{item.reduceAmount}}</view>
                </view>
                <view class="number" wx:if="{{item.couponType == 2}}">
                  <view class="text">{{item.couponDiscount}}</view>
                  <view class="symbol">折</view>
                </view>
                <view class="condition">满{{item.cashCondition}}元可用</view>
                <view class="progress-box">
                  <view class="text" wx:if="{{item.stocks == 0}}">已抢光</view>
                  <view class="text" wx:if="{{item.stocks != 0}}">已抢{{wxs.rounding((item.sourceStock - item.stocks) * 100 / item.sourceStock)}}%</view>
                  <view class="progress" style="width: {{wxs.rounding((item.sourceStock - item.stocks) * 100 / item.sourceStock)}}%"></view>
                </view>
                <view class="btn" wx-if="{{!item.canGoUse && item.stocks}}" data-couponid="{{item.couponId}}" data-coupontype="2" data-couponindex="{{index}}" bindtap='receiveCoupon'>立即领取</view>
                <view class="btn" wx-if="{{item.canGoUse}}" data-couponid="{{item.couponId}}" data-prodlist="{{item.prods}}" bindtap='useCoupon'>去使用</view>
                <view class="btn" wx-if="{{!item.canGoUse && !item.stocks}}">已抢光</view>
              </view>
            </view>
            <!-- /多商品券 -->
            <!-- 单商品券 -->
            <view class="left" wx:if="{{item.prods.length == 1}}">
              <view class="img"><image src="{{item.prods[0].pic}}"></image></view>
              <view class="text-box">
                <view class="goods-name">{{item.prods[0].prodName}}</view>
                <view class="coupon-number">
                  <view class="number" wx:if="{{item.couponType == 1}}">
                    <view class="symbol">￥</view>
                    <view class="text">{{item.reduceAmount}}</view>
                  </view>
                  <view class="number" wx:if="{{item.couponType == 2}}">
                    <view class="text">{{item.couponDiscount}}</view>
                    <view class="symbol">折</view>
                  </view>
                  <view class="condition">满{{item.cashCondition}}元可用</view>
                </view>
              </view>
            </view>
            <view class="right" wx:if="{{item.prods.length == 1}}">
              <view class="btn-box">
                <view class="progress-text" wx:if="{{item.stocks == 0}}">已抢光</view>
                <view class="progress-text" wx:if="{{item.stocks != 0}}">已抢{{wxs.rounding((item.sourceStock - item.stocks) * 100 / item.sourceStock)}}%</view>
                <view class="progress-box">
                  <view class="progress" style="width: {{wxs.rounding((item.sourceStock - item.stocks) * 100 / item.sourceStock)}}%"></view>
                </view>
                <view class="btn" wx-if="{{!item.canGoUse && item.stocks}}" data-couponid="{{item.couponId}}" data-coupontype="2" data-couponindex="{{index}}" bindtap='receiveCoupon'>立即领取</view>
                <view class="btn" wx-if="{{item.canGoUse}}" data-couponid="{{item.couponId}}" data-prodlist="{{item.prods}}" bindtap='useCoupon'>去使用</view>
                <view class="btn" wx-if="{{!item.canGoUse && !item.stocks}}">已抢光</view>
              </view>
            </view>
            <!-- /单商品券 -->
            <view class="icon" wx-if="{{item.canGoUse}}"><image src="../../images/icon/coupon-received.png"></image></view>
            <view class="icon" wx-if="{{!item.canGoUse && !item.stocks}}"><image src="../../images/icon/coupon-robbed.png"></image></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空 -->
    <view class="empty" wx:if="{{couponList.length==0 && prodCouponList.length==0}}">
      <view class="empty-icon">
        <image src="../../images/icon/empty.png"></image>
      </view>
      <view class="empty-text">商家还未发布优惠券哦</view>
    </view>
  </view>
</view>

<wxs module="wxs" src="../../wxs/number.wxs" />