更新羽声语音h5
This commit is contained in:
yziiy
50
component/MiddlePopup.vue
Normal file
50
component/MiddlePopup.vue
Normal file
@@ -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>
|
||||
94
component/avatar.vue
Normal file
94
component/avatar.vue
Normal file
@@ -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>
|
||||
3089
component/demo.json
Normal file
3089
component/demo.json
Normal file
File diff suppressed because it is too large
Load Diff
@@ -14,10 +14,6 @@
|
||||
@click="toggleSort"
|
||||
>
|
||||
<text>时间</text>
|
||||
<!-- <view class="sort-icon">
|
||||
<text v-if="sortOrder === 'asc'">↑</text>
|
||||
<text v-else-if="sortOrder === 'desc'">↓</text>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="header-item">累计流水</view>
|
||||
<view class="header-item">获得补贴</view>
|
||||
@@ -33,7 +29,7 @@
|
||||
<view class="row-item">{{ item.total_transaction }}</view>
|
||||
<view class="row-item">{{ item.subsidy_amount }}</view>
|
||||
<view class="row-item">
|
||||
<text :class="'status-' + item.status">{{ item.status_str }}</text>
|
||||
<text :class="`status-${item.status_str === '已发放' ? 0 : 1}`">{{ item.status_str }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -202,13 +198,12 @@ export default {
|
||||
}
|
||||
|
||||
.status-0 {
|
||||
color: #FF9900;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status-1 {
|
||||
color: #19be6b;
|
||||
color: var(--subss-color);
|
||||
}
|
||||
|
||||
.status-2 {
|
||||
color: #FA3534;
|
||||
}
|
||||
|
||||
@@ -155,7 +155,7 @@
|
||||
transform: translateX(-50%);
|
||||
width: 80%;
|
||||
height: 16rpx;
|
||||
background-image: url('@/static/image/propMall/tabline.png');
|
||||
background-image: var(--tab-url);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 1px;
|
||||
|
||||
@@ -4,9 +4,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import config from '@/until/config.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
httpUrl: 'https://vespa.qxyushen.top',
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
@@ -15,6 +17,9 @@
|
||||
this.$emit('changeImageList',this.fileList)
|
||||
}
|
||||
},
|
||||
// onLoad() {
|
||||
// this.httpUrl = config.BASE_URL
|
||||
// },
|
||||
methods: {
|
||||
// 选择文件回调
|
||||
select(e) {
|
||||
@@ -60,7 +65,7 @@
|
||||
},
|
||||
uploadFile(file) {
|
||||
uni.uploadFile({
|
||||
url: 'https://chat.qxmier.com/adminapi/UploadFile/file_upload',
|
||||
url: `${this.httpUrl}/adminapi/UploadFile/file_upload`,
|
||||
filePath: file.path,
|
||||
name: 'files',
|
||||
success: (uploadRes) => {
|
||||
|
||||
Reference in New Issue
Block a user