From 7ae4e27a487e282b60dc65d7836d1bcd86e7a464 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期一, 27 十月 2025 16:51:43 +0800
Subject: [PATCH] 主页页面，活动弹窗，图片适配
---
pages/passport/wechatMPLogin.vue | 4
utils/storage.js | 9 +
pages/tabbar/user/my.vue | 32 ++++++
pages/storeClaim/storePrizeClaim.vue | 32 ++++-
pages/ActivityPopup/ActivityPopup.vue | 19 ++-
pages/tabbar/index/home.vue | 163 ++++++++++++++++++++++++++++---
6 files changed, 219 insertions(+), 40 deletions(-)
diff --git a/pages/ActivityPopup/ActivityPopup.vue b/pages/ActivityPopup/ActivityPopup.vue
index ab6db3a..aea94a1 100644
--- a/pages/ActivityPopup/ActivityPopup.vue
+++ b/pages/ActivityPopup/ActivityPopup.vue
@@ -76,6 +76,7 @@
<script>
import {getPopupAcitivty,hideActivityPopupToday} from '@/api/popup.js'
+import storage from "../../utils/storage";
export default {
name: 'ActivityPopup',
props: {
@@ -140,7 +141,7 @@
},
watch: {
show(newVal) {
- console.log("寮圭獥鐩戝惉鍙樺寲",newVal)
+ console.log("寮圭獥鐩戝惉鍙樺寲",newVal)
if (newVal) {
// 寮圭獥鏄剧ず鏃堕噸鏂拌幏鍙栧鍣ㄥ搴﹀苟璁＄畻鍥剧墖灏哄
this.$nextTick(() => {
@@ -275,16 +276,16 @@
// 鍏抽棴寮圭獥
onClose() {
console.log("鐐瑰嚮鍏抽棴鎸夐挳")
- this.hideActivityPopupToday();
+ // this.hideActivityPopupToday();
this.$emit('close');
},
- hideActivityPopupToday(){
- //寮圭獥鍏抽棴
- console.log("淇敼浠婃棩涓嶆樉绀哄脊绐�")
- hideActivityPopupToday().then(res =>{
-
- })
- },
+ // hideActivityPopupToday(){
+ // //寮圭獥鍏抽棴
+ // console.log("淇敼浠婃棩涓嶆樉绀哄脊绐�")
+ // hideActivityPopupToday().then(res =>{
+ //
+ // })
+ // },
// 鐐瑰嚮閬僵灞傚叧闂�
onMaskClick() {
console.log("鐐瑰嚮閬僵灞傚叧闂�")
diff --git a/pages/passport/wechatMPLogin.vue b/pages/passport/wechatMPLogin.vue
index f42635d..514716f 100644
--- a/pages/passport/wechatMPLogin.vue
+++ b/pages/passport/wechatMPLogin.vue
@@ -95,7 +95,9 @@
uni.showShareMenu({
withShareTicket: true
});
-
+ //璁剧疆鐧诲綍寮圭獥涓哄紑鍚�
+ storage.setPopupShow(true);
+ console.log(storage.getPopupShow())
//鑾峰彇code
uni.login({
diff --git a/pages/storeClaim/storePrizeClaim.vue b/pages/storeClaim/storePrizeClaim.vue
index 4a3a526..34bb2e4 100644
--- a/pages/storeClaim/storePrizeClaim.vue
+++ b/pages/storeClaim/storePrizeClaim.vue
@@ -18,15 +18,17 @@
<view slot="body" class="card-body">
<!-- 灏侀潰鍥剧墖 -->
<view class="cover-image" v-if="prizeInfo.activityCover">
- <u-image
- :src="prizeInfo.activityCover"
- width="100%"
- height="300rpx"
- mode="aspectFill"
- border-radius="10"
- :fade="true"
- duration="450"
- ></u-image>
+ <view class="image-wrapper">
+ <u-image
+ :src="prizeInfo.activityCover"
+ width="100%"
+ height="300rpx"
+ mode="aspectFit"
+ border-radius="10"
+ :fade="true"
+ duration="450"
+ ></u-image>
+ </view>
</view>
<view class="prize-title">
@@ -273,6 +275,18 @@
</script>
<style lang="scss" scoped>
+.image-wrapper {
+ // 1. 闄愬埗婧㈠嚭锛岀‘淇漚spectFill妯″紡涓嬪浘鐗囦笉瓒呭嚭瀹瑰櫒
+ overflow: hidden;
+ // 2. 鎶婂渾瑙掓斁鍦ㄥ鍣ㄤ笂锛岄伩鍏嶇粍浠舵牱寮忓啿绐�
+ border-radius: 10rpx; // 娉ㄦ剰鍗曚綅锛氬師浠ｇ爜鍐�10锛岄渶琛px锛堝惁鍒欏湪灏忕▼搴忎腑鏃犳晥锛�
+ // 3. 纭繚瀹瑰櫒鍜屽浘鐗囧昂瀵镐竴鑷�
+ width: 100%;
+ height: 300rpx;
+ // 4. 鍏滃簳鑳屾櫙鑹诧紝閬垮厤鍔犺浇鍓嶇┖鐧�
+ background-color: #f5f5f5;
+ margin-bottom: 30rpx; // 淇濇寔鍜屽師甯冨眬涓�鑷寸殑闂磋窛
+}
.container {
background-color: #f5f5f5;
min-height: 100vh;
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index 33b6085..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,27 +588,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) {
+ //璇锋眰鎴愬姛淇敼寮圭獥灞曠ず鐘舵�� 涓篺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()
+ // }
+ //
+ // }
+ // });
}
}
@@ -1871,7 +1918,7 @@
.progress-bar {
position: relative;
width: 100%;
- height: 5px;
+ height: 10px;
background-color: rgba(255, 255, 255, 0.2);
/* 鍗婇�忔槑鑳屾櫙 */
overflow: hidden;
@@ -1936,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>
diff --git a/pages/tabbar/user/my.vue b/pages/tabbar/user/my.vue
index ceb11d3..5d1745c 100644
--- a/pages/tabbar/user/my.vue
+++ b/pages/tabbar/user/my.vue
@@ -23,7 +23,12 @@
<view class="activity-content">
<!-- 娲诲姩鍥炬爣锛堜娇鐢ㄦ帴鍙ｈ繑鍥炵殑 activityCoverUrl锛� -->
<view class="activity-icon">
- <image :src="prizeActivity.activityCoverUrl" mode="widthFix"></image>
+ <view class="floating-btn-content">
+ <text class="floating-btn-icon">馃巵</text>
+ <text class="floating-btn-text">鎶藉娲诲姩</text>
+ </view>
+
+<!-- <image :src="prizeActivity.activityCoverUrl" mode="aspectFit"></image>-->
</view>
<!-- 娲诲姩淇℃伅锛堝悕绉般�佹弿杩般�佸�掕鏃讹級 -->
<view class="activity-info">
@@ -151,9 +156,11 @@
import storage from '@/utils/storage.js'
import { getSessionId, userAction } from "@/api/userAction.js";
import {getONPrizeActivity} from "@/api/prize-activity";
+import UIcon from "../../subComponents/uview-components/uview-ui/components/u-icon/u-icon.vue";
export default {
components: {
+ UIcon,
tool
},
data() {
@@ -401,7 +408,28 @@
body {
overflow: auto;
}
-
+ .floating-btn-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ position: relative;
+ }
+ .floating-btn-icon {
+ font-size: 70rpx;
+ color: white;
+ filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
+ margin-bottom: 5rpx;
+ }
+ .floating-btn-text {
+ font-size: 20rpx;
+ color: white;
+ z-index: 1;
+ position: relative;
+ text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
+ white-space: nowrap;
+ }
.member-gradient-bg {
width: 98%;
height: 250rpx;
diff --git a/utils/storage.js b/utils/storage.js
index c921329..6a6dfa1 100644
--- a/utils/storage.js
+++ b/utils/storage.js
@@ -26,6 +26,15 @@
getHotWords() {
return uni.getStorageSync(`hotWords`);
},
+ getPopupShow(){
+ if (uni.getStorageSync(`popupShow`) === "" || uni.getStorageSync(`popupShow`) === undefined) {
+ return true;
+ }
+ return uni.getStorageSync(`popupShow`);
+ },
+ setPopupShow(val){
+ uni.setStorageSync("popupShow",val);
+ },
//鍐欏叆 灞曠ず杩樻槸涓嶅睍绀�
setShow(val) {
uni.setStorageSync("show", val);
--
Gitblit v1.8.0