mz666
/
apply-assistant-v3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图片

Browse Source
master
zsk 2 months ago
parent cd8abe0e27
commit 8be04ed0bd
1 changed files with 110 additions and 77 deletions
Show Stats Download Patch File Download Diff File

187
root/detail/job.vue
Unescape Escape View File

@ -93,56 +93,29 @@
</div> </div>
<view class="m-banner g_pb_16 g_border_f5_b g_mt_12" v-if="swiperArray.length > 0"> <view class="m-banner g_pb_16 g_border_f5_b g_mt_12" v-if="swiperArray.length > 0">
<swiper class="swiper" :circular="false" :autoplay="false" :display-multiple-items="swiperArray.length < 5 ? swiperArray.length : 5" style="height: 58px"> <scroll-view class="banner-scroll" scroll-x="true" show-scrollbar="false"
<swiper-item :scroll-with-animation="true">
v-for="(item, index) in swiperArray" <view class="scroll-content">
:style="{ <view v-for="(item, index) in swiperArray" :key="index" class="scroll-item"
maxWidth: '58px', :class="index == 0 ? 'g_ml_0 g_mr_0' : ''"
paddingRight: '12px' @click="item.type == 'image' ? handleViewBig(item, index) : showVideo(item)">
}" <u-image :radius="4" v-if="item.type == 'image'" :showLoading="true" :src="item.image"
:key="index" width="58px" height="58px" style="border-radius: 4px">
:class="index == 0 ? 'g_ml_0 g_mr_0' : ''" </u-image>
> <view class="g_w_58 g_h_58 g_radius_4 videoContainer" v-else>
<u-image <video class="theVideo" :show-fullscreen-btn="true" :show-play-btn="true"
:radius="4" :show-center-play-btn="true" :enable-play-gesture="true" :id="item.id"
v-if="item.type == 'image'" :src="item.image" @fullscreenchange="fullScreen" :muted="muted"
:showLoading="true" :show-mute-btn="isFullscreen" :show-progress="isFullscreen"
:src="item.image" :show-time="isFullscreen" :controls="isFullscreen"
width="58px" :enable-progress-gesture="isFullscreen" :object-fit="'cover'"
height="58px" style="width: 100%; height: 100%;">
style="border-radius: 4px" </video>
@click="handleViewBig(item, index)" </view>
></u-image> </view>
<view </view>
class="g_w_60 g_h_58 g_radius_4 videoContainer" </scroll-view>
style="overflow: hidden" </view>
@click="showVideo(item)"
v-else
>
<video
class="theVideo"
:show-fullscreen-btn="false"
:show-play-btn="false"
:show-center-play-btn="false"
:enable-play-gesture="true"
:id="item.id"
:src="item.image"
@fullscreenchange="fullScreen"
:muted="muted"
:show-mute-btn="true"
>
<!-- <view class="shareVideo">
<icon
@click="shareVideo(item)"
class="iconfont"
:class="wxPlat == 'wxwork' ? 'icon-huidaodingbu' : 'icon-zhuanfa1'"
></icon>
</view> -->
</video>
</view>
</swiper-item>
</swiper>
</view>
<view class="g_flex_row_center g_border_e_b"> <view class="g_flex_row_center g_border_e_b">
@ -352,7 +325,6 @@
</div> </div>
</div> --> </div> -->
<!-- 轮播banner --> <!-- 轮播banner -->
1{{swiperArray}}2
<div class="m-banner g_pb_16 g_border_f5_b" v-if="swiperArray.length > 0"> <div class="m-banner g_pb_16 g_border_f5_b" v-if="swiperArray.length > 0">
<swiper class="swiper" :circular="false" :autoplay="false" :display-multiple-items="swiperArray.length < 5 ? swiperArray.length : 5" style="height: 58px"> <swiper class="swiper" :circular="false" :autoplay="false" :display-multiple-items="swiperArray.length < 5 ? swiperArray.length : 5" style="height: 58px">
<swiper-item v-for="(item, index) in swiperArray" style="max-width: 58px; padding-right: 12px" :key="index" :class="index == 0 ? 'g_ml_0 g_mr_0' : ''"> <swiper-item v-for="(item, index) in swiperArray" style="max-width: 58px; padding-right: 12px" :key="index" :class="index == 0 ? 'g_ml_0 g_mr_0' : ''">
@ -687,6 +659,7 @@ export default {
}, },
data() { data() {
return { return {
isFullscreen: false, // 添加全屏状态跟踪
globalData: getApp().globalData, globalData: getApp().globalData,
videoContextTemp: {}, videoContextTemp: {},
goImLoading: false, // 跳转im的loading goImLoading: false, // 跳转im的loading
@ -1240,7 +1213,9 @@ export default {
console.log("showVideo that.swiperArray", that.swiperArray); console.log("showVideo that.swiperArray", that.swiperArray);
this.videoContext = uni.createVideoContext(`${e.id}`, this); this.videoContext = uni.createVideoContext(`${e.id}`, this);
that.videoContextTemp = that.videoContext; that.videoContextTemp = that.videoContext;
this.videoContext.requestFullScreen(); this.videoContext.requestFullScreen({
direction: "landscape", // 横屏全屏
});
this.videoContext.hideStatusBar(); this.videoContext.hideStatusBar();
this.videoContext.play(); this.videoContext.play();
}, },
@ -1283,11 +1258,14 @@ export default {
} }
}, },
fullScreen(e) { fullScreen(e) {
console.log(e); console.log(e);
if (!e.detail.fullScreen) { this.muted = true;
this.videoContext.stop(); this.isFullscreen = e.detail.fullScreen; // 更新全屏状态
}
}, if (!e.detail.fullScreen) {
this.videoContext.stop();
}
},
shareVideo(e) { shareVideo(e) {
var that = this; var that = this;
console.log(e); console.log(e);
@ -1651,31 +1629,86 @@ export default {
.u-swiper__wrapper__item { .u-swiper__wrapper__item {
margin-right: 10px; margin-right: 10px;
} }
image { image {
border-radius: 4px !important; border-radius: 4px !important;
} }
.banner-scroll {
width: 100%;
white-space: nowrap;
.scroll-content {
display: inline-block;
white-space: nowrap;
.scroll-item {
display: inline-block;
width: 58px;
height: 58px;
margin-right: 12px;
vertical-align: top;
&:last-child {
margin-right: 0;
}
.videoContainer {
position: relative;
background-color: #000; // 黑色背景
.theVideo {
width: 100%;
height: 100%;
// 小图时隐藏控制栏
::v-deep .uni-video-controls {
display: none !important;
}
// 全屏时显示控制栏
::v-deep .uni-video-fullscreen-controls {
display: block !important;
}
}
// 小图时只显示居中的播放按钮
::v-deep .uni-video-cover-play-button {
display: block !important;
width: 40px;
height: 40px;
margin: auto;
}
}
}
}
}
// .swiper { // .swiper {
// // 为最后一个视频项目添加特殊处理
// swiper-item:last-child { // // 为最后一个视频项目添加特殊处理
// .videoContainer { // swiper-item:last-child {
// // 确保视频容器不会被裁剪 // .videoContainer {
// overflow: visible !important; // // 确保视频容器不会被裁剪
// overflow: visible !important;
// .theVideo {
// // 确保视频元素能够完整显示 // .theVideo {
// width: 100%; // // 确保视频元素能够完整显示
// height: 100%; // width: 100%;
// } // height: 100%;
// }
// .shareVideo {
// // 调整分享按钮位置，确保不会遮挡视频 // .shareVideo {
// right: 10px; // // 调整分享按钮位置，确保不会遮挡视频
// bottom: 10px; // right: 10px;
// } // bottom: 10px;
// } // }
// } // }
// } // }
// }
} }
.m-state { .m-state {
position: fixed; position: fixed;
left: 0; left: 0;

Write Preview
Loading…
Cancel
Save