h5-colexiu/src/teacher/share-page/share-vip/index.tsx

import ColHeader from '@/components/col-header'
import { Button, Cell, Dialog, Icon, Image, Popup, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import request from '@/helpers/request'
import { state } from '@/state'
import shareBanner from '../images/share-banner.png'
import wxImage from '../images/wx_bg.png'
import { shareCall, initJumpNativePage } from '../share'
import { browser } from '@/helpers/utils'
import { postMessage } from '@/helpers/native-message'
import qs from 'query-string'
import iconTitle from './images/icon-title-3.png'
import equityBg from './images/icon-equity-bg.png'
import ColSticky from '@/components/col-sticky'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `../../../views/member-center/images/${fileName}`
  const modules = import.meta.globEager('../../../views/member-center/images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'MemberCenter',
  data() {
    const query = this.$route.query
    query.recomUserId =
      query.userType && query.userType == 'STUDENT' ? '' : query.recomUserId
    const tmpUrl = `${location.origin}/student/#/memberCenter?${qs.stringify(
      query
    )}`
    return {
      activityId: query.activityId,
      recomUserId: query.recomUserId,
      discount: 0,
      functionList: [],
      wxStatus: false,
      jumpUrl: tmpUrl
    }
  },
  computed: {
    userInfo() {
      const users = state.user.data
      return {
        username: users?.username,
        phone: users?.phone,
        avatar: users?.heardUrl,
        id: users?.userId,
        memberRankSettingId: users?.memberRankSettingId,
        membershipDays: users?.membershipDays,
        membershipEndTime: users?.membershipEndTime
      }
    }
  },
  created() {
    initJumpNativePage(this.jumpUrl)
  },
  async mounted() {
    try {
      // const res = await request.post(
      //   `/api-teacher/open/memberPriceSettings/vipPermissions`
      // )
      // const result = res.data || []
      // this.functionList = result.map((item: any) => {
      //   return {
      //     title: item.paramName,
      //     icon: getAssetsHomeFile(`${item.paramValue}.png`)
      //   }
      // })

      if (this.activityId) {
        const active = await request.post(
          `/api-teacher/open/activity/state/${this.activityId}`
        )
        this.discount = active.data.check || 0
      }
    } catch {
      //
    }
  },
  methods: {
    onShare() {
      if (browser().weixin) {
        this.wxStatus = true
        return
      }
      // 尝试拉起app
      shareCall(this.jumpUrl)
      // 不管有没有拉起app则都跳转到下载app
      setTimeout(() => {
        window.location.href = location.origin + '/student/#/download'
      }, 3000)
    }
  },
  render() {
    return (
      <div class={styles['member-center']}>
        <Image src={shareBanner} class={styles.shareBanner} />
        <div class={styles.memberContainer}>
          {/* <div class={[styles.intro]}>
            <p>
              酷乐秀会员可使用包括平台提供的所有训练乐谱，并专享“
              <b>小酷Ai</b>
              ”八大核心功能，孩子在家就能轻松完成乐器自主规范练习。
            </p>
          </div>
          {this.functionList.length > 0 && (
            <div class={styles.memberItem}>
              <div class={styles.title}>会员功能</div>

              <div class={styles.member_function}>
                {this.functionList.map((item: any) => (
                  <div class={styles.function_item}>
                    <Icon name={item.icon} size={34} />
                    <div class={styles.function_text} v-html={item.title}></div>
                  </div>
                ))}
              </div>
            </div>
          )} */}
          <img src={iconTitle} class={styles.iconTitle} />
          <img src={equityBg} class={styles.iconEquity} />
        </div>
        <ColSticky position="bottom">
          <div class={['btnGroup', styles.btnGroup]}>
            {this.discount === 1 && (
              <div class={styles.tagDiscount}>专属优惠</div>
            )}
            <Button
              block
              round
              type="primary"
              onClick={this.onShare}
              color="linear-gradient(220deg, #DFA164 0%, #FAC87E 100%)"
            >
              下载酷乐秀开始练习吧！
            </Button>
          </div>
        </ColSticky>

        {this.wxStatus && (
          <div
            class={styles.wxpopup}
            onClick={() => {
              this.wxStatus = false
            }}
          >
            <img src={wxImage} alt="" />
          </div>
        )}
      </div>
    )
  }
})