|
|
@@ -1,40 +1,91 @@
|
|
|
-<!-- 病例分析分享 / 用嗓科普 详情页，和"关于我们"一样用 web-view 整页加载后台的静态 HTML -->
|
|
|
+<!-- 病例分析分享 / 用嗓科普 详情页：标题/作者/日期用列表页带过来的数据自己渲染，
|
|
|
+ 正文自己把后台的静态 HTML 当纯文本抓下来，交给 mp-html 渲染（不再用 web-view 整页加载远程页面） -->
|
|
|
<template>
|
|
|
- <view class="content">
|
|
|
- <view class="artical">
|
|
|
- <web-view :src="urlParse"></web-view>
|
|
|
- </view>
|
|
|
+ <view class="detail-page">
|
|
|
+ <view class="detail-title">{{ article.title }}</view>
|
|
|
+ <view class="detail-sub">{{ article.hospital }} {{ article.doctor }} {{ article.date }}</view>
|
|
|
+ <view class="detail-divider"></view>
|
|
|
+ <mp-html :content="article.content" :tag-style="tagStyle" selectable />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html.vue'
|
|
|
+
|
|
|
export default {
|
|
|
+ components: { mpHtml },
|
|
|
data() {
|
|
|
return {
|
|
|
id: '',
|
|
|
category: '',
|
|
|
- urlParse: '',
|
|
|
+ contentUrl: '',
|
|
|
+ article: {
|
|
|
+ title: '',
|
|
|
+ hospital: '',
|
|
|
+ doctor: '',
|
|
|
+ date: '',
|
|
|
+ content: '',
|
|
|
+ },
|
|
|
+ // 控制正文默认字号/行距，让阅读体验更接近文章而不是大段大字
|
|
|
+ tagStyle: {
|
|
|
+ p: 'font-size: 28rpx; line-height: 48rpx; color: #333333; margin-bottom: 20rpx;',
|
|
|
+ span: 'font-size: 28rpx; line-height: 48rpx; color: #333333;',
|
|
|
+ div: 'font-size: 28rpx; line-height: 48rpx; color: #333333;',
|
|
|
+ img: 'max-width: 100%;',
|
|
|
+ h1: 'font-size: 32rpx; line-height: 46rpx; color: #0d1937;',
|
|
|
+ h2: 'font-size: 30rpx; line-height: 44rpx; color: #0d1937;',
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
onLoad(query) {
|
|
|
this.id = query.id
|
|
|
this.category = query.category
|
|
|
+ this.article.title = decodeURIComponent(query.title || '')
|
|
|
+ this.article.hospital = decodeURIComponent(query.hospital || '')
|
|
|
+ this.article.doctor = decodeURIComponent(query.doctor || '')
|
|
|
+ this.article.date = decodeURIComponent(query.date || '')
|
|
|
+ uni.setNavigationBarTitle({ title: this.article.title || '详情' })
|
|
|
// 详情地址格式：{shareUrl}content/{id除以1000向下取整}/{id}.html
|
|
|
- this.urlParse = getApp().globalData.shareUrl + 'content/' + Math.floor(this.id / 1000) + '/' + this.id + '.html?time=' + Date.now()
|
|
|
+ this.contentUrl = getApp().globalData.shareUrl + 'content/' + Math.floor(this.id / 1000) + '/' + this.id + '.html?time=' + Date.now()
|
|
|
+ this.getContent()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getContent() {
|
|
|
+ uni.request({
|
|
|
+ url: this.contentUrl,
|
|
|
+ method: 'GET',
|
|
|
+ // 这里拿的是静态 HTML 文件，不是 JSON，关掉自动 JSON 解析，直接拿原始文本
|
|
|
+ dataType: 'text',
|
|
|
+ success: (res) => {
|
|
|
+ this.article.content = typeof res.data === 'string' ? res.data : ''
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error('getContent failed', this.contentUrl, err)
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-.content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .artical {
|
|
|
- font-size: 32rpx;
|
|
|
- box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 32rpx;
|
|
|
- padding: 30rpx;
|
|
|
- }
|
|
|
+<style scoped>
|
|
|
+.detail-page {
|
|
|
+ padding: 30rpx;
|
|
|
+}
|
|
|
+.detail-title {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0d1937;
|
|
|
+ line-height: 48rpx;
|
|
|
+}
|
|
|
+.detail-sub {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #a7adba;
|
|
|
+ margin: 16rpx 0 20rpx;
|
|
|
+}
|
|
|
+.detail-divider {
|
|
|
+ height: 1px;
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
}
|
|
|
</style>
|
wzz