hookehuyr

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

- 在api/checkin.js中添加获取打卡动态详情和编辑打卡动态的接口
- 修改IndexCheckInPage.vue中的编辑和删除方法,支持传入post对象
- 在image.vue、audio.vue和video.vue中实现打卡动态的编辑功能,包括数据回显和提交编辑
- 根据编辑状态区分新增和编辑操作,使用不同的接口进行提交
/*
* @Date: 2025-06-06 09:26:16
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-06 16:19:13
* @LastEditTime: 2025-06-06 17:46:06
* @FilePath: /mlaj/src/api/checkin.js
* @Description: 签到模块相关接口
*/
......@@ -13,6 +13,8 @@ const Api = {
TASK_CHECKIN: '/srv/?a=checkin&t=checkin',
TASK_UPLOAD_ADD: '/srv/?a=checkin&t=upload_add',
TASK_UPLOAD_LIST: '/srv/?a=checkin&t=upload_list',
TASK_UPLOAD_INFO: '/srv/?a=checkin&t=upload_info',
TASK_UPLOAD_EDIT: '/srv/?a=checkin&t=upload_edit',
}
/**
......@@ -59,3 +61,20 @@ export const addUploadTaskAPI = (params) => fn(fetch.post(Api.TASK_UPLOAD_ADD,
* @returns
*/
export const getUploadTaskListAPI = (params) => fn(fetch.post(Api.TASK_UPLOAD_LIST, params))
/**
* @description: 获取打卡动态详情
* @param i 打卡动态ID
* @returns
*/
export const getUploadTaskInfoAPI = (params) => fn(fetch.get(Api.TASK_UPLOAD_INFO, params))
/**
* @description: 编辑打卡动态
* @param i 打卡动态ID
* @param note 打卡文字
* @param meta_id[] 附件ID列表
* @param file_type 上传附件的类型 image=上传图片,video=视频,audio=音频
* @returns
*/
export const editUploadTaskInfoAPI = (params) => fn(fetch.get(Api.TASK_UPLOAD_EDIT, params))
......
<!--
* @Date: 2025-05-29 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-06 17:32:28
* @LastEditTime: 2025-06-06 17:40:39
* @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
* @Description: 文件描述
-->
......@@ -82,8 +82,8 @@
</van-col>
<van-col span="3">
<div v-if="post.is_my" class="post-menu">
<van-icon name="edit" @click="editCheckin()" />
<van-icon name="delete-o" @click="delCheckin()" />
<van-icon name="edit" @click="editCheckin(post)" />
<van-icon name="delete-o" @click="delCheckin(post)" />
</div>
</van-col>
</van-row>
......@@ -536,27 +536,39 @@ const handLike = (post) => {
// TODO: 调用接口
}
const editCheckin = (type) => {
if (type === 'image') {
const editCheckin = (post) => {
console.warn(post);
if (post.file_type === 'image') {
router.push({
path: '/checkin/image',
query: {
id: route.query.id,
type,
post_id: post.id,
type: 'image',
status: 'edit',
}
})
} else {
} else if (post.file_type === 'video') {
router.push({
path: '/checkin/file',
path: '/checkin/video',
query: {
id: route.query.id,
type,
post_id: post.id,
type: 'video',
status: 'edit',
}
})
} else if (post.file_type === 'audio') {
router.push({
path: '/checkin/audio',
query: {
post_id: post.id,
type: 'audio',
status: 'edit',
}
})
}
}
const delCheckin = () => {
const delCheckin = (post) => {
showConfirmDialog({
title: '温馨提示',
message: '您是否确定要删除该动态?',
......@@ -640,6 +652,7 @@ onMounted(async () => {
likes: item.like_count,
is_liked: item.is_like,
is_my: item.is_my,
file_type: item.file_type,
})
})
}
......
<!--
* @Date: 2025-06-03 09:41:41
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-06 15:51:31
* @LastEditTime: 2025-06-06 17:52:29
* @FilePath: /mlaj/src/views/checkin/upload/audio.vue
* @Description: 音视频文件上传组件
-->
......@@ -71,7 +71,7 @@ import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showLoadingToast } from 'vant'
import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common'
import { addUploadTaskAPI } from "@/api/checkin";
import { addUploadTaskAPI, getUploadTaskInfoAPI, editUploadTaskInfoAPI } from "@/api/checkin";
import BMF from 'browser-md5-file'
import _ from 'lodash'
import { useTitle } from '@vueuse/core';
......@@ -278,7 +278,20 @@ const onSubmit = async () => {
})
try {
// 调用提交打卡接口
if (route.query.status === 'edit') {
// 编辑打卡接口
const { code, data } = await editUploadTaskInfoAPI({
i: route.query.post_id,
note: message.value,
meta_id: fileList.value.map(item => item.meta_id),
file_type: route.query.type,
});
if (code) {
showToast('提交成功')
router.back()
}
} else {
// 新增打卡接口
const { code, data } = await addUploadTaskAPI({
task_id: route.query.id,
note: message.value,
......@@ -289,6 +302,7 @@ const onSubmit = async () => {
showToast('提交成功')
router.back()
}
}
} catch (error) {
showToast('提交失败,请重试')
} finally {
......@@ -296,6 +310,21 @@ const onSubmit = async () => {
uploading.value = false
}
}
onMounted(async () => {
if (route.query.status === 'edit') {
const { code, data } = await getUploadTaskInfoAPI({ i: route.query.post_id });
if (code) {
fileList.value = data.files.map(item => ({
url: item.value,
status: 'done',
message: '上传成功',
meta_id: item.meta_id,
}))
message.value = data.note
}
}
})
</script>
<style lang="less" scoped>
......
......@@ -56,7 +56,7 @@ import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showLoadingToast } from 'vant'
import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common'
import { addUploadTaskAPI } from "@/api/checkin";
import { addUploadTaskAPI, getUploadTaskInfoAPI, editUploadTaskInfoAPI } from "@/api/checkin";
import BMF from 'browser-md5-file'
import _ from 'lodash'
import { useTitle } from '@vueuse/core';
......@@ -275,7 +275,20 @@ const onSubmit = async () => {
})
try {
// 调用提交打卡接口
if (route.query.status === 'edit') {
// 编辑打卡接口
const { code, data } = await editUploadTaskInfoAPI({
i: route.query.post_id,
note: message.value,
meta_id: fileList.value.map(item => item.meta_id),
file_type: route.query.type,
});
if (code) {
showToast('提交成功')
router.back()
}
} else {
// 新增打卡接口
const { code, data } = await addUploadTaskAPI({
task_id: route.query.id,
note: message.value,
......@@ -286,6 +299,7 @@ const onSubmit = async () => {
showToast('提交成功')
router.back()
}
}
} catch (error) {
showToast('提交失败,请重试')
} finally {
......@@ -293,6 +307,21 @@ const onSubmit = async () => {
uploading.value = false
}
}
onMounted(async () => {
if (route.query.status === 'edit') {
const { code, data } = await getUploadTaskInfoAPI({ i: route.query.post_id });
if (code) {
fileList.value = data.files.map(item => ({
url: item.value,
status: 'done',
message: '上传成功',
meta_id: item.meta_id,
}))
message.value = data.note
}
}
})
</script>
<style lang="less" scoped>
......
<!--
* @Date: 2025-06-03 09:41:41
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-06 15:49:37
* @LastEditTime: 2025-06-06 17:54:23
* @FilePath: /mlaj/src/views/checkin/upload/video.vue
* @Description: 音视频文件上传组件
-->
......@@ -71,7 +71,7 @@ import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showLoadingToast } from 'vant'
import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common'
import { addUploadTaskAPI } from "@/api/checkin";
import { addUploadTaskAPI, getUploadTaskInfoAPI, editUploadTaskInfoAPI } from "@/api/checkin";
import BMF from 'browser-md5-file'
import _ from 'lodash'
import { useTitle } from '@vueuse/core';
......@@ -278,7 +278,20 @@ const onSubmit = async () => {
})
try {
// 调用提交打卡接口
if (route.query.status === 'edit') {
// 编辑打卡接口
const { code, data } = await editUploadTaskInfoAPI({
i: route.query.post_id,
note: message.value,
meta_id: fileList.value.map(item => item.meta_id),
file_type: route.query.type,
});
if (code) {
showToast('提交成功')
router.back()
}
} else {
// 新增打卡接口
const { code, data } = await addUploadTaskAPI({
task_id: route.query.id,
note: message.value,
......@@ -289,6 +302,7 @@ const onSubmit = async () => {
showToast('提交成功')
router.back()
}
}
} catch (error) {
showToast('提交失败,请重试')
} finally {
......@@ -296,6 +310,21 @@ const onSubmit = async () => {
uploading.value = false
}
}
onMounted(async () => {
if (route.query.status === 'edit') {
const { code, data } = await getUploadTaskInfoAPI({ i: route.query.post_id });
if (code) {
fileList.value = data.files.map(item => ({
url: item.value,
status: 'done',
message: '上传成功',
meta_id: item.meta_id,
}))
message.value = data.note
}
}
})
</script>
<style lang="less" scoped>
......