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-25 17:23:57 +08:00
parent 06a391a668
commit ae9465cc0e
6 changed files with 746 additions and 723 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
<template>
<view class="container">
<view class="status_bar"></view>
<!-- 顶部导航栏 -->
<view class="nav-bar">
<view class="nav-left" @tap="goBack">
@@ -8,10 +9,10 @@
<view class="nav-title">{{navTitle}}</view>
<view class="nav-right"></view>
</view>
<view style="status_bar"></view>
<!-- 内容区域 -->
<scroll-view class="content" scroll-y>
<scroll-view class="scroll-content" scroll-y="true">
<!-- 选项卡 -->
<view class="tabs">
<view
@@ -106,7 +107,7 @@
<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: 40rpx;height: 30rpx;"></image>
<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>
@@ -165,16 +166,9 @@
>
取消报名
</button>
<!-- 活动实况页显示添加实况按钮 -->
<button class="action-btn add-status-btn" v-if="activeTab === 'status'" @click="liveClick">添加实况</button>
<!-- 已报名且在活动实况页显示添加实况按钮 -->
<!-- <button
v-if="hasSigned && activeTab === 'status'"
class="action-btn add-status-btn"
@tap="handleAddStatus"
>
添加实况
</button> -->
</view>
<!-- 报名确认模态框 -->
@@ -216,54 +210,53 @@
<script setup>
import { ref, onMounted } from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import {onLoad,onUnload} from '@dcloudio/uni-app'
import moment from 'moment'
import {getActivityDetails} from '../api/api.js'
import {getActivityDetails,confirmResident,cancelActivity,getActivityLive} from '../api/api.js'
// 响应式数据
const activeTab = ref('detail') // 'detail' 或 'status'
const hasSigned = ref(false) // 是否已报名
const showSignupModal = ref(false)
const showCancelModal = ref(false)
// const showAddStatusModal = ref(false)
const showToast = ref(false)
const toastMessage = ref('')
const newStatusContent = ref('')
// const newStatusImages = ref([])
const navTitle = ref('')
const curActivityId = ref('') // 当前活动的id
const activityConent = ref({}) // 获取详情数据
// 实况记录数据
const liveRecords = ref([
{
id: 1,
user: '微信用户',
time: '2023-08-20 16:00:02',
content: '参与活动打卡',
images: []
},
{
id: 2,
user: '微信用户',
time: '2023-08-20 16:20:02',
content: '目前现场的互动氛围很好',
images: ['http://47.104.199.163:9090/images/logo.png', 'http://47.104.199.163:9090/images/repair/house1.png']
}
// {
// id: 1,
// user: '微信用户',
// time: '2023-08-20 16:00:02',
// content: '参与活动打卡',
// images: []
// },
// {
// id: 2,
// user: '微信用户',
// time: '2023-08-20 16:20:02',
// content: '目前现场的互动氛围很好',
// images: ['http://47.104.199.163:9090/images/logo.png', 'http://47.104.199.163:9090/images/repair/house1.png']
// }
])
// 接受参数
// 接受参数
onLoad((option) =>{
// console.log('dsdsds',option)
navTitle.value = option?.title
curActivityId.value = option?.id
// console.log('navTitle',navTitle.value,curActivityId.value)
// 处理applied参数（可能是字符串类型，需要转布尔）
hasSigned.value = option?.applied === 'true' || option?.applied === true
// console.log('hasSigned.value',hasSigned.value)
getActivityDetailsData(curActivityId.value)
})
// 获取列表详情
const getActivityDetailsData = async (id) =>{
try{
const res = await getActivityDetails(id)
if(res.code === 200){
activityConent.value = res.data || {}
@@ -274,13 +267,15 @@ const getActivityDetailsData = async (id) =>{
icon:"error"
})
}
}catch{
}catch(err){
uni.showToast({
title: res.msg ||"网络异常",
title: "网络异常",
icon:"none"
})
// console.error('获取活动详情失败：', err)
}
}
// 切换选项卡
const switchTab = (tab) => {
activeTab.value = tab
@@ -303,12 +298,40 @@ const hideSignupModal = () => {
// 确认报名
const confirmSignup = () => {
hasSigned.value = true
confirmRegist()
hideSignupModal()
showToastMessage('报名成功！')
// 模拟更新名额
// 在实际应用中，这里应该调用API更新后端数据
}
// 确认报名接口
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)
}
}
// 处理取消报名
@@ -321,28 +344,85 @@ const hideCancelModal = () => {
showCancelModal.value = false
}
// 确认取消报名
// 确认取消报名
const confirmCancel = () => {
hasSigned.value = false
hasSigned.value = false // 取消报名后更新状态
cancelActivityData()
hideCancelModal()
showToastMessage('已取消报名')
// 模拟更新名额
// 在实际应用中，这里应该调用API更新后端数据
// showToastMessage('已取消报名')
}
// 确认取消报名接口
const cancelActivityData = async () =>{
try{
const res = await cancelActivity(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"
})
}
}
// -----获取活动实况列表----
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"
})
}
}
// 添加实况跳转
const liveClick = () =>{
uni.navigateTo({
url:'/pageSubPack/activity-list/live-add'
url:`/pageSubPack/activity-list/live-add?id=${curActivityId.value}`
})
}
// 监听实况列表刷新
// 获取当前时间
const getCurrentTime = () => {
return moment(date).format('YYYY-MM-DD HH:mm:ss')
}
// ---------
onLoad(() =>{
uni.$on('refreshLiveList', () => {
getLiveActivityList();
});
getLiveActivityList()
})
onUnload(() => {
uni.$off('refreshLiveList')
})
// 显示提示信息
const showToastMessage = (message) => {
@@ -354,14 +434,8 @@ const showToastMessage = (message) => {
}, 2000)
}
// 初始化
onMounted(() => {
// 模拟检查用户是否已报名
// 实际项目中应该从接口获取
setTimeout(() => {
hasSigned.value = false // 默认未报名
}, 100)
})
</script>
<style scoped>
@@ -372,11 +446,9 @@ onMounted(() => {
flex-direction: column;
background: linear-gradient(to bottom left, #E2F0FF 0%, #ffffff 50%)
}
/* 顶部导航栏 */
.nav-bar {
height: 90rpx;
/* background: linear-gradient(135deg, #007AFF 0%, #0056cc 100%); */
display: flex;
align-items: center;
padding: 0 30rpx;
@@ -384,7 +456,6 @@ onMounted(() => {
position: sticky;
top: 44px;
z-index: 100;
/* box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2); */
}
.nav-left {
@@ -397,7 +468,7 @@ onMounted(() => {
.nav-title {
flex: 1;
text-align: left;
font-size: 36rpx;
font-size: 32rpx;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
@@ -410,17 +481,13 @@ onMounted(() => {
width: 60rpx;
}
/* 内容区域 */
.content {
/* 滚动内容区域 */
.scroll-content {
flex: 1;
width: 100%;
box-sizing: border-box;
overflow-y: auto;
margin-bottom: 120rpx;
position: absolute; /* 关键：让scroll-view独立滚动 */
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 136px;
}
.status_bar {
height: 46px;
@@ -430,15 +497,10 @@ onMounted(() => {
/* 选项卡 */
.tabs {
display: flex;
/* background-color: #fff; */
border-bottom: 1rpx solid #e9ecef;
position: sticky;
top: 90rpx;
z-index: 90;
}
.tab-item {
/* flex: 1; */
text-align: center;
padding: 30rpx 35rpx;
font-size: 32rpx;
@@ -452,31 +514,15 @@ onMounted(() => {
font-weight: 600;
}
/* .tab-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80rpx;
height: 6rpx;
background: linear-gradient(90deg, #007AFF, #00aaff);
border-radius: 3rpx 3rpx 0 0;
} */
/* 活动详情内容 */
.detail-content {
/* padding: 30rpx; */
margin-top: 89rpx;
padding: 0;
}
/* 基本信息区域 */
.info-section {
/* background-color: #fff; */
border-radius: 16rpx;
padding: 30rpx 40rpx;
/* margin-bottom: 30rpx; */
/* box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); */
}
.info-item {
@@ -510,10 +556,8 @@ onMounted(() => {
/* 区块样式 */
.section {
/* background-color: #fff; */
border-radius: 16rpx;
padding: 30rpx 40rpx;
/* margin-bottom: 30rpx; */
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
@@ -550,12 +594,9 @@ onMounted(() => {
display: flex;
justify-content: space-between;
align-items: center;
/* background-color: #fff; */
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 30rpx;
margin-top: 80rpx;
/* box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); */
}
.status-title {
@@ -567,19 +608,16 @@ onMounted(() => {
.status-count {
padding: 8rpx 20rpx;
/* background-color: #007AFF; */
color: #666;
font-size: 24rpx;
font-size: 28rpx;
border-radius: 20rpx;
font-weight: 500;
}
/* 实况列表 */
.record-list {
/* background-color: #fff; */
border-radius: 16rpx;
overflow: hidden;
/* box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); */
}
.record-item {
@@ -587,10 +625,6 @@ onMounted(() => {
border-bottom: 1rpx solid #f0f0f0;
}
/* .record-item:last-child {
border-bottom: none;
} */
.record-user {
display: flex;
align-items: flex-start;
@@ -611,11 +645,9 @@ onMounted(() => {
}
.user-info {
/* flex: 1; */
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.user-name {
@@ -634,7 +666,6 @@ onMounted(() => {
font-size: 28rpx;
color: #333;
line-height: 1.5;
/* margin-bottom: 20rpx; */
margin: 25rpx 0rpx;
}
@@ -647,7 +678,7 @@ onMounted(() => {
.image-item {
width: 150rpx;
height: 170rpx;
height: 150rpx;
border-radius: 12rpx;
background-color: #f8f9fa;
background-size: cover;
@@ -809,97 +840,6 @@ onMounted(() => {
background-color: #f0f7ff;
}
/* 添加实况模态框 */
.add-status-modal {
width: 650rpx;
}
.status-input {
width: 100%;
min-height: 200rpx;
padding: 20rpx;
font-size: 28rpx;
color: #333;
background-color: #f8f9fa;
border-radius: 12rpx;
border: 1rpx solid #e9ecef;
margin-bottom: 20rpx;
}
.input-counter {
text-align: right;
font-size: 24rpx;
color: #999;
margin-bottom: 30rpx;
}
.image-upload-area {
margin-top: 30rpx;
}
.upload-tip {
font-size: 24rpx;
color: #999;
margin-bottom: 20rpx;
text-align: left;
}
.image-preview {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
}
.preview-item {
position: relative;
width: 150rpx;
height: 150rpx;
border-radius: 12rpx;
overflow: hidden;
}
.preview-image {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #f8f9fa;
}
.remove-btn {
position: absolute;
top: 0;
right: 0;
width: 40rpx;
height: 40rpx;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
border-radius: 0 0 0 12rpx;
}
.upload-btn {
width: 150rpx;
height: 150rpx;
border: 2rpx dashed #e9ecef;
border-radius: 12rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #999;
background-color: #f8f9fa;
}
.upload-text {
font-size: 24rpx;
margin-top: 10rpx;
}
/* 提示信息 */
.toast {
position: fixed;