mrr.sj.front/components/dynamic-form/FormItemVideo.vue

<template>
  <view>
    <view v-if="maxCount > 1" class="video-list">
      <view v-for="(item, index) in currentList" :key="index" class="video-wrapper">
        <image :src="getVideoPoster(item)" class="preview-video" mode="aspectFill" @click="previewVideo(item)" />
        <view class="play-mask" @click="previewVideo(item)">
          <view class="play-circle">
            <view class="play-icon"></view>
          </view>
        </view>
        <image
          class="delete-btn"
          src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/6ab3fc63-3bad-403d-bbfc-9609a93c048a.png"
          mode="aspectFit"
          @click="deleteVideo(index)"
        ></image>
      </view>
      <ali-oss-uploader v-if="currentList.length < maxCount"
        :max-count="maxCount - currentList.length"
        :max-size="maxSize" accept="video/*" :userId="uploadUserId" :type="ossType" :kind="2" width="200rpx"
        :show-preview="false"
        @input="onMultiInput" @change="onChange" />
    </view>
    <view v-else>
      <ali-oss-uploader v-if="!currentValue" :max-count="1" :max-size="maxSize" accept="video/*"
        :userId="uploadUserId" :type="ossType" :kind="2" width="100%" :file-string="currentValue" @input="onInput"
        @change="onChange" @success="onInput" @delete="deleteSingleVideo" />
      <view v-else class="video-wrapper">
        <image :src="getVideoPoster(currentValue)" class="preview-video" mode="aspectFill" @click="previewVideo(currentValue)" />
        <view class="play-mask" @click="previewVideo(currentValue)">
          <view class="play-circle">
            <view class="play-icon"></view>
          </view>
        </view>
        <image
          class="delete-btn"
          src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/6ab3fc63-3bad-403d-bbfc-9609a93c048a.png"
          mode="aspectFit"
          @click="deleteSingleVideo"
        ></image>
      </view>
    </view>
    <view v-if="showPlayer" class="player-mask" @click="closePlayer">
      <view class="player-box" @click.stop>
        <video :src="playingVideo" class="player-video" controls autoplay show-fullscreen-btn />
        <view class="player-close" @click="closePlayer">
          <text class="player-close-text">&times;</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import AliOssUploader from '../ali-oss-uploader/ali-oss-uploader.vue'

export default {
  name: 'FormItemVideo',
  components: { AliOssUploader },
  props: {
    value: { type: [String, Array], default: '' },
    maxSize: { type: Number, default: 100 },
    maxCount: { type: Number, default: 1 },
    userId: { type: [Number, String], default: null }
  },
  data: function () {
    return {
      currentValue: '',
      currentList: [],
      showPlayer: false,
      playingVideo: ''
    };
  },
  computed: {
    uploadUserId: function () {
      if (this.userId) return this.userId;
      return this.$store && this.$store.state && this.$store.state.sjInfo
        ? this.$store.state.sjInfo.id : null;
    },
    ossType: function () {
      var artisanType = getApp().globalData ? getApp().globalData.artisanType : 0;
      return (artisanType || 0) + 1;
    }
  },
  watch: {
    value: {
      handler: function (val) {
        if (this.maxCount > 1) {
          if (Array.isArray(val)) {
            this.currentList = val.filter(function (v) { return !!v; });
          } else if (val) {
            this.currentList = [val];
          } else {
            this.currentList = [];
          }
        } else {
          this.currentValue = Array.isArray(val) ? (val[0] || '') : (val || '');
        }
      },
      immediate: true
    }
  },
  methods: {
    onInput: function (val) {
      this.currentValue = val;
      this.$emit('input', val);
    },
    onMultiInput: function (val) {
      var arr = Array.isArray(val) ? val : [val];
      var existing = this.currentList.filter(function (item) {
        return arr.indexOf(item) === -1;
      });
      var list = existing.concat(arr).filter(function (item, index, self) {
        return item && self.indexOf(item) === index;
      }).slice(0, this.maxCount);
      this.currentList = list;
      this.$emit('input', list);
    },
    onChange: function (val) {
      this.$emit('change', val);
    },
    getVideoPoster: function (url) {
      if (!url) return '';
      if (String(url).indexOf('x-oss-process=') > -1) return url;
      var connector = String(url).indexOf('?') > -1 ? '&' : '?';
      return url + connector + 'x-oss-process=video/snapshot,t_2000,f_jpg,m_fast';
    },
    previewVideo: function (url) {
      if (!url) return;
      this.playingVideo = url;
      this.showPlayer = true;
    },
    closePlayer: function () {
      this.showPlayer = false;
      this.playingVideo = '';
    },
    deleteSingleVideo: function () {
      this.currentValue = '';
      this.$emit('input', '');
    },
    deleteVideo: function (index) {
      this.currentList.splice(index, 1);
      this.$emit('input', this.currentList);
    }
  }
};
</script>

<style scoped>
.video-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.video-wrapper {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  overflow: visible;
}

.preview-video {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
  background-color: #f5f5f5;
}

.play-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 200rpx;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 8rpx;
  z-index: 2;
}

.play-circle {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-icon {
  width: 0;
  height: 0;
  border-top: 14rpx solid transparent;
  border-bottom: 14rpx solid transparent;
  border-left: 22rpx solid #ffffff;
  margin-left: 6rpx;
}

.delete-btn {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 42rpx;
  height: 42rpx;
  z-index: 5;
}

.player-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.82);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32rpx;
  box-sizing: border-box;
}

.player-box {
  position: relative;
  width: 100%;
}

.player-video {
  width: 100%;
  height: 420rpx;
  background-color: #000000;
}

.player-close {
  position: absolute;
  right: -12rpx;
  top: -58rpx;
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-close-text {
  color: #ffffff;
  font-size: 42rpx;
  line-height: 48rpx;
}
</style>