zsw-farm-bxg/components/CouponListWindow.vue

<template>
  <view>
    <view class="coupon-list-window" :class="value === true ? 'on' : ''">
      <view class="title">
        优惠券
        <text class="iconfont icon-guanbi" @click="close"></text>
      </view>
      <view v-if="couponList.length > 0">
        <view class="coupon-list">
          <div
            class="item acea-row row-center-wrapper"
            v-for="coupon in couponList"
            :key="coupon.id"
            @click="click(coupon)"
          >
						<image class="coupon-bg" src="@/static/images/coupon-bg.png" mode=""></image>
						<view class="coupon-left">
							<view class="left-bg acea-row">
								<view class="radiusLT"></view>
								<view class="radiusRT"></view>
								<view class="radiusLB"></view>
								<view class="radiusRB"></view>
							</view>
							<image class="coupon-pattern" src="@/static/images/coupon-pattern.png" mode=""></image>
							<view class="text-box">
								<view class="money">¥{{ coupon.couponPrice }}</view>
								<!-- <view class="money">7<text>折</text></view> -->
								<view class="line"></view>
								<view class="tip acea-row row-between">
									<view class="">{{coupon.ctype?'仅限定品牌可用':'全部商品可用'}}</view>
									<view v-if="coupon.endTime === 0">不限时</view>
									<view v-else>到期时间{{ coupon.endTime }}</view>
								</view>
							</view>
						</view>
						<view class="coupon-right acea-row row-center-column">
							<!-- <image v-if="item.isUse === true" class="tag" src="@/static/images/gotCoupon-icon.png" mode=""></image> -->
							<view class="type">{{'满减券' || '折扣券'}}</view>
							<view class="tip">满{{ coupon.useMinPrice }}可用</view>
							<view class="iconfont icon-xuanzhong1 font-color-red" v-if="checked === coupon.id"></view>
							<view class="iconfont icon-weixuanzhong" v-else></view>
							<!-- <view v-if="item._msg == '已过期'" class="btn btn-fail">不可用</view> -->
							<!-- <view v-if="item.isUse === true" class="btn btn-white">已领取</view>
							<view v-else-if="item.isUse === 2" class="btn btn-fail">已领完</view>
							<view v-else class="btn" @click="getCoupon(item.id, index)">立刻领取</view> -->
						</view>
            <!-- <div class="money">
              <div>
                ￥<span class="num">{{ coupon.couponPrice }}</span>
              </div>
              <div class="pic-num">满{{ coupon.useMinPrice }}元可用</div>
            </div>
            <div class="text">
              <div class="condition line1">{{ coupon.couponTitle }}</div>
              <div class="data acea-row row-between-wrapper">
                <div v-if="coupon.endTime === 0">不限时</div>
                <div v-else>截止:{{ coupon.endTime }}</div>
                <div
                  class="iconfont icon-xuanzhong1 font-color-red"
                  v-if="checked === coupon.id"
                ></div>
                <div class="iconfont icon-weixuanzhong" v-else></div>
              </div>
            </div> -->
          </div>
        </view>
        <view class="couponNo bg-color-red" @click="couponNo">不使用优惠券</view>
      </view>
      <view v-if="!couponList.length && loaded">
        <view class="pictrue">
          <image :src="`${$VUE_APP_RESOURCES_URL}/images/noCoupon.png`" class="image" />
        </view>
      </view>
    </view>
    <view class="mask" @touchmove.prevent :hidden="value === false" @click="close"></view>
  </view>
</template>
<style scoped lang="less">
.coupon-list-window .iconfont {
  font-size: 40rpx;
}
.coupon-list-window .coupon-list .item .coupon-left {
	height: 208rpx;
	.left-bg {
		top: -2rpx;
		left: 16rpx;
	}
	.coupon-pattern {
		top: 32rpx;
		right: 10rpx;
	}
	.text-box {
		padding-top: 28rpx;
		padding-left: 32rpx;
		padding-right: 30rpx;
	}
}
.icon-weixuanzhong {
	color: #999999;
}
.couponNo {
  font-size: 26rpx;
  font-weight: bold;
  color: #fff;
  width: 686rpx;
  height: 70rpx;
  border-radius: 16rpx;
  text-align: center;
  line-height: 70rpx;
  margin: 60rpx auto;
}
</style>
<script>
import { getOrderCoupon } from "@/api/order";
import DataFormatT from "@/components/DataFormatT";

export default {
  name: "CouponListWindow",
  components: {
    DataFormatT
  },
  props: {
    value: Boolean,
    checked: Number,
    price: {
      type: [Number, String],
      default: undefined
    },
    cartid: {
      type: String,
      default: ""
    }
  },
  data: function() {
    return {
      couponList: [],
      loaded: false
    };
  },
  watch: {
    price(n) {
      if (n === undefined || n == null) return;
      this.getCoupon();
    },
    cartid(n) {
      if (n === undefined || n == null) return;
      this.getCoupon();
    }
  },
  mounted: function() {},
  methods: {
    close: function() {
      this.$emit("input", false);
      this.$emit("close");
    },
    getCoupon() {
      getOrderCoupon(this.cartid).then(res => {
        this.couponList = res.data;
        this.loaded = true;
      });
    },
    click(coupon) {
      this.$emit("checked", coupon);
      this.$emit("input", false);
    },
    couponNo: function() {
      this.$emit("checked", null);
      this.$emit("input", false);
    }
  }
};
</script>