Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
2c21afa7 1 parent e86c3323

feat(打卡): 添加打卡动态编辑功能 

- 在api/checkin.js中添加获取打卡动态详情和编辑打卡动态的接口
- 修改IndexCheckInPage.vue中的编辑和删除方法，支持传入post对象
- 在image.vue、audio.vue和video.vue中实现打卡动态的编辑功能，包括数据回显和提交编辑
- 根据编辑状态区分新增和编辑操作，使用不同的接口进行提交
Inline Side-by-side
Showing 5 changed files with 167 additions and 48 deletions
1 /* 1 /*
2 * @Date: 2025-06-06 09:26:16 2 * @Date: 2025-06-06 09:26:16
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-06-06 16:19:13 4 + * @LastEditTime: 2025-06-06 17:46:06
5 * @FilePath: /mlaj/src/api/checkin.js 5 * @FilePath: /mlaj/src/api/checkin.js
6 * @Description: 签到模块相关接口 6 * @Description: 签到模块相关接口
7 */ 7 */
...@@ -13,6 +13,8 @@ const Api = { ...@@ -13,6 +13,8 @@ const Api = {
13 TASK_CHECKIN: '/srv/?a=checkin&t=checkin', 13 TASK_CHECKIN: '/srv/?a=checkin&t=checkin',
14 TASK_UPLOAD_ADD: '/srv/?a=checkin&t=upload_add', 14 TASK_UPLOAD_ADD: '/srv/?a=checkin&t=upload_add',
15 TASK_UPLOAD_LIST: '/srv/?a=checkin&t=upload_list', 15 TASK_UPLOAD_LIST: '/srv/?a=checkin&t=upload_list',
16 + TASK_UPLOAD_INFO: '/srv/?a=checkin&t=upload_info',
17 + TASK_UPLOAD_EDIT: '/srv/?a=checkin&t=upload_edit',
16 } 18 }
17 19
18 /** 20 /**
...@@ -59,3 +61,20 @@ export const addUploadTaskAPI = (params) => fn(fetch.post(Api.TASK_UPLOAD_ADD, ...@@ -59,3 +61,20 @@ export const addUploadTaskAPI = (params) => fn(fetch.post(Api.TASK_UPLOAD_ADD,
59 * @returns 61 * @returns
60 */ 62 */
61 export const getUploadTaskListAPI = (params) => fn(fetch.post(Api.TASK_UPLOAD_LIST, params)) 63 export const getUploadTaskListAPI = (params) => fn(fetch.post(Api.TASK_UPLOAD_LIST, params))
64 +
65 +/**
66 + * @description: 获取打卡动态详情
67 + * @param i 打卡动态ID
68 + * @returns
69 + */
70 +export const getUploadTaskInfoAPI = (params) => fn(fetch.get(Api.TASK_UPLOAD_INFO, params))
71 +
72 +/**
73 + * @description: 编辑打卡动态
74 + * @param i 打卡动态ID
75 + * @param note 打卡文字
76 + * @param meta_id[] 附件ID列表
77 + * @param file_type 上传附件的类型 image=上传图片，video=视频，audio=音频
78 + * @returns
79 + */
80 +export const editUploadTaskInfoAPI = (params) => fn(fetch.get(Api.TASK_UPLOAD_EDIT, params))
......
1 <!-- 1 <!--
2 * @Date: 2025-05-29 15:34:17 2 * @Date: 2025-05-29 15:34:17
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-06-06 17:32:28 4 + * @LastEditTime: 2025-06-06 17:40:39
5 * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue 5 * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -82,8 +82,8 @@ ...@@ -82,8 +82,8 @@
82 </van-col> 82 </van-col>
83 <van-col span="3"> 83 <van-col span="3">
84 <div v-if="post.is_my" class="post-menu"> 84 <div v-if="post.is_my" class="post-menu">
85 - <van-icon name="edit" @click="editCheckin()" /> 85 + <van-icon name="edit" @click="editCheckin(post)" />
86 - <van-icon name="delete-o" @click="delCheckin()" /> 86 + <van-icon name="delete-o" @click="delCheckin(post)" />
87 </div> 87 </div>
88 </van-col> 88 </van-col>
89 </van-row> 89 </van-row>
...@@ -536,27 +536,39 @@ const handLike = (post) => { ...@@ -536,27 +536,39 @@ const handLike = (post) => {
536 // TODO: 调用接口 536 // TODO: 调用接口
537 } 537 }
538 538
539 -const editCheckin = (type) => { 539 +const editCheckin = (post) => {
540 - if (type === 'image') { 540 + console.warn(post);
541 + if (post.file_type === 'image') {
541 router.push({ 542 router.push({
542 path: '/checkin/image', 543 path: '/checkin/image',
543 query: { 544 query: {
544 - id: route.query.id, 545 + post_id: post.id,
545 - type, 546 + type: 'image',
547 + status: 'edit',
546 } 548 }
547 }) 549 })
548 - } else { 550 + } else if (post.file_type === 'video') {
549 router.push({ 551 router.push({
550 - path: '/checkin/file', 552 + path: '/checkin/video',
551 query: { 553 query: {
552 - id: route.query.id, 554 + post_id: post.id,
553 - type, 555 + type: 'video',
556 + status: 'edit',
557 + }
558 + })
559 + } else if (post.file_type === 'audio') {
560 + router.push({
561 + path: '/checkin/audio',
562 + query: {
563 + post_id: post.id,
564 + type: 'audio',
565 + status: 'edit',
554 } 566 }
555 }) 567 })
556 } 568 }
557 } 569 }
558 570
559 -const delCheckin = () => { 571 +const delCheckin = (post) => {
560 showConfirmDialog({ 572 showConfirmDialog({
561 title: '温馨提示', 573 title: '温馨提示',
562 message: '您是否确定要删除该动态？', 574 message: '您是否确定要删除该动态？',
...@@ -640,6 +652,7 @@ onMounted(async () => { ...@@ -640,6 +652,7 @@ onMounted(async () => {
640 likes: item.like_count, 652 likes: item.like_count,
641 is_liked: item.is_like, 653 is_liked: item.is_like,
642 is_my: item.is_my, 654 is_my: item.is_my,
655 + file_type: item.file_type,
643 }) 656 })
644 }) 657 })
645 } 658 }
......
1 <!-- 1 <!--
2 * @Date: 2025-06-03 09:41:41 2 * @Date: 2025-06-03 09:41:41
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-06-06 15:51:31 4 + * @LastEditTime: 2025-06-06 17:52:29
5 * @FilePath: /mlaj/src/views/checkin/upload/audio.vue 5 * @FilePath: /mlaj/src/views/checkin/upload/audio.vue
6 * @Description: 音视频文件上传组件 6 * @Description: 音视频文件上传组件
7 --> 7 -->
...@@ -71,7 +71,7 @@ import { ref, computed } from 'vue' ...@@ -71,7 +71,7 @@ import { ref, computed } from 'vue'
71 import { useRoute, useRouter } from 'vue-router' 71 import { useRoute, useRouter } from 'vue-router'
72 import { showToast, showLoadingToast } from 'vant' 72 import { showToast, showLoadingToast } from 'vant'
73 import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common' 73 import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common'
74 -import { addUploadTaskAPI } from "@/api/checkin"; 74 +import { addUploadTaskAPI, getUploadTaskInfoAPI, editUploadTaskInfoAPI } from "@/api/checkin";
75 import BMF from 'browser-md5-file' 75 import BMF from 'browser-md5-file'
76 import _ from 'lodash' 76 import _ from 'lodash'
77 import { useTitle } from '@vueuse/core'; 77 import { useTitle } from '@vueuse/core';
...@@ -278,16 +278,30 @@ const onSubmit = async () => { ...@@ -278,16 +278,30 @@ const onSubmit = async () => {
278 }) 278 })
279 279
280 try { 280 try {
281 - // 调用提交打卡接口 281 + if (route.query.status === 'edit') {
282 - const { code, data } = await addUploadTaskAPI({ 282 + // 编辑打卡接口
283 - task_id: route.query.id, 283 + const { code, data } = await editUploadTaskInfoAPI({
284 - note: message.value, 284 + i: route.query.post_id,
285 - meta_id: fileList.value.map(item => item.meta_id), 285 + note: message.value,
286 - file_type: route.query.type, 286 + meta_id: fileList.value.map(item => item.meta_id),
287 - }); 287 + file_type: route.query.type,
288 - if (code) { 288 + });
289 - showToast('提交成功') 289 + if (code) {
290 - router.back() 290 + showToast('提交成功')
291 + router.back()
292 + }
293 + } else {
294 + // 新增打卡接口
295 + const { code, data } = await addUploadTaskAPI({
296 + task_id: route.query.id,
297 + note: message.value,
298 + meta_id: fileList.value.map(item => item.meta_id),
299 + file_type: route.query.type,
300 + });
301 + if (code) {
302 + showToast('提交成功')
303 + router.back()
304 + }
291 } 305 }
292 } catch (error) { 306 } catch (error) {
293 showToast('提交失败，请重试') 307 showToast('提交失败，请重试')
...@@ -296,6 +310,21 @@ const onSubmit = async () => { ...@@ -296,6 +310,21 @@ const onSubmit = async () => {
296 uploading.value = false 310 uploading.value = false
297 } 311 }
298 } 312 }
313 +
314 +onMounted(async () => {
315 + if (route.query.status === 'edit') {
316 + const { code, data } = await getUploadTaskInfoAPI({ i: route.query.post_id });
317 + if (code) {
318 + fileList.value = data.files.map(item => ({
319 + url: item.value,
320 + status: 'done',
321 + message: '上传成功',
322 + meta_id: item.meta_id,
323 + }))
324 + message.value = data.note
325 + }
326 + }
327 +})
299 </script> 328 </script>
300 329
301 <style lang="less" scoped> 330 <style lang="less" scoped>
......
...@@ -56,7 +56,7 @@ import { ref, computed } from 'vue' ...@@ -56,7 +56,7 @@ import { ref, computed } from 'vue'
56 import { useRoute, useRouter } from 'vue-router' 56 import { useRoute, useRouter } from 'vue-router'
57 import { showToast, showLoadingToast } from 'vant' 57 import { showToast, showLoadingToast } from 'vant'
58 import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common' 58 import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common'
59 -import { addUploadTaskAPI } from "@/api/checkin"; 59 +import { addUploadTaskAPI, getUploadTaskInfoAPI, editUploadTaskInfoAPI } from "@/api/checkin";
60 import BMF from 'browser-md5-file' 60 import BMF from 'browser-md5-file'
61 import _ from 'lodash' 61 import _ from 'lodash'
62 import { useTitle } from '@vueuse/core'; 62 import { useTitle } from '@vueuse/core';
...@@ -275,16 +275,30 @@ const onSubmit = async () => { ...@@ -275,16 +275,30 @@ const onSubmit = async () => {
275 }) 275 })
276 276
277 try { 277 try {
278 - // 调用提交打卡接口 278 + if (route.query.status === 'edit') {
279 - const { code, data } = await addUploadTaskAPI({ 279 + // 编辑打卡接口
280 - task_id: route.query.id, 280 + const { code, data } = await editUploadTaskInfoAPI({
281 - note: message.value, 281 + i: route.query.post_id,
282 - meta_id: fileList.value.map(item => item.meta_id), 282 + note: message.value,
283 - file_type: route.query.type, 283 + meta_id: fileList.value.map(item => item.meta_id),
284 - }); 284 + file_type: route.query.type,
285 - if (code) { 285 + });
286 - showToast('提交成功') 286 + if (code) {
287 - router.back() 287 + showToast('提交成功')
288 + router.back()
289 + }
290 + } else {
291 + // 新增打卡接口
292 + const { code, data } = await addUploadTaskAPI({
293 + task_id: route.query.id,
294 + note: message.value,
295 + meta_id: fileList.value.map(item => item.meta_id),
296 + file_type: route.query.type,
297 + });
298 + if (code) {
299 + showToast('提交成功')
300 + router.back()
301 + }
288 } 302 }
289 } catch (error) { 303 } catch (error) {
290 showToast('提交失败，请重试') 304 showToast('提交失败，请重试')
...@@ -293,6 +307,21 @@ const onSubmit = async () => { ...@@ -293,6 +307,21 @@ const onSubmit = async () => {
293 uploading.value = false 307 uploading.value = false
294 } 308 }
295 } 309 }
310 +
311 +onMounted(async () => {
312 + if (route.query.status === 'edit') {
313 + const { code, data } = await getUploadTaskInfoAPI({ i: route.query.post_id });
314 + if (code) {
315 + fileList.value = data.files.map(item => ({
316 + url: item.value,
317 + status: 'done',
318 + message: '上传成功',
319 + meta_id: item.meta_id,
320 + }))
321 + message.value = data.note
322 + }
323 + }
324 +})
296 </script> 325 </script>
297 326
298 <style lang="less" scoped> 327 <style lang="less" scoped>
......
1 <!-- 1 <!--
2 * @Date: 2025-06-03 09:41:41 2 * @Date: 2025-06-03 09:41:41
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-06-06 15:49:37 4 + * @LastEditTime: 2025-06-06 17:54:23
5 * @FilePath: /mlaj/src/views/checkin/upload/video.vue 5 * @FilePath: /mlaj/src/views/checkin/upload/video.vue
6 * @Description: 音视频文件上传组件 6 * @Description: 音视频文件上传组件
7 --> 7 -->
...@@ -71,7 +71,7 @@ import { ref, computed } from 'vue' ...@@ -71,7 +71,7 @@ import { ref, computed } from 'vue'
71 import { useRoute, useRouter } from 'vue-router' 71 import { useRoute, useRouter } from 'vue-router'
72 import { showToast, showLoadingToast } from 'vant' 72 import { showToast, showLoadingToast } from 'vant'
73 import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common' 73 import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common'
74 -import { addUploadTaskAPI } from "@/api/checkin"; 74 +import { addUploadTaskAPI, getUploadTaskInfoAPI, editUploadTaskInfoAPI } from "@/api/checkin";
75 import BMF from 'browser-md5-file' 75 import BMF from 'browser-md5-file'
76 import _ from 'lodash' 76 import _ from 'lodash'
77 import { useTitle } from '@vueuse/core'; 77 import { useTitle } from '@vueuse/core';
...@@ -278,16 +278,30 @@ const onSubmit = async () => { ...@@ -278,16 +278,30 @@ const onSubmit = async () => {
278 }) 278 })
279 279
280 try { 280 try {
281 - // 调用提交打卡接口 281 + if (route.query.status === 'edit') {
282 - const { code, data } = await addUploadTaskAPI({ 282 + // 编辑打卡接口
283 - task_id: route.query.id, 283 + const { code, data } = await editUploadTaskInfoAPI({
284 - note: message.value, 284 + i: route.query.post_id,
285 - meta_id: fileList.value.map(item => item.meta_id), 285 + note: message.value,
286 - file_type: route.query.type, 286 + meta_id: fileList.value.map(item => item.meta_id),
287 - }); 287 + file_type: route.query.type,
288 - if (code) { 288 + });
289 - showToast('提交成功') 289 + if (code) {
290 - router.back() 290 + showToast('提交成功')
291 + router.back()
292 + }
293 + } else {
294 + // 新增打卡接口
295 + const { code, data } = await addUploadTaskAPI({
296 + task_id: route.query.id,
297 + note: message.value,
298 + meta_id: fileList.value.map(item => item.meta_id),
299 + file_type: route.query.type,
300 + });
301 + if (code) {
302 + showToast('提交成功')
303 + router.back()
304 + }
291 } 305 }
292 } catch (error) { 306 } catch (error) {
293 showToast('提交失败，请重试') 307 showToast('提交失败，请重试')
...@@ -296,6 +310,21 @@ const onSubmit = async () => { ...@@ -296,6 +310,21 @@ const onSubmit = async () => {
296 uploading.value = false 310 uploading.value = false
297 } 311 }
298 } 312 }
313 +
314 +onMounted(async () => {
315 + if (route.query.status === 'edit') {
316 + const { code, data } = await getUploadTaskInfoAPI({ i: route.query.post_id });
317 + if (code) {
318 + fileList.value = data.files.map(item => ({
319 + url: item.value,
320 + status: 'done',
321 + message: '上传成功',
322 + meta_id: item.meta_id,
323 + }))
324 + message.value = data.note
325 + }
326 + }
327 +})
299 </script> 328 </script>
300 329
301 <style lang="less" scoped> 330 <style lang="less" scoped>
......