gym-music-score/src/page-instrument/component/vip/index.tsx

import { defineComponent, reactive, computed, onMounted, watch } from "vue"
import { Button, Popup } from "vant"
import state from "/src/state"
import TipsIcon from "./tips.png"
import styles from "./index.module.less"
import dayjs from "dayjs"
import { storeData } from "/src/store"
import { postMessage } from "/src/utils/native-message"
import { usePageVisibility } from "@vant/use"
import { studentQueryUserInfo } from "/src/page-instrument/api"
import { api_back } from "/src/helpers/communication";

export const vipData = reactive({
   show: false
})

export const isVip = computed(() => {
   return dayjs().isBefore(dayjs(storeData.user?.membershipEndTime))
})

export default defineComponent({
   name: "vip-popup",
   setup() {
      const getContent = computed(() => {
         if (state.isHomeWork) {
            return "您还不是团练宝会员，请开通服务后使用该功能"
         } else if (state.isSchool) {
            return "VIP曲目暂不可用"
         } else {
            return "您尚未开通云练习服务，请联系乐团老师开通"
         }
      })
      onMounted(() => {
         if (state.isHomeWork && !isVip.value && state.paymentType === "VIP") {
            vipData.show = true
         }
      })
      function vaildMusicScoreUrl() {
         const url = window.location.hostname
         let returnUrl = ""
         if (/dev/.test(url) || /192.168/.test(url)) {
            returnUrl = "https://test.gym.lexiaoya.cn"
         } else if (/test/.test(url)) {
            // test 环境
            returnUrl = "https://test.gym.lexiaoya.cn"
         } else {
            returnUrl = "https://gym.lexiaoya.cn"
         }
         return returnUrl
      }
      function hanldeOpen() {
         if (state.isHomeWork) {
            postMessage({
               api: "openWebView",
               content: {
                  url: vaildMusicScoreUrl() + `/mdaya/#/member?id=${state.examSongId}`,
                  orientation: 1
               }
            })
         } else {
            vipData.show = false
         }
      }
      function handleClose() {
         if (state.isHomeWork) {
            api_back()
         } else {
            vipData.show = false
         }
      }
      const pageVisibility = usePageVisibility()
      watch(pageVisibility, value => {
         if (state.isHomeWork && value === "visible") {
            if (!isVip.value) {
               studentQueryUserInfo().then(res => {
                  if (res.code === 200) {
                     storeData.user.membershipEndTime = res?.data?.membershipEndTime
                     if (isVip.value) {
                        vipData.show = false
                     }
                  }
               })
            }
         }
      })
      return () => (
         <>
            <Popup zIndex={9999999} show={vipData.show} get-container="body" closeable onClickCloseIcon={handleClose} round>
               <div class={styles.vip}>
                  <img src={TipsIcon} />
                  <p>{getContent.value}</p>
                  <Button class={styles.btn} round color="#01C1B5" onClick={hanldeOpen}>
                     {state.isHomeWork ? "开通" : " 确定"}
                  </Button>
               </div>
            </Popup>
         </>
      )
   }
})