h5-colexiu/src/teacher/music/upload-protocol/index.tsx

import ColHeader from '@/components/col-header'
import styles from './index.module.less'
import { defineComponent } from 'vue'

// 预览协议 - 原生实名认证使用
export default defineComponent({
  name: 'preview-protocol',
  data() {
    console.log(this.$route.query)
    return {
      protocolUrl: '' as any,
      title: this.$route.query.type === 'music' ? '曲谱排版规范' : '常见问题'
    }
  },
  async mounted() {
    const type = this.$route.query.type
    if (type === 'question') {
      this.protocolUrl = `${location.origin}/teacher/muic-standard/question.html`
    } else if (type === 'music') {
      this.protocolUrl = `${location.origin}/teacher/muic-standard/index.html`
      this.title = '曲谱排版规范'
    } else {
      this.protocolUrl = `${location.origin}/teacher/muic-standard/index.html`
    }
  },
  render() {
    return (
      <div id="mProtocol" class={styles.mProtocol}>
        <ColHeader title={this.title} />

        <iframe
          id="staffIframeRef"
          // style={{
          //   opacity: loading.value ? 0 : 1
          // }}
          src={this.protocolUrl}
        ></iframe>
      </div>
    )
  }
})