|
|
@@ -41,28 +41,6 @@
|
|
|
<view class="divider"></view>
|
|
|
<view class="detail-body"><mp-html :content="article.content" :domain="config.API_BASE_URL" :tag-style="contentTagStyle" /></view>
|
|
|
|
|
|
- <!-- 关联商品(文章标签匹配推荐) -->
|
|
|
- <view class="related-section" v-if="relatedProducts.length > 0">
|
|
|
- <view class="related-header">
|
|
|
- <text class="related-title">相关商品</text>
|
|
|
- <text class="related-sub">与本文内容相关</text>
|
|
|
- </view>
|
|
|
- <scroll-view scroll-x class="related-scroll" :show-scrollbar="false">
|
|
|
- <view class="related-list">
|
|
|
- <view class="related-item" v-for="p in relatedProducts" :key="p.id" @click="goProduct(p)">
|
|
|
- <image class="related-img" :src="getImageUrl(p.coverImage)" mode="aspectFill" />
|
|
|
- <view class="related-info">
|
|
|
- <text class="related-name">{{ p.name }}</text>
|
|
|
- <view class="related-price-row">
|
|
|
- <text class="related-price">¥{{ p.memberPrice }}</text>
|
|
|
- <text class="related-match">匹配{{ p.tagMatchCount }}标签</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
-
|
|
|
<!-- 评论区(已屏蔽) -->
|
|
|
<view style="height: 200rpx;"></view>
|
|
|
</scroll-view>
|
|
|
@@ -109,7 +87,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getArticleDetail, reportReadingTime, getShareQrCode, completeArticleRead, generateQuiz, submitQuiz, getArticleRelatedProducts } from '@/utils/api.js'
|
|
|
+import { getArticleDetail, reportReadingTime, getShareQrCode, completeArticleRead, generateQuiz, submitQuiz } from '@/utils/api.js'
|
|
|
import shareMixin from '../../components/share-mixin.js'
|
|
|
import ContentSharePoster from '@/components/ContentSharePoster.vue'
|
|
|
import MpHtml from '@/components/mp-html/mp-html.vue'
|
|
|
@@ -121,7 +99,6 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
articleId: '', article: null, loading: true, error: false, errorMsg: '',
|
|
|
- relatedProducts: [],
|
|
|
readingSeconds: 0, lastReportedSeconds: 0, readingCompleted: false,
|
|
|
isTimerRunning: false, timerHandle: null, syncHandle: null,
|
|
|
currentChildId: null, isLogin: false,
|
|
|
@@ -178,38 +155,15 @@ export default {
|
|
|
this.article.content = this.resolveContentUrls(this.article.content)
|
|
|
this.setShareInfo('推荐阅读: ' + (res.data.title || ''), '/pages/article-center/article-detail?id=' + id)
|
|
|
this.startReadingTimer()
|
|
|
- this.loadRelatedProducts(id)
|
|
|
} else { this.error = true; this.errorMsg = '文章不存在或无权限查看' }
|
|
|
} catch (e) { this.error = true; this.errorMsg = '加载失败' }
|
|
|
finally { this.loading = false }
|
|
|
},
|
|
|
formatDate(d) { return d ? d.slice(0, 10) : '' },
|
|
|
- loadRelatedProducts: function(id) {
|
|
|
- var self = this
|
|
|
- getArticleRelatedProducts({ articleId: id, size: 6 }).then(function(res) {
|
|
|
- if (res && res.code === 200 && res.data) {
|
|
|
- var list = res.data
|
|
|
- var i
|
|
|
- for (i = 0; i < list.length; i++) {
|
|
|
- list[i].coverImage = self.getImageUrl(list[i].coverImage)
|
|
|
- }
|
|
|
- self.relatedProducts = list
|
|
|
- }
|
|
|
- }).catch(function() {})
|
|
|
- },
|
|
|
- goProduct: function(p) {
|
|
|
- if (p && p.id) {
|
|
|
- uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + p.id })
|
|
|
- }
|
|
|
- },
|
|
|
getImageUrl: function(path) {
|
|
|
if (!path) return ''
|
|
|
if (path.indexOf('http://') === 0 || path.indexOf('https://') === 0) return path
|
|
|
- if (!path || path === 'null' || path === 'undefined' || path === '/null') return ''
|
|
|
- var s = String(path).trim()
|
|
|
- if (!s || s === 'null' || s === '/null') return ''
|
|
|
- if (s.indexOf('http://') === 0 || s.indexOf('https://') === 0) return s
|
|
|
- return config.API_BASE_URL + (s.charAt(0) === '/' ? s : '/' + s)
|
|
|
+ return config.API_BASE_URL + path
|
|
|
},
|
|
|
resolveContentUrls: function(html) {
|
|
|
if (!html) return html
|
|
|
@@ -397,21 +351,6 @@ export default {
|
|
|
.divider { height: 1rpx; background: #eee; margin: 24rpx 30rpx; }
|
|
|
.detail-body { padding: 0 30rpx; font-size: 32rpx; color: #444; line-height: 1.8; }
|
|
|
|
|
|
-/* 关联商品 */
|
|
|
-.related-section { padding: 30rpx 0 20rpx; }
|
|
|
-.related-header { display: flex; align-items: baseline; padding: 0 30rpx; margin-bottom: 20rpx; }
|
|
|
-.related-title { font-size: 30rpx; font-weight: 700; color: #333; }
|
|
|
-.related-sub { font-size: 22rpx; color: #999; margin-left: 16rpx; }
|
|
|
-.related-scroll { white-space: nowrap; padding-left: 30rpx; }
|
|
|
-.related-list { display: inline-flex; }
|
|
|
-.related-item { width: 240rpx; margin-right: 20rpx; background: #fff; border-radius: 16rpx; overflow: hidden; box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06); display: inline-block; vertical-align: top; }
|
|
|
-.related-img { width: 240rpx; height: 240rpx; display: block; background: #f5f5f5; }
|
|
|
-.related-info { padding: 14rpx 16rpx 18rpx; }
|
|
|
-.related-name { font-size: 24rpx; color: #333; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; min-height: 68rpx; }
|
|
|
-.related-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10rpx; }
|
|
|
-.related-price { font-size: 26rpx; font-weight: 700; color: #F97316; }
|
|
|
-.related-match { font-size: 18rpx; color: #999; }
|
|
|
-
|
|
|
.detail-footer { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 20rpx 30rpx; display: flex; align-items: center; gap: 16rpx; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.06); z-index: 10; }
|
|
|
.share-btn { height: 72rpx; padding: 0 30rpx; background: linear-gradient(135deg, #F97316, #FB923C); border-radius: 36rpx; display: flex; align-items: center; justify-content: center; border: none; }
|
|
|
.share-btn::after { border: none; }
|