feat: 更新视频播放功能

src/components/RecordPopup.vue

@@ -20,7 +20,8 @@
           border
       >
         <wd-form-item title="内容">
-          <wd-textarea v-model="recordStore.recordForm.content" :maxlength="200" clearable show-word-limit placeholder="请输入内容" />
+          <wd-textarea v-model="recordStore.recordForm.content" :maxlength="200"
+                       auto-height clearable show-word-limit placeholder="请输入内容" />
         </wd-form-item>
 
         <wd-form-item title="图片">

src/pages/index/index.vue

@@ -33,8 +33,9 @@
             >
               <wd-img
                   :src="`${appStore.baseUrl}/${url}`"
+                  height="35vh"
                   width="100%"
-                  mode="widthFix"
+                  mode="aspectFill"
                   lazy-load
                   :radius="8"
               />
@@ -46,11 +47,16 @@
                 v-for="(url, i) in item.video_list"
                 :key="i"
                 class="relative w-full overflow-hidden rounded-lg bg-black"
-                @click="playVideo(url)"
             >
-              <view class="w-full h-[360rpx] flex items-center justify-center">
+              <video
-                <wd-icon name="play-circle-fill" size="40px" color="#fff" />
+                  :id="`video-${item.id}-${i}`"
-              </view>
+                  :src="`${appStore.baseUrl}/${url}`"
+                  :autoplay="false"
+                  :loop="false"
+                  :show-mute-btn="true"
+                  :enable-play-gesture="true"
+                  :object-fit="'cover'"
+              />
             </view>
           </view>
         </view>
@@ -97,7 +103,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useAppStore } from "@/store/app";
 import { useRecordStore } from "@/store/record";
 import { useUserStore } from "@/store/user";
@@ -163,6 +169,8 @@ const paging = ref(null)
 // v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
 const dataList = ref([])
 
+watch(() => recordStore.isRefresh, () => paging.value.reload())
+
 function queryList(pageNo, pageSize) {
   recordStore.getRecordListByPageApi(pageNo, pageSize).then(res => {
     paging.value.complete(res.records);

src/store/record.ts

@@ -14,6 +14,7 @@ export const useRecordStore = defineStore('record', {
     } as IRecordForm,
     currentRecordId: 0,
     showRecordPopup: false,
+    isRefresh: false,
     recordApiType: 'ADD' as 'ADD' | 'UPDATE' | 'DELETE',
     imageFileList: [] as UploadFile[],
     videoFileList: [] as UploadFile[],
@@ -28,7 +29,7 @@ export const useRecordStore = defineStore('record', {
         await this.deleteRecordApi()
       }
 
-      await this.refreshRecord()
+      this.isRefresh = !this.isRefresh
     },
     async refreshRecord() {
       this.recordList = await this.getRecordListApi()