yijianbao_user_uniapp/pages_im/pages/conversation/previewVideo/index.vue

<template>
  <view class="preview_video_container">
    <video :poster="snapshotUrl" autoplay class="video_player" :src="previewVideoUrl"></video>
    <view class="play_action_bar">
      <u-icon @click="back" size="24" color="#fff" name="close-circle"></u-icon>
      <u-icon v-if="!downloaded" @click="download" size="24" color="#fff" name="download"></u-icon>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  components: {},
  data() {
    return {
      clientMsgID: "",
      previewVideoUrl: "",
      snapshotUrl: "",
    };
  },
  computed: {
    ...mapGetters([
      "storeCacheMap"
    ]),
    downloaded(){
      return !this.previewVideoUrl.startsWith("http")
    },
    currentFileIsDownloading() {
      return this.storeCacheMap[this.clientMsgID]?.state === "pending";
    },
  },
  watch: {
    storeCacheMap: {
      async handler(newVal) {
        const path = newVal[this.clientMsgID]?.path;
        if (path){
          this.previewVideoUrl = path
        }
      },
    },
  },
  onLoad(options) {
    this.previewVideoUrl = options.previewVideoUrl;
    this.snapshotUrl = options.snapshotUrl || ''
    this.clientMsgID = options.clientMsgID || ''
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    download() {
      if (this.currentFileIsDownloading) return;
      uni.showToast({
        title: '下载中',
        icon: 'none'
      })
      this.$store.dispatch("user/addCacheTask", {
        key: this.clientMsgID,
        url: this.previewVideoUrl,
      });
    },
  },
};
</script>

<style lang="scss">
.preview_video_container {
  @include colBox(false);
  height: 100vh;
  background-color: #000;

  .video_player {
    flex: 1;
    // height: 80%;
    width: 100%;
    // margin-top: 50%;
  }

  .play_action_bar {
    padding: 24rpx 48rpx 48rpx;
    // margin-top: 24rpx;
    display: flex;
    justify-content: space-between;
  }
}
</style>