init

fuintUniapp/pages/article/detail.vue

@@ -0,0 +1,82 @@
+<template>
+  <view v-if="!isLoading" class="container b-f p-b">
+    <view class="article-title">
+      <text>{{ 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.click }}次浏览</text>
+      </view>
+      <view class="article-little-right">
+        <text class="article-views f-24 col-8">{{ detail.createTime | timeFormat('yyyy-mm-dd hh:MM') }}</text>
+      </view>
+    </view>
+    <view class="article-content m-top20">
+      <jyf-parser :html="detail.description"></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.articleInfo;
+          })
+          .finally(() => app.isLoading = false)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    min-height: 100vh;
+    padding: 30rpx;
+    background: #fff;
+  }
+  .article-title {
+     margin-bottom: 20rpx;
+     font-size: 35rpx;
+     display: block;
+  }
+  .article-content {
+     font-size: 28rpx;
+  }
+</style>