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>

		<div class="div_dom">
			<view class="th-title">
				{{ jobDetail.store.aliasName }}
			</view>
			<view class="td-content">
				{{ jobDetail.store.storeInfo || "-" }}
			</view>
		</div>

		<div class="div_dom">
			<view class="th-title">
				企业地址（工作地点）
			</view>
			<view class="td-content" @click="goAddress">
				<div class="g_flex_row_between">
					<div class="g_flex_1 g_flex_column_center">
						<div style="font-size: 16px;color: #666;" class="g_ell_2">
							{{ jobDetail.storeAddr || "-" }}
						</div>
					</div>
					<div class="g_flex_none g_flex_column_center" style="margin-left: 16px;">
						<view class="g_flex_c" style="width: 32px;height: 32px;background-color: rgba(2, 122, 255, 0.08);border-radius: 50%;">
							<i class="iconfont icon-daohang2" style="color: #1677ff;font-size: 18px;"></i>
						</view>
					</div>
				</div>
			</view>
		</div>

		<div class="div_dom">
			<view class="th-title">
				企业图库
			</view>
			<view class="scroll-content g_flex_row_start" style="padding-top: 10px;">
				<view v-for="(item, index) in swiperArray" :key="index" class="scroll-item g_flex_c" :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="56px" height="56px" style="border-radius: 4px"> </u-image>
				</view>
			</view>
		</div>

	</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));
			// 处理轮播数据，过滤视频
			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',
					};
				});
			}
		}
	},
	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">
.p-root-detail-bossinfo{
	.div_dom{
		padding: 10px;
		border-radius: 8px;
		width: calc(100% - 20px);
		margin: 0 auto 10px;
		background-color: #fff;
		.th-title{
			color: #000;
			font-size: 17px;
			padding: 0 0 10px 0;
			border-bottom: 1px solid #f5f5f5;
		}
		.td-content{
			color: #666;
			font-size: 16px;
			padding: 10px 0 0 0;
		}
		.scroll-item{
			width: 56px;
			height: 56px;
			margin-right: 10px;
			overflow: hidden;
			border-radius: 4px;
			margin-bottom: 10px;
			&:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4) { 
					margin-bottom: 0;
			}
			&:nth-child(4n){
				margin-right: 0;
			}
		}
	}
}
</style>