feat:空调开关、状态
This commit is contained in:
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user