heshanApp/pages_live/components/lotteryPopup.vue

<template>
  <u-popup :show="show && countdown" round="40rpx" @close="handleClose">
    <view class="prize-box" style="border-radius: 40rpx; height: fit-content">
      <image class="nav-img" src="/static/images/live/red_head.png" mode="widthFix" />
      <image class="bg-img" src="/static/images/live/red_bg.png" />
      <view class="prize-content">
        <view class="prize-mr20" style="display: flex; justify-content: flex-end">
          <view
            style="width: 80rpx; height: 80rpx; display: flex; justify-content: center; align-items: center"
            @click="handleClose"
          >
            <u-icon class="x-end" name="close" color="#fff" size="20"></u-icon>
          </view>
        </view>
        <view class="lottery-column">
          <image class="lottery-title-img" src="/static/images/live/red_title.png" />
          <view class="lottery-countdown">
            开奖倒计时
            <view class="lottery-countdown-time">
              <view class="white-item">
                {{ countdown.hours || '00' }}
              </view>
              <view class="white-item">
                {{ countdown.minutes || '00' }}
              </view>
              <view class="white-item">
                {{ countdown.seconds || '00' }}
              </view>
            </view>
          </view>
          <view class="item-group">
            <ThreeItemSwiper :products="products"></ThreeItemSwiper>
          </view>
          <view class="point-group" v-for="(item, index) in products" :key="index"></view>
          <view class="lottery-info-text">观看直播参与抽奖</view>
          <view class="button" @click="handleClaim">参与抽奖</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import ThreeItemSwiper from '@/pages_live/components/ThreeItemSwiper.vue';

export default {
  name: "LotteryPopup",
  components: {
    ThreeItemSwiper
  },
  props: {
    // 控制弹窗显示/隐藏
    show: {
      type: Boolean,
      default: false
    },
    // 倒计时数据
    countdown: {
      type: Object,
      default: () => ({
        hours: '00',
        minutes: '00',
        seconds: '00'
      })
    },
    // 抽奖商品列表
    products: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      this.$emit('close');
    },
    // 参与抽奖
    handleClaim() {
      this.$emit('claim');
    }
  }
}
</script>

<style scoped>
.prize-box {
  position: relative;
}

.prize-mr20{
  margin-right: 20rpx;
}

.nav-img {
  width: 311rpx;
  position: absolute;
  top: -122rpx;
  left: 50%;
  transform: translateX(-50%);
}

.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.prize-content {
  position: relative;
  z-index: 2;
  padding: 24rpx 0 68rpx;
}

.lottery-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lottery-title-img {
  width: 446rpx;
  height: 80rpx;
}

.lottery-countdown {
  font-size: 24rpx;
  color: #fff;
  display: flex;
  align-items: center;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.lottery-countdown-time {
  display: flex;
  align-items: center;
}

.white-item {
  width: 40rpx;
  height: 40rpx;
  text-align: center;
  overflow: hidden;
  background: #ffffff;
  box-shadow: inset 0rpx 2rpx 8rpx 0rpx #ffebb2;
  border-radius: 8rpx;
  margin: 4rpx;
  font-weight: 600;
  font-size: 24rpx;
  color: #f85d22;
  line-height: 40rpx;
}

.item-group {
  width: 100%;
}

.point-group {
  margin: 20rpx 0 50rpx;
  display: flex;
  gap: 6rpx;
}

.lottery-info-text {
  color: #fff;
  font-size: 28rpx;
}

.button {
  margin-top: 30rpx;
  width: 520rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(180deg, #fff4d6 0%, #ffeb66 100%);
  box-shadow: 0rpx 10rpx 8rpx 4rpx rgba(246, 82, 25, 0.5);
  border-radius: 44rpx;
  font-weight: 500;
  font-size: 36rpx;
  color: #f4410b;
  text-align: center;
}
</style>