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" v-html="storeInfoHtml"></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" v-if="swiperArray && swiperArray.length > 0">
			<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"
				      @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,
		};
	},
	computed: {
		storeInfoHtml() {
			if (!this.jobDetail.store || !this.jobDetail.store.storeInfo) return '';
			return this.parseMarkdown(this.jobDetail.store.storeInfo);
		},
	},
	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: {
		parseMarkdown(str) {
			if (!str) return '';
			if (/<[a-zA-Z][^>]*>/.test(str)) return str;
			let html = str
				.replace(/&/g, '&amp;')
				.replace(/</g, '&lt;')
				.replace(/>/g, '&gt;');
			html = html.replace(/```([\s\S]*?)```/g, function(m, code) {
				return '<pre><code>' + code.trim() + '</code></pre>';
			});
			html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
			html = html.replace(/^#{6}\s+(.+)$/gm, '<h6>$1</h6>');
			html = html.replace(/^#{5}\s+(.+)$/gm, '<h5>$1</h5>');
			html = html.replace(/^#{4}\s+(.+)$/gm, '<h4>$1</h4>');
			html = html.replace(/^#{3}\s+(.+)$/gm, '<h3>$1</h3>');
			html = html.replace(/^#{2}\s+(.+)$/gm, '<h2>$1</h2>');
			html = html.replace(/^#{1}\s+(.+)$/gm, '<h1>$1</h1>');
			html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
			html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
			html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
			html = html.replace(/~~(.+?)~~/g, '<del>$1</del>');
			html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" style="max-width:100%;height:auto;" />');
			html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
			html = html.replace(/^---+$/gm, '<hr/>');
			html = html.replace(/^\>\s+(.+)$/gm, '<blockquote>$1</blockquote>');
			html = html.replace(/\n{2,}/g, '</p><p>');
			html = html.replace(/\n/g, '<br/>');
			html = '<p>' + html + '</p>';
			html = html.replace(/<p>\s*<\/p>/g, '');
			html = html.replace(/<p>\s*(<h[1-6]>)/g, '$1');
			html = html.replace(/(<\/h[1-6]>)\s*<\/p>/g, '$1');
			html = html.replace(/<p>\s*(<hr\/>)\s*<\/p>/g, '$1');
			html = html.replace(/<p>\s*(<pre>)/g, '$1');
			html = html.replace(/(<\/pre>)\s*<\/p>/g, '$1');
			html = html.replace(/<p>\s*(<blockquote>)/g, '$1');
			html = html.replace(/(<\/blockquote>)\s*<\/p>/g, '$1');
			html = html.replace(/(<\/blockquote>)\s*(<blockquote>)/g, '$1$2');
			return html;
		},
		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;
			word-break: break-word;
			::v-deep {
				h1, h2, h3, h4, h5, h6 {
					color: #333;
					margin: 10px 0 6px;
					font-weight: 600;
				}
				h1 { font-size: 20px; }
				h2 { font-size: 18px; }
				h3 { font-size: 17px; }
				p {
					margin: 6px 0;
					line-height: 1.7;
				}
				ul, ol {
					padding-left: 20px;
					margin: 6px 0;
				}
				li {
					line-height: 1.7;
				}
				blockquote {
					border-left: 4px solid #ddd;
					padding: 4px 12px;
					margin: 8px 0;
					color: #999;
					background: #f9f9f9;
				}
				code {
					background: #f5f5f5;
					padding: 2px 4px;
					border-radius: 3px;
					font-size: 14px;
				}
				pre {
					background: #f5f5f5;
					padding: 10px;
					border-radius: 4px;
					overflow-x: auto;
					code {
						background: none;
						padding: 0;
					}
				}
				img {
					max-width: 100%;
					height: auto;
				}
				a {
					color: #1677ff;
					text-decoration: none;
				}
				table {
					border-collapse: collapse;
					width: 100%;
					margin: 8px 0;
				}
				th, td {
					border: 1px solid #ddd;
					padding: 6px 8px;
					text-align: left;
				}
				th {
					background: #f5f5f5;
					font-weight: 600;
				}
				hr {
					border: none;
					border-top: 1px solid #eee;
					margin: 10px 0;
				}
			}
		}
		.scroll-item{
			width: 56px;
			height: 56px;
			margin-right: 10px;
			overflow: hidden;
			border-radius: 4px;
			margin-top: 10px;
			&:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4), &:nth-child(5) { 
					margin-top: 0;
			}
			&:nth-child(5n){
				margin-right: 0;
			}
		}
	}
}
</style>