<template>
  <view style="text-align: center" catchtouchmove="true" class="pop">
    <scroll-view scroll-y class="head">
      <!-- 百度小程序-preview Boolean 否 点击后是否预览图片。在不设置的情况下，若 image 未监听点击事件且宽度大于 1/4 屏宽，则默认开启 -->
      <image
        src="https://img.lkbang.net/xcx/cardBackground.png"
        :preview="false"
        class="cardBackground"
      />
      <text class="text">恭喜您获得了一张礼品卡</text>
      <view class="couponCard">
        <image src="https://img.lkbang.net/xcx/fullRedu.png" class="fullRedu" />
        <text class="price"><text style="font-size: 12px">¥</text>{{ denomination }}</text>
        <text class="condition">{{ limitDesc }}</text>
        <text class="indate">{{ cardValidPeriod }}</text>
        <button class="btn"><text class="look" @click="giftCard">立即查看</text></button>
      </view>
      <view class="notice">
        礼品卡已放入您的账户中，点击“
        <text style="text-decoration: underline" @click="giftCard">礼品卡</text>
        ”即可查看
      </view>
    </scroll-view>
    <view class="bottom">
      <image src="https://img.lkbang.net/xcx/close.png" class="close" @click="closePopCard" />
    </view>
  </view>
</template>
<script>
export default {
  props: {
    denomination: {
      type: [Number, String],
      default: () => {
        return 0;
      }
    },
    limitDesc: {
      type: String,
      default: () => {
        return "";
      }
    },
    cardValidPeriod: {
      type: String,
      default: () => {
        return "";
      }
    }
  },
  methods: {
    closePopCard() {
      this.$emit("closePopCard");
    },
    giftCard() {
      uni.navigateTo({ url: "/pages/giftCardList/index" });
    }
  }
};
</script>
<style scoped>
.pop {
  position: fixed;
  top: 260rpx;
  left: 39rpx;
  z-index: 999;
}
.cardBackground {
  width: 672rpx;
  height: 686rpx;
}
.close {
  width: 66rpx;
  height: 66rpx;
  margin-top: 32rpx;
}
.head {
  height: 100%;
  position: relative;
  z-index: 101;
}
.bottom {
  position: relative;
  z-index: 101;
}
.text {
  font-size: 44rpx;
  color: #e11500;
  /* z-index: 1; */
  position: absolute;
  top: 99.16rpx;
  left: calc((100% - 636rpx) / 2 + 74.22rpx);
}
.notice {
  width: 100%;
  height: 34rpx;
  line-height: 34rpx;
  font-size: 24rpx;
  color: #ffffff;
  position: absolute;
  top: 624rpx;
  left: calc((100% - 636rpx) / 2 + 47rpx);
  display: flex;
}
.couponCard {
  width: 574rpx;
  height: 166rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  position: absolute;
  top: 302rpx;
  left: calc((100% - 636rpx) / 2 + 32rpx);
}
.fullRedu {
  width: 88rpx;
  height: 32rpx;
  position: absolute;
  left: calc((100% - 636rpx) / 2 + 32rpx);
}
.price {
  width: 92rpx;
  height: 84rpx;
  font-size: 42rpx;
  line-height: 84rpx;
  position: absolute;
  color: #ec3333;
  top: 46rpx;
  left: calc((100% - 636rpx) / 2 + 55rpx);
}
.condition {
  /* width: 166rpx; */
  height: 40rpx;
  font-size: 28rpx;
  color: #333333;
  position: absolute;
  top: 48rpx;
  left: calc((100% - 636rpx) / 2 + 210rpx);
}
.indate {
  /* width: 216rpx; */
  height: 34rpx;
  font-size: 24rpx;
  color: #666666;
  position: absolute;
  top: 94rpx;
  left: calc((100% - 636rpx) / 2 + 210rpx);
}
.btn {
  width: 160rpx;
  height: 50rpx;
  line-height: 46rpx;
  background-color: #ff2f28;
  border-radius: 25rpx;
  position: absolute;
  top: 62rpx;
  left: calc((100% - 636rpx) / 2 + 439rpx);
}
.look {
  width: 96rpx;
  font-size: 24rpx;
  color: #ffffff;
}
</style>
