h5-colexiu/src/components/col-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.png'
import activeButtonIconTenant from '@common/images/icon_checkbox-tenant.png'
import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
import ColHeader from '../col-header'
import { state } from '@/state'
import request from '@/helpers/request'
const protocolText = {
  BUY_ORDER: '《酷乐秀平台服务协议》',
  REGISTER: '《酷乐秀平台注册协议》'
}
export default defineComponent({
  name: 'protocol',
  props: {
    showHeader: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    prototcolType: {
      type: String as PropType<'BUY_ORDER' | 'REGISTER'>,
      default: 'BUY_ORDER'
    }
  },
  data() {
    return {
      exists: true,
      checked: this.modelValue,
      popupStatus: false,
      protocolHTML: '',
      protocolPopup: null as any,
      baseUrl:
        state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
    }
  },
  async mounted() {
    try {
      const res = await request.get(
        this.baseUrl + '/sysUserContractRecord/checkContractSign',
        {
          params: {
            contractType: this.prototcolType
          }
        }
      )
      // console.log(res)
      this.exists = res.data
      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 {
        console.log('getContractDetail')
        // 判断是否有协议内容
        if (!this.protocolHTML) {
          const res = await request.get(
            this.baseUrl + '/sysUserContractRecord/queryContract',
            {
              params: {
                contractType: this.prototcolType
              }
            }
          )
          this.protocolHTML = res.data
          console.log(res)
        }
        this.onPopupClose()
      } catch {}
    },
    onHash() {
      this.popupStatus = false
    },
    onPopupClose() {
      this.popupStatus = !this.popupStatus

      // 打开弹窗
      if (this.popupStatus) {
        const route = this.$route
        let times = 0
        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.colProtocol}>
        {!this.exists && (
          <Checkbox
            v-model={this.checked}
            v-slots={{
              icon: (props: any) => (
                <Icon
                  class={styles.boxStyle}
                  name={
                    props.checked
                      ? state.projectType === 'tenant'
                        ? activeButtonIconTenant
                        : activeButtonIcon
                      : inactiveButtonIcon
                  }
                  size="15"
                />
              )
            }}
          >
            我已阅读并同意
          </Checkbox>
        )}
        {this.exists && <>查看</>}
        <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 class={styles.protocolContent} id="mProtocol">
              <div
                class={styles.protocolContent}
                v-html={this.protocolHTML}
              ></div>
            </div>
          )}
        </Popup>
      </div>
    )
  }
})