kailin_mp/pages/redPacket/index.vue

<template>
  <view class="red_packet" catchtouchmove="true">
    <image src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/red_packet_background.jpg" class="read_packet_background" />
    <view class="rule" @click="showRule">活动规则</view>
    <view class="get_content" v-if="!showReward">
      <view class="custom_button" :class="{ disabled: packetItem.status !== 0 }" @click="showRectangle"> 立即领取 </view>
      <text>{{ packetItem.status !== 0 ? "红包已领取或已失效" : "点击领取后，红包将自动到账余额" }}</text>
    </view>
    <uni-popup ref="lotteryRule" type="center">
      <view class="lottery_rule_box">
        <view class="lottery_rule_title">
          <text>活动规则</text>
          <view class="close_btn" @click="closeRule"> X </view>
        </view>
        <scroll-view class="lottery_rule_info" scroll-y="true">
          <rich-text :nodes="packetItem.active_rule" class="rich_text"></rich-text>
        </scroll-view>
      </view>
    </uni-popup>
    <div :class="['rectangle', { show: showReward }]">
      <image src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/red_packet_bottom.png" class="read_packet_background" />
      <view class="text_content">
        <view>
          <text style="font-size: 50rpx; font-weight: bold">{{ packetItem.money }} </text>元
        </view>
        <view style="margin-top: 20rpx; color: #02a7f0" @click="_goWithdraw">已存入余额，去提现</view>
      </view>
    </div>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import common from "@/utils/common";

import http from "@/utils/request";

const lotteryRule = ref();
const showReward = ref(false);
const packetItem = ref({});

onLoad((options) => {
  // 获取传递的参数
  _getPacketlist(options.packet_id);
});

const closeRule = () => {
  lotteryRule.value.close();
};

const showRule = () => {
  lotteryRule.value.open("center");
};

const showRectangle = common.debounce(() => {
  if (!packetItem.value.custom_redpacket_id) return;
  http.request("/api/redpacket/get_redpacket", { custom_redpacket_id: packetItem.value.custom_redpacket_id }).then((callback) => {
    if (callback.code == "success") {
      showReward.value = true;
    }
  });
}, 1000);

const _goWithdraw = () => {
  uni.redirectTo({
    url: "/pages/user/withdraw",
  });
};

const _getPacketlist = (packet_id) => {
  http.request("api/redpacket/get_info", { custom_redpacket_id: packet_id }, "POST").then((callback) => {
    if (callback.code == "success") {
      packetItem.value = callback.data;
    }
  });
};
</script>

<style lang="less" scoped>
.red_packet {
  width: 100vw;
  height: 100vh;
  position: relative;
  .read_packet_background {
    width: 100%;
    height: 100%;
  }
  .rule {
    position: absolute;
    right: 0;
    top: 26%;
    color: #846100;
    padding: 15rpx 35rpx;
    background-color: #ffedad;
    border-radius: 60rpx;
    text-align: center;
    font-size: 28rpx;
  }

  .get_content {
    position: absolute;
    bottom: 18%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    > text {
      color: #fff;
      font-size: 26rpx;
      margin-top: 20rpx;
    }
  }
  .custom_button {
    display: inline-block;
    background-color: #fbe6a0;
    color: #9c6c11;
    font-size: 18px;
    padding: 6px 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    position: relative;
    &.disabled {
      background-color: #ccc;
      color: #666;
      &:before,
      &:after {
        background-color: #ccc;
        border-color: #ccc;
      }
    }
    &:before,
    &:after {
      content: "";
      position: absolute;
      width: 24px;
      height: 24px;
      background-color: #fbe6a0;
      border: 2px solid #fbe6a0;
      border-radius: 10rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    &:before {
      left: -6px;
    }
    &:after {
      right: -6px;
    }
  }

  .lottery_rule_box {
    width: 500rpx;
    display: block;
    overflow: hidden;
    background-color: #fc335f;
    font-size: 26rpx;
    margin: 0 auto;
    line-height: 50rpx;
    border-radius: 10rpx;
    padding: 20rpx 25rpx 20rpx;
    .lottery_rule_title {
      color: #ffffff;
      height: 60rpx;
      font-size: 32rpx;
      line-height: 60rpx;
      text-align: center;
      margin-bottom: 10rpx;
      .close_btn {
        float: right;
        width: 40rpx;
        height: 40rpx;
        font-size: 24rpx;
        margin-top: 9rpx;
        line-height: 40rpx;
        border-radius: 50%;
        border: 1rpx solid #ffffff;
      }
    }
    .lottery_rule_info {
      display: block;
      height: 500rpx;
      font-size: 24rpx;
      line-height: 40rpx;
      border-radius: 10rpx;
      padding: 20rpx;
      box-sizing: border-box;
      background-color: #ffffff;
      .rich_text {
        white-space: break-spaces;
      }
    }
  }
  .rectangle {
    width: 100%;
    height: 250px;
    position: absolute;
    bottom: -250px; /* 初始位置在视图之外 */
    left: 0;
    transition: bottom 1s ease; /* 添加过渡效果 */
    &.show {
      bottom: 0; /* 目标位置 */
    }
    .text_content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -35%);
      text-align: center;
    }
  }
}
</style>