From 7ae4e27a487e282b60dc65d7836d1bcd86e7a464 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期一, 27 十月 2025 16:51:43 +0800
Subject: [PATCH] 主页页面，活动弹窗，图片适配
---
pages/tabbar/index/home.vue | 166 +++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 142 insertions(+), 24 deletions(-)
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index 88cfd7e..40b5fc1 100644
--- a/pages/tabbar/index/home.vue
+++ b/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) {
@@ -568,32 +588,54 @@
});
},
methods: {
- hideActivityPopupToday(){
- //寮圭獥鍏抽棴
- hideActivityPopupToday().then(res =>{
+ 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) {
+ //璇锋眰鎴愬姛淇敼寮圭獥灞曠ず鐘舵�� 涓篺alse
+ 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()
+ // }
+ //
+ // }
+ // });
}
}
@@ -604,8 +646,6 @@
onClosePopup() {
- //
- this.hideActivityPopupToday()
this.hideActivityPopup()
},
replyClick(reply) {
@@ -1878,7 +1918,7 @@
.progress-bar {
position: relative;
width: 100%;
- height: 5px;
+ height: 10px;
background-color: rgba(255, 255, 255, 0.2);
/* 鍗婇�忔槑鑳屾櫙 */
overflow: hidden;
@@ -1943,4 +1983,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>
--
Gitblit v1.8.0