更新

component/MiddlePopup.vue

@@ -0,0 +1,50 @@
+<template>
+  <div v-if="isVisible" class="popup-container">
+    <div class="popup-content">
+      <slot></slot>
+      <!-- <button @click="closePopup">关闭</button> -->
+    </div>
+  </div>
+</template>
+ 
+<script>
+export default {
+  name: 'MiddlePopup',
+  data() {
+    return {
+      isVisible: false,
+    };
+  },
+  methods: {
+    openPopup() {
+      this.isVisible = true;
+      document.body.style.overflow = 'hidden'; // 防止页面滚动
+    },
+    closePopup() {
+      this.isVisible = false;
+      document.body.style.overflow = 'auto'; // 恢复页面滚动
+    }
+  }
+}
+</script>
+ 
+<style scoped>
+.popup-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 6;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.popup-content {
+  /* background-color: white; */
+  /* padding: 20px; */
+  /* border-radius: 8px; */
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+}
+</style>

component/avatar.vue

@@ -0,0 +1,94 @@
+<template>
+	<view class="container">
+		<!-- 用于放置VAP播放器的容器 -->
+		<view id="vapContainer"></view>
+		<!-- 用户头像，通过定位等方式与VAP容器重叠 -->
+		<!-- <image :src="avatarUrl" class="user-avatar" mode="aspectFill"></image> -->
+	</view>
+</template>
+
+<script>
+	// 引入 VAP 库
+	import Vap from 'video-animation-player';
+	import config from './demo.json';
+	import testVideo from '@/static/che.mp4';
+	export default {
+		props: {
+			avatarUrl: {
+				type: String,
+				default: () => "https://example.com/path/to/your/avatar.png",
+			},
+			videoUrl: {
+				type: String,
+				default: () => "",
+			}
+		},
+		data() {
+			return {
+				vapInstance: null ,
+				testUrl:testVideo
+			};
+		},
+		mounted() {
+			// 确保 DOM 已经渲染
+			this.$nextTick(() => {
+				this.initVap();
+			});
+		},
+		beforeDestroy() {
+			// 组件销毁时，务必销毁 VAP 实例以避免内存泄漏
+			if (this.vapInstance) {
+				this.vapInstance.destroy();
+			}
+		},
+		methods: {
+			initVap() {
+				// VAP 配置参数
+				const options = {
+					container: document.getElementById('vapContainer'), // 容器 DOM 元素
+					src: this.testUrl, // VAP 视频路径
+					config: config,
+					width: 200, // 宽度
+					height: 100, // 高度
+					loop: true, // 是否循环播放
+					mute: true, // 是否静音（通常头像框不需要声音）
+					accurate: false, // 是否启用精准模式
+
+				};
+				// 创建 VAP 实例并播放
+				this.vapInstance = new Vap(options);
+				this.vapInstance.play(); // 开始播放
+			}
+		}
+	};
+</script>
+
+<style>
+.container {
+  position: relative;
+  width: 300px;
+  height: 300px;
+  /* 其他样式 */
+}
+
+#vapContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1; /* 确保 VAP 视频层在上方 */
+}
+
+.user-avatar {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); /* 居中 */
+  width: 150px; /* 根据你的 VAP 视频中预留的头像区域大小调整 */
+  height: 150px;
+  border-radius: 50%; /* 如果头像是圆形 */
+  z-index: 2; /* 头像在视频层下方 */
+  /* 其他样式 */
+}
+</style>

component/uploadImage.vue

@@ -4,11 +4,11 @@
 </template>
 
 <script>
-	import config from '@/until/config.js';
+	// import config from '@/until/config.js';
 	export default {
 		data() {
 			return {
-				httpUrl: null,
+				httpUrl: 'https://md.xscmmidi.site',
 				fileList: []
 			}
 		},
@@ -17,9 +17,9 @@
 				this.$emit('changeImageList',this.fileList)
 			}
 		},
-		onLoad() {
-			this.httpUrl = config.BASE_URL
-		},
+		// onLoad() {
+		// 	this.httpUrl = config.BASE_URL
+		// },
 		methods: {
 			// 选择文件回调
 			select(e) {