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>

28
property-uniapp-project/pageSubPack/api/api.js Normal file
View File

@@ -0,0 +1,28 @@
import request,{get,post} from "./request.js"
// =======账号密码登录========
export const getLoginPassword = (data) =>{
return post('/api/resident/auth/loginByPassword',data)
}
// 注册新用户获取验证码
export const getSendCode = (data) =>{
return post('/api/resident/auth/sendSmsCode',data)
}
// 注册新用户
export const getRegisterUser = (data) =>{
return post('/api/resident/auth/register',data)
}
// 短信验证码登录
export const getLoginBySms = (data) =>{
return post('/api/resident/auth/loginBySms',data)
}
// 忘记密码接口
export const getResetPassword = (data) =>{
return post('/api/resident/auth/resetPassword',data)
}
// =========首页=======
// 首页最新公告
export const getNoticeList = () =>{
return get('/api/resident/notice/latest')
}

80
property-uniapp-project/pageSubPack/api/request.js Normal file
View File

@@ -0,0 +1,80 @@
let baseUrl = '';
if (process.env.NODE_ENV === 'development') {
baseUrl = 'http://192.168.0.224:8080'; // 开发环境
} else {
baseUrl = 'http://192.168.1.224:8080'; // 生产环境
}
export default function request(url, data = {}, method = "GET") {
return new Promise((resolve, reject) => {
// 加载中提示（提升用户体验）
uni.showLoading({ title: '请求中...', mask: true });
uni.request({
url: baseUrl + url,
data: data,
method: method,
header: {
"Authorization": "Bearer " + (uni.getStorageSync("token") || ''),
"clientid": "resident",
'content-type': 'application/json'
},
// header: {
// "token": uni.getStorageSync("token") || '',
// 'content-type': 'application/json'
// },
success: (res) => {
uni.hideLoading(); // 关闭加载提示
// 处理HTTP状态码（网络层面）
if (res.statusCode !== 200) {
const errMsg = `请求失败（${res.statusCode}）`;
uni.showToast({ title: errMsg, icon: "none", duration: 2000 });
reject(errMsg);
return;
}
// 处理业务状态码（后端返回的data里）
const resData = res.data || {}; // 兼容后端返回空的情况
// 优先处理token过期（401）
if (resData.code === 401) {
uni.showToast({ title: '登录过期，请重新登录', icon: 'none', duration: 2000 });
uni.clearStorageSync('token');
setTimeout(() => {
uni.reLaunch({ url: '/pages/login/login' });
}, 1500);
reject('token 过期');
return;
}
// 业务成功（code=200）
if (resData.code === 200) {
resolve(resData); // 只返回核心数据，简化页面调用
}
// 业务失败（code=500）
else if (resData.code === 500) {
const errMsg = resData.msg || '请求失败';
uni.showToast({ title: errMsg, icon: "none", duration: 2000 });
// resolve(null)
reject(errMsg);
}
else {
const errMsg = resData.msg || '业务异常';
uni.showToast({ title: errMsg, icon: "none", duration: 2000 });
reject(errMsg);
}
},
fail: (err) => {
uni.hideLoading(); // 关闭加载提示
uni.showToast({ title: errMsg, icon: "none", duration: 2000 });
reject(err);
}
});
});
}
export const get = (url, data) => request(url, data, 'GET');
export const post = (url, data) => request(url, data, 'POST');

2
property-uniapp-project/pageSubPack/loginSub/change-pwd.vue
View File

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

2
property-uniapp-project/pageSubPack/loginSub/forget-pwd.vue
View File

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

2
property-uniapp-project/pageSubPack/loginSub/login.vue
View File

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

64
property-uniapp-project/pageSubPack/loginSub/pwd-login.vue
View File

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

2
property-uniapp-project/pageSubPack/loginSub/register-new-user.vue
View File

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