classroom-app/src/components/m-protocol/index.tsx

import { Checkbox, Icon, Popup } from 'vant';
import { defineComponent, PropType } from 'vue';
import styles from './index.module.less';
import activeButtonIcon from '@/common/images/icon-check-active.png';
import inactiveButtonIcon from '@/common/images/icon-check.png';
import MHeader from '../m-header';
import request from '@/helpers/request';
const protocolText: any = {
  BUY_ORDER: '《课堂乐器服务协议》',
  REGISTER: '《课堂乐器注册协议》'
};
export default defineComponent({
  name: 'o-protocol',
  props: {
    showHeader: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    prototcolType: {
      type: String as PropType<'BUY_ORDER' | 'REGISTER' | 'WITHDRAW'>,
      default: 'BUY_ORDER'
    },
    center: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      exists: true,
      checked: this.modelValue,
      popupStatus: false,
      protocolHTML: '',
      protocolPopup: null as any
    };
  },
  async mounted() {
    try {
      this.checked = this.checked || this.exists;
      this.$emit('update:modelValue', this.checked || this.exists);
    } catch {
      //
    }
    this.checked = this.modelValue;
    window.addEventListener('hashchange', this.onHash, false);
  },
  unmounted() {
    window.removeEventListener('hashchange', this.onHash, false);
  },
  watch: {
    checked(val) {
      this.$emit('update:modelValue', val);
    },
    modelValue() {
      this.checked = this.modelValue;
    }
  },
  methods: {
    async getContractDetail() {
      try {
        // 判断是否有协议内容
        if (!this.protocolHTML) {
          if (this.prototcolType === 'REGISTER') {
            const { data } = await request.get(
              '/edu-app/open/userContractRecord/queryLatestContractTemplate',
              {
                params: {
                  contractType: 'REGISTER'
                }
              }
            );
            this.protocolHTML = data.contractTemplateContent;
          } else {
            const { data } = await request.get(
              '/edu-app/schoolContractTemplate/queryLatestContractTemplate',
              {
                params: {
                  contractType: this.prototcolType
                }
              }
            );
            this.protocolHTML = data.contractTemplateContent;
          }
        }

        this.onPopupClose();
      } catch {
        //
      }
    },
    onHash() {
      this.popupStatus = false;
    },
    onPopupClose() {
      this.popupStatus = !this.popupStatus;

      // 打开弹窗
      if (this.popupStatus) {
        const route = this.$route;
        let times = 0;
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        for (const 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.mProtocol, this.center ? styles.center : '']}>
        <Checkbox
          v-model={this.checked}
          v-slots={{
            icon: (props: any) => (
              <Icon
                class={styles.boxStyle}
                name={props.checked ? activeButtonIcon : inactiveButtonIcon}
              />
            )
          }}>
          我已阅读并同意
        </Checkbox>
        <span onClick={this.getContractDetail} class={styles.protocolText}>
          {protocolText[this.prototcolType]}
        </span>

        <Popup
          ref={this.protocolPopup}
          show={this.popupStatus}
          position="bottom"
          style={{ height: '100%' }}>
          {this.showHeader && <MHeader title="管乐团平台服务协议" />}
          {this.popupStatus && (
            <div id="mProtocol">
              <div
                class={styles.protocolContent}
                v-html={this.protocolHTML}></div>
            </div>
          )}
        </Popup>
      </div>
    );
  }
});