|
|
<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" style="font-weight: bold;">
|
|
|
{{ 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: {
|
|
|
store: {
|
|
|
aliasName:''
|
|
|
},
|
|
|
},
|
|
|
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, '&')
|
|
|
.replace(/</g, '<')
|
|
|
.replace(/>/g, '>');
|
|
|
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 style="margin-top:1em;">');
|
|
|
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> |