dandelionPlatformToB-uni-v3/root/detail/bossinfo.vue

<template>
	<view class="p-root-detail-bossinfo g_bg_f_5" style="min-height: 100vh;">
    <div style="height: 10px;"></div>
		<view class="g_bg_f g_radius_8 g_mr_10 g_ml_10 g_p_10">
			<view class="m-address" v-if="(jobDetail && jobDetail.store) || (jobDetail.storeLat && jobDetail.storeLng)">
				<div class="store-item g_flex_row_start" v-if="jobDetail && jobDetail.store" style="margin-bottom: 6px;">
					<view class="g_flex_none" style="font-size: 14px;color: #999;">
						工作单位：
					</view>
					<view class="g_flex_1 g_flex_column_center">
						<view class=" g_fw_600" style="font-size: 14px;color: #000;">
							{{ jobDetail.store.aliasName || "-" }}
						</view>
					</view>
				</div>
				<div class="store-item g_flex_row_start" v-if="jobDetail && jobDetail.store" style="margin-bottom: 6px;">
					<view class="g_flex_none" style="font-size: 14px;color: #999;">
						企业简介：
					</view>
					<view class="g_flex_1 g_flex_column_center">
						<view class="" style="font-size: 14px;color: #999;">
							{{ jobDetail.store.storeInfo || "-" }}
						</view>
					</view>
				</div>
				<div class="store-item g_flex_row_start">
					<view class="g_flex_none" style="font-size: 14px;color: #999;">
						工作地点：
					</view>
					<view class="g_flex_1 g_mr_4 g_flex_column_center" @click="goAddress">
						<view class="" style="font-size: 14px;color: #999;">
							{{ jobDetail.storeAddr || "-" }}
						</view>
					</view>
					<view class="g_flex_none g_flex_c" style="width: 24px;" @click="goAddress">
						<i class="iconfont icon-dizhi1 g_c_9 g_w_14 g_h_14" style="font-size: 18px;color: #999999;"></i>
					</view>
				</div>
			</view>
			<view v-else class="g_border_e_t g_mt_16"></view>
		</view>
		<!-- 轮播banner -->
		<view class="g_bg_f g_radius_8 g_mt_10 g_mr_10 g_ml_10">
			<view class="m-banner g_border_f5_b g_mt_12" v-if="swiperArray.length > 0">
				<scroll-view class="banner-scroll" scroll-x="true" show-scrollbar="false" :scroll-with-animation="true">
					<view class="scroll-content">
						<view v-for="(item, index) in swiperArray" :key="index" class="scroll-item" :class="index == 0 ? 'g_ml_0 g_mr_0' : ''" @click="item.type == 'image' ? handleViewBig(item, index) : showVideo(item)">
							<u-image :radius="4" v-if="item.type == 'image'" :showLoading="true" :src="item.image" width="58px" height="58px" style="border-radius: 4px"> </u-image>
							<!-- #ifdef H5 || APP-PLUS -->
							<view class="g_w_58 g_h_58 g_radius_4 videoContainer" v-else>
								<video class="theVideo" :show-fullscreen-btn="true" :show-play-btn="true" :show-center-play-btn="true" :enable-play-gesture="true" :id="item.id" :src="item.image" @fullscreenchange="fullScreen" :muted="muted" :show-mute-btn="isFullscreen" :show-progress="isFullscreen" :show-time="isFullscreen" :controls="isFullscreen" :enable-progress-gesture="isFullscreen" :object-fit="'cover'" style="width: 100%; height: 100%"></video>
							</view>
							<!-- #endif -->
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			jobDetail: {},
			swiperArray: [],
			muted: true,
			isFullscreen: false,
		};
	},
	onLoad(options) {
		let that = this;
		if (options.jobDetail) {
			that.jobDetail = JSON.parse(decodeURIComponent(options.jobDetail));
			// 设置导航栏标题为工作单位名称
			let title = that.jobDetail.store?.aliasName || '企业详情';
			uni.setNavigationBarTitle({
				title: title
			});
			// 处理轮播数据，过滤视频
			if (that.jobDetail.images && that.jobDetail.images.length > 0) {
				let imageList = that.jobDetail.images.filter((item) => !item.url || item.url.indexOf(".mp4") === -1);
				that.swiperArray = imageList.length == 0 ? [] : imageList.map((item, index) => {
					return {
						id: index + 1,
						image: item.url,
						type: 'image',
					};
				});
			}
		}
	},
	onShareAppMessage() {
		return {
			title: this.jobDetail.store?.aliasName || '企业信息',
			path: `/root/detail/bossinfo?jobDetail=${encodeURIComponent(JSON.stringify(this.jobDetail))}`
		};
	},
	methods: {
		goAddress() {
			let that = this;
			var address = that.jobDetail;
			wx.openLocation({
				latitude: Number(address.storeLat),
				longitude: Number(address.storeLng),
				name: address.store?.aliasName || '工作地点',
				address: address.storeAddr,
				scale: 18,
			});
		},
		handleViewBig(item, index) {
			let that = this;
			uni.previewImage({
				current: index,
				urls: that.swiperArray.filter(i => i.type == 'image').map(i => i.image),
			});
		},
		showVideo(item) {
			// 视频播放逻辑
		},
		fullScreen(e) {
			this.isFullscreen = e.detail.fullScreen;
		},
	},
};
</script>

<style lang="scss">
.banner-scroll {
	width: 100%;
	white-space: nowrap;
}

.scroll-content {
	display: inline-flex;
	padding: 10px;
}

.scroll-item {
	width: 58px;
	height: 58px;
	margin-left: 10px;
	border-radius: 4px;
	overflow: hidden;
  &:first-child {
		margin-left: 0;
	}
}

.store-item {
	padding: 8px 0;
}
</style>