优惠劵

zxl

3 天以前 796977e24baa7c1d3a333e2c1c8e06ca73fd9a56

 pages/tabbar/index/home.vue

@@ -1,5 +1,11 @@
<template>
   <view class="video-container">
    <view class="fixed-float-window" @click="gotoPrizeActivity" v-if="prizeActivity.id">
      <!-- 悬浮窗内容：可替换为图标+文字/纯图标/图片 -->
          <text style="font-size: 36rpx;">🎁</text>
          <text class="float-text">抽奖活动</text>
    </view>

      <top-bar selectedTitleIndex="home" textColor="white" @changeTab="topBarChange" class="topBar"></top-bar>
      <!-- 视频加载 -->
      <zero-loading v-show="videoLoading" type="circle" color="#0ebd57" text=""></zero-loading>
@@ -276,8 +282,10 @@
import { nextTick } from "vue";
import { getVideoCover } from "@/api/common.js"
import {addPrizeNum} from '@/api/prize.js'
import UIcon from "../../subComponents/uview-components/uview-ui/components/u-icon/u-icon.vue";
import {getONPrizeActivity} from "../../../api/prize-activity";
export default {
   components: { TopBar, ActivityPopup },
   components: {UIcon, TopBar, ActivityPopup },
   computed: {
      hasPlayTime() {
         return this.sliderFormatTime(this.progress > 0 ? this.duration * this.progress / 100 : 0);
@@ -389,6 +397,7 @@
               shareOption:"{}",
               pageType:"LIST"
            },
      prizeActivity:{},
      }
   },
   onShow() {
@@ -402,8 +411,19 @@
            userAction(param)
         }
      })
    this.getONPrizeActivity()
    let showPopup = storage.getPopupShow();
    console.log(showPopup)
    if (showPopup) {
      console.log("首次打开，显示弹窗");
      storage.setPopupShow(true); // 标记为已显示
    } else {
      console.log("已显示过，不弹窗");
    }
    if(showPopup){
      this.openActivityPopup()
    }

      this.openActivityPopup()


      if (!this.userId) {
@@ -454,6 +474,16 @@
               console.log('缓存shareId成功');
            }
         });
      }
      const shareId =   uni.getStorageSync("shareId");
      if(shareId){
      let param = {
         addType:"SHARE_USER_REGISTRY",
         extend:"",
      }
      let extend = {shareId:shareId}
      param.extend = JSON.stringify(extend)
      addPrizeNum(param); 	
      }
      console.log('-----------分享出的数据---------->', option)
      //处理扫码出来的视频
@@ -568,27 +598,54 @@
      });
   },
   methods: {
    getONPrizeActivity(){
      getONPrizeActivity().then(res =>{
        if(res.statusCode=== 200){
          //后端没查到开启的抽奖活动 res.data.data.id值为null
          this.prizeActivity = res.data.data; // 存储完整活动数据
          if (this.prizeActivity.endTime) {
          }else {
            this.prizeActivity = {}; // 无活动时清空
          }
        }
      })
    },
    gotoPrizeActivity(){
      uni.navigateTo({
        url:'/pages/prize/PrizeDetail/PrizeDetail?id=' + this.prizeActivity.id,
      });
    },

      async openActivityPopup() {
         await getPopupAcitivty().then(res => {
            if (res.statusCode === 200) {
          //请求成功修改弹窗展示状态 为false
          storage.setPopupShow(false);
               let obj = res.data.data;
               if (obj.enableStatus === 'ON') {
                  setPopupRedisTime().then(res => {
                     if (res.statusCode === 200) {
                        if (res.data.state) {
                           this.showActivityPopup({
                              title: obj.activityName,
                              desc: obj.activityDes,
                              image: obj.activityCoverUrl,
                              endTime: new Date(obj.endTime).getTime(),
                              prizeActivityId: obj.id
                           })
                        } else {
                           this.hideActivityPopup()
                        }

                     }
                  });
            this.showActivityPopup({
              title: obj.activityName,
              desc: obj.activityDes,
              image: obj.activityCoverUrl,
              endTime: new Date(obj.endTime).getTime(),
              prizeActivityId: obj.id
            })
                  // setPopupRedisTime().then(res => {
                  //    if (res.statusCode === 200) {
                  //       if (res.data.state) {
                  //          this.showActivityPopup({
                  //             title: obj.activityName,
                  //             desc: obj.activityDes,
                  //             image: obj.activityCoverUrl,
                  //             endTime: new Date(obj.endTime).getTime(),
                  //             prizeActivityId: obj.id
                  //          })
                  //       } else {
                  //          this.hideActivityPopup()
                  //       }
            //
                  //    }
                  // });
               }

            }
@@ -1871,20 +1928,22 @@
.progress-bar {
   position: relative;
   width: 100%;
   height: 5px;
   background-color: rgba(255, 255, 255, 0.2);
   /* 半透明背景 */
   height: 10px;
   background-color: transparent;
   /* 透明背景 */
   overflow: hidden;
   border-radius: 1.5px;
   cursor: pointer;
   transition: height 0.2s;
   /* 添加padding-top来扩大触摸区域 */
   padding-top: 20px;
   margin-top: -10px;
}

.progress-fill {

   position: absolute;
   left: 0;
   top: 0;
   top: 10px;
   height: 100%;
   border-radius: 2px;
   background-color: lightgray;
@@ -1896,6 +1955,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
   /* 添加padding-top来扩大触摸区域 */
   padding-top: 30px;
   box-sizing: content-box;
}

.progress-text {
@@ -1936,4 +1998,82 @@
   left: 20rpx;
   z-index: 1000
}
.fixed-float-window {
  position: fixed;
  right: 20rpx;
  top: 10%;
  z-index: 1000;
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  box-shadow: 0 10rpx 16rpx rgba(110, 103, 103, 0.4);
  background-color: rgba(50, 48, 48, 0.7); /* 加深主体背景，增强对比 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  overflow: visible;
}

/* 内层主光圈（粗线条+强对比） */
.fixed-float-window::after {
  content: "";
  position: absolute;
  width: calc(100% + 25rpx);
  height: calc(100% + 25rpx);
  border-radius: 50%;
  /* 金色渐变边框，线条加粗至5rpx */
  border: 5rpx solid transparent;
  border-top-color: rgba(255, 215, 0, 0.9);
  border-right-color: rgba(255, 180, 0, 0.6);
  border-bottom-color: rgba(255, 215, 0, 0.9);
  border-left-color: rgba(255, 180, 0, 0.6);
  /* 加快旋转速度（4秒一圈） */
  animation: rotate 4s linear infinite;
  pointer-events: none;
}

/* 外层扩散光效（增强存在感） */
.fixed-float-window::before {
  content: "";
  position: absolute;
  width: calc(100% + 25rpx);
  height: calc(100% + 25rpx);
  border-radius: 50%;
  /* 模糊光效 */
  background: radial-gradient(circle, rgba(255,215,0,0.5) 0%, rgba(255,215,0,0) 70%);
  /* 呼吸式缩放动画 */
  animation: pulse 3s ease-in-out infinite;
  pointer-events: none;
}

/* 旋转动画 */
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 呼吸扩散动画 */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.6;
  }
}

.float-text {
  color: rgba(255, 215, 0, 0.95); /* 文字更亮 */
  font-size: 26rpx;
  font-weight: bold; /* 加粗文字 */
  margin-top: 8rpx;
}

.fixed-float-window:active {
  transform: scale(0.95);
}
</style>