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 | 225 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 179 insertions(+), 46 deletions(-)
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index bd05123..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>
@@ -15,12 +21,13 @@
mode="aspectFit"></image>
</view>
<video v-if="index >= currentIndex - videoLiveOffset && index <= currentIndex + videoLiveOffset"
- :id="'video' + index" :ref="'video' + index" :src="item.videoUrl" :autoplay="index === currentIndex"
- :controls="isControls" :loop="true" :object-fit="item.videoFit" :enable-progress-gesture="false"
- :show-center-play-btn="false" :show-progress="false" :show-fullscreen-btn="isControls"
- :show-play-btn="isControls" :show-mute-btn="false" class="video-item"
- @fullscreenchange="onFullscreenChange" @play="onPlay(item.id, index)" @pause="onPause(index)"
- @ended="onEnded(index)" @click="togglePlay(index)" @timeupdate="onTimeUpdate($event)"
+ :id="'video' + index" :ref="'video' + index" :src="item.videoUrl"
+ :autoplay="index === currentIndex" :controls="isControls" :loop="true"
+ :object-fit="item.videoFit" :enable-progress-gesture="false" :show-center-play-btn="false"
+ :show-progress="false" :show-fullscreen-btn="isControls" :show-play-btn="isControls"
+ :show-mute-btn="false" class="video-item" @fullscreenchange="onFullscreenChange"
+ @play="onPlay(item.id, index)" @pause="onPause(index)" @ended="onEnded(index)"
+ @click="togglePlay(index)" @timeupdate="onTimeUpdate($event)"
@loadedmetadata="onLoadedMetadata($event)" @waiting="videoWaiting(index)"></video>
<view class="fullscreen-btn">
<image class="fullscreen-icon" :src="isFullScreen ? off_screen : on_screen" mode="aspectFit"
@@ -61,7 +68,8 @@
<!-- 鎮寕鍟嗗搧閾炬帴灞� -->
- <view class="goods-link-warp" :style="{ bottom: marginBottom + 55 + 'px' }" v-if="item.goodsList.length > 0">
+ <view class="goods-link-warp" :style="{ bottom: marginBottom + 55 + 'px' }"
+ v-if="item.goodsList.length > 0">
<view class="goods-link">
<swiper @change="goodsChange" :autoplay="true" :interval="4000" style="height: 120rpx;">
<swiper-item v-for="goods in item.goodsList" :key="goods.goodsId">
@@ -74,8 +82,8 @@
<text class="goods-name">{{ goods.goodsName }}</text>
<view class="price-section">
<text class="current-price">楼{{ goods.price }}</text>
- <text class="original-price"
- v-if="goods.originalPrice">楼{{ goods.originalPrice }}</text>
+ <text class="original-price" v-if="goods.originalPrice">楼{{
+ goods.originalPrice }}</text>
</view>
</view>
</view>
@@ -94,8 +102,8 @@
</view>
<view style="width: 100%;word-wrap: break-word;white-space: normal;overflow-wrap: break-word;">
<text class="video-title">{{ item.title }}</text>
- <text class="video-tag" v-for="(tag, index) in item.tagList"
- :key="tag.id">#{{ tag.tagName }}</text>
+ <text class="video-tag" v-for="(tag, index) in item.tagList" :key="tag.id">#{{ tag.tagName
+ }}</text>
</view>
</view>
@@ -171,12 +179,12 @@
<text @click="openReply(comment)" class="reply-btu time">鍥炲</text>
<text v-if="!comment.hasThumbsUp" class="thumbs-up time iconfont"
@click="thubmsUp(comment.id, index, null)"><text
- v-show="comment.thumbsUpNum > 0"
- class="thumbs-num">{{ comment.thumbsUpNum }}</text></text>
+ v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{ comment.thumbsUpNum
+ }}</text></text>
<text v-else class="thumbs-up time iconfont"
@click="cancelThumbsUp(comment.id, index, null)"><text
- v-show="comment.thumbsUpNum > 0"
- class="thumbs-num">{{ comment.thumbsUpNum }}</text></text>
+ v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{ comment.thumbsUpNum
+ }}</text></text>
</view>
</view>
</view>
@@ -200,12 +208,12 @@
<text @click="openReply(comment, reply)" class="reply-btu time">鍥炲</text>
<text v-if="!reply.hasThumbsUp" class="thumbs-up time iconfont"
@click="thubmsUp(reply.id, index, replyIndex)"><text
- v-show="reply.thumbsUpNum > 0"
- class="thumbs-num">{{ reply.thumbsUpNum }}</text></text>
+ v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{ reply.thumbsUpNum
+ }}</text></text>
<text v-else class="thumbs-up time iconfont"
@click="cancelThumbsUp(reply.id, index, replyIndex)"><text
- v-show="reply.thumbsUpNum > 0"
- class="thumbs-num">{{ reply.thumbsUpNum }}</text></text>
+ v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{ reply.thumbsUpNum
+ }}</text></text>
</view>
</view>
</view>
@@ -263,7 +271,7 @@
import ActivityPopup from '@/pages/ActivityPopup/ActivityPopup.vue'
import { mapState, mapMutations } from 'vuex'
-import { setPopupRedisTime, getPopupAcitivty } from '@/api/popup.js'
+import { setPopupRedisTime, getPopupAcitivty,hideActivityPopupToday } from '@/api/popup.js'
import { changeCollect } from "@/api/collect.js";
import { saveShare, saveShareClickRecord} from "@/api/share.js";
import { getSessionId, userAction,userShare } from "@/api/userAction.js";
@@ -274,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);
@@ -356,12 +366,12 @@
loading: false, // 鏄惁姝ｅ湪鍔犺浇
videoQuery: {
pageNumber: 1,
- pageSize: 10,
+ pageSize: 3,
videoFrom: 'recommend'
},
goodsSimilarlyQuery: { // 鐩镐技瑙嗛鏌ヨ
pageNumber: 1,
- pageSize: 10,
+ pageSize: 3,
videoFrom: 'goodsSimilarly',
goodsIds: [],
currentVideoId: ''
@@ -387,6 +397,7 @@
shareOption:"{}",
pageType:"LIST"
},
+ prizeActivity:{},
}
},
onShow() {
@@ -400,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) {
@@ -528,9 +550,11 @@
// 杩斿洖涓�涓狿romise
return new Promise((resolve) => {
this.shareId = '';
- this.shareParam.shareOption = JSON.stringify({
- id:this.activityId
- })
+ let shareObj ={
+ videoId:videoInfo.id,
+ userId:userInfo.id
+ }
+ this.shareParam.shareOption = JSON.stringify(shareObj)
userShare(this.shareParam).then(res => {
this.shareId = res.data.data;
let param = {
@@ -564,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()
+ // }
+ //
+ // }
+ // });
}
}
@@ -592,6 +643,8 @@
},
...mapMutations(['showActivityPopup', 'hideActivityPopup']), // 寮曞叆Vuex鐨勬柟娉�
+
+
onClosePopup() {
this.hideActivityPopup()
},
@@ -1051,7 +1104,8 @@
const data = res.data.data.map(item => {
return {
...item,
- updateKey: item.id
+ updateKey: item.id,
+ videoUrl: item.videoUrl.replace('https://lmk-1356772813.cos.ap-chengdu.myqcloud.com/', 'https://media.meiyikuang.com/')
}
})
if (this.videoQuery.pageNumber === 1) {
@@ -1081,7 +1135,8 @@
const data = res.data.data.map(item => {
return {
...item,
- updateKey: item.id
+ updateKey: item.id,
+ videoUrl: item.videoUrl.replace('https://lmk-1356772813.cos.ap-chengdu.myqcloud.com/', 'https://media.meiyikuang.com/')
}
})
if (this.videoQuery.pageNumber === 1) {
@@ -1863,7 +1918,7 @@
.progress-bar {
position: relative;
width: 100%;
- height: 5px;
+ height: 10px;
background-color: rgba(255, 255, 255, 0.2);
/* 鍗婇�忔槑鑳屾櫙 */
overflow: hidden;
@@ -1928,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