对接活动、实况等接口

property-uniapp-project/pageSubPack/activity-list/activityListDetails.vue

@@ -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 
+	  <button class="action-btn add-status-btn" v-if="activeTab === 'status'" @click="liveClick">添加实况</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,
+  //   id: 1,
-    user: '微信用户',
+  //   user: '微信用户',
-    time: '2023-08-20 16:00:02',
+  //   time: '2023-08-20 16:00:02',
-    content: '参与活动打卡',
+  //   content: '参与活动打卡',
-    images: []
+  //   images: []
-  },
+  // },
-  {
+  // {
-    id: 2,
+  //   id: 2,
-    user: '微信用户',
+  //   user: '微信用户',
-    time: '2023-08-20 16:20:02',
+  //   time: '2023-08-20 16:20:02',
-    content: '目前现场的互动氛围很好',
+  //   content: '目前现场的互动氛围很好',
-    images: ['http://47.104.199.163:9090/images/logo.png', 'http://47.104.199.163:9090/images/repair/house1.png']
+  //   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)
+	}
 }
 
 // 处理取消报名
@@ -323,26 +346,83 @@ const hideCancelModal = () => {
 
 // 确认取消报名  
 const confirmCancel = () => {
-  hasSigned.value = false
+  hasSigned.value = false // 取消报名后更新状态
+  cancelActivityData()
   hideCancelModal()
-  showToastMessage('已取消报名')
+  // showToastMessage('已取消报名')
-  
-  // 模拟更新名额
-  // 在实际应用中，这里应该调用API更新后端数据
 }
+// 确认取消报名接口
+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}`
 	})
 }
 
+// 监听实况列表刷新
 
-
+// ---------
-// 获取当前时间
+onLoad(() =>{
-const getCurrentTime = () => {
+	uni.$on('refreshLiveList', () => {
-	return moment(date).format('YYYY-MM-DD HH:mm:ss')
+		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; */
+  padding: 0;
-  margin-top: 89rpx;
 }
 
 /* 基本信息区域 */
 .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;

property-uniapp-project/pageSubPack/activity-list/live-add.vue

@@ -54,16 +54,27 @@
 
 <script setup>
 import { ref } from 'vue';
-// import { chooseImage, uploadFile, getLocation } from '@dcloudio/uni-app';
+import { onLoad } from '@dcloudio/uni-app';
+import { addActivityLive, signinActivityLive, uploadImage } from '../api/api.js';
 
+// 活动ID
+const activityId = ref('');
 // 实况描述内容
 const statusDesc = ref('');
 // 输入字符长度
 const currentLength = ref(0);
-// 图片列表
+// 图片列表（本地临时路径）
 const imgList = ref([]);
 // 定位信息
 const location = ref('山东省日照市东港区学院路');
+// 经纬度
+const longitude = ref('');
+const latitude = ref('');
+
+// 接收活动ID
+onLoad((option) => {
+  activityId.value = option?.id || '';
+});
 
 // 监听输入框字数变化
 const handleTextInput = (e) => {
@@ -73,11 +84,10 @@ const handleTextInput = (e) => {
 // 选择图片
 const chooseImg = () => {
   uni.chooseImage({
-    count: 3 - imgList.value.length, // 最多可选择的数量
+    count: 3 - imgList.value.length,
     sizeType: ['original', 'compressed'],
     sourceType: ['album', 'camera'],
     success: (res) => {
-      // 临时文件路径转存到图片列表
       imgList.value = [...imgList.value, ...res.tempFilePaths];
     },
     fail: (err) => {
@@ -99,8 +109,9 @@ const reLocate = () => {
     type: 'gcj02',
     success: (res) => {
       uni.hideLoading();
-      // 实际项目中可调用逆地理编码接口转换为具体地址，这里模拟
+      longitude.value = res.longitude;
-      location.value = '山东省日照市东港区学院路（新定位）';
+      latitude.value = res.latitude;
+      location.value = `${res.longitude},${res.latitude}`;
       uni.showToast({ title: '定位成功', icon: 'success' });
     },
     fail: (err) => {
@@ -111,34 +122,58 @@ const reLocate = () => {
   });
 };
 
+// 上传所有图片
+const uploadAllImages = async () => {
+  if (imgList.value.length === 0) return [];
+  const uploadPromises = imgList.value.map(img => uploadImage(img));
+  const results = await Promise.all(uploadPromises);
+  return results.map(res => res.data?.url || res.data);
+};
+
 // 提交实况
-const submitStatus = () => {
+const submitStatus = async () => {
-  // 简单校验
   if (!statusDesc.value.trim()) {
     uni.showToast({ title: '请输入实况描述', icon: 'none' });
     return;
   }
+  if (!activityId.value) {
+    uni.showToast({ title: '活动ID缺失', icon: 'none' });
+    return;
+  }
 
-  // 模拟提交逻辑（实际项目中可上传图片+提交表单）
+  uni.showLoading({ title: '提交中...', mask: true });
-  uni.showLoading({ title: '提交中...' });
 
-  // 如需上传图片，可循环调用uploadFile
+  try {
-  // 示例：
+    // 先上传图片
-  // const uploadPromises = imgList.value.map(img => {
+    const imageUrls = await uploadAllImages();
-  //   return uploadFile({
+
-  //     url: '你的上传接口',
+    // 提交实况
-  //     filePath: img,
+    const liveData = {
-  //     name: 'file'
+      content: statusDesc.value.trim(),
-  //   });
+      images: imageUrls,
-  // });
+      location: location.value,
-  // Promise.all(uploadPromises).then(res => { /* 处理上传结果 */ });
+      longitude: longitude.value,
+      latitude: latitude.value
+    };
+    await addActivityLive(activityId.value, liveData);
+
+    // 同时签到
+    await signinActivityLive(activityId.value, {
+      location: location.value,
+      longitude: longitude.value,
+      latitude: latitude.value
+    });
 
-  setTimeout(() => {
     uni.hideLoading();
     uni.showToast({ title: '添加成功', icon: 'success' });
-    // 提交成功后可返回上一页
+    uni.$emit('refreshLiveList');
-    uni.navigateBack();
+    setTimeout(() => {
-  }, 1000);
+      uni.navigateBack();
+    }, 1500);
+  } catch (err) {
+    uni.hideLoading();
+    uni.showToast({ title: err || '提交失败', icon: 'none' });
+  }
 };
 </script>
 

property-uniapp-project/pageSubPack/api/api.js

@@ -1,4 +1,4 @@
-import request,{get,post} from "./request.js"
+import request,{get,post,upload} from "./request.js"
 
 
 // =======账号密码登录========
@@ -71,3 +71,33 @@ export const getActivityList = (data) =>{
 export const getActivityDetails = (id) =>{
 	return get(`/api/resident/activity/${id}`)
 }
+// 确认报名
+export const confirmResident = (id) =>{
+	return post(`/api/resident/activity/${id}/apply`)
+}
+// 取消报名
+export const cancelActivity = (id) =>{
+	return post(`/api/resident/activity/${id}/cancel`)
+}
+// =========我的活动========
+export const getMyActivityList = () =>{
+	return get("/api/resident/activity/my")
+}
+// ===========活动实况============
+// 活动实况列表
+export const getActivityLive = (id) =>{
+	return get(`/api/resident/activity/${id}/live`)
+}
+// 添加实况
+export const addActivityLive = (id, data) =>{
+	return post(`/api/resident/activity/${id}/live`, data)
+}
+// 签到
+export const signinActivityLive = (id, data) =>{
+	return post(`/api/resident/activity/${id}/signin`, data)
+}
+
+// 通用文件上传
+export const uploadImage = () => {
+	return upload('');
+}

property-uniapp-project/pageSubPack/api/request.js

@@ -78,4 +78,34 @@ export default function request(url, data = {}, method = "GET") {
 export const get = (url, data) => request(url, data, 'GET');
 export const post = (url, data) => request(url, data, 'POST');
 
+// 通用文件上传
+export const upload = (filePath, url) => {
+	return new Promise((resolve, reject) => {
+		uni.uploadFile({
+			url: baseUrl + url,
+			filePath: filePath,
+			name: 'file',
+			header: {
+				"Authorization": "Bearer " + (uni.getStorageSync("token") || ''),
+				"clientid": "resident"
+			},
+			success: (res) => {
+				if (res.statusCode === 200) {
+					const data = JSON.parse(res.data);
+					if (data.code === 200) {
+						resolve(data);
+					} else {
+						reject(data.msg || '上传失败');
+					}
+				} else {
+					reject('上传失败');
+				}
+			},
+			fail: (err) => {
+				reject(err);
+			}
+		});
+	});
+};
+
 

property-uniapp-project/uni_modules/uview-plus/libs/config/config.js

@@ -2,7 +2,7 @@ const version = '3'
 
 // 开发环境才提示，生产环境不会提示
 if (process.env.NODE_ENV === 'development') {
-	console.log(`\n %c uview-plus V${version} %c https://uview-plus.jiangruyi.com/ \n\n`, 'color: #ffffff; background: #3c9cff; padding:5px 0;', 'color: #3c9cff;background: #ffffff; padding:5px 0;');
+	//console.log(`\n %c uview-plus V${version} %c https://uview-plus.jiangruyi.com/ \n\n`, 'color: #ffffff; background: #3c9cff; padding:5px 0;', 'color: #3c9cff;background: #ffffff; padding:5px 0;');
 }
 
 export default {