classroom-app/src/components/m-wx-tip/index.tsx

import { Button, Popup } from 'vant';
import { defineComponent, onMounted, ref, watch } from 'vue';
import styles from './index.module.less';
import { browser } from '@/helpers/utils';

export default defineComponent({
  name: 'm-wx-tip',
  props: {
    // 是否显示微信弹窗
    show: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '温馨提示'
    },
    message: {
      type: String,
      default: '请使用微信扫描二维码'
    },
    showButton: {
      type: Boolean,
      default: false
    },
    buttonText: {
      type: String,
      default: '确定'
    }
  },
  emits: ['confirm'],
  setup(props, { emit }) {
    const showPopup = ref(false);
    onMounted(() => {
      if (!browser().weixin && props.show) {
        showPopup.value = true;
        return;
      }
    });

    watch(
      () => [props.show, props.message],
      () => {
        if (props.show) {
          showPopup.value = true;
        } else {
          showPopup.value = false;
        }
      }
    );
    return () => (
      <>
        <Popup
          v-model:show={showPopup.value}
          round
          style={{ width: '70%', maxWidth: '520px' }}
          closeOnClickOverlay={false}
          class={styles.wxPopupDialog}>
          <div class={styles.popupContainer}>
            <p class={styles.title1}>{props.title}</p>
            <p class={styles.popupTips} v-html={props.message}></p>

            {props.showButton && (
              <Button
                round
                class={styles.button}
                onClick={() => emit('confirm')}>
                {props.buttonText}
              </Button>
            )}
          </div>
        </Popup>
      </>
    );
  }
});