lesson-course-play/src/components/TheVip/index.tsx

import { Button, Popup } from 'vant';
import { defineComponent } from 'vue';
import styles from './index.module.less';
import { state } from '@/state';
import { gotoMemberCenter } from '@/views/hook/useFee';
import {
  postMessage
} from '@/helpers/native-message';

export default defineComponent({
  name: 'theVip',
  setup() {
    return () => (
      <Popup v-model:show={state.vipShow} round class={styles.courseDialog} closeOnClickOverlay={false}>
        {state.vipFrom !== "exercise" && <i
          class={styles.iconClose}
          onClick={() => (state.vipShow = false)}></i>}
        <div class={styles.title}>温馨提示</div>

        <div class={styles.content}>
          该课件暂未解锁，解锁更多课件，享受全新学习体验！
        </div>

        <div class={styles.popupBtnGroup}>
          <Button round onClick={() => {
            state.vipShow = false
            if(state.vipFrom === "exercise") {
              postMessage({ api: 'back' });
            }
          }}>取消</Button>
          <Button round type="primary" onClick={() => {
            gotoMemberCenter()
            state.vipShow = false
          }}>
            去开通
          </Button>
        </div>
      </Popup>
    );
  }
});