From b7ce92d35fde3704297163010c320e336a5dd681 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期二, 13 一月 2026 10:17:16 +0800
Subject: [PATCH] 页面调整优化
---
pages/tabbar/index/home.vue | 477 ++++++++++++++++++++++++++++++-----------------------------
1 files changed, 244 insertions(+), 233 deletions(-)
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index d38ceb0..3613931 100644
--- a/pages/tabbar/index/home.vue
+++ b/pages/tabbar/index/home.vue
@@ -1,10 +1,10 @@
<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>
+ <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>
<!-- 瑙嗛鍔犺浇 -->
@@ -271,21 +271,21 @@
import ActivityPopup from '@/pages/ActivityPopup/ActivityPopup.vue'
import { mapState, mapMutations } from 'vuex'
-import { setPopupRedisTime, getPopupAcitivty,hideActivityPopupToday } 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";
+import { saveShare, saveShareClickRecord } from "@/api/share.js";
+import { getSessionId, userAction, userShare } from "@/api/userAction.js";
import { silentLogin } from "@/api/connect.js";
import { getUserInfo } from "@/api/members";
import storage from "@/utils/storage.js";
import TopBar from "@/components/TopBar.vue";
import { nextTick } from "vue";
import { getVideoCover } from "@/api/common.js"
-import {addPrizeNum} from '@/api/prize.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";
+import { getONPrizeActivity } from "../../../api/prize-activity";
export default {
- components: {UIcon, TopBar, ActivityPopup },
+ components: { UIcon, TopBar, ActivityPopup },
computed: {
hasPlayTime() {
return this.sliderFormatTime(this.progress > 0 ? this.duration * this.progress / 100 : 0);
@@ -380,104 +380,104 @@
similarlyNomore: false, // 鏄惁杩樻湁鏇村鐩镐技瑙嗛
similaryVideoIndex: 0, // 鐩镐技瑙嗛鐨勬挱鏀句綅缃�
similarlyLoading: false, // 鐩镐技瑙嗛鍔犺浇
- marginBottom: 0 ,// 搴曢儴瀹夊叏鍖哄煙
- pageSessionNo:"",
- shareId:"",
- actionParam:{
- sessionId:'',
- actionType:"PAGE",
- joinType:"SELF",
- pageCode:"RECOMMEND_VIDEO",
- pageParams:"{}",
- pageStatus:"JOIN",
- pageType:"LIST"
- },
- shareParam:{
- pageCode:"RECOMMEND_VIDEO",
- shareOption:"{}",
- pageType:"LIST"
- },
- prizeActivity:{},
+ marginBottom: 0,// 搴曢儴瀹夊叏鍖哄煙
+ pageSessionNo: "",
+ shareId: "",
+ actionParam: {
+ sessionId: '',
+ actionType: "PAGE",
+ joinType: "SELF",
+ pageCode: "RECOMMEND_VIDEO",
+ pageParams: "{}",
+ pageStatus: "JOIN",
+ pageType: "LIST"
+ },
+ shareParam: {
+ pageCode: "RECOMMEND_VIDEO",
+ shareOption: "{}",
+ pageType: "LIST"
+ },
+ prizeActivity: {},
}
},
onShow() {
- getSessionId().then(res=>{
+ getSessionId().then(res => {
console.log('鎵ц浜唎nshow')
- if (res.statusCode === 200){
- this.pageSessionNo = res.data.data
- if(this.pageSessionNo){
- let param = Object.assign({},this.actionParam);
- console.log("鎵撳嵃param",param)
- this.actionParam.sessionId = this.pageSessionNo
- console.log("鎵撳嵃this.actionParam",this.actionParam)
- 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
- }
+ if (res.statusCode === 200) {
+ this.pageSessionNo = res.data.data
+ if (this.pageSessionNo) {
+ let param = Object.assign({}, this.actionParam);
+ console.log("鎵撳嵃param", param)
+ this.actionParam.sessionId = this.pageSessionNo
+ console.log("鎵撳嵃this.actionParam", this.actionParam)
+ 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
+ }
- }
+ }
})
},
- onUnload() {
- let param = Object.assign({},this.actionParam);
- if (this.sendOnShow)return
- param.pageStatus = "LEAVE"
- // if (this.isNotEmpty(param.sessionId)){
- console.log(param)
- console.log("onUnload绂诲紑椤甸潰寮�濮嬭褰�")
- //TODO 椤甸潰鍒锋柊 瀵艰嚧onshow鏈墽琛岋紝瀵艰嚧sessionId鏈祴鍊�
- userAction(param)
- // }
+ onUnload() {
+ let param = Object.assign({}, this.actionParam);
+ if (this.sendOnShow) return
+ param.pageStatus = "LEAVE"
+ // if (this.isNotEmpty(param.sessionId)){
+ console.log(param)
+ console.log("onUnload绂诲紑椤甸潰寮�濮嬭褰�")
+ //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)
- },
+ },
+ 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) {
console.log('瑙﹀彂onLoad')
- if(option.shareId){
-
+ if (option.shareId) {
+
this.actionParam.shareId = option.shareId;
this.actionParam.joinType = 'SHARE'
uni.setStorage({
@@ -488,15 +488,15 @@
}
});
}
- 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);
+ 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)
//澶勭悊鎵爜鍑烘潵鐨勮棰�
@@ -515,7 +515,7 @@
queryParam.videoId = videoId
this.actionParam.joinType = "SCAN";
this.actionParam.pageParams = JSON.stringify(params);
-
+
console.log('瑙ｆ瀽鍙傛暟:', { shareType, videoId });
}
const token = storage.getAccessToken();
@@ -572,86 +572,86 @@
// 杩斿洖涓�涓狿romise
return new Promise((resolve) => {
- this.shareId = '';
- let shareObj ={
- videoId:videoInfo.id,
- userId:userInfo.id
+ this.shareId = '';
+ 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 = {
+ addType: "SHARE_GOODS_VIDEO",
+ extend: "",
+ }
+ let extend = { shareId: this.shareId }
+ param.extend = JSON.stringify(extend)
+ addPrizeNum(param);
+ // 褰撹幏鍙栧埌shareId鍚庯紝鍐峳esolve鍒嗕韩閰嶇疆
+ resolve({
+ title: videoInfo.title,
+ path: `/pages/tabbar/index/home?videoId=${videoInfo.id}&userId=${userInfo.id}&shareId=${this.shareId}`,
+ imageUrl: videoInfo.coverUrl,
+ success(e) {
+ console.log("鍒嗕韩鎴愬姛", e);
+ },
+ fail(e) {
+ console.log('鍒嗕韩澶辫触', e);
}
- this.shareParam.shareOption = JSON.stringify(shareObj)
- userShare(this.shareParam).then(res => {
- this.shareId = res.data.data;
- let param = {
- addType:"SHARE_GOODS_VIDEO",
- extend:"",
- }
- let extend = {shareId:this.shareId}
- param.extend = JSON.stringify(extend)
- addPrizeNum(param);
- // 褰撹幏鍙栧埌shareId鍚庯紝鍐峳esolve鍒嗕韩閰嶇疆
- resolve({
- title: videoInfo.title,
- path: `/pages/tabbar/index/home?videoId=${videoInfo.id}&userId=${userInfo.id}&shareId=${this.shareId}`,
- imageUrl: videoInfo.coverUrl,
- success(e) {
- console.log("鍒嗕韩鎴愬姛", e);
- },
- fail(e) {
- console.log('鍒嗕韩澶辫触', e);
- }
- });
- }).catch(err => {
- // 澶勭悊閿欒鎯呭喌锛屼緥濡備娇鐢ㄩ粯璁ゅ弬鏁�
- console.error('鑾峰彇鍒嗕韩ID澶辫触', err);
- resolve({
- title: videoInfo.title,
- path: `/pages/tabbar/index/home?videoId=${videoInfo.id}&userId=${userInfo.id}`,
- imageUrl: videoInfo.coverUrl
- });
- });
+ });
+ }).catch(err => {
+ // 澶勭悊閿欒鎯呭喌锛屼緥濡備娇鐢ㄩ粯璁ゅ弬鏁�
+ console.error('鑾峰彇鍒嗕韩ID澶辫触', err);
+ resolve({
+ title: videoInfo.title,
+ path: `/pages/tabbar/index/home?videoId=${videoInfo.id}&userId=${userInfo.id}`,
+ imageUrl: videoInfo.coverUrl
+ });
+ });
});
},
methods: {
- 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,
- });
- },
+ 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);
+ //璇锋眰鎴愬姛淇敼寮圭獥灞曠ず鐘舵�� 涓篺alse
+ storage.setPopupShow(false);
let obj = res.data.data;
if (obj.enableStatus === 'ON') {
- this.showActivityPopup({
- title: obj.activityName,
- desc: obj.activityDes,
- image: obj.activityCoverUrl,
- endTime: new Date(obj.endTime).getTime(),
- prizeActivityId: obj.id
- })
+ 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) {
@@ -665,7 +665,7 @@
// } else {
// this.hideActivityPopup()
// }
- //
+ //
// }
// });
}
@@ -681,8 +681,7 @@
this.hideActivityPopup()
},
replyClick(reply) {
-
- if (this.userId === reply.userId) {
+ if (this.userId === reply.userId) {
let that = this;
uni.showModal({
title: '鎻愮ず',
@@ -2020,82 +2019,94 @@
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;
+ 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;
+ 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;
+ 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); }
+ 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;
- }
+
+ 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;
+ color: rgba(255, 215, 0, 0.95);
+ /* 鏂囧瓧鏇翠寒 */
+ font-size: 26rpx;
+ font-weight: bold;
+ /* 鍔犵矖鏂囧瓧 */
+ margin-top: 8rpx;
}
.fixed-float-window:active {
- transform: scale(0.95);
+ transform: scale(0.95);
}
</style>
--
Gitblit v1.8.0