wxapp/components/page/coupon/index.vue

<template>
  <!-- 卡券组 -->
  <view class="diy-goods" :style="{ background: itemStyle.background }">
    <view class="goods-list" :class="[`display__${itemStyle.display}`, `column__${itemStyle.column}`]">
      <scroll-view :scroll-x="itemStyle.display === 'slide'">
        <view class="goods-item" v-for="(dataItem, index) in dataList" :key="index" @click="onTargetCoupon(dataItem.id, dataItem.type, dataItem.userCouponId)">
          <!-- 单列卡券 -->
          <block>
            <view class="dis-flex">
              <!-- 卡券图片 -->
              <view class="goods-item_left">
                <image class="image" :src="dataItem.image"></image>
              </view>
              <view class="goods-item_right">
                <!-- 卡券名称 -->
                <view class="goods-name twolist-hidden">
                  <text>{{ dataItem.name }}</text>
                </view>
                <view class="goods-item_desc">
                  <!-- 卡券卖点 -->
                  <view class="desc-selling_point dis-flex">
                    <text class="onelist-hidden">{{ dataItem.sellingPoint }}</text>
                  </view>
                  <view class="coupon-attr">
                      <view class="attr-l">
                          <!-- 参与人数 -->
                          <view class="desc-goods_sales dis-flex">
                            <text v-if="dataItem.type === 'C'">已领取{{ dataItem.gotNum }}，剩余{{ dataItem.leftNum }}</text>
                            <text v-if="dataItem.type === 'P'">已预存{{ dataItem.gotNum }}，剩余{{ dataItem.leftNum }}</text>
                            <text v-if="dataItem.type === 'T'">已领取{{ dataItem.gotNum }}</text>
                          </view>
                          <!-- 卡券面额 -->
                          <view v-if="dataItem.amount > 0" class="desc_footer">
                            <text class="price_x">¥{{ dataItem.amount }}</text>
                          </view>
                      </view>
                      <view class="attr-r">
                          <!--领券按钮-->
                          <view class="receive" v-if="dataItem.type === 'C' && dataItem.isReceive === false">
                              <text>立即领取</text>
                          </view>
                          <view class="receive state" v-if="dataItem.type === 'C' && dataItem.isReceive === true">
                              <text>已领取</text>
                          </view>
                          <view class="receive" v-if="dataItem.type === 'P' && dataItem.isReceive === false">
                              <text>立即预存</text>
                          </view>
                          <view v-if="dataItem.type === 'T' && dataItem.isReceive === false" class="receive">
                              <text>领取次卡</text>
                          </view>
                          <view v-if="dataItem.type === 'T' && dataItem.isReceive === true" class="receive state">
                              <text>已领取</text>
                          </view>
                      </view>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import * as couponApi from '@/api/coupon'
  import * as pageApi from '@/api/page'
  export default {
    name: "Coupon",
    
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
      itemIndex: String,
      itemStyle: Object,
      params: Object,
      dataList: Array
    },

    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
      /**
       * 卡券详情页
       */
      onTargetCoupon(couponId, type, userCouponId) {
          if (type === 'P') {
              this.$navTo(`pages/prestore/buy`, { couponId })
          } else {
              if (type === 'C') {
                    this.$navTo(`pages/coupon/detail`, { couponId: couponId, userCouponId: userCouponId })
              } else if(type === 'T') {
                  this.$navTo(`pages/timer/detail`, { couponId: couponId, userCouponId: userCouponId })
              }
         }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .diy-goods {
    .goods-list {
      padding: 4rpx;
      box-sizing: border-box;

      .goods-item {
        box-sizing: border-box;
        padding: 6rpx;

        .goods-image {
          position: relative;
          width: 80rpx;
          height: 63rpx;
          border-radius: 5rpx;
          padding-bottom: 100%;
          overflow: hidden;
          background: #fff;

          &:after {
            content: '';
            display: block;
            margin-top: 100%;
          }

          .image {
            position: absolute;
            width: 80rpx;
            height: 63rpx;
            border-radius: 5rpx;
            top: 0;
            left: 0;
            -o-object-fit: cover;
            object-fit: cover;
          }
        }

        .detail {
          padding: 8rpx;
          background: #fff;

          .goods-name {
            height: 64rpx;
            line-height: 1.3;
            white-space: normal;
            color: #484848;
            font-size: 26rpx;
          }

          .detail-price {
            .goods-price {
              margin-right: 8rpx;
            }

            .line-price {
              text-decoration: line-through;
            }
          }
        }
      }

      &.display__slide {
        white-space: nowrap;
        font-size: 0;

        .goods-item {
          display: inline-block;
        }
      }

      &.display__list {
        .goods-item {
          float: left;
        }
      }

      &.column__2 {
        .goods-item {
          width: 50%;
        }
      }

      &.column__3 {
        .goods-item {
          width: 33.33333%;
        }
      }

      &.column__1 {
        .goods-item {
          width: 100%;
          height: 240rpx;
          margin-bottom: 12rpx;
          padding: 20rpx;
          box-sizing: border-box;
          background: #fff;
          line-height: 1.6;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .goods-item_left {
          display: flex;
          width: 35%;
          background: #fff;
          align-items: center;

          .image {
            display: block;
            margin-top: 20rpx;
            width: 200rpx;
            height: 157rpx;
            border-radius: 6rpx;
          }
        }

        .goods-item_right {
          position: relative;
          width: 65%;
          .goods-name {
            margin-top: 20rpx;
            height: 40rpx;
            line-height: 1.0;
            white-space: normal;
            color: #484848;
            font-size: 30rpx;
          }
        }

        .goods-item_desc {
          margin-top: 0rpx;
          .coupon-attr {
             .attr-l {
                 float:left;
                 width: 70%;
             }
             .attr-r {
                 margin-top:20rpx;
                 float:left;
             }
          }
        }

        .desc-selling_point {
          width: 400rpx;
          font-size: 24rpx;
          color: #e49a3d;
        }
        .receive {
          height: 46rpx;
          width: 128rpx;
          line-height: 46rpx;
          text-align: center;
          border: 1px solid #f8df00;
          border-radius: 5rpx;
          color: #f86d48;
          background: #f8df98;
          font-size: 22rpx;
          &.state {
            border: none;
            color: #cccccc;
            background: #F5F5F5;
          }
        }

        .desc-goods_sales {
          color: #999;
          font-size: 24rpx;
        }

        .desc_footer {
          font-size: 24rpx;

          .price_x {
            margin-right: 16rpx;
            color: #f03c3c;
            font-size: 30rpx;
          }

          .price_y {
            text-decoration: line-through;
          }
        }
      }
    }
  }
</style>