wxapp_shuibei/components/couponListWindow/index.vue

<template>
  <up-popup :show="showPopup" :closeOnClickOverlay="true" @close="close">
    <view class="coupon-list-window">
      <view v-if="!orderShow" class="nav acea-row row-around">
        <view
          :class="['acea-row', 'row-middle', type === 1 ? 'on' : '']"
          @click="setType(1)"
          >通用券</view
        >
        <view
          :class="['acea-row', 'row-middle', type === 2 ? 'on' : '']"
          @click="setType(2)"
          >商品券</view
        >
        <view
          :class="['acea-row', 'row-middle', type === 3 ? 'on' : '']"
          @click="setType(3)"
          >品类券</view
        >
        <view
          :class="['acea-row', 'row-middle', type === 4 ? 'on' : '']"
          @click="setType(4)"
          >折扣券</view
        >
      </view>
      <view class="coupon-box">
        <view
          class="coupon-list"
          :style="{ 'margin-top': !orderShow ? '0' : '50rpx' }"
        >
          <scroll-view
            class="scroll-box"
            v-if="coupon.list.length"
            scroll-y="true"
          >
            <block v-if="coupon.list.length">
              <!-- <view class='item acea-row row-center-wrapper' v-for="(item,index) in coupon.list" :key='index'> -->
              <view
                class="item acea-row row-center-wrapper"
                v-for="(item, index) in coupon.list"
                @click="getCouponUser(index, item.id)"
                :key="index"
              >
                <view
                  class="money acea-row row-column row-center-wrapper"
                  :class="item.isUse ? 'moneyGray' : ''"
                >
                  <view
                    >￥<text class="num">{{
                      item.money ? Number(item.money) : ""
                    }}</text></view
                  >
                  <view class="pic-num">满{{ item.minPrice }}元可用</view>
                </view>
                <view class="text">
                  <view class="condition line2">
                    <span
                      class="line-title"
                      :class="item.isUse ? 'gray' : ''"
                      v-if="item.useType === 1"
                      >通用</span
                    >
                    <span
                      class="line-title"
                      :class="item.isUse ? 'gray' : ''"
                      v-else-if="item.useType === 3"
                      >品类</span
                    >
                    <span
                      class="line-title"
                      :class="item.isUse ? 'gray' : ''"
                      v-else
                      >商品</span
                    >
                    <span>{{ item.name }}</span>
                  </view>
                  <view class="tip-row">注: 工费一次性抵扣</view>
                  <view class="data acea-row row-between-wrapper">
                    <view v-if="item.day > 0"
                      >领取后{{ item.day }}天内可用</view
                    >
                    <view v-else>
                      {{
                        item.useStartTimeStr && item.useEndTimeStr
                          ? item.useStartTimeStr + " - " + item.useEndTimeStr
                          : ""
                      }}
                    </view>
                    <view class="bnt gray" v-if="item.isUse">{{
                      item.use_title || "已领取"
                    }}</view>
                    <view class="bnt bg-color" v-else>{{
                      coupon.statusTile || "立即领取"
                    }}</view>
                  </view>
                </view>
              </view>
            </block>
          </scroll-view>
          <!-- 无优惠券 -->
          <view class="pictrue" v-else>
            <image src="/static/images/noCoupon.png"></image>
          </view>
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script setup>
import { ref } from "vue";
import { setCouponReceive } from "@/api/api.js";
import { useToast } from "@/hooks/useToast";

const props = defineProps({
  showPopup: {
    type: Boolean,
    default: false,
  },
  openType: {
    type: Number,
    default: 0,
  },
  coupon: {
    type: Object,
    default: () => ({}),
  },
  orderShow: {
    type: String,
    default: "",
  },
});

const { Toast } = useToast();
const emit = defineEmits([
  "close",
  "ChangCouponsUseState",
  "ChangCoupons",
  "tabCouponType",
]);

const type = ref(1);

function close() {
  type.value = 1;
  emit("close");
}

function getCouponUser(index, id) {
  console.log({index, id}, props.openType)
  const list = props.coupon.list;
  if (list && list[index] && list[index].isUse === true && props.openType === 0)
    return true;
  switch (props.openType) {
    case 0:
      setCouponReceive(id).then(() => {
        emit("ChangCouponsUseState", index);
        Toast({ title: "领取成功" });
        emit("ChangCoupons", list[index]);
      });
      break;
    case 1:
      emit("ChangCoupons", index);
      break;
  }
}

function setType(val) {
  type.value = val;
  emit("tabCouponType", val);
}
</script>

<style scoped lang="scss">
.coupon-list-window {
  width: 100%;
  background-color: #f5f5f5;
  border-radius: 16rpx 16rpx 0 0;
}

.coupon-list-window .title {
  height: 124rpx;
  width: 100%;
  text-align: center;
  line-height: 124rpx;
  font-size: 32rpx;
  font-weight: bold;
  position: relative;
}

.coupon-list-window .iconfont {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 35rpx;
  color: #8a8a8a;
  font-weight: normal;
}

.coupon-list {
  height: 823rpx;
  overflow: auto;
  padding: 30rpx 0;
}

.pictrue {
  width: 414rpx;
  height: 336rpx;
  margin: 208rpx auto;
  image {
    width: 100%;
    height: 100%;
  }
}

.pic-num {
  color: #fff;
  font-size: 24rpx;
}

.line-title {
  width: 90rpx;
  padding: 0 10rpx;
  box-sizing: border-box;
  background: rgba(255, 247, 247, 1);
  border: 1px solid rgba(232, 51, 35, 1);
  opacity: 1;
  border-radius: 20rpx;
  font-size: 20rpx;
  color: #e83323;
  margin-right: 12rpx;
  &.gray {
    border-color: #bbb;
    color: #bbb;
    background-color: #f5f5f5;
  }
}

.tip-row {
  font-size: 26rpx;
  // color: #ccc;
}

.nav {
  width: 100%;
  height: 96rpx;
  border-bottom: 2rpx solid #f5f5f5;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  background-color: #ffffff;
  font-size: 30rpx;
  color: #999999;
  .acea-row {
    border-top: 5rpx solid transparent;
    border-bottom: 5rpx solid transparent;
    &.on {
      border-bottom-color: #e93323;
      color: #282828;
    }
    &:only-child {
      border-bottom-color: transparent;
    }
  }
}

.occupy {
  height: 106rpx;
}

.coupon-box {
}
.coupon-list {
  .scroll-box {
    height: 100%;
    .scroll-Y {
      height: 300rpx;
    }
    .scroll-view_H {
      white-space: nowrap;
      width: 100%;
    }
    .scroll-view-item {
      height: 300rpx;
      line-height: 300rpx;
      text-align: center;
      font-size: 36rpx;
    }
    .scroll-view-item_H {
      display: inline-block;
      width: 100%;
      height: 300rpx;
      line-height: 300rpx;
      text-align: center;
      font-size: 36rpx;
    }
  }
  .item {
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
    .money {
      font-weight: normal;
    }
  }
}
</style>