orchestra-app/src/components/o-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-checkbox-check.png'
import inactiveButtonIcon from '@common/images/icon-checkbox-default.png'
import ColHeader from '../o-header'
import request from '@/helpers/request'
const protocolText = {
  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'
    }
  },
  data() {
    return {
      exists: true,
      checked: this.modelValue,
      popupStatus: false,
      protocolHTML: '',
      protocolPopup: null as any
    }
  },
  async mounted() {
    try {
      // const { data } = await request.get('/api-student/userContractRecord/checkContractSign', {
      //   params: {
      //     contractType: this.prototcolType
      //   }
      // })
      // this.exists = data || false
      this.checked = this.checked || this.exists
      this.$emit('update:modelValue', this.checked || this.exists)
    } catch {
      //
    }
    this.checked = this.modelValue
    // this.getContractDetail()
    window.addEventListener('hashchange', this.onHash, false)
  },
  unmounted() {
    window.removeEventListener('hashchange', this.onHash, false)
  },
  watch: {
    checked(val) {
      this.$emit('update:modelValue', val)
    }
  },
  methods: {
    async getContractDetail() {
      try {
        // 判断是否有协议内容
        if (!this.protocolHTML) {
          const { data } = await request.get(
            '/api-student/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
        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}>
        {/* {!this.exists && (
          <Checkbox
            v-model={this.checked}
            v-slots={{
              icon: (props: any) => (
                <Icon
                  class={styles.boxStyle}
                  name={props.checked ? activeButtonIcon : inactiveButtonIcon}
                  size="15"
                />
              )
            }}
          >
            我已阅读并同意
          </Checkbox>
        )}
        {this.exists && <>查看</>} */}
        <Checkbox
          v-model={this.checked}
          v-slots={{
            icon: (props: any) => (
              <Icon
                class={styles.boxStyle}
                name={props.checked ? activeButtonIcon : inactiveButtonIcon}
                size="15"
              />
            )
          }}
        >
          我已阅读并同意
        </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 && <ColHeader title="管乐团平台服务协议" />}
          {this.popupStatus && (
            <div id="mProtocol">
              <div class={styles.protocolContent} v-html={this.protocolHTML}></div>
            </div>
          )}
        </Popup>
      </div>
    )
  }
})