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">
        <video :src="item" class="preview-video" controls />
        <view class="delete-btn" @click="deleteVideo(index)">
          <text class="delete-icon">&times;</text>
        </view>
      </view>
      <ali-oss-uploader v-if="currentList.length < maxCount" :key="currentList.length"
        :max-count="maxCount - currentList.length"
        :max-size="maxSize" accept="video/*" :userId="uploadUserId" :type="ossType" :kind="2" width="200rpx"
        @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">
        <video :src="currentValue" class="preview-video" controls />
        <view class="delete-btn" @click="deleteSingleVideo">
          <text class="delete-icon">&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: []
    };
  },
  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 list = this.currentList.concat(arr).slice(0, this.maxCount);
      this.currentList = list;
      this.$emit('input', list);
    },
    onChange: function (val) {
      this.$emit('change', val);
    },
    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;
}

.preview-video {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
}

.delete-btn {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #ff4d4f;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  z-index: 1;
}

.delete-icon {
  color: #ffffff;
  font-size: 32rpx;
}
</style>