From 8c4c107127a5dd6beb44a536ce30682aa6355391 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8C=83=E9=B9=8F?= <fanpeng@star-lock.cn>
Date: Wed, 9 Apr 2025 18:05:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E4=BA=91=E5=AD=98?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3UI+=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/p2p/VideoList.vue   | 219 ++++++++++++++++++++++++++++++++++++++
 pages/p2p/videoDetail.vue |  38 +++++++
 pages/p2p/videoEdit.vue   | 145 +++++++++++++++++++++++++
 pages/p2p/videoLog.vue    |  51 +++++++++
 4 files changed, 453 insertions(+)
 create mode 100644 pages/p2p/VideoList.vue
 create mode 100644 pages/p2p/videoDetail.vue
 create mode 100644 pages/p2p/videoEdit.vue
 create mode 100644 pages/p2p/videoLog.vue

diff --git a/pages/p2p/VideoList.vue b/pages/p2p/VideoList.vue
new file mode 100644
index 0000000..e352ded
--- /dev/null
+++ b/pages/p2p/VideoList.vue
@@ -0,0 +1,219 @@
+<template>
+  <view>
+    <view v-if="list.length === 0 && requestFinished">
+      <image
+        class="empty-list"
+        src="https://oss-lock.xhjcn.ltd/mp/background_empty_list.png"
+        mode="aspectFill"
+      ></image>
+      <view class="empty-list-text">暂无数据</view>
+    </view>
+    <view v-else>
+      <view v-for="(item, index) in list" :key="index" class="mt-4">
+        <view>{{ item.date }}</view>
+        <view class="mt-2 flex flex-wrap gap-[19rpx]">
+          <view v-for="video in item.recordList" :key="video.recordId" @click="handleVideo(video)">
+            <image :src="video.imagesUrl" class="w-224 h-224 rounded-xl relative" mode="aspectFill">
+              <view v-if="type === 'select'" class="absolute inset-0 bg-black bg-opacity-30">
+                <image
+                  v-if="selectList.includes(video)"
+                  class="w-40 h-40 top-16 right-16 absolute"
+                  src="https://oss-lock.xhjcn.ltd/mp/icon_select.png"
+                ></image>
+                <image
+                  v-else
+                  class="w-40 h-40 top-16 right-16 absolute"
+                  src="https://oss-lock.xhjcn.ltd/mp/icon_not_select.png"
+                ></image>
+              </view>
+              <view
+                v-else
+                class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"
+              >
+                <up-icon name="play-right-fill" color="#ffffff" size="40"></up-icon>
+              </view>
+            </image>
+            <view class="text-xs">{{ timeFormat(video.operateDate, 'yyyy-mm-dd hh:MM') }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { timeFormat } from 'uview-plus'
+  import { onMounted, ref } from 'vue'
+  import { useBasicStore } from '@/stores/basic'
+  import { useBluetoothStore } from '@/stores/bluetooth'
+  import { getVideoList } from '@/api/sdk'
+
+  const $basic = useBasicStore()
+  const $bluetooth = useBluetoothStore()
+
+  const props = defineProps({
+    type: {
+      type: String,
+      default: 'list'
+    }
+  })
+
+  const emit = defineEmits(['change'])
+
+  const requestFinished = ref(false)
+
+  const list = ref([])
+  const selectList = ref([])
+
+  onMounted(async () => {
+    await getList()
+    requestFinished.value = true
+  })
+
+  const getList = async () => {
+    const res = await getVideoList({
+      lockId: $bluetooth.currentLockInfo.lockId
+    })
+    if (res.code === 0) {
+      // list.value = res.data
+
+      list.value = [
+        {
+          date: '2025-04-08',
+          recordList: [
+            {
+              recordId: 1,
+              imagesUrl:
+                'https://q0.itc.cn/q_70/images03/20250331/84b2646fc92d4ea0b12f1b134652c807.jpeg',
+              videoUrl:
+                'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
+              operateDate: '1745423939000'
+            }
+          ]
+        },
+        {
+          date: '2025-04-07',
+          recordList: [
+            {
+              recordId: 2,
+              imagesUrl:
+                'https://q0.itc.cn/q_70/images03/20250331/84b2646fc92d4ea0b12f1b134652c807.jpeg',
+              videoUrl: 'http://vjs.zencdn.net/v/oceans.mp4',
+              operateDate: '1745423939000'
+            },
+            {
+              recordId: 3,
+              imagesUrl:
+                'https://q0.itc.cn/q_70/images03/20250331/84b2646fc92d4ea0b12f1b134652c807.jpeg',
+              videoUrl: 'http://www.w3school.com.cn/example/html5/mov_bbb.mp4',
+              operateDate: '1745423939000'
+            }
+          ]
+        },
+        {
+          date: '2025-04-06',
+          recordList: [
+            {
+              recordId: 4,
+              imagesUrl:
+                'https://q0.itc.cn/q_70/images03/20250331/84b2646fc92d4ea0b12f1b134652c807.jpeg',
+              videoUrl: 'https://www.w3schools.com/html/movie.mp4',
+              operateDate: '1745423939000'
+            },
+            {
+              recordId: 5,
+              imagesUrl:
+                'https://q0.itc.cn/q_70/images03/20250331/84b2646fc92d4ea0b12f1b134652c807.jpeg',
+              videoUrl: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
+              operateDate: '1745423939000'
+            },
+            {
+              recordId: 6,
+              imagesUrl:
+                'https://q0.itc.cn/q_70/images03/20250331/84b2646fc92d4ea0b12f1b134652c807.jpeg',
+              videoUrl:
+                'https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209105011F0zPoYzHry.mp4',
+              operateDate: '1745423939000'
+            }
+          ]
+        },
+        {
+          date: '2025-04-05',
+          recordList: [
+            {
+              recordId: 7,
+              imagesUrl:
+                'https://q0.itc.cn/q_70/images03/20250331/84b2646fc92d4ea0b12f1b134652c807.jpeg',
+              videoUrl: 'http://vjs.zencdn.net/v/oceans.mp4',
+              operateDate: '1745423939000'
+            }
+          ]
+        }
+      ]
+    } else {
+      uni.showToast({
+        title: res.message,
+        icon: 'none'
+      })
+    }
+  }
+
+  const handleVideo = item => {
+    if (props.type === 'select') {
+      const isExist = selectList.value.find(data => data.recordId === item.recordId)
+      if (isExist) {
+        selectList.value = selectList.value.filter(data => data.recordId !== item.recordId)
+      } else {
+        selectList.value.push(item)
+      }
+      emit('change', selectList.value)
+    } else {
+      $basic.routeJump({
+        type: props.type === 'list' ? 'navigateTo' : 'redirectTo',
+        name: 'videoDetail',
+        params: {
+          video: JSON.stringify(item)
+        }
+      })
+    }
+  }
+
+  const selectAll = isSelectAll => {
+    if (props.type === 'select') {
+      if (isSelectAll) {
+        list.value.forEach(item => {
+          item.recordList.forEach(video => {
+            selectList.value.push(video)
+          })
+        })
+      } else {
+        selectList.value = []
+      }
+      emit('change', selectList.value)
+    }
+  }
+
+  const refresh = () => {
+    getList()
+  }
+
+  defineExpose({
+    refresh,
+    selectAll
+  })
+</script>
+
+<style lang="scss" scoped>
+  .empty-list {
+    width: 150rpx;
+    height: 150rpx;
+    margin: 300rpx auto 20rpx 50%;
+    transform: translateX(-50%);
+  }
+
+  .empty-list-text {
+    font-size: 32rpx;
+    color: #999999;
+    text-align: center;
+  }
+</style>
diff --git a/pages/p2p/videoDetail.vue b/pages/p2p/videoDetail.vue
new file mode 100644
index 0000000..22ed03f
--- /dev/null
+++ b/pages/p2p/videoDetail.vue
@@ -0,0 +1,38 @@
+<template>
+  <view>
+    <view>
+      <view class="relative" v-if="video?.videoUrl">
+        <video
+          :src="video.videoUrl"
+          play-btn-position="center"
+          class="w-full h-650"
+          object-fit="contain"
+          :poster="video.imagesUrl"
+          :enable-play-gesture="true"
+        ></video>
+        <view
+          class="absolute top-3 left-3 text-white bg-black bg-opacity-50 px-2 py-1 rounded z-10"
+        >
+          {{ timeFormat(video.operateDate, 'yyyy-mm-dd hh:MM') }}
+        </view>
+      </view>
+    </view>
+    <view class="mx-2.5 pb-10">
+      <VideoList type="detail" />
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { onLoad } from '@dcloudio/uni-app'
+  import { ref } from 'vue'
+  import { timeFormat } from 'uview-plus'
+  import VideoList from './VideoList.vue'
+
+  const video = ref(null)
+
+  onLoad(options => {
+    video.value = JSON.parse(options.video)
+    console.log(video.value)
+  })
+</script>
diff --git a/pages/p2p/videoEdit.vue b/pages/p2p/videoEdit.vue
new file mode 100644
index 0000000..3c255eb
--- /dev/null
+++ b/pages/p2p/videoEdit.vue
@@ -0,0 +1,145 @@
+<template>
+  <view>
+    <view class="flex justify-between items-center px-2.5 py-2">
+      <view>已选{{ selectList.length }}项</view>
+      <view @click="selectAll">{{ isSelectAll ? '取消全选' : '全选' }}</view>
+    </view>
+    <view class="mx-2.5 pb-25">
+      <VideoList ref="videoListRef" type="select" @change="handleChange" />
+    </view>
+    <view class="fixed bottom-0 flex justify-center w-full w-300 mx-auto bg-white">
+      <view class="flex justify-between w-200 mr-4 h-160">
+        <view @click="handleDownload">
+          <view class="flex flex-col items-center">
+            <image
+              src="https://oss-lock.xhjcn.ltd/mp/icon_video_download.png"
+              class="w-50 h-50"
+            ></image>
+            <view class="mt-2">下载</view>
+          </view>
+        </view>
+        <view @click="handleDelete">
+          <view class="flex flex-col items-center">
+            <image
+              src="https://oss-lock.xhjcn.ltd/mp/icon_video_delete.png"
+              class="w-50 h-50"
+            ></image>
+            <view class="mt-2">删除</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { getCurrentInstance, ref } from 'vue'
+  import VideoList from './VideoList.vue'
+  import { deleteVideo } from '@/api/sdk'
+
+  const instance = getCurrentInstance().proxy
+  const eventChannel = instance.getOpenerEventChannel()
+
+  const videoListRef = ref(null)
+
+  const isSelectAll = ref(false)
+
+  const selectList = ref([])
+
+  const pending = ref(false)
+
+  const handleChange = list => {
+    selectList.value = list
+  }
+
+  const selectAll = () => {
+    isSelectAll.value = !isSelectAll.value
+    videoListRef.value.selectAll(isSelectAll.value)
+  }
+
+  const handleDownload = () => {
+    console.log('下载')
+    if (selectList.value.length === 0) {
+      uni.showToast({
+        title: '请选择要下载的视频',
+        icon: 'none'
+      })
+      return
+    }
+    if (selectList.value.length > 1) {
+      uni.showToast({
+        title: '视频暂不支持批量下载',
+        icon: 'none'
+      })
+      return
+    }
+    uni.showLoading({
+      title: '下载中'
+    })
+    pending.value = true
+    const url = selectList.value[0].videoUrl
+    uni.downloadFile({
+      url,
+      success: res => {
+        uni.saveVideoToPhotosAlbum({
+          filePath: res.tempFilePath,
+          success: () => {
+            uni.hideLoading()
+            pending.value = false
+            uni.showToast({
+              title: '下载成功',
+              icon: 'none'
+            })
+          },
+          fail: () => {
+            uni.hideLoading()
+            pending.value = false
+            uni.showToast({
+              title: '下载失败',
+              icon: 'none'
+            })
+          }
+        })
+      },
+      fail: () => {
+        uni.hideLoading()
+        pending.value = false
+        uni.showToast({
+          title: '下载失败',
+          icon: 'none'
+        })
+      }
+    })
+  }
+
+  const handleDelete = async () => {
+    if (selectList.value.length === 0) {
+      uni.showToast({
+        title: '请选择要删除的视频',
+        icon: 'none'
+      })
+      return
+    }
+    uni.showLoading({
+      title: '删除中'
+    })
+    pending.value = true
+    const idList = selectList.value.map(item => item.recordId)
+    const { code, message } = await deleteVideo(idList)
+    uni.hideLoading()
+    pending.value = false
+    if (code === 0) {
+      videoListRef.value.refresh()
+      eventChannel.emit('refresh')
+      uni.showToast({
+        title: '删除成功',
+        icon: 'success'
+      })
+    } else {
+      uni.showToast({
+        title: message,
+        icon: 'none'
+      })
+    }
+  }
+</script>
diff --git a/pages/p2p/videoLog.vue b/pages/p2p/videoLog.vue
new file mode 100644
index 0000000..578a84d
--- /dev/null
+++ b/pages/p2p/videoLog.vue
@@ -0,0 +1,51 @@
+<template>
+  <view>
+    <view class="bg-#f5f4f8 flex items-center mx-2.5 my-4 p-4 rounded-xl shadow-sm">
+      <view>
+        <view>3天滚动储存</view>
+        <view class="text-#999999 mt-2 text-sm">
+          {{ appName }}已为本设备免费提供3天滚动视频储存服务
+        </view>
+      </view>
+      <view class="flex-none whitespace-nowrap mx-1.5">去升级</view>
+      <up-icon name="arrow-right" />
+    </view>
+    <view class="mx-2.5 pb-10">
+      <view class="flex items-center justify-between">
+        <view>全部视频</view>
+        <image
+          src="https://oss-lock.xhjcn.ltd/mp/icon_edit.png"
+          @click="handleEdit"
+          class="w-48 h-48"
+        />
+      </view>
+      <VideoList ref="videoListRef" />
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue'
+  import env from '@/config/env'
+  import VideoList from './VideoList.vue'
+  import { useBasicStore } from '@/stores/basic'
+
+  const $basic = useBasicStore()
+
+  const appName = ref('')
+  const videoListRef = ref(null)
+  onMounted(async () => {
+    appName.value = await env[await getApp().globalData.getEnvConfig()].appName
+  })
+
+  const handleEdit = () => {
+    $basic.routeJump({
+      name: 'videoEdit',
+      events: {
+        refresh: () => {
+          videoListRef.value.refresh()
+        }
+      }
+    })
+  }
+</script>