index.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <view class="app-container">
  3. <view v-if="content" class="ql-snow">
  4. <rich-text class="ql-editor" :nodes="content" />
  5. </view>
  6. <view class="no-data" v-else>
  7. 暂无引导内容
  8. </view>
  9. <button type="submit" circle @click="close">知道了</button>
  10. </view>
  11. </template>
  12. <script>
  13. import { detail } from '@/api/guide'
  14. export default {
  15. data() {
  16. return {
  17. content: ''
  18. }
  19. },
  20. onLoad(e) {
  21. if (e) {
  22. let data = {
  23. clientType: e.deviceModel,
  24. id: e.id
  25. }
  26. detail(data).then(res => {
  27. if (res.data.code === 0) {
  28. this.content = res.data.guidePageContent
  29. }
  30. })
  31. }
  32. },
  33. methods: {
  34. close() {
  35. closePage.postMessage('关闭页面')
  36. }
  37. }
  38. }
  39. </script>
  40. <style lang="scss" scoped>
  41. .app-container {
  42. height: 100%;
  43. .ql-snow {
  44. height: calc(100% - 116rpx);
  45. overflow-y: scroll;
  46. }
  47. .no-data {
  48. position: absolute;
  49. top: 50%;
  50. left: 50%;
  51. transform: translate(-50%);
  52. color: #bbb;
  53. }
  54. button {
  55. position: absolute;
  56. left: 32rpx;
  57. bottom: 32rpx;
  58. width: calc(100% - 64rpx);
  59. }
  60. }
  61. img {
  62. width: 100%;
  63. }
  64. </style>