From 2ec00e8b2b2fea62e935e29f8ab8b9f0f453afe3 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期四, 18 十二月 2025 17:17:56 +0800
Subject: [PATCH] 背景图
---
pages/tabbar/index/home.vue | 271 ++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 211 insertions(+), 60 deletions(-)
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index 88cfd7e..11528ac 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,57 +397,78 @@
shareOption:"{}",
pageType:"LIST"
},
+ prizeActivity:{},
}
},
onShow() {
getSessionId().then(res=>{
console.log('res',JSON.stringify(res))
- this.pageSessionNo = res.data.data
- if(this.pageSessionNo){
- let param = Object.assign({},this.actionParam);
- this.actionParam.sessionId = this.pageSessionNo
- param.sessionId = this.pageSessionNo
- userAction(param)
- }
+ if (res.code === 200){
+ this.pageSessionNo = res.data.data
+ if(this.pageSessionNo){
+ let param = Object.assign({},this.actionParam);
+ this.actionParam.sessionId = this.pageSessionNo
+ param.sessionId = this.pageSessionNo
+ 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()
+ }
+ if (!this.userId) {
+ this.getUserId()
+ }
+ // const token = storage.getAccessToken();
+ // if (! token) {
+ // this.wxSilentLogin(() => {
+ // this.loadVideos();
+ // })
+ // } else {
+ // this.loadVideos();
+ // }
+ if (this.videoList.length < 1) {
+ this.loading = false;
+ this.videoNoMore = false;
+ console.log('瑙﹀彂鏁版嵁鍔犺浇')
+ this.loadVideos();
+ }
+ // 濡傛灉瑙嗛鎸変笅鏆傚仠鍚庡垏鎹㈤〉闈㈠啀鍥炲埌椤甸潰鏃讹紝鍙畻鏆傚仠鏃堕棿锛堝洜涓烘殏鍋滄椂闂村拰绂诲紑椤甸潰鏃堕棿鏄噸澶嶇殑锛屽彧绠椾竴涓級
+ if (this.startHidenTime !== 0 && this.currentVideoIsPlaying) {
+ const duration = Date.now() - this.startHidenTime
+ this.totalHidenTime += duration
+ }
+
+
+ }
+
})
- this.openActivityPopup()
-
-
- if (!this.userId) {
- this.getUserId()
- }
- // const token = storage.getAccessToken();
- // if (! token) {
- // this.wxSilentLogin(() => {
- // this.loadVideos();
- // })
- // } else {
- // this.loadVideos();
- // }
- if (this.videoList.length < 1) {
- this.loading = false;
- this.videoNoMore = false;
- console.log('瑙﹀彂鏁版嵁鍔犺浇')
- this.loadVideos();
- }
- // 濡傛灉瑙嗛鎸変笅鏆傚仠鍚庡垏鎹㈤〉闈㈠啀鍥炲埌椤甸潰鏃讹紝鍙畻鏆傚仠鏃堕棿锛堝洜涓烘殏鍋滄椂闂村拰绂诲紑椤甸潰鏃堕棿鏄噸澶嶇殑锛屽彧绠椾竴涓級
- if (this.startHidenTime !== 0 && this.currentVideoIsPlaying) {
- const duration = Date.now() - this.startHidenTime
- this.totalHidenTime += duration
- }
},
onUnload() {
let param = Object.assign({},this.actionParam);
if (this.sendOnShow)return
param.pageStatus = "LEAVE"
- userAction(param)
+ // if (this.isNotEmpty(param.sessionId)){
+ console.log("绂诲紑椤甸潰寮�濮嬭褰�")
+ //TODO 椤甸潰鍒锋柊 瀵艰嚧onshow鏈墽琛岋紝瀵艰嚧sessionId鏈祴鍊�
+ userAction(param)
+ // }
+
},
onHide() {
this.startHidenTime = Date.now()
let param = Object.assign({},this.actionParam);
this.sendOnShow = true;
param.pageStatus = "LEAVE"
+ console.log("鎵цonHide鐨剈serAction")
userAction(param)
},
onLoad(option) {
@@ -454,6 +483,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,32 +607,63 @@
});
},
methods: {
- hideActivityPopupToday(){
- //寮圭獥鍏抽棴
- hideActivityPopupToday().then(res =>{
+ isNotEmpty(value) {
+ if (value === null || value === undefined) {
+ return false;
+ }
+ if (typeof value === 'string') {
+ return value.trim() !== '';
+ }
+ return true;
+ },
+ 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 +674,6 @@
onClosePopup() {
- //
- this.hideActivityPopupToday()
this.hideActivityPopup()
},
replyClick(reply) {
@@ -1878,20 +1946,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;
@@ -1903,6 +1973,9 @@
display: flex;
flex-direction: column;
align-items: center;
+ /* 娣诲姞padding-top鏉ユ墿澶цЕ鎽稿尯鍩� */
+ padding-top: 30px;
+ box-sizing: content-box;
}
.progress-text {
@@ -1943,4 +2016,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