designer-hub/packages/app/src/pages/home/components/home-banner.vue

<script setup lang="ts">
import ImageEvo from '@/components/image-evo.vue'
import { unix } from 'dayjs'
import { useRouter } from '../../../core/utils/router'
const router = useRouter()

const props = withDefaults(
  defineProps<{
    id: string | number
    url: string
    cover: string
    detailsType: number | string | null | undefined
    item: object | any
  }>(),
  {},
)
const emits = defineEmits<{ play: [id: string | number]; ended: [id: string | number] }>()
const instance = getCurrentInstance()
const playing = ref(false)
const duration = ref(0)
const durationText = computed(() => unix(duration.value).format('mm:ss'))
const videoContext = ref<UniNamespace.VideoContext>()
const handleClick = () => {
  if (props?.item?.url && props.item?.url?.startsWith('http')) {
    router.push(`/pages-sub/common/webview/index?url=${props.item.url}`)
  }
  if (props.detailsType === '1' && !props?.item?.url) {
    router.push(
      `/pages-sub/home/content/index?type=home-banner&id=${props.id}&data=${encodeURIComponent(JSON.stringify(props.item))}`,
    )
  }
}
const handlePlay = async () => {
  videoContext.value?.play()
  playing.value = true
  emits('play', props.id)
}
const handleLoadedMetaData = ({ detail }) => {
  duration.value = detail.duration
}
const handleEnded = () => {
  playing.value = false
  videoContext.value?.pause()
  emits('ended', props.id)
}
const handlePause = () => {
  playing.value = false
}
onMounted(async () => {
  videoContext.value = uni.createVideoContext(`video-${props.id}`, instance)
})
defineExpose({
  videoContext,
})
</script>
<template>
  <div class="w-full h-full relative" v-if="!detailsType && item.indexPromotionalVideoImage">
    <div v-show="!playing" class="absolute left-0 top-0 w-full h-full bg-black">
      <ImageEvo :src="cover"></ImageEvo>
    </div>
    <div class="w-full h-full box-border pb-6" v-show="playing">
      <video
        class="w-full h-full"
        :id="`video-${id}`"
        :src="url"
        :controls="'contimg'"
        :show-center-play-btn="false"
        :enable-progress-gesture="false"
        :loop="false"
        @pause="handlePause"
        @ended="handleEnded"
        @loadedmetadata="handleLoadedMetaData"
      ></video>
    </div>
    <div
      v-if="!playing"
      class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
    >
      <view class="mx-7">
        <wd-button
          plain
          custom-class="bg-transparent! text-white! w-20.5! min-w-20! h-8.25! border! border-solid! border-white!"
          @click="handlePlay()"
        >
          <div class="flex items-center">
            <wd-icon name="play" size="22px"></wd-icon>
            <div class="text-white text-[13px] font-['Gotham'] leading-[10.18px]">
              {{ durationText }}
            </div>
          </div>
        </wd-button>
      </view>
    </div>
  </div>
  <div class="w-full h-full relative" v-else @click="handleClick">
    <ImageEvo :src="cover"></ImageEvo>
  </div>
</template>