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

<template>
  <view>
    <ali-oss-uploader v-if="!currentValue" :max-count="1" :max-size="maxSize" accept="video/*" :userId="userId"
      :type="ossType" width="100%" @input="onInput" @change="onChange" />
    <view v-else class="video-wrapper">
      <video :src="currentValue" class="preview-video" controls />
      <view class="delete-btn" @click="deleteVideo">
        <text class="delete-icon">&times;</text>
      </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, default: '' },
    maxSize: { type: Number, default: 100 }
  },
  data: function () {
    return {
      currentValue: ''
    };
  },
  computed: {
    userId: function () {
      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) {
        this.currentValue = val || '';
      },
      immediate: true
    }
  },
  methods: {
    onInput: function (val) {
      this.currentValue = val;
      this.$emit('input', val);
    },
    onChange: function (val) {
      this.$emit('change', val);
    },
    deleteVideo: function () {
      this.currentValue = '';
      this.$emit('input', '');
    }
  }
};
</script>

<style scoped>
.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>