feat: zeng增加删除记录功能

src/components/RecordPopup.vue

@@ -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()

src/components/UserPopup.vue

@@ -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>('')
+const action = ref(`${appStore.baseUrl}/family-api/file/upload`)
-
-function beforeImageChoose() {
-  action.value = `${appStore.baseUrl}/family-api/file/upload?md5=${generateUniqueId()}`
-  return true
-}
 
 function beforeImageUpload(options: UploadBeforeUploadOption) {
   const file = options.files[0]

src/pages/index/index.vue

@@ -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] })

src/store/record.ts

@@ -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),
+        })
+      })
     }
   },
 })