feat:更新朋友圈功能
This commit is contained in:
@@ -15,6 +15,12 @@ export const updateMomentApi = (id: number, moment: IMoment): Promise<boolean> =
|
|||||||
data: moment
|
data: moment
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export const deleteMomentApi = (id: number): Promise<boolean> =>
|
||||||
|
cloudService({
|
||||||
|
url: `/food-service/moment/${id}`,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
|
||||||
export const queryMomentApi = (): Promise<IMoment[]> =>
|
export const queryMomentApi = (): Promise<IMoment[]> =>
|
||||||
cloudService({
|
cloudService({
|
||||||
url: '/food-service/moment',
|
url: '/food-service/moment',
|
||||||
|
|||||||
BIN
src/assets/ios.png
Normal file
BIN
src/assets/ios.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
@@ -66,10 +66,8 @@ import type { PropType } from 'vue'
|
|||||||
import type { IRecipe, IRecord } from '@/types/food.ts'
|
import type { IRecipe, IRecord } from '@/types/food.ts'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { formatDate } from 'vue3-common/utils/dateUtil'
|
import { formatDate } from 'vue3-common/utils/dateUtil'
|
||||||
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
|
|
||||||
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
||||||
import { serviceFileRootPath } from '@/utils'
|
import { serviceFileRootPath } from '@/utils'
|
||||||
import { ElMessage } from 'element-plus'
|
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const foodStore = useFoodStore()
|
const foodStore = useFoodStore()
|
||||||
|
|||||||
@@ -6,13 +6,16 @@
|
|||||||
<span class="username">{{ props.item.username }}</span>
|
<span class="username">{{ props.item.username }}</span>
|
||||||
<p>{{ props.item.content }}</p>
|
<p>{{ props.item.content }}</p>
|
||||||
|
|
||||||
<el-image style="width: 200px; height: 200px"
|
<div class="moment-image-list">
|
||||||
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
|
<el-image v-for="(item, index) in props.item.imageList" :key="index"
|
||||||
|
:src="serviceFileRootPath + item" fit="fill" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>{{ formatTimeAgo(props.item.date) }}</p>
|
<p>{{ formatTimeAgo(props.item.date) }}</p>
|
||||||
|
|
||||||
<div class="button-container">
|
<div class="button-container">
|
||||||
<el-button :icon="Edit" circle size="small" @click="editClick()"/>
|
<el-button v-if="props.item.userId === userStore.userInfo.id"
|
||||||
|
:icon="Edit" circle size="small" @click="editClick()"/>
|
||||||
<el-button circle size="small">
|
<el-button circle size="small">
|
||||||
<i class="fa-regular fa-thumbs-up"></i>
|
<i class="fa-regular fa-thumbs-up"></i>
|
||||||
</el-button>
|
</el-button>
|
||||||
@@ -66,12 +69,14 @@ import { Edit } from '@element-plus/icons-vue'
|
|||||||
import { defineProps, reactive } from 'vue'
|
import { defineProps, reactive } from 'vue'
|
||||||
import type { PropType } from 'vue'
|
import type { PropType } from 'vue'
|
||||||
import type { IMoment } from '@/types/food'
|
import type { IMoment } from '@/types/food'
|
||||||
import { serviceFileRootPath } from '@/utils'
|
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
|
||||||
import { formatTimeAgo } from '@/utils/dateUtils'
|
import { formatTimeAgo } from '@/utils/dateUtils'
|
||||||
import { useFoodStore } from '@/store/food'
|
import { useFoodStore } from '@/store/food'
|
||||||
|
import { useUserStore } from '@/store/user'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const userStore = useUserStore()
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
item: {
|
item: {
|
||||||
@@ -127,6 +132,12 @@ const sendCommentClick = async () => {
|
|||||||
font-size: larger;
|
font-size: larger;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.moment-image-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.moment-comment {
|
.moment-comment {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 40px 60px;
|
grid-template-columns: 1fr 40px 60px;
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ export const useAppStore = defineStore('ipp', {
|
|||||||
isDark: false,
|
isDark: false,
|
||||||
isWebSocket: false,
|
isWebSocket: false,
|
||||||
serverIp: '14.103.235.151',
|
serverIp: '14.103.235.151',
|
||||||
version: 'v1.0.0.2025062401'
|
version: 'v1.0.0.2025062701'
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
initApp() {
|
initApp() {
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ import {
|
|||||||
import type { IDialog, IHandleApi, IStatsChart } from 'vue3-common/types'
|
import type { IDialog, IHandleApi, IStatsChart } from 'vue3-common/types'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { getCurrentMonth, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'
|
import { getCurrentMonth, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'
|
||||||
import { addCommentApi, addMomentApi, queryMomentApi, updateMomentApi } from '@/apis/moment'
|
import { addCommentApi, addMomentApi, deleteMomentApi, queryMomentApi, updateMomentApi } from '@/apis/moment'
|
||||||
|
|
||||||
export const useFoodStore = defineStore('food', {
|
export const useFoodStore = defineStore('food', {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
@@ -75,7 +75,8 @@ export const useFoodStore = defineStore('food', {
|
|||||||
recordApiType: 'ADD' as IHandleApi,
|
recordApiType: 'ADD' as IHandleApi,
|
||||||
editRecordIndex: 0,
|
editRecordIndex: 0,
|
||||||
currentMoment: {
|
currentMoment: {
|
||||||
content: ''
|
content: '',
|
||||||
|
imageList: []
|
||||||
} as IMoment,
|
} as IMoment,
|
||||||
momentApiType: 'ADD' as IHandleApi,
|
momentApiType: 'ADD' as IHandleApi,
|
||||||
imagePath: 'food-hub',
|
imagePath: 'food-hub',
|
||||||
@@ -179,7 +180,7 @@ export const useFoodStore = defineStore('food', {
|
|||||||
ElMessage.success('更新朋友圈成功')
|
ElMessage.success('更新朋友圈成功')
|
||||||
break
|
break
|
||||||
case 'DELETE':
|
case 'DELETE':
|
||||||
// await deleteRecordApi(record.id as number)
|
await deleteMomentApi(moment.id as number)
|
||||||
ElMessage.success('删除朋友圈成功')
|
ElMessage.success('删除朋友圈成功')
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
@@ -233,7 +234,8 @@ export const useFoodStore = defineStore('food', {
|
|||||||
},
|
},
|
||||||
getEmptyMoment(): IMoment {
|
getEmptyMoment(): IMoment {
|
||||||
return {
|
return {
|
||||||
content: ''
|
content: '',
|
||||||
|
imageList: []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -88,9 +88,11 @@ export interface IComment {
|
|||||||
|
|
||||||
export interface IMoment {
|
export interface IMoment {
|
||||||
id?: number;
|
id?: number;
|
||||||
|
userId?: number;
|
||||||
username?: string;
|
username?: string;
|
||||||
avatar?: string;
|
avatar?: string;
|
||||||
content: string;
|
content: string;
|
||||||
|
imageList: string[];
|
||||||
date?: string;
|
date?: string;
|
||||||
commentList?: IComment[];
|
commentList?: IComment[];
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,11 +8,20 @@
|
|||||||
:maxlength="100" show-word-limit
|
:maxlength="100" show-word-limit
|
||||||
placeholder="请输入内容"/>
|
placeholder="请输入内容"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="图片">
|
||||||
|
<upload-image v-model="foodStore.currentMoment.imageList"
|
||||||
|
:service-url="fileServiceUrl"
|
||||||
|
:image-limit="4"
|
||||||
|
:service-file-root-path="serviceFileRootPath"
|
||||||
|
:image-path="foodStore.imagePath"/>
|
||||||
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<div class="button-container">
|
<div class="button-container">
|
||||||
<el-button type="primary" @click="confirmClick">确认</el-button>
|
<el-button type="primary" @click="confirmClick">确认</el-button>
|
||||||
<el-button type="danger" @click="deleteClick">删除</el-button>
|
<el-button v-if="foodStore.momentApiType === 'UPDATE'"
|
||||||
|
type="danger" @click="deleteClick">删除</el-button>
|
||||||
<el-button type="info" @click="cancelClick">取消</el-button>
|
<el-button type="info" @click="cancelClick">取消</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -47,9 +56,9 @@ const cancelClick = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const deleteClick = () => {
|
const deleteClick = () => {
|
||||||
commonElMessageBox('是否确认删除该朋友圈?').then(() => {
|
commonElMessageBox('是否确认删除该朋友圈?').then(async () => {
|
||||||
foodStore.momentApiType = 'DELETE'
|
foodStore.momentApiType = 'DELETE'
|
||||||
foodStore.handleMomentApi(foodStore.currentMoment)
|
await foodStore.handleMomentApi(foodStore.currentMoment)
|
||||||
history.back()
|
history.back()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,6 +5,14 @@
|
|||||||
<span>版本号:</span>
|
<span>版本号:</span>
|
||||||
<span>{{ appStore.version }}</span>
|
<span>{{ appStore.version }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
IOS下载地址:<el-image :src="getAssetsImageFile('ios.png')"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Android下载地址:
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="button-container">
|
<div class="button-container">
|
||||||
<el-button type="primary" @click="viewLatestVersionClick">检查新版本</el-button>
|
<el-button type="primary" @click="viewLatestVersionClick">检查新版本</el-button>
|
||||||
<el-button type="primary" @click="logoutClick">退出登录</el-button>
|
<el-button type="primary" @click="logoutClick">退出登录</el-button>
|
||||||
@@ -17,6 +25,7 @@ import { useAppStore } from '@/store/app.ts'
|
|||||||
import { useUserStore } from '@/store/user.ts'
|
import { useUserStore } from '@/store/user.ts'
|
||||||
import { useAuthStore } from '@/store/auth.ts'
|
import { useAuthStore } from '@/store/auth.ts'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
import { getAssetsImageFile } from '@/utils'
|
||||||
|
|
||||||
const appStore = useAppStore()
|
const appStore = useAppStore()
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
|
|||||||
Reference in New Issue
Block a user