article.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template>
  2. <!-- 此文件路径禁止移动 -->
  3. <view>
  4. <view class="container ">
  5. <view class="u-skeleton" v-if="!articleData">
  6. <u-empty text="文章暂无内容" mode="list"></u-empty>
  7. </view>
  8. <u-parse v-else :html="articleData"></u-parse>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. import { getArticleDetail } from "@/api/article.js";
  14. export default {
  15. data() {
  16. return {
  17. // 用于接收上一级通过路径传输的数据
  18. routers: "",
  19. // 请求文章接口后存储文章信息
  20. articleData: "",
  21. };
  22. },
  23. onLoad(val) {
  24. this.routers = val;
  25. getArticleDetail(val.id).then((res) => {
  26. if (res.data.result) {
  27. // 将请求的文章数据赋值
  28. this.articleData = res.data.result.content;
  29. }
  30. // 修改当前NavigationBar(标题头)为文章头部
  31. uni.setNavigationBarTitle({
  32. title: val.title,
  33. });
  34. });
  35. },
  36. };
  37. </script>
  38. <style lang="scss" scoped>
  39. page {
  40. background: #fff;
  41. }
  42. .container {
  43. padding: 32rpx;
  44. > p {
  45. margin: 20rpx;
  46. }
  47. }
  48. </style>