zhgdyun/src/views/projectAdmin/fourEngin/components/videoPhotoTwo.vue

<template>
  <!-- 视频宣传 -->
  <div class="videoPhoto">
    <div class="titleTxt">
      <div>
        <el-button type="text" :class="show? '' : 'changeCol'" class="video" @click="toVideo()"></el-button>
        <!-- <el-button type="text" :class="show? 'changeCol' : ''" class="image" @click="toImage()">效果图</el-button> -->
      </div>
      <!-- <i class="el-icon-refresh"></i> -->
    </div>
    <video v-if="!show" :src="$store.state.FILEURL + projectData.videoUrl" class="topInner videos" autoplay controls loop></video>
    <!-- src="@/assets/images/projectImg/videoPic.png" -->

    <!-- 初次上传视频 -->
    <div class="placeholderBox placeholderBox2" v-if="projectData.videoUrl == ''">
      <img src="@/assets/images/noData3.png" alt srcset />
      <p>
        {{ $t('message.videoManage.empty') }},
        <el-upload
          style="display: inline-block"
          class="upload-demo"
          :action="$store.state.UPLOADURL"
          :on-success="(file) => handleSuccess(file, 1)"
          :on-error="(file) => handleError(file, 1)"
          :beforeUpload="(file) => handleBeforeUpload(file, 1)"
          name="files"
          :show-file-list="false"
        >
          <!-- 点我上传 -->
          <span>{{ $t('message.companyDiagram.uploadImg') }}</span>
        </el-upload>
      </p>
    </div>
    <!-- 更换视频 -->
    <el-upload
      v-if="projectData.videoUrl"
      class="changeVideoBox"
      :src="$store.state.FILEURL + projectData.videoUrl"
      :action="$store.state.UPLOADURL"
      :on-success="(file) => handleSuccess(file, 1)"
      :on-error="(file) => handleError(file, 1)"
      :beforeUpload="(file) => handleBeforeUpload(file, 1)"
      name="files"
      :show-file-list="false"
    >
      <span class="changeVideoBtn">{{ $t('message.companyDiagram.changeVideo') }}</span>
    </el-upload>

    <!-- 更换图片 -->
    <div @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false" class="img">
      <el-upload
        v-if="showChangeImg"
        class="changeImg"
        :action="$store.state.UPLOADURL"
        :on-success="(file) => handleSuccessTwo(file, 1)"
        :on-error="(file) => handleError(file, 1)"
        :beforeUpload="(file) => handleBeforeUpload(file, 1)"
        name="files"
        :show-file-list="false"
      >
        <span style="border: 1px solid #ffffff; padding: 5px">{{ $t('message.companyDiagram.changeImg') }}</span>
      </el-upload>
      <img v-if="show" class="imgStyle" :src="this.$store.state.FILEURL + imgUrl" alt />
    </div>
  </div>
</template>

<script>
import { getProjectDetail, editProjectInfo } from '@/assets/js/api/baseInfo.js'
import { queryBySnData, eidtProjectShowConfig } from '@/assets/js/api/projectSummary.js'
export default {
  data() {
    return {
      show: false,
      projectData: {
        videoUrl: ''
      },
      imgUrl: '', //图片
      showChangeImg: false, //显示隐藏更换图片
      fullscreenLoading: null
    }
  },
  props: {
    title: {
      type: String,
      default: 'default title'
    }
  },
  created() {
    this.getDataDateils()
    this.getQueryBySnData()
  },
  methods: {
    toVideo() {
      this.show = false
    },
    // toImage() {
    //   this.show = true
    // },
    //获取项目详情
    getDataDateils() {
      let data = {
        projectSn: this.$store.state.projectSn
      }
      console.log('当前的参数', data)
      getProjectDetail(data).then(res => {
        if (res.code == 200) {
          this.projectData = res.result
          console.log('projectData', this.projectData)
        }
      })
    },
    // 获取图片
    getQueryBySnData() {
      queryBySnData({
        projectSn: this.$store.state.projectSn,
        showType: 3
      }).then(res => {
        // console.log('------获取图片',res.result)
        this.imgUrl = res.result.configValue
      })
    },
    //效果图 保存
    saveEffectData(url) {
      // let configValue = JSON.stringify(url);
      let data = {
        projectSn: this.$store.state.projectSn,
        showType: 3,
        showTitle: this.$t('message.companyDiagram.resultImg'), //'效果图'
        configValue: url
      }
      eidtProjectShowConfig(data).then(res => {
        if (res.code == 200) {
          this.getQueryBySnData()
        }
      })
    },
    //保存或删除宣传视频
    saveOrDeleteVideo(url) {
      editProjectInfo({
        projectId: this.projectData.projectId,
        videoUrl: url
      }).then(res => {
        this.$message.success(this.$t('message.companyDiagram.uploadSuccess')) //"上传成功"
        this.projectData.videoUrl = url
      })
    },
    // 文件上传 之前
    handleBeforeUpload(file, type) {
      console.log(file)
      let fileType = file.type.split('/')[0]
      if (fileType == 'video' || fileType == 'image') {
        this.fullscreenLoading = this.$loading({
          lock: true,
          text: this.$t('message.companyDiagram.uploadHint'), // "上传中，请稍等。。。"
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        return true
      } else {
        this.$message.error(this.$t('message.companyDiagram.uploadHint2')) //"请选择正确的文件"
        return false
      }
    },
    //上传失败
    handleError(file, type) {
      this.fullscreenLoading.close()
      this.$message.error(this.$t('message.companyDiagram.uploadError')) //"上传失败，请重试"
    },
    //上传成功
    handleSuccess(file, type) {
      console.log('上传成功了吗', file)
      if (file.code == 200 || file.status == 'SUCCESS') {
        console.log(file)
        var url = file.data[0].imageUrl
        this.saveOrDeleteVideo(url)
      }
      this.fullscreenLoading.close()
    },

    handleSuccessTwo(file, type) {
      if (file.code == 200 || file.status == 'SUCCESS') {
        console.log(file)
        var url = file.data[0].imageUrl
        this.imgUrl = url
        console.log('--------', this.imgUrl)
        this.saveEffectData(url)
      }
      this.fullscreenLoading.close()
    }
  }
}
</script>

<style lang="less" scoped>
.videoPhoto {
  box-sizing: border-box;
  padding-top: 6px;
  width: 100%;
  height: 100%;
  // border: 1px solid #0081c3;
  .titleTxt {
    // height: 30px;
    // box-sizing: border-box;
    // padding: 0 10px;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    // font-size: 18px;
    // color: #6ee4f0;
    // cursor: pointer;
  }

  .topInner {
    width: calc(100% - 33px);
    height: calc(100% - 62px);
    margin: -24px 0 15px 15px;
  }
  .video,
  .image {
    font-size: 18px;
    color: #6ee4f0;
    margin-top: 5px;
    margin-left: 10px;
  }
  .changeCol {
    color: white;
  }
  .changeVideoBtn {
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 3px 5px;
    font-size: 14px;
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 45%;
    display: none;
    transform: translate(-50%, -50%);
  }
  .videos:hover + .changeVideoBox .changeVideoBtn,
  .changeVideoBox:hover .changeVideoBtn {
    display: block;
  }
  .img {
    width: 100%;
    height: 100%;
    .imgStyle {
      width: 98%;
      height: 88%;
      margin-left: 1%;
    }
    .changeImg {
      position: absolute;
      left: 50%;
      top: 45%;
    }
  }
}
</style>