feat: zeng增加删除记录功能
This commit is contained in:
@@ -27,7 +27,6 @@
|
||||
<wd-upload v-model:file-list="recordStore.imageFileList" accept="image" multiple
|
||||
:limit="9" image-mode="aspectFill"
|
||||
:action="action" :success-status="[200, 201]"
|
||||
:before-choose="beforeImageChoose"
|
||||
:before-upload="beforeImageUpload"
|
||||
:before-remove="beforeImageRemove"
|
||||
@success="handleImageSuccess"
|
||||
@@ -38,7 +37,6 @@
|
||||
<wd-upload v-model:file-list="recordStore.videoFileList" accept="video" multiple
|
||||
:limit="3"
|
||||
:action="action" :success-status="[200, 201]"
|
||||
:before-choose="beforeVideoChoose"
|
||||
:before-upload="beforeVideoUpload"
|
||||
:before-remove="beforeVideoRemove"
|
||||
@success="handleVideoSuccess"></wd-upload>
|
||||
@@ -49,6 +47,9 @@
|
||||
<wd-button type="info" @click="cancelClick">
|
||||
取消
|
||||
</wd-button>
|
||||
<wd-button v-if="recordStore.recordApiType === 'UPDATE'" type="danger" @click="deleteClick">
|
||||
删除
|
||||
</wd-button>
|
||||
<wd-button type="primary" @click="confirmClick">
|
||||
保存
|
||||
</wd-button>
|
||||
@@ -58,16 +59,16 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useAppStore } from "@/store/app";
|
||||
import { useRecordStore } from "@/store/record";
|
||||
import type { UploadFile, UploadBeforeUploadOption, UploadSuccessEvent, UploadRemoveEvent } from '@wot-ui/ui/components/wd-upload/types'
|
||||
import type { UploadBeforeUploadOption, UploadSuccessEvent, UploadRemoveEvent } from '@wot-ui/ui/components/wd-upload/types'
|
||||
import { generateUniqueId } from "@/utils";
|
||||
|
||||
const appStore = useAppStore()
|
||||
const recordStore = useRecordStore()
|
||||
|
||||
const action = ref<string>('')
|
||||
const action = ref(`${appStore.baseUrl}/family-api/file/upload`)
|
||||
|
||||
function handeClosePopup() {
|
||||
setTimeout(() => {
|
||||
@@ -75,11 +76,6 @@ function handeClosePopup() {
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function beforeImageChoose() {
|
||||
action.value = `${appStore.baseUrl}/family-api/file/upload?md5=${generateUniqueId()}`
|
||||
return true
|
||||
}
|
||||
|
||||
function beforeImageUpload(options: UploadBeforeUploadOption) {
|
||||
const file = options.files[0]
|
||||
const maxSize = 10 * 1024 * 1024
|
||||
@@ -125,11 +121,11 @@ function beforeVideoChoose() {
|
||||
|
||||
function beforeVideoUpload(options: UploadBeforeUploadOption) {
|
||||
const file = options.files[0]
|
||||
const maxSize = 200 * 1024 * 1024
|
||||
const maxSize = 500 * 1024 * 1024
|
||||
|
||||
if (file.size > maxSize) {
|
||||
uni.showToast({
|
||||
title: '文件大小不能超过 200MB',
|
||||
title: '文件大小不能超过 500MB',
|
||||
icon: 'none',
|
||||
duration: 2500
|
||||
})
|
||||
@@ -160,6 +156,21 @@ function cancelClick() {
|
||||
handeClosePopup()
|
||||
}
|
||||
|
||||
function deleteClick() {
|
||||
wx.showModal({
|
||||
title: '提示',
|
||||
content: '确定删除这条记录吗？',
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
recordStore.recordApiType = 'DELETE'
|
||||
await recordStore.handleRecordApi()
|
||||
recordStore.showRecordPopup = false
|
||||
handeClosePopup()
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function confirmClick() {
|
||||
if (recordStore.recordForm.content) {
|
||||
await recordStore.handleRecordApi()
|
||||
|
||||
@@ -17,7 +17,6 @@
|
||||
<wd-upload v-model:file-list="userStore.imageFileList" accept="image"
|
||||
:limit="1" image-mode="aspectFill"
|
||||
:action="action" :success-status="[200, 201]"
|
||||
:before-choose="beforeImageChoose"
|
||||
:before-upload="beforeImageUpload"
|
||||
:before-remove="beforeImageRemove"
|
||||
@success="handleImageSuccess"
|
||||
@@ -40,7 +39,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { useAppStore } from "@/store/app";
|
||||
import { generateUniqueId } from "@/utils";
|
||||
import type {
|
||||
UploadBeforeUploadOption,
|
||||
UploadRemoveEvent,
|
||||
@@ -51,12 +49,7 @@ import { ref } from "vue";
|
||||
const userStore = useUserStore()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const action = ref<string>('')
|
||||
|
||||
function beforeImageChoose() {
|
||||
action.value = `${appStore.baseUrl}/family-api/file/upload?md5=${generateUniqueId()}`
|
||||
return true
|
||||
}
|
||||
const action = ref(`${appStore.baseUrl}/family-api/file/upload`)
|
||||
|
||||
function beforeImageUpload(options: UploadBeforeUploadOption) {
|
||||
const file = options.files[0]
|
||||
|
||||
@@ -7,6 +7,10 @@
|
||||
<text class="truncate text-lg text-white font-semibold">{{ greeting }}</text>
|
||||
<text class="mt-0.5 text-xs text-white/70">{{ today }} · 记录每一个瞬间</text>
|
||||
</view>
|
||||
|
||||
<wd-button type="info" size="mini" @click="recordStore.refreshRecord()">
|
||||
刷新
|
||||
</wd-button>
|
||||
</view>
|
||||
|
||||
<wd-card v-for="item in recordStore.recordList" :key="item.id">
|
||||
@@ -22,14 +26,16 @@
|
||||
<view class="px-3 pt-2 pb-3">
|
||||
<wd-text type="primary" :text="item.content"/>
|
||||
|
||||
<view v-if="item.image_list.length" class="grid grid-cols-3 gap-2 mt-2">
|
||||
<view v-if="item.image_list.length" :class="`grid gap-2 mt-2 ${gridCols(item.image_list.length)}`">
|
||||
<view
|
||||
v-for="(url, i) in item.image_list.slice(0, 9)"
|
||||
v-for="(url, i) in item.image_list"
|
||||
:key="i"
|
||||
class="relative w-full overflow-hidden rounded-lg aspect-square"
|
||||
@click="previewImages(item.image_list, i)"
|
||||
>
|
||||
<wd-img :src="`${appStore.baseUrl}/${url}`" width="100%" height="100%" radius="8" />
|
||||
<wd-img :src="`${appStore.baseUrl}/${url}`"
|
||||
width="100%" height="100%"
|
||||
mode="aspectFit" lazy-load :radius="8"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -41,7 +47,7 @@
|
||||
@click="playVideo(url)"
|
||||
>
|
||||
<view class="w-full h-[360rpx] flex items-center justify-center">
|
||||
<wd-icon name="play-circle-filled" size="40px" color="#fff" />
|
||||
<wd-icon name="play-circle-fill" size="40px" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -144,6 +150,13 @@ function toggleLike(item: IRecord) {
|
||||
|
||||
}
|
||||
|
||||
function gridCols(count: number): string {
|
||||
if (count === 1) return 'grid-cols-1'
|
||||
if (count === 2) return 'grid-cols-2'
|
||||
if (count === 4) return 'grid-cols-2'
|
||||
return 'grid-cols-3'
|
||||
}
|
||||
|
||||
function previewImages(urls: string[], index: number) {
|
||||
const fullUrls = urls.map(url => `${appStore.baseUrl}/${url}`)
|
||||
uni.previewImage({ urls: fullUrls, current: fullUrls[index] })
|
||||
|
||||
@@ -14,7 +14,7 @@ export const useRecordStore = defineStore('record', {
|
||||
} as IRecordForm,
|
||||
currentRecordId: 0,
|
||||
showRecordPopup: false,
|
||||
recordApiType: 'ADD' as 'ADD' | 'UPDATE',
|
||||
recordApiType: 'ADD' as 'ADD' | 'UPDATE' | 'DELETE',
|
||||
imageFileList: [] as UploadFile[],
|
||||
videoFileList: [] as UploadFile[],
|
||||
}),
|
||||
@@ -24,6 +24,8 @@ export const useRecordStore = defineStore('record', {
|
||||
await this.addRecordApi()
|
||||
} else if (this.recordApiType === 'UPDATE') {
|
||||
await this.updateRecordApi()
|
||||
} else if (this.recordApiType === 'DELETE') {
|
||||
await this.deleteRecordApi()
|
||||
}
|
||||
|
||||
await this.refreshRecord()
|
||||
@@ -95,6 +97,23 @@ export const useRecordStore = defineStore('record', {
|
||||
fail: (err) => reject(err),
|
||||
})
|
||||
})
|
||||
},
|
||||
async deleteRecordApi() {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.request({
|
||||
url: `${this.baseUrl}/family-api/records/${this.currentRecordId}`,
|
||||
method: 'DELETE',
|
||||
header: { 'Content-Type': 'application/json' },
|
||||
success: (res) => {
|
||||
if (res.statusCode >= 200 && res.statusCode < 300) {
|
||||
resolve(res.data)
|
||||
} else {
|
||||
reject({ status: res.statusCode, data: res.data })
|
||||
}
|
||||
},
|
||||
fail: (err) => reject(err),
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user