宋杰4.29页面整合完成

src/App.vue

@@ -1,13 +1,15 @@
 <template>
-  <div id="app">
+  <!-- <div id="app">
     <voting-management></voting-management>
-  </div>
+      
+  </div> -->
+  <router-view></router-view>
 </template>
 
 <script>
-export default {
-  name: 'App',
-};
+// export default {
+//   name: 'App',
+// };
 </script>
 
 <style>

src/main.js

@@ -5,35 +5,24 @@ import axios from './api/axiosConfig'; // 引入axiosConfig
 import VotingManagement from './views/VotingManagement.vue' // 引入VotingManagement.vue
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-const app = createApp(App) // 创建vue实例
-
-
-
-app.use(router) // 添加路由
-app.component('VotingManagement', VotingManagement) // 注册组件
-app.config.globalProperties.axios = axios; // 全局挂载axios
-app.mount('#app')  // 挂载到id为app的div上
-app.use(ElementPlus)
-import App from './App.vue'
-import router from './router'
-
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import { createPinia } from 'pinia'
 
+const app = createApp(App) // 创建vue实例
 
 
-const app = createApp(App)
-
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-    app.component(key, component)
-  }
+  app.component(key, component)
+}
+
+app.use(ElementPlus, {
+  locale: zhCn,
+})
+
+app.component('VotingManagement', VotingManagement) // 注册组件
+app.config.globalProperties.axios = axios; // 全局挂载axios
 
-  app.use(ElementPlus, {
-    locale: zhCn,
-  })
 app.use(createPinia())
 app.use(router)
 app.use(ElementPlus)

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import ActivityManagement from '@/views/ActivityManagement.vue'
+import VotingManagement from '@/views/VotingManagement.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,7 +10,12 @@ const router = createRouter({
       name: 'activityManagement',
       component: ActivityManagement,
     },
-  ],
-})
+    {
+      path: '/vote/:id',
+      name: 'votingManagement',
+      component: VotingManagement,
+    },
+  ]
+});
 
 export default router

src/views/ActivityManagement.vue

@@ -35,7 +35,7 @@
           <template #default="scope">
             <div class="operation-buttons">
               <el-button size="mini" type="default" @click="editActivity(scope.row)">修改</el-button>
-              <el-button size="mini" type="primary" @click="viewDetails(scope.row)">查看详情</el-button>
+              <el-button size="mini" type="primary" @click="viewDetails(scope.row.id)">查看详情</el-button>
             </div>
           </template>
         </el-table-column>
@@ -100,7 +100,7 @@ import { ref, computed } from 'vue';
 import { ElMessage } from 'element-plus';
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import homeApi from '@/api/homeApi';
-
+import router from '@/router';
 
 function indexMethod(index){
   return itemsPerPage*(currentPage.value-1)+index+1;
@@ -182,8 +182,10 @@ const editActivity = (activity) => {
 };
 
 // 查看详情
-const viewDetails = (activity) => {
-  ElMessage.info(`活动ID: ${activity.id}, 活动标题: ${activity.title}, 日期: ${activity.start} - ${activity.end}, 访问人数: ${activity.visit_count}`);
+const viewDetails = (id) => {
+  console.log(id);
+  router.push({ name: 'votingManagement', params: { id: id } });
+  // ElMessage.info(`活动ID: ${activity.id}, 活动标题: ${activity.title}, 日期: ${activity.start} - ${activity.end}, 访问人数: ${activity.visit_count}`);
 };
 
 const handlePictureCardPreview = (file) => {

src/views/VotingManagement.vue

@@ -38,13 +38,13 @@
               </div>
               <div class="date-range">
                 <div class="date-picker">
-                  <img src="C:\Users\Administrator\Desktop\VoteManage_VUE\src\assets\images\日历.png" alt="Calendar"
+                  <img src="../assets/images/日历.png" alt="Calendar"
                     class="calendar-icon">
                   <input type="date" class="date-input" placeholder="开始日期" v-model="startDate">
                 </div>
                 <span class="date-separator">至</span>
                 <div class="date-picker">
-                  <img src="C:\Users\Administrator\Desktop\VoteManage_VUE\src\assets\images\日历.png" alt="Calendar"
+                  <img src="../assets/images/日历.png" alt="Calendar"
                     class="calendar-icon">
                   <input type="date" class="date-input" placeholder="结束日期" v-model="endDate">
                 </div>
@@ -118,13 +118,15 @@ import { ref } from 'vue';
 import axiosInstance from '@/api/axiosConfig';
 import axiosexport from '@/api/axiosConfig';
 import { ElTable } from 'element-plus';
+import { useRoute } from 'vue-router';
 
 export default {
 
   // 组件数据
   data() {
     return {
-      detailId: window.location.pathname.split('/').pop() || '24',
+      // detailId: window.location.pathname.split('/').pop() || '24',
+      detailId: ref(0),
       //detailId: 24,
       searchId: '',
       selectedRegion: '',
@@ -137,6 +139,7 @@ export default {
       totalRecords: 0,
       currentPage: ref(1),
       pageSize: ref(10),
+      route: useRoute(),
     };
   },
 
@@ -152,7 +155,7 @@ export default {
     },
 
     // 获取投票记录
-    async fetchVoteRecords() {
+    async fetchVoteRecords(detailId) {
       try {
         const params = {
           PageNo: this.currentPage,
@@ -162,6 +165,7 @@ export default {
         const response = await axiosInstance.post('', params);
         this.voteRecords = response.data.data.list;
         this.totalPages = response.data.data.total;
+        console.log(response.data.data.list);
         // this.totalRecords = response.data.data.total;
       } catch (error) {
         console.error('获取投票记录失败:', error);
@@ -244,7 +248,10 @@ export default {
 
   //组件挂载后获取投票记录
   mounted() {
-    this.fetchVoteRecords();
+    this.detailId = this.route.params.id; 
+    console.log(this.route.params.id);
+    console.log(this.detailId);
+    this.fetchVoteRecords(this.detailId);
   }
 
 };