h5-colexiu/src/components/ColProtocol/index.tsx

import { Checkbox, Icon, Popup } from "vant";
import { defineComponent } from "vue";
import styles from './index.module.less';
import activeButtonIcon from '@common/images/icon_checkbox.png';
import inactiveButtonIcon from '@common/images/icon_checkbox_default.png';

export default defineComponent({
  name: 'protocol',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checked: false,
      popupStatus: false,
      protocolHTML: '',
      protocolPopup: null as any,
    }
  },
  mounted() {
    window.addEventListener('hashchange', this.onHash, false)
  },
  unmounted() {
    window.removeEventListener('hashchange', this.onHash, false)
  },
  methods: {
    onHash() {
      this.popupStatus = false;
    },
    onPopupClose() {
      // 判断是否有协议内容
      // if (!this.protocolHTML) {
      //   return
      // }
      this.popupStatus = !this.popupStatus

      // 打开弹窗
      if (this.popupStatus) {
        const route = this.$route
        let times = 0;
        for (let i in route.query) {
          times += 1
        }
        const origin = window.location.href
        const url = times > 0 ? '&pto=' + (+new Date()) : '?pto=' + (+new Date())
        history.pushState("", "", `${origin}${url}`)
      } else {
        window.history.go(-1)
      }
      if (this.protocolPopup) {
        (this.protocolPopup as any).scrollTop = 0
      }
    }
  },
  render() {
    return (
      <div class={styles.colProtocol}>
        <Checkbox v-model={this.checked}
          // @ts-ignore
          vSlots={{
            icon: (props: any) => (
              <Icon class={styles.boxStyle} name={props.checked ? activeButtonIcon : inactiveButtonIcon} size="15" />
            )
          }}
        >
          我已阅读并同意
        </Checkbox>
        <span onClick={this.onPopupClose} class={styles.protocolText}>《酷乐秀平台服务协议》</span>

        <Popup ref={this.protocolPopup} show={this.popupStatus} position="bottom" style={{ height: '100%' }}>
          <div class={styles.protocolContent}>
            <div class={styles.protocolTitle}>酷乐秀平台服务协议</div>
            <div class={styles.protocolContent}>
              呆头呆脑的协议内容
            </div>
          </div>
        </Popup>
      </div>
    )
  }
})