CommunityApp/pagesM/comps/foot_goods_coupon.vue

<template>
<FootDialog title="领取优惠券" titleClass="title-center" :isRadius="true" :isCloseBtn="true" :visible.sync="dialogShow" :zIndex="300">
  <scroll-view scroll-y slot="main" class="choose-list-wrap">
    <block v-for="(item,index) in dataList" :key="index">
      <view class="choose-item">
        <view class="dt-voucher">
          <!-- <block v-if="!isEnable">
            <image v-if="item.status==1" class="outdate" src="http://139.9.103.171:1888/img/image/voucher_outdate.png" mode="widthFix"></image>
            <image v-if="item.status==2" class="used" src="http://139.9.103.171:1888/img/image/voucher_used.png" mode="widthFix"></image>
          </block>
          <block v-else> -->
            <!-- receive -->
            <image v-if="!item.isReceive" class="unreceive" src="http://139.9.103.171:1888/img/image/idthFix"></image>
          <!-- </block> -->

          <!-- border -->
          <image class="bg-top-border" :src="borderSrc" mode="widthFix"></image>

          <view class="mn-wrap">
            <view class="left">
              <block v-if="item.voucher_type == 1">
                <view class="worth">6.8<text class="suffix">折</text></view>
                <view class="type-name">折扣券</view>
              </block>
              <block v-else>
                <view class="worth"><text class="prefix">￥</text>{{item.amt}}</view>
                <view class="type-name">抵价券</view>
              </block>
            </view>
            <view class="mid">
              <view class="apply-to-name fn-text-row-two">{{item.name}}</view>
              <view v-if="item.minimumPrice>0" class="apply-condition">满 {{item.minimumPrice}} 元可使用</view>
            </view>
            <view class="right">
              <button v-if="item.isReceive" class="dt-btn-submit get-btn disabled-btn">已领取</button>
              <button v-else class="dt-btn-submit get-btn" @tap="onRecieve(item)">立即领取</button>
            </view>
          </view>
          <view class="ft-wrap">
            <view class="ft" @tap="onVisible($event,index)">
              <view class="des">
                <text>详细信息</text>
                <image class="arrow-up" :class="{ 'active':!item.isShowDetail }" src="http://139.9.103.171:1888/img/image/arrow_up.png" mode="widthFix"></image>
              </view>
              <view class="date">{{ item.beginDate| dateFormat('yyyy-MM-dd') }} 至 {{ item.endDate| dateFormat('yyyy-MM-dd') }}</view>
            </view>
          </view>
          <view v-if="item.isShowDetail" class="ext-wrap"><text v-if="item.minimumPrice>0">满{{item.minimumPrice}}元可使用；</text>不可叠加使用</view>
        </view>
      </view>
    </block>
    <view class="coupon_height"></view>
  </scroll-view>
</FootDialog>
</template>

<script>
import FootDialog from "./foot_dialog.vue";
export default {
  components: {
    FootDialog
  },
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [] // [{label:'选项',value:1}]
      }
    },
    type: {
      type: Number,
      default: -1,
    }
  },
  data() {
    return {
      dialogShow: false
    };
  },
  methods: {
    show() {
      this.dialogShow = true;
    },
    hide() {
      this.dialogShow = false;
    },
    //查看详情
    onVisible(ev, idx) {
      this.$emit('visible', ev, idx)
    },
    // 领取优惠券
    onRecieve(item) {
      this.$emit('receive', item)
    },
  },
};
</script>

<style lang="scss">
.choose-list-wrap {

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 740upx;
  border-top: 2upx solid #f2f2f2;
  background-color: #f2f2f2;

  .choose-item {
    width: 690upx;
    margin: 20upx auto 0;
  }

  .coupon_height {
    height: 20upx;
  }

  .fn-text-row-two {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .dt-voucher {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 690upx;
    // min-height:220upx;
    box-sizing: border-box;
    border-radius: 10upx;
    font-size: 28upx;
    background-color: #fff;

    .dis-able {
      color: #999 !important;
    }

    .unreceive {
      position: absolute;
      top: 0;
      left: 0;
      width: 90upx;
      height: 90upx;
    }

    .outdate,
    .used {
      position: absolute;
      top: 0;
      right: 0;
      width: 165upx;
      height: 86upx;
    }

    .bg-top-border {
      width: 100%;
      height: 15upx;
    }

    .mn-wrap {
      display: flex;
      width: 100%;
      height: 154upx;
      margin: 0 30upx;

      .left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 136upx;
        font-size: 22upx;
        color: #ff7171;

        .worth {
          font-size: 60upx;
          line-height: 1;

          .prefix {
            font-size: 30upx;
          }

          .suffix {
            font-size: 24upx;
          }
        }

        .type-name {
          text-align: center;
        }
      }

      .mid {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 30upx;

        .apply-to-name {
          max-height: 61upx;
          font-size: 26upx;
          line-height: 1.2;
          color: #333;
        }

        .apply-condition {
          padding-top: 20upx;
          color: #666666;
          font-size: 22upx;
        }
      }

      .get-btn {
        margin: 47upx 0;
        width: 160upx;
        height: 60upx;
        line-height: 60upx;
        border-radius: 6upx;
        font-size: 28upx;
        font-weight: 400;
        padding: 0;
        background-color: #ff7171;
        color: #fff;
      }
      .disabled-btn{
        background-color:#ccc;
      }
    }

    .ft-wrap {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin: 0 30upx;
      color: #666;

      .ft {
        position: relative;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 50upx;
        line-height: 50upx;
        font-size: 20upx;

        .des {
          .arrow-up {
            margin-left: 10upx;
            width: 18upx;
            height: 9upx;
          }

          .arrow-up.active {
            transform: rotate(180deg);
          }
        }
      }

      .ft:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1upx;
        border-top: 1upx dashed #cccccc;
        content: "";
      }
    }

    .ft-wrap:before,
    .ft-wrap:after {
      position: absolute;
      top: -14upx;
      width: 28upx;
      height: 28upx;
      border-radius: 50%;
      background-color: #f2f2f2;
      content: "";
    }

    .ft-wrap:before {
      left: -44upx;
    }

    .ft-wrap:after {
      right: -44upx;
    }

    .ext-wrap {
      padding: 0 30upx 20upx;
      width: 100%;
      color: #999;
      font-size: 20upx;
    }
  }
}
</style>