fuint-uniapp-master/pages/article/detail.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
  <view v-if="!isLoading" class="container b-f p-b">
    <view class="article-title">
      <text class="f-32">{{ detail.title }}</text>
    </view>
    <view class="article-little dis-flex flex-x-between m-top10">
      <view class="article-little__left">
        <text class="article-views f-24 col-8">{{ detail.show_views }}次浏览</text>
      </view>
      <view class="article-little__right">
        <text class="article-views f-24 col-8">{{ detail.view_time }}</text>
      </view>
    </view>
    <view class="article-content m-top20">
      <jyf-parser :html="detail.content"></jyf-parser>
    </view>
    <!-- 快捷导航 -->
    <shortcut />
  </view>
</template>

<script>
  import jyfParser from '@/components/jyf-parser/jyf-parser'
  import Shortcut from '@/components/shortcut'
  import * as ArticleApi from '@/api/article'

  export default {
    components: {
      Shortcut
    },
    data() {
      return {
        // 当前文章ID
        articleId: null,
        // 加载中
        isLoading: true,
        // 当前文章详情
        detail: null
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 记录文章ID
      this.articleId = options.articleId
      // 获取文章详情
      this.getArticleDetail()
    },

    methods: {

      // 获取文章详情
      getArticleDetail() {
        const app = this
        app.isLoading = true
        ArticleApi.detail(app.articleId)
          .then(result => {
            app.detail = result.data.detail