wx-starlock/pages/p2p/VideoList.vue

<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>