ohplay_h5/src/pages/guide/index.vue

<template>
  <view class="app-container">
    <view v-if="content" class="ql-snow">
      <rich-text class="ql-editor" :nodes="content" />
    </view>
    <view class="no-data" v-else>
      暂无引导内容
    </view>
    <button type="submit" circle @click="close">知道了</button>
  </view>
</template>

<script>
import { detail } from '@/api/guide'
export default {
  data() {
    return {
      content: ''
    }
  },
  onLoad(e) {
    if (e) {
      let data = {
        clientType: e.deviceModel,
        id: e.id
      }
      detail(data).then(res => {
        if (res.data.code === 0) {
          this.content = res.data.guidePageContent
        }
      })
    }
  },
  methods: {
    close() {
      closePage.postMessage('关闭页面')
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;

  .ql-snow {
    height: calc(100% - 116rpx);
    overflow-y: scroll;
  }

  .no-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    color: #bbb;
  }

  button {
    position: absolute;
    left: 32rpx;
    bottom: 32rpx;
    width: calc(100% - 64rpx);
  }
}

img {
  width: 100%;
}
</style>