You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
187 lines
3.8 KiB
187 lines
3.8 KiB
<template>
|
|
<view class="cotainer">
|
|
<image class="bg" :src="require('@/static/qus-bg.jpg')" mode=""></image>
|
|
|
|
<view class="navBarBox">
|
|
<!-- <image class="navBarBox-top" :src="require('@/static/home-top.png')" mode=""></image> -->
|
|
<!-- 状态栏占位 -->
|
|
<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
|
|
<!-- 真正的导航栏内容 -->
|
|
<view class="navBar">
|
|
|
|
</view>
|
|
</view>
|
|
<view class="detail">
|
|
<view class="detail-info">
|
|
<view class="detail-info-title">{{info.title}}</view>
|
|
</view>
|
|
<view class="detail-content">
|
|
<view class="detail-image" v-if="info.image">
|
|
<image :src="info.image.url" mode="widthFix"></image>
|
|
</view>
|
|
<view class="detail-content-content">
|
|
<u-parse v-if='showContent' :html="info.content?info.content:' '"></u-parse>
|
|
<!-- <rich-text v-if='showContent' :nodes="info.content?info.content:' '"></rich-text> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<tabbar :currentPage="4"></tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabbar from '@/components/tabbar/tabbar.vue'
|
|
import {
|
|
shareInfo
|
|
} from "@/common/util.js"
|
|
export default {
|
|
components: {
|
|
tabbar,
|
|
},
|
|
data() {
|
|
return {
|
|
navBarTop: 0,
|
|
currentIndex: 0,
|
|
info: {},
|
|
showContent: false,
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return shareInfo
|
|
},
|
|
onShareTimeline() {
|
|
return shareInfo
|
|
},
|
|
onReady() {
|
|
|
|
},
|
|
onLoad(option) {
|
|
const MenuButton = uni.getMenuButtonBoundingClientRect()
|
|
this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
|
|
this.getDetail(option.id)
|
|
},
|
|
methods: {
|
|
async getDetail(id) {
|
|
const res = await this.$u.api.baseFormShow({
|
|
id: id,
|
|
table_name: 'map_point_image_articles',
|
|
'with_relations[0]': 'image'
|
|
})
|
|
this.info = res
|
|
this.info.content = this.replaceStoragePath(res.content)
|
|
console.log(this.info.content)
|
|
this.showContent = true
|
|
},
|
|
replaceStoragePath(htmlStr) {
|
|
// 正则匹配 src 属性中包含 ../storage 的部分（支持双引号或单引号）
|
|
const regex = /src=["']\..\/storage/g;
|
|
// 替换为目标路径（保持原有的引号）
|
|
return htmlStr.replace(regex, 'src="https://h5.jscnsaas.cn/storage');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.cotainer {
|
|
background: #f3efea;
|
|
width: 100vw;
|
|
padding-bottom: 135rpx;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: scroll;
|
|
|
|
.bg {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.navBarBox {
|
|
// height: 299rpx;
|
|
padding-bottom: 30rpx;
|
|
width: 100%;
|
|
position: relative;
|
|
// border-bottom: 10rpx solid #dbd0ba;
|
|
|
|
&-top {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0
|
|
}
|
|
|
|
.navBar {
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
|
|
}
|
|
}
|
|
|
|
.detail {
|
|
margin: 30rpx;
|
|
margin-top: 40rpx;
|
|
position: relative;
|
|
|
|
&-info {
|
|
// background-color: #fff;
|
|
padding: 45rpx 25rpx;
|
|
border-radius: 10rpx;
|
|
position: relative;
|
|
font-size: 36rpx;
|
|
line-height: 1.5;
|
|
padding-top: 0;
|
|
|
|
&-title {
|
|
color: #000;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
// margin-bottom: 30rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&-image {
|
|
margin-bottom: 0;
|
|
|
|
&>image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
background-color: #fff;
|
|
padding: 45rpx 25rpx;
|
|
padding-bottom: 50rpx;
|
|
border-radius: 10rpx;
|
|
// margin-top: 30rpx;
|
|
position: relative;
|
|
|
|
&-bottom {
|
|
width: 226rpx;
|
|
height: 46rpx;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
&-content {
|
|
// margin-top: 40rpx;
|
|
line-height: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style> |