commit

backend/src/main/java/com/budwk/app/client/module/activity/controller/ClientActivityController.java

@@ -81,6 +81,7 @@ public class ClientActivityController {
         return Result.success();
     }
 
+
     /**
      * 查询报名人员
      * 报名人不见得参加活动

backend/src/main/java/com/budwk/app/client/module/activity/controller/ClientItemController.java

@@ -117,4 +117,18 @@ public class ClientItemController {
     }
 
 
+    /**
+     * 取消项目报名
+     * @param signVO
+     * @return
+     */
+    @At("/cancel-team-sign-up")
+    @AdaptBy(type = JsonAdaptor.class)
+    @SaCheckLogin(type = StpClientUtil.TYPE)
+    public synchronized Result cancelTeamSignUp(ClientActivitySignVO signVO) {
+        clientItemService.cancelTeamSignUp(signVO);
+        return Result.success();
+    }
+
+
 }

backend/src/main/java/com/budwk/app/client/module/activity/service/ClientItemService.java

@@ -1,9 +1,12 @@
 package com.budwk.app.client.module.activity.service;
 
 import com.budwk.app.base.service.BaseService;
+import com.budwk.app.client.module.activity.vo.ClientActivitySignVO;
 import com.budwk.app.client.module.activity.vo.ClientItemSignUpVO;
 import com.budwk.app.module.activity.models.ActivityItemUser;
 
 public interface ClientItemService extends BaseService<ActivityItemUser> {
     void signUp(ClientItemSignUpVO signVO);
+
+    void cancelTeamSignUp(ClientActivitySignVO signVO);
 }

backend/src/main/java/com/budwk/app/client/module/activity/service/impl/ClientItemServiceImpl.java

@@ -2,6 +2,7 @@ package com.budwk.app.client.module.activity.service.impl;
 
 import com.budwk.app.base.service.impl.BaseServiceImpl;
 import com.budwk.app.client.module.activity.service.ClientItemService;
+import com.budwk.app.client.module.activity.vo.ClientActivitySignVO;
 import com.budwk.app.client.module.activity.vo.ClientItemSignUpVO;
 import com.budwk.app.module.activity.models.ActGroupUser;
 import com.budwk.app.module.activity.models.Activity;
@@ -59,4 +60,10 @@ public class ClientItemServiceImpl extends BaseServiceImpl<ActivityItemUser> imp
         }
         insert(userList);
     }
+
+    @Override
+    public void cancelTeamSignUp(ClientActivitySignVO signVO) {
+       clear(Cnd.where(ActivityItemUser::getActivityId, "=", signVO.getActivityId())
+                .and(ActivityItemUser::getItemId, "=", signVO.getItemId()));
+    }
 }

backend/src/main/java/com/budwk/app/client/module/activity/vo/ClientActivitySignVO.java

