From 63116e19824ceabc68a72f10b134d815f462e711 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期四, 23 十月 2025 20:21:49 +0800
Subject: [PATCH] 抽奖页面调整
---
pages/mine/activity/reportActivity.vue | 478 ++++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 291 insertions(+), 187 deletions(-)
diff --git a/pages/mine/activity/reportActivity.vue b/pages/mine/activity/reportActivity.vue
index 2f34778..671497f 100644
--- a/pages/mine/activity/reportActivity.vue
+++ b/pages/mine/activity/reportActivity.vue
@@ -1,47 +1,63 @@
<template>
<view class="wrapper">
- <u-navbar :is-back="true" title="娲诲姩">
- </u-navbar>
+ <top-bar selectedTitleIndex="activity" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar>
+
+ <view style="height: 50rpx;margin-top: 150rpx"></view>
+ <u-empty v-if="mockData.length === 0 && !loading" style="margin-top: 130rpx;"
+ mode="data"
+ icon="http://cdn.uviewui.com/uview/empty/data.png">
+ </u-empty>
<!-- 鍐呭鍖哄煙 -->
- <scroll-view scroll-y class="content" :style="{ paddingBottom: safeAreaInsets.bottom + 'px' }">
+ <scroll-view scroll-y class="scroll-view-container" style="height: 40vh;" @scrolltolower="loadMore" :lower-threshold="100">
<view class="waterfall">
<view class="column" v-for="(column, index) in columns" :key="index">
<!-- 閬嶅巻姣忓垪鍐呭 -->
<view class="item" v-for="(item, idx) in column" :key="item.id" @click="handleItemClick(item)">
<!-- 鍥剧墖绫诲瀷 -->
- <image v-if="item.type === '鍥剧墖'" :src="item.content" mode="widthFix" class="media"
- @load="imageLoad" :data-item="item" />
+ <image v-if="item.type === 'image'" :src="item.url" mode="widthFix" class="media" @load="imageLoad" :data-item="item"
+ :style="{ height: item.height + 'px' }" />
<!-- 瑙嗛绫诲瀷 -->
- <video v-if="item.type === '瑙嗛'" :src="item.content" class="media" controls
- :poster="item.poster" @play="handleVideoPlay"></video>
+ <video v-if="item.type === 'video'" :src="item.url" class="media" controls :poster="item.poster" :data-item="item"
+ @play="handleVideoPlay" :style="{ height: item.height + 'px' }"></video>
<!-- 鏂囧瓧绫诲瀷 -->
- <view v-if="item.type === '鏂囧瓧'" class="text-content">
+ <view v-if="item.type === 'text'" class="text-content">
<text class="title">{{ item.cover }}</text>
</view>
<text class="title">{{ item.title }}</text>
+
</view>
</view>
+ </view>
+
+
+ <!-- 鏀硅繘鐨勫姞杞芥洿澶氭彁绀� -->
+ <view class="load-more">
+ <u-loadmore v-if="mockData.length > 0" :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'"
+ :load-text="{
+ loadmore: '涓婃媺鍔犺浇鏇村',
+ loading: '姝ｅ湪鍔犺浇',
+ nomore: '娌℃湁鏇村浜�'
+ }" />
+ </view>
+ <view style="height:150rpx">
+
</view>
</scroll-view>
- <custom-tabbar bgColor="#ffffff" selected="activity"></custom-tabbar>
-
-
-
</view>
-
-
</template>
<script>
- import {
- getActivityReportList,
- } from '@/api/activity.js';
+ import TopBar from "@/components/TopBar.vue";
+ import '@/components/uview-components/uview-ui';
+ import {getActivityReportList} from '@/api/activity.js';
+ import { getSessionId, userAction } from "@/api/userAction.js";
export default {
+ components: {TopBar},
data() {
return {
columns: [
@@ -50,45 +66,137 @@
], // 鍙屽垪甯冨眬
mockData: [],
colHeight: [0, 0], // 璁板綍鍚勫垪楂樺害
-
+ baseImageHeight: 300, // 鍥剧墖鍩虹楂樺害
+ baseVideoHeight: 350, // 瑙嗛鍩虹楂樺害
+ baseTextHeight: 120, // 鏂囧瓧鍩虹楂樺害
+ query: {
+ pageNumber: 1,
+ pageSize: 10,
+ publish:1,
+ },
+ loading: false, // 鏄惁姝ｅ湪鍔犺浇
+ noMore: false, // 鏄惁娌℃湁鏇村鏁版嵁
+ total: 0 ,// 鎬绘暟鎹噺
+ pageSessionNo:"",
+ actionParam:{
+ sessionId:'',
+ actionType:"PAGE",
+ joinType:"SELF",
+ pageCode:"ACTIVITY_LIST",
+ pageParams:"{}",
+ pageStatus:"JOIN",
+ pageType:"LIST"
+ }
};
},
- onLoad() {
+ onUnload() {
+ let param = Object.assign({}, this.actionParam);
+ if (this.sendOnShow)return
+ param.pageStatus = "LEAVE"
+ userAction(param)
+ },
+ onHide() {
+ this.startHidenTime = Date.now()
+ let param = Object.assign({}, this.actionParam);
+ this.sendOnShow = true;
+ param.pageStatus = "LEAVE"
+ userAction(param)
+ },
+ onShow() {
+ getSessionId().then(res=>{
+ this.pageSessionNo = res.data.data
+ this.actionParam.sessionId = this.pageSessionNo
+ if(this.pageSessionNo){
+ let param = Object.assign({}, this.actionParam);
+ userAction(param)
+ }
+ })
+ },
+ onLoad(options) {
+ this.actionParam.pageParams = JSON.stringify(options)
this.getActivityList();
- //鑾峰緱userId
},
methods: {
+ topBarChange(titleObj) {
+ if (titleObj.index === 'home') {
+ uni.switchTab({
+ url: titleObj.pagePath
+ });
+ } else {
+ uni.redirectTo({
+ url: titleObj.pagePath
+ });
+ }
+ },
/**
* 涓嬫媺鍒锋柊鏃�
*/
onPullDownRefresh() {
+ this.query.pageNumber = 1; // 閲嶇疆椤电爜
+ this.noMore = false;
+ this.mockData = []; // 娓呯┖鏁版嵁
this.getActivityList();
},
- getActivityList() {
- uni.showLoading({
- title: '鍔犺浇涓�'
- });
- const mock = [];
- getActivityReportList().then(res => {
- uni.hideLoading();
+ loadMore() {
+ // 鏄剧ず鍔犺浇鐘舵��
+ this.loading = true;
+
+ // 寤惰繜鎵ц璁︰I鏈夊弽搴旀椂闂�
+ setTimeout(() => {
+ this.query.pageNumber += 1;
+ this.getActivityList();
+ }, 300);
+ },
+ async getActivityList() {
+ if (this.noMore) {
+ this.loading = false;
+ return
+ }
+ try {
+
+ const res = await getActivityReportList(this.query);
+ this.loading = false;
if (res.statusCode === 200) {
- for (const value of res.data.data) {
- const type = value.coverType;
- const baseHeight = type === '鏂囧瓧' ? 120 : 350;
- mock.push({
- id: value.id,
- type: type,
- cover: value.cover,
- height: baseHeight,
- title: value.activityName,
- content: value.activityContent,
- poster: '',
- });
- }
+ const newData = res.data.data.map(value => ({
+ id: value.id,
+ type: value.coverType,
+ cover: value.cover,
+ height: value.coverType === 'image' ? this.baseImageHeight : value.coverType ===
+ 'video' ? this.baseVideoHeight : this.baseTextHeight,
+ title: value.activityName,
+ content: value.activityContent,
+ poster: '',
+ url: value.url
+ }));
+
+ // 鏇存柊鎬绘暟鎹噺
+ this.total = res.data.total || 0;
+
+ // 杩藉姞鎴栨浛鎹㈡暟鎹�
+ this.mockData = this.query.pageNumber === 1 ?
+ newData :
+ [...this.mockData, ...newData];
+
+ // 鍒ゆ柇鏄惁杩樻湁鏇村鏁版嵁
+ this.noMore = newData.length < this.query.pageSize ||
+ this.mockData.length >= this.total;
+
+ // 甯冨眬鏇存柊
+ this.$nextTick(() => {
+ this.layoutItems();
+ });
}
- this.mockData = mock;
- this.layoutItems();
- })
+ } catch (error) {
+ console.error('鍔犺浇澶辫触:', error);
+ // 澶辫触鏃跺洖閫�椤电爜
+ if (this.query.pageNumber > 1) {
+ this.query.pageNumber -= 1;
+ }
+ } finally {
+ this.loading = false;
+ uni.hideLoading();
+ uni.stopPullDownRefresh();
+ }
},
// 鍥剧墖鍔犺浇瀹屾垚鍥炶皟
layoutItems() {
@@ -97,22 +205,12 @@
[]
];
this.colHeight = [0, 0];
-
+
this.mockData.forEach(item => {
const minIndex = this.colHeight.indexOf(Math.min(...this.colHeight));
- this.columns[minIndex].push(item);
-
- // 鏂囧瓧绫诲瀷涓嶉渶瑕佽绠楀浘鐗囬珮搴�
- if (item.type !== 'text') {
- this.colHeight[minIndex] += item.height + 40; // 40涓洪棿璺�
- } else {
- // 鏂囧瓧绫诲瀷鍥哄畾楂樺害璁＄畻锛堟牴鎹瓧浣撳ぇ灏忓拰琛屾暟锛�
- const lineHeight = 40; // 鍋囪姣忚40rpx
- const lines = Math.ceil(uni.getSystemInfoSync().windowWidth / 345 * 0.8); // 鍝嶅簲寮忚鏁�
- this.colHeight[minIndex] += lineHeight * lines + 40;
- }
+ this.columns[minIndex].push(item); //鑾峰緱楂樺害鏇村皬鐨� 鏀惧叆鍏冪礌
+ this.colHeight[minIndex] += item.height + 40; // 40涓洪棿璺�
});
- console.log(this.colHeight)
},
// 鍥剧墖鍔犺浇鍥炶皟
imageLoad(e) {
@@ -123,177 +221,183 @@
const ratio = height / width;
const item = e.currentTarget.dataset.item;
+ if (!item) {
+ console.error('鏃犳硶鑾峰彇鍥剧墖椤规暟鎹�', e);
+ return;
+ }
// 閲嶆柊璁＄畻瀹為檯鏄剧ず楂樺害
- const viewWidth = 345;
+ const viewWidth = uni.upx2px(345); // 灏唕px杞崲涓簆x
const viewHeight = viewWidth * ratio;
- const index = this.columns[0].findIndex(i => i.id === item.id) ||
- this.columns[1].findIndex(i => i.id === item.id);
- if (index !== -1) {
- const colIndex = this.colHeight[0] < this.colHeight[1] ? 0 : 1;
- this.colHeight[colIndex] -= item.height;
- this.colHeight[colIndex] += viewHeight;
- item.height = viewHeight;
- }
+ // 鏇存柊item楂樺害
+ item.height = viewHeight;
+
+ // 閲嶆柊璁＄畻鍒楅珮搴�
+ this.recalculateColumns();
+ },
+ // 閲嶆柊璁＄畻鍒楅珮搴�
+ recalculateColumns() {
+ this.colHeight = [0, 0];
+ this.columns.forEach((column, colIndex) => {
+ column.forEach(item => {
+ this.colHeight[colIndex] += item.height + 40; // 40涓洪棿璺�
+ });
+ });
},
handleItemClick(item) {
console.log(item)
uni.navigateTo({
url: `/pages/mine/activity/detail?id=${item.id}` // 鍙傛暟閫氳繃 URL 浼犻��
});
-
}
- },
+ }
}
</script>
<style lang="scss">
+
+ /*鏂板鍔犺浇鏇村鏍峰紡 */
+ .load-more {
+ padding: 20rpx 0;
+ text-align: center;
+ color: #999;
+ font-size: 26rpx;
+ background-color: #f8f9fa;
+ }
/* 鍏ㄥ眬鏍峰紡浼樺寲 */
.wrapper {
- height: 100vh;
- display: flex;
- flex-direction: column;
- background-color: #f7f8fa;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ background-color: #f8f9fa;
}
-
- /* 瀵艰埅鏍忎紭鍖� */
- .u-navbar {
- box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
- }
-
+
+
/* 鍐呭鍖哄煙浼樺寲 */
- .content {
- flex: 1;
- overflow: hidden;
- padding: 0 20rpx;
- box-sizing: border-box;
+ .scroll-view-container {
+ flex: 1;
+ overflow: hidden;
+ padding: 0 20rpx;
+ box-sizing: border-box;
+ /* 纭繚鍙互婊氬姩 */
+ -webkit-overflow-scrolling: touch;
}
-
+
/* 鐎戝竷娴佸竷灞�浼樺寲 */
.waterfall {
- display: flex;
- padding: 20rpx 0;
- gap: 20rpx;
+ display: flex;
+ padding: 20rpx 0;
+ gap: 20rpx;
}
-
+
.column {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 20rpx;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 20rpx;
}
-
- /* 鍗＄墖椤逛紭鍖� */
+
+ /* 鍗＄墖椤逛紭鍖� - 浣跨敤缁胯壊涓婚 */
.item {
- background: #fff;
- border-radius: 16rpx;
- overflow: hidden;
- box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
- transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-
- &:active {
- transform: scale(0.98);
- box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
- }
+ background: #ffffff;
+ border-radius: 16rpx;
+ overflow: hidden;
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+ border: 1px solid #e0f2e9;
+
+ &:active {
+ transform: scale(0.98);
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
+ background-color: #f0faf5;
+ }
}
-
+
/* 濯掍綋鍐呭鏍峰紡 */
.media {
- width: 100%;
- display: block;
- border-radius: 16rpx 16rpx 0 0;
- background-color: #f5f5f5;
-
- &[mode="widthFix"] {
- height: auto;
- }
+ width: 100%;
+ display: block;
+ border-radius: 16rpx 16rpx 0 0;
+ background-color: #f0faf5;
+
+ &[mode="widthFix"] {
+ height: auto;
+ }
}
-
+
/* 瑙嗛鐗规畩鏍峰紡 */
video.media {
- object-fit: cover;
+ object-fit: cover;
}
-
- /* 鏂囧瓧鍐呭鏍峰紡 */
+
+ /* 鏂囧瓧鍐呭鏍峰紡 - 浣跨敤缁胯壊娓愬彉 */
.text-content {
- padding: 24rpx;
- background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
- min-height: 160rpx;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .title {
- color: #fff;
- font-size: 32rpx;
- font-weight: 500;
- line-height: 1.4;
- text-align: center;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
- overflow: hidden;
- }
+ padding: 24rpx;
+ // background: linear-gradient(135deg, #38a169 0%, #48bb78 100%);
+ min-height: 160rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .title {
+ font-size: 32rpx;
+ font-weight: 500;
+ line-height: 1.4;
+ text-align: center;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
+ }
}
-
- /* 鏍囬鏍峰紡浼樺寲 */
+
+ /* 鏍囬鏍峰紡浼樺寲 - 浣跨敤娣辩豢鑹� */
.title {
- padding: 20rpx 24rpx;
- font-size: 28rpx;
- color: #333;
- line-height: 1.5;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- font-weight: 500;
-
- &:not(.text-content .title) {
- border-top: 1rpx solid #f0f0f0;
- }
+ padding: 20rpx 24rpx;
+ font-size: 28rpx;
+ color: #2c7a7b;
+ line-height: 1.5;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ font-weight: 500;
+
+ &:not(.text-content .title) {
+ border-top: 1rpx solid #e0f2e9;
+ }
}
-
+
/* 鍔犺浇鍔ㄧ敾 */
@keyframes fadeInUp {
- from {
- opacity: 0;
- transform: translateY(20rpx);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
+ from {
+ opacity: 0;
+ transform: translateY(20rpx);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
-
+
.item {
- animation: fadeInUp 0.4s ease forwards;
- opacity: 0;
-
- @for $i from 1 through 10 {
- &:nth-child(#{$i}) {
- animation-delay: $i * 0.05s;
- }
- }
+ animation: fadeInUp 0.4s ease forwards;
+ opacity: 0;
+
+ @for $i from 1 through 10 {
+ &:nth-child(#{$i}) {
+ animation-delay: $i * 0.05s;
+ }
+ }
}
+
- /* 绌虹姸鎬佹牱寮� */
- .empty-state {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 60vh;
- text-align: center;
-
- image {
- width: 240rpx;
- opacity: 0.6;
- margin-bottom: 30rpx;
- }
-
- text {
- color: #c0c4cc;
- font-size: 28rpx;
- }
+ .topBar {
+ position: fixed;
+ top: 20rpx;
+ left: 20rpx;
+ z-index: 1000;
+ background-color: #ffffff;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0