richtext.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <!-- 文章展示 -->
  2. <template>
  3. <s-layout class="set-wrap" :title="state.title" :bgStyle="{ color: '#FFF' }" v-if="state.title && !type">
  4. <view class="ss-p-30">
  5. <mp-html class="richtext" :content="state.content" />
  6. </view>
  7. </s-layout>
  8. <mp-html class="richtext" :content="state.content" v-else/>
  9. </template>
  10. <script setup>
  11. import { onLoad } from '@dcloudio/uni-app';
  12. import { reactive,defineProps } from 'vue';
  13. import ArticleApi from '@/sheep/api/promotion/article';
  14. const state = reactive({
  15. title: '',
  16. content: '',
  17. });
  18. async function getRichTextContent(id, title) {
  19. const { code, data } = await ArticleApi.getArticle(id, title);
  20. if (code !== 0) {
  21. return;
  22. }
  23. state.content = data.content;
  24. // 标题不一致时,修改标题
  25. if (state.title !== data.title) {
  26. state.title = data.title;
  27. uni.setNavigationBarTitle({
  28. title: state.title,
  29. });
  30. }
  31. }
  32. const props = defineProps({
  33. title:{
  34. defautls:'',
  35. type:String
  36. },
  37. type:{
  38. defautls:'',
  39. type:String
  40. }
  41. })
  42. onLoad((options) => {
  43. if (options.title || props.title) {
  44. state.title = options.title || props.title;
  45. uni.setNavigationBarTitle({
  46. title: state.title || props.title,
  47. });
  48. }
  49. getRichTextContent(options.id, options.title||props.title);
  50. });
  51. </script>
  52. <style lang="scss" scoped>
  53. .set-title {
  54. margin: 0 30rpx;
  55. }
  56. .richtext {
  57. }
  58. </style>