ylrz_scrm_company_h5/pages/enterprise/enterprise.vue

<template>
	<view class="column" style="height: 100%;position: relative;">
		<view class="top-content ">
			<view class="status_bar" :style="{height: statusBarHeight+'px'}"></view>
			<!-- 这里是状态栏 -->
			<view class="top-title">企业理念</view>
		</view>
		<view :style="{marginTop: `calc(${statusBarHeight}px + 88rpx)`}">
			<view class="imgbox">
				<image :src="enterpriseimg[0]" mode="widthFix"></image>
				<view class="myVideobox">
					<video id="myVideo" :src='enterpriseurl'
					show-mute-btn='true' @fullscreenchange='changvideo'
					vslide-gesture-in-fullscreen='true' :muted='muted' loop='true'
					@error="videoErrorCallback"  enable-danmu  controls  autoplay="true"
					class="videotop"></video>
					<!-- <video class="myVideo" id="myVideo" :src="enterpriseurl"
					                  @error="videoErrorCallback"   controls></video> -->
				</view>
			</view>
			<view class="imgbox column">
				<image :src="enterpriseimg[1]" mode="widthFix"></image>
				<image :src="enterpriseimg[2]" mode="widthFix"></image>
				<image :src="enterpriseimg[3]" mode="widthFix"></image>
			</view>
		</view>
		<tabbar :actindex="0"></tabbar>
	</view>
</template>

<script>
	// import{getenterprise} from '@/api/index.js'
	import tabbar from '@/components/tabbar/tabbar.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				enterpriseurl:'https://hylj-1323137866.cos.ap-chongqing.myqcloud.com/userVideo/2025328/1743138661878.mp4',
				enterpriseimg:[
					'https://cos.his.cdwjyyh.com/fs/20250328/35a52839074940cb9ba7c1208140e3c7.png',
					'https://cos.his.cdwjyyh.com/fs/20250328/39f2e5fc37da4240850313e69caa120c.png',
					'https://cos.his.cdwjyyh.com/fs/20250328/628f59a6f3864541a0599886fae8e54e.png',
					'https://cos.his.cdwjyyh.com/fs/20250328/f13448a48d3c491ab40b44e749983fed.png'
				],
				muted:true,
			}
		},
		//发送给朋友
		onShareAppMessage(res) {
			return {
				title: "御君方互联网医院",
				path: '/pages/index/index',
				imageUrl: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20230106/6b459adfb1004c1a96219bcdf07e337c.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
			}
			
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: "御君方互联网医院",
				imageUrl: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20230106/6b459adfb1004c1a96219bcdf07e337c.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
			}
			
		},
		mounted() {
			const imgs = []
			// this.enterpriseimg= imgs.split(',')
			// this.enterpriseurl='https://beiliyo-2025.obs.cn-north-4.myhuaweicloud.com/fs/20250115/1736925706514.mp4'
			// this.getenterprise()
		},
		methods: {
			changvideo(e){
				if(e.target.fullScreen==true){
					this.muted=false
				}else{
					this.muted=true
				}
				e.target.fullScreen
			},
			getenterprise(){
				getenterprise().then(res=>{
					this.enterpriseurl=res.data.videoUrl
					this.enterpriseimg=res.data.images
					const url=this.enterpriseimg.split(',')
					this.enterpriseimg=url
					uni.setStorageSync('enterpriseurl',this.enterpriseurl)
					console.log(res)
				})
			},
			videoErrorCallback: function(e) {
				
			},
			// navToTest() {
			// 	 const course = {"companyId":100,"companyUserId":6806,"corpId":"ww5a88c4f879f204c5","courseId":63,"link":"1899022782092541952","linkType":3,"qwExternalId":9914983,"qwUserId":"18931","videoId":409}
			// 	 uni.navigateTo({
			// 		url: '/pages_course/video?course='+JSON.stringify(course)
			// 	 })
			// }
		}
	}
</script>

<style lang="scss" scoped>
.top-content {
	width: 100%;
	z-index: 10;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #FFFFFF;
	.top-title {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 42rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #222222;
		padding-left: 41rpx;
		background-color: #FFFFFF;
	}
}
.imgbox{
	position: relative;
	image{
		width: 100%;
		display: block;
	}
}
.videotop{
	width: calc(100% - 60rpx);
	height: 421rpx;
	border-radius: 20rpx;
	position: absolute;
	bottom: 30rpx;
	left: 50%;
	z-index: 9;
	transform: translateX(-50%);
}
</style>