Compare commits

...

2 Commits

Author SHA1 Message Date
zhouyanli
0f6d6edcee Merge branch 'main' of http://gitea.bugtc.com/zhouyanli/property-resident-side 2026-04-21 18:25:19 +08:00
zhouyanli
244048985a 修改页面样式 2026-04-21 18:25:00 +08:00
9 changed files with 201 additions and 321 deletions

View File

@@ -1,153 +1,117 @@
<template> <template>
<view class="container"> <view class="container">
<view class="status_bar"></view> <view class="status_bar"></view>
<!-- 顶部标题栏 --> <!-- 顶部标题栏 固定 -->
<view class="top-bar"> <view class="top-bar">
<uni-nav-bar left-icon="left" title="活动列表" backgroundColor ="none" :border="false" @clickLeft="narBack" /> <uni-nav-bar left-icon="left" title="活动列表" backgroundColor="none" :border="false"
</view> @clickLeft="narBack" />
<!-- 顶部图片 -->
<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>
<!-- 我的活动状态筛选 --> <!-- 滚动区域从banner开始滚动 -->
<view v-if="activeTab === 'my'" class="filter-container"> <scroll-view class="scroll-container" scroll-y="true" @scrolltolower="loadMoreData"
<scroll-view class="filter-scroll" scroll-x> :lower-threshold="100">
<view class="filter-buttons"> <!-- 顶部图片 -->
<view v-for="filter in filters" :key="filter.value" class="filter-btn" <view class="topImg">
:class="{ 'active': myFilter === filter.value }" @tap="switchFilter(filter.value)"> <image src="http://47.104.199.163:9090/images/home/banner.png"
{{ filter.label }} 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>
</view> </scroll-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>
</view> </view>
<!-- 活动卡片 --> <!-- 活动列表 -->
<view v-for="activity in displayedActivities" :key="activity.id" class="activity-card" <view class="activity-list">
@tap="viewActivityDetail(activity)"> <!-- 空状态 -->
<!-- 活动状态标签 --> <view v-if="displayedActivities.length === 0" class="empty-state">
<!-- <view class="status-badge" :class="getStatusClass(activity.status)"> <uni-icons type="info" size="60" color="#ccc"></uni-icons>
{{ getStatusText(activity.status) }} <text class="empty-text">
</view> --> {{ activeTab === 'list' ? '暂无活动' : '暂无参与的活动' }}
<view class="status-badge"> </text>
进行中
</view> </view>
<!-- 已报名标识 --> <!-- 活动卡片 -->
<view v-if="activity.hasSigned && activeTab === 'list'" class="signed-badge"> <view v-for="activity in displayedActivities" :key="activity.id" class="activity-card"
<uni-icons type="checkbox-filled" size="14" color="#fff"></uni-icons> @tap="viewActivityDetail(activity)">
<text>已报名</text> <view class="status-badge">
</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>
<!-- 我的活动额外信息 --> <view v-if="activity.hasSigned && activeTab === 'list'" class="signed-badge">
<!-- <view v-if="activeTab === 'my'" class="my-activity-info"> <uni-icons type="checkbox-filled" size="14" color="#fff"></uni-icons>
<view class="my-status" :class="getMyStatusClass(activity.myStatus)"> <text>已报名</text>
{{ getMyStatusText(activity.myStatus) }} </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>
<view v-if="activity.myStatus === 'reviewing'" class="review-tips"> <view class="action-buttons">
<text>审核中请耐心等待</text> <button v-if="activeTab === 'list' && !activity.hasSigned" class="action-btn signup-btn"
@tap.stop="signupActivity(activity)">
立即报名
</button>
</view> </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>
</view>
<!-- 加载更多 --> <!-- 加载更多 -->
<view v-if="hasMoreData && displayedActivities.length > 0" class="load-more-container"> <view v-if="hasMoreData && displayedActivities.length > 0" class="load-more-container">
<view v-if="!isLoading" class="load-more-btn" @tap="loadMoreData"> <view v-if="!isLoading" class="load-more-btn" @tap="loadMoreData">
<text>加载更多</text> <text>加载更多</text>
<uni-icons type="arrow-down" size="16" color="#007AFF"></uni-icons> <uni-icons type="arrow-down" size="16" color="#007AFF"></uni-icons>
</view> </view>
<view v-else class="loading-container"> <view v-else class="loading-container">
<uni-icons type="spinner-cycle" size="20" color="#007AFF" class="loading-icon"></uni-icons> <uni-icons type="spinner-cycle" size="20" color="#007AFF" class="loading-icon"></uni-icons>
<text>正在加载...</text> <text>正在加载...</text>
</view>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
@@ -325,18 +289,18 @@
} }
}) })
// 返回 // 返回
const narBack = () =>{ const narBack = () => {
if(uni.getStorageSync('sourcePage') === "index"){ if (uni.getStorageSync('sourcePage') === "index") {
uni.switchTab({ uni.switchTab({
url:"/pages/index/index" url: "/pages/index/index"
}) })
}else if(uni.getStorageSync('sourcePage') === "serviceIndex"){ } else if (uni.getStorageSync('sourcePage') === "serviceIndex") {
uni.switchTab({ uni.switchTab({
url:"/pages/serviceIndex/serviceIndex" url: "/pages/serviceIndex/serviceIndex"
}) })
}
} }
}
// 切换选项卡 // 切换选项卡
const switchTab = (tab) => { const switchTab = (tab) => {
activeTab.value = tab activeTab.value = tab
@@ -381,22 +345,10 @@ const narBack = () =>{
loadPageData(currentPage.value + 1) loadPageData(currentPage.value + 1)
} }
// 获取活动状态文本
// const getStatusText = (status) => {
// const statusMap = {
// 'ongoing': '进行中',
// 'upcoming': '即将开始',
// 'ended': '已结束'
// }
// return statusMap[status] || '未知'
// }
// 获取活动状态类名 // 获取活动状态类名
const getStatusClass = (status) => { const getStatusClass = (status) => {
const classMap = { const classMap = {
'ongoing': 'status-ongoing', 'ongoing': 'status-ongoing',
// 'upcoming': 'status-upcoming',
// 'ended': 'status-ended'
} }
return classMap[status] || '' 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') return moment(date).format('YYYY-MM-DD HH:mm:ss')
} }
// 报名活动 // 报名活动
const signupActivity = (activity) => { const signupActivity = (activity) => {
// console.log('fffff', activity)
uni.navigateTo({ uni.navigateTo({
url: `/pages/activity-list/activityListDetails?id=${activity.id}&title=${activity.title}` 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) => { const viewActivityDetail = (activity) => {
@@ -512,33 +436,44 @@ const narBack = () =>{
<style> <style>
/* 页面容器 */ /* 页面容器 */
.container { .container {
min-height: 100vh; width: 100%;
height: 100vh;
background-color: #f9f9f9; background-color: #f9f9f9;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20rpx; padding: 0;
} }
.status_bar { .status_bar {
height: 32px; height: 46px;
width: 100%; 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 { .topImg {
width: 100%; width: 100%;
height: 280rpx; height: 280rpx;
margin-bottom: 20rpx; margin: 20rpx 0;
} }
/* 顶部选项卡 */ /* 顶部选项卡 */
.tabs-container { .tabs-container {
display: flex; display: flex;
/* background-color: #fff; */
/* border-bottom: 1px solid #eee; */
/* position: sticky; */
top: 0; top: 0;
z-index: 10; z-index: 10;
margin-bottom: 20rpx margin-bottom: 20rpx
@@ -600,14 +535,12 @@ const narBack = () =>{
.filter-btn.active { .filter-btn.active {
color: #fff; color: #fff;
background-color: #2F77FD; background-color: #2F77FD;
/* border-color: #007AFF; */
} }
/* 活动列表 */ /* 活动列表 */
.activity-list { .activity-list {
flex: 1; width: 100%;
/* padding: 30rpx; */ padding-bottom: 40rpx;
margin-bottom: 20rpx;
} }
/* 活动卡片 */ /* 活动卡片 */
@@ -630,21 +563,9 @@ const narBack = () =>{
border-radius: 15rpx 0rpx 15rpx 0rpx; border-radius: 15rpx 0rpx 15rpx 0rpx;
color: #fff; color: #fff;
z-index: 1; 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 { .signed-badge {
position: absolute; position: absolute;
@@ -697,7 +618,8 @@ const narBack = () =>{
margin-top: 4rpx; margin-top: 4rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.detail-text-num{
.detail-text-num {
font-size: 28rpx; font-size: 28rpx;
color: #666666; color: #666666;
} }
@@ -706,48 +628,6 @@ const narBack = () =>{
flex: 1; 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 { .action-buttons {
margin-top: 30rpx; margin-top: 30rpx;
@@ -773,22 +653,6 @@ const narBack = () =>{
background-color: #0056cc; 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 { .load-more-container {
display: flex; display: flex;
@@ -857,12 +721,4 @@ const narBack = () =>{
margin-top: 20rpx; margin-top: 20rpx;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
/* 适配不同屏幕 */
@media (min-width: 768px) {
.container {
max-width: 500px;
margin: 0 auto;
}
}
</style> </style>

View File

@@ -1,4 +1,4 @@
import request,{get,post} from "/pages/api/request.js" import request,{get,post} from "./request.js"
// =======账号密码登录======== // =======账号密码登录========
@@ -15,7 +15,7 @@ export const getRegisterUser = (data) =>{
} }
// 短信验证码登录 // 短信验证码登录
export const getLoginBySms = (data) =>{ export const getLoginBySms = (data) =>{
return post('/api/resident/auth/register',data) return post('/api/resident/auth/loginBySms',data)
} }
// 忘记密码接口 // 忘记密码接口
export const getResetPassword = (data) =>{ export const getResetPassword = (data) =>{

View File

@@ -51,7 +51,7 @@ export default function request(url, data = {}, method = "GET") {
// 业务成功code=200 // 业务成功code=200
if (resData.code === 200) { if (resData.code === 200) {
resolve(resData.data); // 只返回核心数据,简化页面调用 resolve(resData); // 只返回核心数据,简化页面调用
} }
// 业务失败code=500 // 业务失败code=500
else if (resData.code === 500) { else if (resData.code === 500) {
@@ -68,7 +68,7 @@ export default function request(url, data = {}, method = "GET") {
}, },
fail: (err) => { fail: (err) => {
uni.hideLoading(); // 关闭加载提示 uni.hideLoading(); // 关闭加载提示
uni.showToast({ title: '网络连接失败', icon: "none", duration: 2000 }); uni.showToast({ title: errMsg, icon: "none", duration: 2000 });
reject(err); reject(err);
} }
}); });

View File

@@ -35,7 +35,7 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import {onLoad,onShow} from '@dcloudio/uni-app' import {onLoad,onShow} from '@dcloudio/uni-app'
import{getResetPassword} from '/pages/api/api.js' import{getResetPassword} from '../api/api.js'
// ========== 响应式数据 ========== // ========== 响应式数据 ==========

View File

@@ -44,7 +44,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, onUnmounted } from 'vue'; import { ref, computed, onUnmounted } from 'vue';
import {getSendCode} from '/pages/api/api.js' import {getSendCode} from '../api/api.js'
// ====响应式数据====== // ====响应式数据======
const phoneNumber = ref('') const phoneNumber = ref('')

View File

@@ -84,7 +84,7 @@
<script setup> <script setup>
import { ref, computed, onUnmounted } from 'vue'; import { ref, computed, onUnmounted } from 'vue';
import {getLoginBySms,getSendCode} from '/pages/api/api.js' import {getLoginBySms,getSendCode} from '../api/api.js'
// ========== 响应式数据 ========== // ========== 响应式数据 ==========
// 手机号 // 手机号

View File

@@ -67,7 +67,7 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import {onLoad} from "@dcloudio/uni-app" import {onLoad} from "@dcloudio/uni-app"
import {getLoginPassword} from '/pages/api/api.js' import {getLoginPassword} from '../api/api.js'
// 响应式数据 // 响应式数据
const phoneNumber = ref(''); const phoneNumber = ref('');
@@ -112,39 +112,41 @@ const handleLogin = () => {
uni.showToast({ title: '请勾选协议', icon: 'none' }); uni.showToast({ title: '请勾选协议', icon: 'none' });
return; return;
} }
uni.showLoading({ title: '登录中...', mask: true }); // uni.showLoading({ title: '登录中...', mask: true });
let params = { // let params = {
username:phoneNumber.value, // username:phoneNumber.value,
password:password.value // password:password.value
} // }
getLoginPassword(params).then(res =>{ // getLoginPassword(params).then(res =>{
// console.log('33333',res) // // console.log('33333',res)
if(res.code === 200){ // if(res.code === 200){
uni.setStorageSync('token', res.token); // uni.setStorageSync('token', res.token);
uni.hideLoading(); // uni.hideLoading();
uni.showToast({ title: '登录成功', icon: 'success' }); // uni.showToast({ title: '登录成功', icon: 'success' });
setTimeout(() => { // setTimeout(() => {
uni.switchTab({ url: '/pages/index/index' }); // uni.switchTab({ url: '/pages/index/index' });
}, 1500); // }, 1500);
}else{ // }else{
uni.showToast({ title: `${res.msg},请先注册账号`, icon: 'error' }); // uni.showToast({ title: `${res.msg},请先注册账号`, icon: 'error' });
} // }
}).catch(err => { // }).catch(err => {
// console.error('登录接口异常:', err); // // console.error('登录接口异常:', err);
uni.showToast({ // uni.showToast({
title: '网络异常', // title: '网络异常',
icon: 'error' // icon: 'error'
}); // });
}) // })
// 测试 // 测试
// uni.showLoading({ uni.showLoading({
// title: '登录中...' title: '登录中...',
// }); mask:true
// setTimeout(() => { });
// uni.switchTab({ url: '/pages/index/index' }); setTimeout(() => {
// }, 1500); uni.switchTab({ url: '/pages/index/index' });
}, 1500);
uni.hideLoading()
}; };
</script> </script>

View File

@@ -98,7 +98,7 @@
<script setup> <script setup>
import { ref, computed, onUnmounted } from 'vue'; import { ref, computed, onUnmounted } from 'vue';
import {getRegisterUser,getSendCode} from '/pages/api/api.js' import {getRegisterUser,getSendCode} from '../api/api.js'
// ========== 响应式数据 ========== // ========== 响应式数据 ==========
// 表单数据 // 表单数据

View File

@@ -158,7 +158,7 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import {onLoad,onUnload} from '@dcloudio/uni-app' import {onLoad,onUnload} from '@dcloudio/uni-app'
import {getNoticeList} from "/pages/api/api.js" import {getNoticeList} from "/pageSubPack/api/api.js"
@@ -198,7 +198,7 @@ const noticeText = ref('公告公告本小区今天安装了摄像头')
const getNoticeMore = () =>{ const getNoticeMore = () =>{
uni.setStorageSync('sourcePage',"index") uni.setStorageSync('sourcePage',"index")
uni.navigateTo({ uni.navigateTo({
url:"/pages/notice-list/noticeList" url:"/pageSubPack/notice-list/noticeList"
}) })
} }
// 接收选择小区返回的参数 // 接收选择小区返回的参数
@@ -249,7 +249,29 @@ const payMentClick =() =>{
url:"/pages/payment-list/paymentIndex" url:"/pages/payment-list/paymentIndex"
}) })
} }
// 点击小区选择
// const navigateToPage = () => {
// // 获取登录状态 / token
// const token = uni.getStorageSync('token') || '';
// // 获取是否已经认证
// const userInfo = uni.getStorageSync('userInfo') || {};
// // 未登录 / 未认证 → 去我的页面(去认证)
// // 已登录 / 已认证 → 去选择小区
// if (!token || !userInfo.isAuth) {
// uni.showToast({
// title: '请先完成实名认证',
// icon: 'none'
// });
// // 跳转到我的页面
// uni.switchTab({
// url: '/pages/myIndex/myIndex'
// });
// } else {
// uni.navigateTo({
// url: '/pageSubPack/notice-list/selectHome'
// });
// }
// };
const navigateToPage = () => { const navigateToPage = () => {
uni.navigateTo({ uni.navigateTo({
url: '/pageSubPack/notice-list/selectHome' url: '/pageSubPack/notice-list/selectHome'