zhouyanli/property-resident-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改页面样式

Browse Source
This commit is contained in:
zhouyanli
2026-04-21 18:25:00 +08:00
parent b8fcaff48c
commit 244048985a
9 changed files with 201 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

414
property-uniapp-project/pageSubPack/activity-list/activityList.vue
View File

@@ -1,153 +1,117 @@
<template>
<view class="container">
<view class="status_bar"></view>
<!-- 顶部标题栏 -->
<!-- 顶部标题栏 固定 -->
<view class="top-bar">
<uni-nav-bar left-icon="left" title="活动列表" backgroundColor ="none" :border="false" @clickLeft="narBack" />
</view>
<!-- 顶部图片 -->
<view class="topImg">
<image src="http://47.104.199.163:9090/images/home/banner.png" style="width: 100%;height:100%;"></image>
</view>
<!-- 选项卡 -->
<view class="tabs-container">
<view class="tab-item" :class="{ 'active': activeTab === 'list' }" @tap="switchTab('list')">
活动列表
<view v-if="activeTab === 'list'" class="tab-indicator"></view>
</view>
<view class="tab-item" :class="{ 'active': activeTab === 'my' }" @tap="switchTab('my')">
我的活动
<view v-if="activeTab === 'my'" class="tab-indicator"></view>
</view>
<uni-nav-bar left-icon="left" title="活动列表" backgroundColor="none" :border="false"
@clickLeft="narBack" />
</view>
<!-- 我的活动状态筛选 -->
<view v-if="activeTab === 'my'" class="filter-container">
<scroll-view class="filter-scroll" scroll-x>
<view class="filter-buttons">
<view v-for="filter in filters" :key="filter.value" class="filter-btn"
:class="{ 'active': myFilter === filter.value }" @tap="switchFilter(filter.value)">
{{ filter.label }}
<!-- 滚动区域：从banner开始滚动 -->
<scroll-view class="scroll-container" scroll-y="true" @scrolltolower="loadMoreData"
:lower-threshold="100">
<!-- 顶部图片 -->
<view class="topImg">
<image src="http://47.104.199.163:9090/images/home/banner.png"
style="width: 100%;height:100%;"></image>
</view>
<!-- 选项卡 -->
<view class="tabs-container">
<view class="tab-item" :class="{ 'active': activeTab === 'list' }" @tap="switchTab('list')">
活动列表
<view v-if="activeTab === 'list'" class="tab-indicator"></view>
</view>
<view class="tab-item" :class="{ 'active': activeTab === 'my' }" @tap="switchTab('my')">
我的活动
<view v-if="activeTab === 'my'" class="tab-indicator"></view>
</view>
</view>
<!-- 我的活动状态筛选 -->
<view v-if="activeTab === 'my'" class="filter-container">
<scroll-view class="filter-scroll" scroll-x>
<view class="filter-buttons">
<view v-for="filter in filters" :key="filter.value" class="filter-btn"
:class="{ 'active': myFilter === filter.value }" @tap="switchFilter(filter.value)">
{{ filter.label }}
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 活动列表 -->
<scroll-view class="activity-list" scroll-y @scrolltolower="loadMoreData" :lower-threshold="100">
<!-- 空状态 -->
<view v-if="displayedActivities.length === 0" class="empty-state">
<uni-icons type="info" size="60" color="#ccc"></uni-icons>
<text class="empty-text">
{{ activeTab === 'list' ? '暂无活动' : '暂无参与的活动' }}
</text>
</scroll-view>
</view>
<!-- 活动卡片 -->
<view v-for="activity in displayedActivities" :key="activity.id" class="activity-card"
@tap="viewActivityDetail(activity)">
<!-- 活动状态标签 -->
<!-- <view class="status-badge" :class="getStatusClass(activity.status)">
{{ getStatusText(activity.status) }}
</view> -->
<view class="status-badge">
进行中
<!-- 活动列表 -->
<view class="activity-list">
<!-- 空状态 -->
<view v-if="displayedActivities.length === 0" class="empty-state">
<uni-icons type="info" size="60" color="#ccc"></uni-icons>
<text class="empty-text">
{{ activeTab === 'list' ? '暂无活动' : '暂无参与的活动' }}
</text>
</view>
<!-- 已报名标识 -->
<view v-if="activity.hasSigned && activeTab === 'list'" class="signed-badge">
<uni-icons type="checkbox-filled" size="14" color="#fff"></uni-icons>
<text>已报名</text>
</view>
<!-- 活动信息 -->
<view class="activity-info">
<view class="u-demo-block__content ">
<up-row justify="space-between" customStyle="margin-bottom: 10px">
<up-col span="4">
<view class="info-image-left">
<image src="http://47.104.199.163:9090/images/home/activity-img.png" style="width: 100%;height: 100%;"></image>
</view>
</up-col>
<up-col span="8">
<view class="demo-layout bg-purple">
<view class="activity-title">
{{ activity.title }}
</view>
<view class="activity-detail">
<text class="detail-text">时间：{{ formatDate(activity.startTime) }} 至
{{ formatDate(activity.endTime) }}</text>
</view>
<view class="activity-detail">
<text class="detail-text">地点：{{ activity.location }}</text>
</view>
<view class="activity-detail">
<text class="detail-text-num">活动名额{{ activity.totalQuota }}人，已报名{{ activity.signedCount }}人</text>
</view>
</view>
</up-col>
</up-row>
<!-- 活动卡片 -->
<view v-for="activity in displayedActivities" :key="activity.id" class="activity-card"
@tap="viewActivityDetail(activity)">
<view class="status-badge">
进行中
</view>
<!-- 我的活动额外信息 -->
<!-- <view v-if="activeTab === 'my'" class="my-activity-info">
<view class="my-status" :class="getMyStatusClass(activity.myStatus)">
{{ getMyStatusText(activity.myStatus) }}
<view v-if="activity.hasSigned && activeTab === 'list'" class="signed-badge">
<uni-icons type="checkbox-filled" size="14" color="#fff"></uni-icons>
<text>已报名</text>
</view>
<view class="activity-info">
<view class="u-demo-block__content ">
<up-row justify="space-between" customStyle="margin-bottom: 10px">
<up-col span="4">
<view class="info-image-left">
<image src="http://47.104.199.163:9090/images/home/activity-img.png"
style="width: 100%;height: 100%;"></image>
</view>
</up-col>
<up-col span="8">
<view class="demo-layout bg-purple">
<view class="activity-title">
{{ activity.title }}
</view>
<view class="activity-detail">
<text class="detail-text">时间：{{ formatDate(activity.startTime) }} 至
{{ formatDate(activity.endTime) }}</text>
</view>
<view class="activity-detail">
<text class="detail-text">地点：{{ activity.location }}</text>
</view>
<view class="activity-detail">
<text class="detail-text-num">活动名额{{ activity.totalQuota }}人，已报名{{ activity.signedCount }}人</text>
</view>
</view>
</up-col>
</up-row>
</view>
<view v-if="activity.myStatus === 'reviewing'" class="review-tips">
<text>审核中，请耐心等待</text>
<view class="action-buttons">
<button v-if="activeTab === 'list' && !activity.hasSigned" class="action-btn signup-btn"
@tap.stop="signupActivity(activity)">
立即报名
</button>
</view>
<view v-if="activity.myStatus === 'rejected'" class="review-tips">
<text>未通过审核，如有疑问请联系管理员</text>
</view>
</view> -->
<!-- 操作按钮 -->
<view class="action-buttons">
<button v-if="activeTab === 'list' && !activity.hasSigned" class="action-btn signup-btn"
@tap.stop="signupActivity(activity)">
立即报名
</button>
<!-- <button v-if="activeTab === 'list' && activity.hasSigned" class="action-btn signed-btn"
disabled>
已报名
</button> -->
<!-- <button
v-if="activeTab === 'my' && activity.myStatus === 'passed' && activity.status === 'ongoing'"
class="action-btn signup-btn" @tap.stop="viewActivityDetail(activity)">
查看详情
</button> -->
<!-- <button
v-if="activeTab === 'my' && activity.myStatus === 'passed' && activity.status === 'ended'"
class="action-btn ended-btn" disabled>
已结束
</button> -->
<!-- <button v-if="activeTab === 'my' && activity.myStatus === 'rejected'"
class="action-btn reject-btn" @tap.stop="contactAdmin(activity)">
联系管理员
</button> -->
</view>
</view>
</view>
<!-- 加载更多 -->
<view v-if="hasMoreData && displayedActivities.length > 0" class="load-more-container">
<view v-if="!isLoading" class="load-more-btn" @tap="loadMoreData">
<text>加载更多</text>
<uni-icons type="arrow-down" size="16" color="#007AFF"></uni-icons>
</view>
<view v-else class="loading-container">
<uni-icons type="spinner-cycle" size="20" color="#007AFF" class="loading-icon"></uni-icons>
<text>正在加载...</text>
<!-- 加载更多 -->
<view v-if="hasMoreData && displayedActivities.length > 0" class="load-more-container">
<view v-if="!isLoading" class="load-more-btn" @tap="loadMoreData">
<text>加载更多</text>
<uni-icons type="arrow-down" size="16" color="#007AFF"></uni-icons>
</view>
<view v-else class="loading-container">
<uni-icons type="spinner-cycle" size="20" color="#007AFF" class="loading-icon"></uni-icons>
<text>正在加载...</text>
</view>
</view>
</view>
</scroll-view>
@@ -325,18 +289,18 @@
}
})
// 返回
const narBack = () =>{
if(uni.getStorageSync('sourcePage') === "index"){
uni.switchTab({
url:"/pages/index/index"
})
}else if(uni.getStorageSync('sourcePage') === "serviceIndex"){
uni.switchTab({
url:"/pages/serviceIndex/serviceIndex"
})
// 返回
const narBack = () => {
if (uni.getStorageSync('sourcePage') === "index") {
uni.switchTab({
url: "/pages/index/index"
})
} else if (uni.getStorageSync('sourcePage') === "serviceIndex") {
uni.switchTab({
url: "/pages/serviceIndex/serviceIndex"
})
}
}
}
// 切换选项卡
const switchTab = (tab) => {
activeTab.value = tab
@@ -381,22 +345,10 @@ const narBack = () =>{
loadPageData(currentPage.value + 1)
}
// 获取活动状态文本
// const getStatusText = (status) => {
// const statusMap = {
// 'ongoing': '进行中',
// 'upcoming': '即将开始',
// 'ended': '已结束'
// }
// return statusMap[status] || '未知'
// }
// 获取活动状态类名
const getStatusClass = (status) => {
const classMap = {
'ongoing': 'status-ongoing',
// 'upcoming': 'status-upcoming',
// 'ended': 'status-ended'
}
return classMap[status] || ''
}
@@ -424,44 +376,16 @@ const narBack = () =>{
}
// 格式化日期
function formatDate(date){
function formatDate(date) {
return moment(date).format('YYYY-MM-DD HH:mm:ss')
}
// 报名活动
const signupActivity = (activity) => {
// console.log('fffff', activity)
uni.navigateTo({
url: `/pages/activity-list/activityListDetails?id=${activity.id}&title=${activity.title}`
})
}
// const signupActivity = (activity) => {
// uni.showModal({
// title: '报名确认',
// content: `确定要报名参加"${activity.title}"吗？`,
// success: (res) => {
// if (res.confirm) {
// // 模拟报名成功
// activity.hasSigned = true
// activity.myStatus = 'reviewing'
// activity.signedCount += 1
// uni.showToast({
// title: '报名成功，等待审核',
// icon: 'success',
// duration: 2000
// })
// // 如果是我的活动页，刷新列表
// if (activeTab.value === 'my') {
// currentPage.value = 1
// displayedActivities.value = []
// loadPageData(1)
// }
// }
// }
// })
// }
// 查看活动详情
const viewActivityDetail = (activity) => {
@@ -512,33 +436,44 @@ const narBack = () =>{
<style>
/* 页面容器 */
.container {
min-height: 100vh;
width: 100%;
height: 100vh;
background-color: #f9f9f9;
display: flex;
flex-direction: column;
padding: 20rpx;
padding: 0;
}
.status_bar {
height: 32px;
height: 46px;
width: 100%;
}
/* 顶部标题 */
.top-bar {
text-align: center;
margin-bottom: 20rpx;
}
/* 顶部标题 固定 */
.top-bar {
width: 100%;
flex-shrink: 0;
background: #f9f9f9;
}
/* 滚动区域 */
.scroll-container {
flex: 1;
width: 100%;
overflow-y: auto;
padding: 0 20rpx;
box-sizing: border-box;
}
.topImg {
width: 100%;
height: 280rpx;
margin-bottom: 20rpx;
margin: 20rpx 0;
}
/* 顶部选项卡 */
.tabs-container {
display: flex;
/* background-color: #fff; */
/* border-bottom: 1px solid #eee; */
/* position: sticky; */
top: 0;
z-index: 10;
margin-bottom: 20rpx
@@ -600,14 +535,12 @@ const narBack = () =>{
.filter-btn.active {
color: #fff;
background-color: #2F77FD;
/* border-color: #007AFF; */
}
/* 活动列表 */
.activity-list {
flex: 1;
/* padding: 30rpx; */
margin-bottom: 20rpx;
width: 100%;
padding-bottom: 40rpx;
}
/* 活动卡片 */
@@ -630,21 +563,9 @@ const narBack = () =>{
border-radius: 15rpx 0rpx 15rpx 0rpx;
color: #fff;
z-index: 1;
background: repeating-linear-gradient(to right, #FD7373 , #FB3F3F);
background: repeating-linear-gradient(to right, #FD7373, #FB3F3F);
}
/* .status-ongoing {
background: repeating-linear-gradient(to right, #FD7373 , #FB3F3F);
} */
/* .status-upcoming {
background-color: #ff9d00;
}
.status-ended {
background-color: #999;
} */
/* 已报名标识 */
.signed-badge {
position: absolute;
@@ -697,7 +618,8 @@ const narBack = () =>{
margin-top: 4rpx;
flex-shrink: 0;
}
.detail-text-num{
.detail-text-num {
font-size: 28rpx;
color: #666666;
}
@@ -706,48 +628,6 @@ const narBack = () =>{
flex: 1;
}
/* 我的活动信息 */
.my-activity-info {
margin-top: 20rpx;
padding: 20rpx;
background-color: #f8f8f8;
border-radius: 12rpx;
}
.my-status {
display: inline-block;
padding: 8rpx 24rpx;
font-size: 24rpx;
border-radius: 20rpx;
margin-bottom: 10rpx;
}
.my-status-reviewing {
background-color: #e6f2ff;
color: #007AFF;
}
.my-status-passed {
background-color: #e6f7f0;
color: #07c160;
}
.my-status-rejected {
background-color: #fdeeee;
color: #f5222d;
}
.my-status-ended {
background-color: #f5f5f5;
color: #999;
}
.review-tips {
font-size: 24rpx;
color: #999;
margin-top: 10rpx;
}
/* 操作按钮 */
.action-buttons {
margin-top: 30rpx;
@@ -773,22 +653,6 @@ const narBack = () =>{
background-color: #0056cc;
}
.signed-btn {
background-color: #f0f0f0;
color: #999;
}
.reject-btn {
background-color: #fff;
color: #f5222d;
border: 1px solid #f5222d;
}
.ended-btn {
background-color: #f5f5f5;
color: #999;
}
/* 加载更多 */
.load-more-container {
display: flex;
@@ -857,12 +721,4 @@ const narBack = () =>{
margin-top: 20rpx;
margin-bottom: 10rpx;
}
/* 适配不同屏幕 */
@media (min-width: 768px) {
.container {
max-width: 500px;
margin: 0 auto;
}
}
</style>