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

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

@@ -1,14 +1,21 @@
<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" />
<uni-nav-bar left-icon="left" title="活动列表" backgroundColor="none" :border="false"
@clickLeft="narBack" />
</view>
<!-- 滚动区域：从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>
<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')">
@@ -34,7 +41,7 @@
</view>
<!-- 活动列表 -->
<scroll-view class="activity-list" scroll-y @scrolltolower="loadMoreData" :lower-threshold="100">
<view class="activity-list">
<!-- 空状态 -->
<view v-if="displayedActivities.length === 0" class="empty-state">
<uni-icons type="info" size="60" color="#ccc"></uni-icons>
@@ -46,27 +53,22 @@
<!-- 活动卡片 -->
<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>
<!-- 已报名标识 -->
<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>
<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">
@@ -86,55 +88,16 @@
<view class="activity-detail">
<text class="detail-text-num">活动名额{{ activity.totalQuota }}人，已报名{{ activity.signedCount }}人</text>
</view>
</view>
</up-col>
</up-row>
</view>
<!-- 我的活动额外信息 -->
<!-- <view v-if="activeTab === 'my'" class="my-activity-info">
<view class="my-status" :class="getMyStatusClass(activity.myStatus)">
{{ getMyStatusText(activity.myStatus) }}
</view>
<view v-if="activity.myStatus === 'reviewing'" class="review-tips">
<text>审核中，请耐心等待</text>
</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>
@@ -150,6 +113,7 @@
<text>正在加载...</text>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
@@ -325,18 +289,18 @@
}
})
// 返回
const narBack = () =>{
if(uni.getStorageSync('sourcePage') === "index"){
// 返回
const narBack = () => {
if (uni.getStorageSync('sourcePage') === "index") {
uni.switchTab({
url:"/pages/index/index"
url: "/pages/index/index"
})
}else if(uni.getStorageSync('sourcePage') === "serviceIndex"){
} else if (uni.getStorageSync('sourcePage') === "serviceIndex") {
uni.switchTab({
url:"/pages/serviceIndex/serviceIndex"
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;
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>

4
property-uniapp-project/pages/api/api.js → property-uniapp-project/pageSubPack/api/api.js
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) =>{
return post('/api/resident/auth/register',data)
return post('/api/resident/auth/loginBySms',data)
}
// 忘记密码接口
export const getResetPassword = (data) =>{

4
property-uniapp-project/pages/api/request.js → property-uniapp-project/pageSubPack/api/request.js
View File

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

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' });
}
}).catch(err => {
// console.error('登录接口异常：', err);
uni.showToast({
title: '网络异常',
icon: 'error'
});
})
// 测试
// uni.showLoading({
// title: '登录中...'
// });
// 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'
// });
// })
// 测试
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'
// ========== 响应式数据 ==========
// 表单数据

28
property-uniapp-project/pages/index/index.vue
View File

@@ -158,7 +158,7 @@
<script setup>
import { ref } from 'vue'
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 = () =>{
uni.setStorageSync('sourcePage',"index")
uni.navigateTo({
url:"/pages/notice-list/noticeList"
url:"/pageSubPack/notice-list/noticeList"
})
}
// 接收选择小区返回的参数
@@ -249,7 +249,29 @@ const payMentClick =() =>{
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 = () => {
uni.navigateTo({
url: '/pageSubPack/notice-list/selectHome'