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-05-18 17:48:43 +08:00
parent 8ee170f78b
commit aa5453c0be
6 changed files with 285 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

298
property-uniapp-project/pageSubPack/activity-list/activityListDetails.vue
View File

@@ -1,6 +1,6 @@
<template>
<view class="container">
<view class="status_bar"></view>
<view class="status_bar"></view>
<!-- 顶部导航栏 -->
<view class="nav-bar">
<view class="nav-left" @tap="goBack">
@@ -9,21 +9,21 @@
<view class="nav-title">{{navTitle}}</view>
<view class="nav-right"></view>
</view>
<!-- 内容区域 -->
<scroll-view class="scroll-content" scroll-y="true">
<!-- 选项卡 -->
<view class="tabs">
<view
class="tab-item"
<view
class="tab-item"
:class="{ 'active': activeTab === 'detail' }"
@tap="switchTab('detail')"
>
活动详情
</view>
<view
class="tab-item"
<view
class="tab-item"
:class="{ 'active': activeTab === 'status' }"
@tap="switchTab('status')"
>
@@ -39,46 +39,46 @@
<view class="info-label">报名截止时间</view>
<view class="info-value">{{formatTime(activityConent.applyDeadline)}}</view>
</view>
<view class="info-item">
<view class="info-label">活动时间</view>
<view class="info-value">
<text>{{formatTime(activityConent.startTime)}} 至 {{formatTime(activityConent.endTime)}}</text>
</view>
</view>
<view class="info-item">
<view class="info-label">签到时间</view>
<view class="info-value">
<text>{{formatTime(activityConent.signinStartTime)}} 至 {{formatTime(activityConent.signinEndTime)}}</text>
</view>
</view>
<view class="info-item">
<view class="info-label">活动地点</view>
<view class="info-value">{{activityConent.address}}</view>
</view>
<view class="info-item">
<view class="info-label">活动名额</view>
<view class="info-value">{{activityConent.quota}}人</view>
</view>
<view class="info-item">
<view class="info-label">主办方</view>
<view class="info-value">{{activityConent.organizer}}</view>
</view>
<view class="info-item">
<view class="info-label">联系人</view>
<view class="info-value">{{activityConent.contactName}}</view>
</view>
<view class="info-item">
<view class="info-label">联系电话</view>
<view class="info-value">{{activityConent.contactPhone}}</view>
</view>
<view class="info-item">
<view class="info-label">积分奖励</view>
<view class="info-value">{{activityConent.pointsReward}}</view>
@@ -107,9 +107,9 @@
<view v-else class="status-content">
<view class="status-header">
<view class="status-title">
<image src="http://47.104.199.163:9090/images/activity/liveScene.png" style="width: 38rpx;height: 23rpx;"></image>
现场实况
</view>
<image src="http://47.104.199.163:9090/images/activity/liveScene.png" style="width: 38rpx;height: 23rpx;"></image>
现场实况
</view>
<view class="status-count">{{ liveRecords.length }}次</view>
</view>
@@ -126,22 +126,22 @@
<view class="record-content">{{ record.content }}</view>
<!-- 图片展示 -->
<view v-if="record.images && record.images.length > 0" class="record-images">
<view
v-for="(img, imgIndex) in record.images"
:key="imgIndex"
<view
v-for="(img, imgIndex) in record.images"
:key="imgIndex"
class="image-item"
:style="{ backgroundImage: `url(${img})` }"
>
<image :src="img" style="width: 100%;height: 100%;"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
@@ -150,23 +150,23 @@
<!-- 底部操作栏 -->
<view class="bottom-bar">
<!-- 未报名状态显示报名按钮 -->
<button
v-if="!hasSigned && activeTab === 'detail'"
<button
v-if="!hasSigned && activeTab === 'detail'"
class="action-btn signup-btn"
@tap="handleSignup"
>
报名
</button>
<!-- 已报名状态显示取消报名按钮 -->
<button
v-if="hasSigned && activeTab === 'detail'"
<button
v-if="hasSigned && activeTab === 'detail'"
class="action-btn cancel-btn"
@tap="handleCancelSignup"
>
取消报名
</button>
<!-- 活动实况页显示添加实况按钮 -->
<button class="action-btn add-status-btn" v-if="hasSigned &&activeTab === 'status'" @click="liveClick">添加实况</button>
</view>
@@ -254,43 +254,43 @@ const formatTime = (timeStr) => {
// ---接收参数---
onLoad((option) =>{
navTitle.value = option?.title
curActivityId.value = option?.id
// 处理applied参数（可能是字符串类型，需要转布尔）
hasSigned.value = option?.applied === 'true' || option?.applied === true
// console.log('hasSigned.value',hasSigned.value)
// 2. 初始化数据
if (curActivityId.value) {
getActivityDetailsData(curActivityId.value) // 获取活动详情
getLiveActivityList() // 获取实况列表
}
// 3. 监听实况列表刷新事件
uni.$on('refreshLiveList', () => {
getLiveActivityList()
})
navTitle.value = option?.title
curActivityId.value = option?.id
// 处理applied参数（可能是字符串类型，需要转布尔）
hasSigned.value = option?.applied === 'true' || option?.applied === true
// console.log('hasSigned.value',hasSigned.value)
// 2. 初始化数据
if (curActivityId.value) {
getActivityDetailsData(curActivityId.value) // 获取活动详情
getLiveActivityList() // 获取实况列表
}
// 3. 监听实况列表刷新事件
uni.$on('refreshLiveList', () => {
getLiveActivityList()
})
})
// 获取列表详情
const getActivityDetailsData = async (id) =>{
try{
const res = await getActivityDetails(id)
if(res.code === 200){
activityConent.value = res.data || {}
}else{
activityConent.value = {}
uni.showToast({
title: res.msg ||"详情获取失败",
icon:"error"
})
}
}catch(err){
uni.showToast({
title: "网络异常",
icon:"none"
})
// console.error('获取活动详情失败：', err)
}
try{
const res = await getActivityDetails(id)
if(res.code === 200){
activityConent.value = res.data || {}
}else{
activityConent.value = {}
uni.showToast({
title: res.msg ||"详情获取失败",
icon:"error"
})
}
}catch(err){
uni.showToast({
title: "网络异常",
icon:"none"
})
// console.error('获取活动详情失败：', err)
}
}
// 切换选项卡
@@ -321,34 +321,34 @@ const confirmSignup = () => {
// 确认报名接口
const confirmRegist = async () =>{
try{
const res = await confirmResident(curActivityId.value)
if(res.code === 200){
hasSigned.value = true // 报名成功后更新状态
uni.showToast({
title: '报名成功',
icon:"success"
})
setTimeout(() =>{
uni.$emit('refreshActivityList', {
activityId: curActivityId.value,
isSigned: true
})
uni.navigateBack()
},1500)
}else{
uni.showToast({
title: res.msg || "报名失败",
icon:"error"
})
}
}catch(err){
uni.showToast({
title: "网络异常",
icon:"none"
})
// console.error('报名失败：', err)
}
try{
const res = await confirmResident(curActivityId.value)
if(res.code === 200){
hasSigned.value = true // 报名成功后更新状态
uni.showToast({
title: '报名成功',
icon:"success"
})
setTimeout(() =>{
uni.$emit('refreshActivityList', {
activityId: curActivityId.value,
isSigned: true
})
uni.navigateBack()
},1500)
}else{
uni.showToast({
title: res.msg || "报名失败",
icon:"error"
})
}
}catch(err){
uni.showToast({
title: "网络异常",
icon:"none"
})
// console.error('报名失败：', err)
}
}
// 处理取消报名
@@ -361,7 +361,7 @@ const hideCancelModal = () => {
showCancelModal.value = false
}
// 确认取消报名
// 确认取消报名
const confirmCancel = () => {
hasSigned.value = false // 取消报名后更新状态
cancelActivityData()
@@ -370,76 +370,76 @@ const confirmCancel = () => {
}
// 确认取消报名接口
const cancelActivityData = async () =>{
try{
const res = await cancelActivity(curActivityId.value)
if(res.code === 200){
hasSigned.value = false // 报名成功后更新状态
uni.showToast({
title: '取消报名成功',
icon:"success"
})
setTimeout(() =>{
uni.$emit('refreshActivityList', {
activityId: curActivityId.value,
isSigned: false
})
uni.navigateBack()
},1500)
}else{
uni.showToast({
title: res.msg || "取消报名失败",
icon:"error"
})
}
}catch(err){
uni.showToast({
title: "网络异常",
icon:"none"
})
}
try{
const res = await cancelActivity(curActivityId.value)
if(res.code === 200){
hasSigned.value = false // 报名成功后更新状态
uni.showToast({
title: '取消报名成功',
icon:"success"
})
setTimeout(() =>{
uni.$emit('refreshActivityList', {
activityId: curActivityId.value,
isSigned: false
})
uni.navigateBack()
},1500)
}else{
uni.showToast({
title: res.msg || "取消报名失败",
icon:"error"
})
}
}catch(err){
uni.showToast({
title: "网络异常",
icon:"none"
})
}
}
// -----获取活动实况列表----
const getLiveActivityList = async () =>{
try{
const res = await getActivityLive(curActivityId.value)
if(res.code === 200){
liveRecords.value = res.rows || []
}else{
liveRecords.value = []
uni.showToast({
title: res.msg ||"实况列表获取失败",
icon:"error"
})
}
}catch(err){
uni.showToast({
title: "网络异常",
icon:"none"
})
}
try{
const res = await getActivityLive(curActivityId.value)
if(res.code === 200){
liveRecords.value = res.rows || []
}else{
liveRecords.value = []
uni.showToast({
title: res.msg ||"实况列表获取失败",
icon:"error"
})
}
}catch(err){
uni.showToast({
title: "网络异常",
icon:"none"
})
}
}
// 添加实况跳转
const liveClick = () =>{
uni.navigateTo({
url:`/pageSubPack/activity-list/live-add?id=${curActivityId.value}`
})
uni.navigateTo({
url:`/pageSubPack/activity-list/live-add?id=${curActivityId.value}`
})
}
// 监听实况列表刷新
// ---------
onUnload(() => {
uni.$off('refreshLiveList')
uni.$off('refreshLiveList')
})
// 显示提示信息
const showToastMessage = (message) => {
toastMessage.value = message
showToast.value = true
setTimeout(() => {
showToast.value = false
}, 2000)
@@ -452,15 +452,17 @@ const showToastMessage = (message) => {
<style scoped>
/* 页面容器 */
.container {
min-height: 100vh;
height: 100vh;
display: flex;
flex-direction: column;
background: linear-gradient(to bottom left, #E2F0FF 0%, #ffffff 50%)
background: linear-gradient(to bottom left, #E2F0FF 0%, #ffffff 50%);
overflow: hidden;
}
/* 状态栏 */
.status_bar {
height: 46px;
width: 100%;
flex-shrink: 0;
}
/* 顶部导航栏 */
@@ -473,6 +475,7 @@ const showToastMessage = (message) => {
position: sticky;
top: 44px;
z-index: 100;
flex-shrink: 0;
}
.nav-left {
@@ -504,7 +507,6 @@ const showToastMessage = (message) => {
width: 100%;
box-sizing: border-box;
overflow-y: auto;
margin-bottom: 120rpx;
}
/* 选项卡 */
@@ -702,14 +704,10 @@ const showToastMessage = (message) => {
/* 底部操作栏 */
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx 30rpx 40rpx;
background-color: #fff;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
z-index: 100;
flex-shrink: 0;
}
.action-btn {