feat:空调开关、状态

This commit is contained in:
吉浩茹
2025-10-09 17:22:26 +08:00
parent 4b65bea0bb
commit 279cc4a5ea
6 changed files with 518 additions and 877 deletions

View File

@ -17,13 +17,33 @@
></web-view>
<!-- #endif -->
<!-- H5平台提示 -->
<!-- H5平台直接使用iframe -->
<!-- #ifdef H5 -->
<view class="h5-tip">H5平台暂不支持</view>
<view v-if="iframeUrl" class="h5-iframe-container">
<iframe
:src="iframeUrl"
class="h5-iframe"
allow="autoplay; fullscreen"
allowfullscreen
></iframe>
</view>
<!-- #endif -->
<!-- 控制按钮 -->
<view class="control-buttons" v-if="!loading && !error">
<!-- APP平台使用 cover-view -->
<!-- #ifdef APP-PLUS -->
<cover-view class="control-buttons-cover" v-if="!loading && webviewUrl">
<cover-view class="control-btn-cover play-btn-cover" @click="togglePlay">
<cover-view class="btn-text">{{ isPlaying ? '⏸ 暂停' : '▶ 播放' }}</cover-view>
</cover-view>
<cover-view class="control-btn-cover refresh-btn-cover" @click="refresh">
<cover-view class="btn-text">🔄 刷新</cover-view>
</cover-view>
</cover-view>
<!-- #endif -->
<!-- H5平台使用普通按钮 -->
<!-- #ifdef H5 -->
<view class="control-buttons" v-if="!loading && iframeUrl">
<button class="control-btn play-btn" @click="togglePlay">
{{ isPlaying ? ' 暂停' : ' 播放' }}
</button>
@ -31,6 +51,7 @@
🔄 刷新
</button>
</view>
<!-- #endif -->
<view v-if="loading" class="loading">
<text>{{ loadingText }}</text>
@ -39,6 +60,16 @@
<view v-if="error" class="error">
<text>{{ errorText }}</text>
<button @click="retry">重试</button>
<!-- 即使有错误也显示控制按钮 -->
<view class="error-controls">
<button class="control-btn play-btn" @click="togglePlay">
{{ isPlaying ? ' 暂停' : ' 播放' }}
</button>
<button class="control-btn refresh-btn" @click="refresh">
🔄 刷新
</button>
</view>
</view>
</view>
</template>
@ -56,7 +87,8 @@ export default {
return {
platform: '',
status: '未初始化',
webviewUrl: '',
webviewUrl: '', // APP平台使用
iframeUrl: '', // H5平台使用
loading: false,
loadingText: '',
error: false,
@ -96,12 +128,26 @@ export default {
this.status = '加载中'
try {
// #ifdef APP-PLUS
// APP平台使用本地HTML文件
const token = encodeURIComponent(config.accessToken)
const url = encodeURIComponent(config.play_url)
// 使用iframe版本内存占用更小
this.webviewUrl = `/static/html/ezviz-iframe.html?accessToken=${token}&playUrl=${url}`
console.log('[简单播放器] APP平台 - 使用本地HTML文件')
// #endif
console.log('[简单播放器] 使用iframe版本URL已设置')
// #ifdef H5
// H5平台直接构建萤石云iframe URL
this.iframeUrl = 'https://open.ys7.com/ezopen/h5/iframe?' +
'url=' + encodeURIComponent(config.play_url) +
'&accessToken=' + encodeURIComponent(config.accessToken) +
'&width=100%' +
'&height=100%' +
'&autoplay=1' +
'&audio=1' +
'&controls=1'
console.log('[简单播放器] H5平台 - 直接使用萤石云iframe')
// #endif
setTimeout(() => {
if (this.loading) {
@ -154,7 +200,13 @@ export default {
// 因为iframe播放器不支持直接控制所以采用重新加载的方式
if (this.isPlaying) {
// 暂停清空URL
// #ifdef APP-PLUS
this.webviewUrl = ''
// #endif
// #ifdef H5
this.iframeUrl = ''
// #endif
this.isPlaying = false
this.status = '已暂停'
@ -163,9 +215,23 @@ export default {
} else {
// 播放重新设置URL
if (this.config) {
// #ifdef APP-PLUS
const token = encodeURIComponent(this.config.accessToken)
const url = encodeURIComponent(this.config.play_url)
this.webviewUrl = `/static/html/ezviz-iframe.html?accessToken=${token}&playUrl=${url}`
// #endif
// #ifdef H5
this.iframeUrl = 'https://open.ys7.com/ezopen/h5/iframe?' +
'url=' + encodeURIComponent(this.config.play_url) +
'&accessToken=' + encodeURIComponent(this.config.accessToken) +
'&width=100%' +
'&height=100%' +
'&autoplay=1' +
'&audio=1' +
'&controls=1'
// #endif
this.isPlaying = true
this.status = '播放中'
@ -195,12 +261,31 @@ export default {
})
// 先清空再重新加载
// #ifdef APP-PLUS
this.webviewUrl = ''
// #endif
// #ifdef H5
this.iframeUrl = ''
// #endif
setTimeout(() => {
// #ifdef APP-PLUS
const token = encodeURIComponent(this.config.accessToken)
const url = encodeURIComponent(this.config.play_url)
this.webviewUrl = `/static/html/ezviz-iframe.html?accessToken=${token}&playUrl=${url}`
// #endif
// #ifdef H5
this.iframeUrl = 'https://open.ys7.com/ezopen/h5/iframe?' +
'url=' + encodeURIComponent(this.config.play_url) +
'&accessToken=' + encodeURIComponent(this.config.accessToken) +
'&width=100%' +
'&height=100%' +
'&autoplay=1' +
'&audio=1' +
'&controls=1'
// #endif
this.isPlaying = true
this.status = '播放中'
@ -244,16 +329,27 @@ export default {
.video-webview {
width: 100%;
height: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.h5-tip {
display: flex;
align-items: center;
justify-content: center;
/* H5平台iframe容器 */
.h5-iframe-container {
width: 100%;
height: 100%;
color: white;
font-size: 28rpx;
position: absolute;
top: 0;
left: 0;
background: #000;
}
.h5-iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
.loading {
@ -300,6 +396,36 @@ export default {
border-radius: 10rpx;
}
/* 错误状态下的控制按钮 */
.error-controls {
display: flex;
gap: 20rpx;
margin-top: 30rpx;
justify-content: center;
}
.error-controls .control-btn {
flex: 1;
max-width: 200rpx;
height: 60rpx;
border-radius: 8rpx;
font-size: 24rpx;
font-weight: bold;
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
}
.error-controls .play-btn {
background: linear-gradient(135deg, #46a049 0%, #4caf50 100%);
}
.error-controls .refresh-btn {
background: linear-gradient(135deg, #2196f3 0%, #21cbf3 100%);
}
/* 控制按钮 */
.control-buttons {
position: absolute;