@@ -12,6 +12,7 @@ import java.util.List;
 public class ClientActivitySignVO {
 
     private Long activityId;
+    private Long itemId;
 
     private String unitName;
 

backend/src/main/resources/views/platform/activity/manage/itemForm.js

@@ -31,15 +31,15 @@ const itemForm = {
                         <el-table-column label="报名人数">
                             <template #default="{row}">
                                 <el-input-number v-model="row.num" :disabled="row.isTeamApply"
-                                                 placeholder="请输入报名人数"></el-input-number>
+                                                 placeholder="请输入报名人数" style="width: 100%"></el-input-number>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="图片">
+                            <template #default="{row}">
+                                {{row.img}}
+                                <image-upload v-model="row.img" :maxCount="1"></image-upload>
                             </template>
                         </el-table-column>
-                        <!-- <el-table-column label="图片">
-                             <template #default="{row}">
-                                 {{row.img}}
-                                 <image-upload v-model="row.img" :max-count="1"></image-upload>
-                             </template>
-                         </el-table-column>-->
                         <el-table-column label="操作" fixed="right" width="100px">
                             <template #default="{$index}">
                                 <el-button type="text" class="text-danger" @click="removeRow($index)">删除</el-button>

frontend/src/pages/activity/team-form/index.vue

@@ -5,38 +5,40 @@
         <t-dropdown-item :options="actOptions" :value="selectActId"/>
       </t-dropdown-menu>
       <view class="content-container">
-        <view class="page-header">
+        <!--        <view class="page-header">-->
-          <text class="page-title">团队报名</text>
+        <!--          <text class="page-title">团队报名</text>-->
-          <text class="page-subtitle">点击项目报名</text>
+        <!--          <text class="page-subtitle">点击项目报名</text>-->
-        </view>
+        <!--        </view>-->
 
-      <!-- 项目列表 -->
+        <!-- 项目列表 -->
-      <view class="project-cards">
+        <view class="project-cards">
-        <view
+          <view
-            v-for="project in itemOptions"
+              v-for="project in itemOptions"
-            :key="project.id"
+              :key="project.id"
-            class="project-card"
+              class="project-card"
-            :class="{'project-card--registered': registrationStatus.get(project.id)?.length}"
+              :class="{'project-card--registered': registrationStatus.get(project.id)?.length}"
-            @click="selectProject(project)"
+
-        >
+          >
-          <view class="project-card__content">
+            <view class="project-card__content">
-            <view class="project-card__title">{{ project.name }}</view>
+              <t-image :src=config.fileDomain+project.img shape="round"
-            <view class="project-card__desc">{{ project.description }}</view>
+                       class="project-card__image" fit="fill"/>
-          </view>
+              <view class="project-card__title">{{ project.name }}</view>
-          <view class="project-card__status">
+
-            <t-tag v-if="registrationStatus.get(project.id)?.length" theme="success" variant="light-outline">
+              <div style="display: flex;justify-content: flex-end;margin-top: 10px;">
-              已报名 {{ registrationStatus.get(project.id)?.length }}人
+                <t-button size="small" class="project-card__button" @click="openDesc(project)">项目介绍</t-button>
-            </t-tag>
+                <t-button size="small" @click="selectProject(project)" class="project-card__button"> 活动报名 {{
-            <view v-else class="project-card__action">
+                    registrationStatus.get(project.id)?.length ? registrationStatus.get(project.id)?.length : 0
-              <t-icon name="chevron-right" color="#999"/>
+                  }}人
+                </t-button>
+              </div>
+              <!--              <t-tag v-if="registrationStatus.get(project.id)?.length" theme="success" variant="light-outline">
+                              已报名 {{ registrationStatus.get(project.id)?.length }}人
+                            </t-tag>-->
             </view>
+
           </view>
-<!--          <view v-if="registrationStatus.get(project.id)?.length" class="project-card__checkmark">
-            <t-icon name="check" color="#52c41a"/>
-          </view>-->
         </view>
       </view>
-      </view>
     </template>
     <view v-else style="flex: 1;display: flex;justify-content: center;align-items: center">
       <t-empty v-if="actOptions && actOptions.length === 0"
@@ -46,6 +48,45 @@
       </t-empty>
     </view>
 
+    <t-popup v-model:visible="showDescPicker" placement="bottom" destroy-on-close>
+      <view class="member-picker">
+        <view class="picker-header">
+          <text class="picker-title">项目介绍</text>
+          <t-icon name="close" @click="showDescPicker = false"/>
+        </view>
+        <view>
+          <view class="event-item-header">
+            <text class="event-item-name">{{ team.name }}</text>
+          </view>
+
+          <view class="event-item-content">
+            <t-image :src=config.fileDomain+team.img shape="round"
+                     class="event-item-image" fit="fill"/>
+
+            <!-- 项目信息区域 -->
+            <view class="event-item-info">
+              <view class="event-item-section">
+                <view class="event-item-section-title">
+                  <t-icon name="flag" size="16px" color="var(--td-brand-color-5)"/>
+                  <text>活动形式</text>
+                </view>
+                <view class="event-item-section-content">{{ team.form }}</view>
+              </view>
+
+              <view class="event-item-section">
+                <view class="event-item-section-title">
+                  <t-icon name="chart-bar" size="16px" color="var(--td-brand-color-5)"/>
+                  <text>评分规则</text>
+                </view>
+                <view class="event-item-section-content">{{ team.rule }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+      </view>
+    </t-popup>
+
     <t-popup v-model:visible="showMemberPicker" placement="bottom" destroy-on-close>
       <view class="member-picker">
         <view class="picker-header">
@@ -60,7 +101,7 @@
             此项目是团队协作需要全体成员参与
           </view>
           <view v-else>
-            此项目需【{{itemOptions.find(p => p.id === selectedItemId)?.num}}】名成员参与
+            此项目需【{{ itemOptions.find(p => p.id === selectedItemId)?.num }}】名成员参与
           </view>
 
         </view>
@@ -81,10 +122,22 @@
             </view>
           </t-checkbox-group>
         </view>
-        <view class="picker-footer"v-if="isSelfLeader">
+        <view class="picker-footer" v-if="isSelfLeader">
-          <t-button block theme="primary" @click="submitRegistration">
+          <t-row gutter="20">
-            确认报名 ({{ selectedMemberIds.length }}人)
+            <t-col span="12">
-          </t-button>
+              <t-button block theme="primary" @click="cancelRegistration"
+                        :disabled="!selectedMemberList.filter(v => v.itemId === team.id).map(v => v.userId).length">
+                取消报名
+              </t-button>
+            </t-col>
+            <t-col span="12">
+              <t-button block theme="primary" style="margin-left: 5px;" @click="submitRegistration">
+                确认报名 ({{ selectedMemberIds.length }}人)
+              </t-button>
+            </t-col>
+          </t-row>
+
+
         </view>
       </view>
     </t-popup>
@@ -97,6 +150,7 @@ import {useRequest} from '@/utils/request';
 import {Dialog, Toast} from 'tdesign-mobile-vue';
 import {onLoad} from '@dcloudio/uni-app';
 import {useUserStore} from "@/store";
+import {config} from "@/utils/config";
 
 const request = useRequest();
 const userStore = useUserStore();
@@ -106,23 +160,7 @@ const actOptions = ref([])
 // 选中的活动ID
 const selectActId = ref(null);
 // 项目列表数据
-const itemOptions = ref([
+const itemOptions = ref([]);
-  {
-    id: 1,
-    name: '篮球比赛',
-    description: '3v3篮球友谊赛'
-  },
-  {
-    id: 2,
-    name: '足球比赛',
-    description: '5人制足球赛'
-  },
-  {
-    id: 3,
-    name: '羽毛球比赛',
-    description: '双打友谊赛'
-  }
-]);
 // 选中的项目ID
 const selectedItemId = ref(null);
 // 团队成员列表
@@ -147,6 +185,14 @@ const selectedMemberIds = ref([]);
 // 成员选择弹窗显示状态
 const showMemberPicker = ref(false);
 
+// 描述选择弹窗显示状态
+const showDescPicker = ref(false);
+
+const openDesc = (project) => {
+  team.value = project
+  showDescPicker.value = true
+}
+
 
 // 获取活动列表
 async function listActs() {
@@ -192,7 +238,7 @@ async function listTeamUser() {
     const {code, data, msg} = await request.get('/client/item/list-team-user/' + selectActId.value)
     if (code === 0) {
       teamMembers.value = data;
-      isSelfLeader.value = data.find(t => t.userId===userStore?.userInfo.id)?.isLeader
+      isSelfLeader.value = data.find(t => t.userId === userStore?.userInfo.id)?.isLeader
     } else {
       Toast.error(msg)
     }
@@ -222,10 +268,10 @@ const team = ref({})
 // 选择项目
 const selectProject = (project) => {
   selectedItemId.value = project.id;
-  team.value=project
+  team.value = project
-  if (project.isTeamApply){
+  if (project.isTeamApply) {
     selectedMemberIds.value = teamMembers.value.map(v => v.userId)
-  }else{
+  } else {
     selectedMemberIds.value = selectedMemberList.value.filter(v => v.itemId === project.id).map(v => v.userId)
   }
   showMemberPicker.value = true;
@@ -245,7 +291,23 @@ const getApplyUsers = async () => {
     Toast.error(e.message)
   }
 }
-
+// 取消报名
+const cancelRegistration = async () => {
+  try {
+    let data = {}
+    data.activityId = selectActId.value
+    data.itemId = selectedItemId.value
+    const {code, msg} = await useRequest().post('/client/item/cancel-team-sign-up/' ,{...data})
+    if (code === 0) {
+      Toast.success('取消报名成功')
+      showMemberPicker.value = false;
+      await getApplyUsers();
+      fetchRegistrationStatus();
+    }
+  } catch (e) {
+    console.log(e)
+  }
+};
 
 // 提交报名 - 使用静态数据模拟
 const submitRegistration = async () => {
@@ -312,6 +374,71 @@ const submitRegistration = async () => {
   margin-bottom: 24px;
 }
 
+.event-item-header {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 24rpx;
+  background-color: #f9f9f9;
+  border-left: 8rpx solid var(--td-brand-color-5);
+  position: relative;
+}
+
+.event-item-name {
+  color: #333333;
+  font-size: 30rpx;
+  font-weight: 500;
+  flex: 1;
+  margin-right: 8rpx;
+  position: relative;
+  z-index: 1;
+}
+
+.event-item-content {
+  padding: 0;
+}
+
+.event-item-image {
+  height: 300rpx;
+  display: block;
+}
+
+.event-item-info {
+  padding: 24rpx;
+}
+
+.event-item-section {
+  margin-bottom: 24rpx;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.event-item-section-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12rpx;
+
+  .t-icon {
+    margin-right: 8rpx;
+  }
+
+  text {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #333333;
+  }
+}
+
+.event-item-section-content {
+  font-size: 28rpx;
+  color: #666666;
+  line-height: 1.5;
+  word-break: break-all;
+  padding-left: 32rpx;
+}
+
+
 .project-card {
   background-color: #fff;
   border-radius: 12px;
@@ -323,6 +450,22 @@ const submitRegistration = async () => {
   position: relative;
   overflow: hidden;
 
+  .project-card__image {
+    height: 150px !important;
+  }
+
+  .project-card__title {
+    font-size: 15px !important;
+    margin: 10px;
+  }
+
+  .project-card__button {
+    margin-left: 10px;
+    background-color: #0052D9;
+    color: #ffffff;
+  }
+
+
   &:active {
     transform: scale(0.98);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

frontend/src/pages/activity/team/index.vue

@@ -59,7 +59,7 @@
             <div class="section-badge">{{ team.groupUsers.length }}</div>
           </div>
           <div class="member-grid">
-            <div class="member-grid-item" v-for="member in team.groupUsers" :key="member.id">
+            <div class="member-grid-item" v-for="member in team.groupUsers" :key="member.id" @click="openUserDetail(member)">
               <div class="member-name">
                 {{ member.userName }}
                 <t-tag theme="danger" size="small" v-if="member.isLeader">队长</t-tag>
@@ -144,6 +144,15 @@
       </div>
     </template>
   </t-dialog>
+
+  <t-popup v-model:visible="showUserDetailPicker" placement="bottom" destroy-on-close style="height: 50%">
+    <view class="member-picker">
+      <view class="picker-header">
+        <text class="picker-title">成员信息</text>
+        <t-icon name="close" @click="showUserDetailPicker = false"/>
+      </view>
+    </view>
+  </t-popup>
 </template>
 
 <script setup>
@@ -175,11 +184,12 @@ let team = ref(null);
 // 申请成为队长弹框提示
 const leaderConfirmVisible = ref(false)
 
-const handleMenuOpened = () => {
+// 用户详情弹框
-
+const showUserDetailPicker=ref(false)
-}
+// 打开用户详情
-
+const openUserDetail = (val) => {
-const handleMenuClosed = () => {
+  showUserDetailPicker.value = true
+  console.log(val)
 }
 
 const actChange = (val) => {
@@ -262,6 +272,69 @@ onLoad(() => {
 .content-area {
   padding: 0 16px 24px;
 }
+/*用户弹框*/
+.member-picker {
+  background-color: #fff;
+  border-radius: 16px 16px 0 0;
+  padding: 20px;
+
+  .picker-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .picker-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #333;
+    }
+  }
+
+  .picker-subtitle {
+    font-size: 14px;
+    color: #ff5f5c;
+    margin-bottom: 20px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .member-list {
+    max-height: 50vh;
+    overflow-y: auto;
+    margin-bottom: 20px;
+    padding: 0 4px;
+  }
+
+  .member-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 0;
+    border-bottom: 1px solid #f5f5f5;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &--disabled {
+      opacity: 0.7;
+    }
+
+    .member-status {
+      font-size: 12px;
+      color: #52c41a;
+    }
+
+    :deep(.t-checkbox) {
+      margin: 0;
+    }
+  }
+
+  .picker-footer {
+    padding-top: 12px;
+  }
+}
 
 /* 团队卡片 */
 .team-card {

frontend/src/utils/config.js

@@ -0,0 +1,3 @@
+export const config = {
+ fileDomain: 'http://localhost',
+}