From 9057e04efad1b7d61c77a72e5c37a504d0aee935 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期五, 26 九月 2025 09:24:03 +0800
Subject: [PATCH] H5静态化

---
 admin/src/components/common/UploadAvatarVideo.vue |  128 ++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 128 insertions(+), 0 deletions(-)

diff --git a/admin/src/components/common/UploadAvatarVideo.vue b/admin/src/components/common/UploadAvatarVideo.vue
new file mode 100644
index 0000000..1ed4dbd
--- /dev/null
+++ b/admin/src/components/common/UploadAvatarVideo.vue
@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <el-upload
+      class="avatar-uploader"
+      accept=".mp4"
+      :style="customStyle"
+      :action="uploadImgUrl"
+      :data="uploadData"
+      :show-file-list="false"
+      :on-success="handleAvatarSuccess"
+      :on-error="uploadError"
+      :before-upload="beforeAvatarUpload">
+      <video v-if="file.videourlfull" :src="file.videourlfull" :style="customStyle" class="avatar" />
+      <div v-else :style="customStyle">
+        <i class="el-icon-plus avatar-uploader-icon"></i>
+        <div class="tips-style">{{ tipsLabel }}</div>
+      </div>
+    </el-upload>
+  </div>
+
+</template>
+
+<script>
+export default {
+  props: {
+    file: {
+      type: Object,
+      default: () => {}
+    },
+    tipsLabel: '',
+    customStyle: {
+      type: String,
+      default: 'width: 90px; height: 90px;'
+    },
+    uploadData: Object
+  },
+  data() {
+    return {
+      uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/web/public/upload'
+    }
+  },
+
+  methods: {
+    // 涓婁紶鍥剧墖
+    handleAvatarSuccess(res, file) {
+      if (res.code == 200) {
+        let { data } = res
+        this.file.videourl = data.imgaddr;
+        this.file.videourlfull = data.url;
+        this.$message.success('涓婁紶鎴愬姛')
+        this.$emit('uploadSuccess', { imgurl: data.imgaddr, imgurlfull: data.url, name: data.originname })
+      } else {
+        this.$message.error('涓婁紶澶辫触')
+      }
+      this.$emit('uploadEnd')
+    },
+    uploadError() {
+      this.$message.apiFailed('涓婁紶澶辫触')
+      this.$emit('uploadEnd')
+    },
+    // // 鎷︽埅
+    beforeAvatarUpload(file) {
+      this.$emit('uploadBegin')
+      return true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$image-width: 100px;
+.avatar-uploader {
+  width: $image-width;
+  height: $image-width;
+}
+::v-deep .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  width: $image-width;
+  height: $image-width;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  line-height: 90px;
+  font-size: 28px;
+  color: #8c939d;
+  width: $image-width;
+  height: $image-width;
+  text-align: center;
+}
+.avatar {
+  width: $image-width;
+  height: $image-width;
+  display: block;
+}
+.tips-style {
+  height: 13px;
+  font-size: 13px;
+  font-weight: 400;
+  color: #999999;
+  line-height: 13px;
+}
+</style>
+<style lang="scss" scoped>
+::v-deep .el-upload--picture-card{
+  width: 90px !important;
+  height: 90px !important;
+}
+::v-deep .el-upload-list__item {
+  width: 90px !important;
+  height: 90px !important;
+}
+.icon {
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(0%, -85%);
+}
+::v-deep .el-upload-list__item {
+  width: 90px !important;
+  height: 90px !important;
+}
+</style>
+

--
Gitblit v1.9.3