h5-colexiu/src/views/member-center/index.tsx

import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  shallowRef
} from 'vue'
import styles from './index.module.less'
import ColHeader from '@/components/col-header'
import { Button, Image, NoticeBar, Popup, Toast } from 'vant'
import { state as baseState, setLogin } from '@/state'
import iconShare from './new-images/icon-share.png'
import { useEventListener } from '@vant/use'
import ColShare from '@/components/col-share'
import iconMemberLogo from './images/member_logo.png'
import iconStudent from '@common/images/icon_student.png'
import iconTeacher from '@common/images/icon_teacher.png'
import iconGift from './new-images/icon-discount-gift.png'
import request from '@/helpers/request'
import MemberInteres from './components/member-interes'
import ColSticky from '@/components/col-sticky'
import { moneyFormat } from '@/helpers/utils'
import { useRoute, useRouter } from 'vue-router'
import deepClone from '@/helpers/deep-clone'
import { memberSimpleType, memberType, studyCardType } from '@/constant'
import dayjs from 'dayjs'
import { orderStatus } from '../order-detail/orderStatus'
import TheNoticeBar from '@/components/the-noticeBar'
import { tradeOrder } from '@/student/trade/tradeOrder'

export default defineComponent({
  name: 'member-center',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const vipList = shallowRef([] as any)
    const svipList = shallowRef([] as any)
    const state = reactive({
      activityId: route.query.activityId,
      recomUserId: route.query.recomUserId,
      titleOpacity: 0,
      shareStatus: false, // 分享
      dialogVisiable: false,
      orderVisiable: false,
      orderDetail: {} as any,
      shareUrl: '',
      shareDiscount: 0,
      discountTeacher: {
        avatar: '',
        discount: 0,
        username: ''
      }, // 优惠折扣老师
      apiSuffix:
        baseState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher',
      tabActive: 'SVIP' as 'SVIP' | 'VIP', // 当前选中
      selectMember: {} as any, // 选中的数据
      memberShowList: [] // 购买商品信息
    })

    // 活动数据
    const activitData = reactive({
      activityId: undefined,
      activityStart: '',
      activityEnd: '',
      registrationPrice: 0,
      buyCount: 0, //buyCount 小于1的时候 代表能无限购买
      buyNum: 0,
      vipCardId: 0,
      activityList: [],
      extConfig: {} as Record<string, any>,
      vipType: 'VIP'
    })

    const userInfo = computed(() => {
      const users = baseState.user.data
      return {
        username: users?.username,
        phone: users?.phone,
        avatar: users?.heardUrl,
        id: users?.userId,
        userVip: users?.userVip,
        discountCardFlag: users?.discountCardFlag,
        discountEndTime: users?.discountEndTime,
        discountStartTime: users?.discountStartTime
      }
    })

    // 是否为永久会员
    const isPermanent = computed(() => {
      return userInfo.value.userVip?.vipType === 'PERMANENT_SVIP' ? true : false
    })

    // 购买按钮文案
    const btnSubmitText = computed(() => {
      if (isPermanent.value) {
        return '您已是永久SVIP会员'
      } else if (userMemberStatus.value === 'EXPIREVIP') {
        return '立即续费'
      } else if (userMemberStatus.value === 'NOT_VIP') {
        if (state.selectMember?.id) {
          // ¥988/永久SVIP 立即开通
          return `¥${calcSalePrice(state.selectMember)}/${
            memberSimpleType[state.selectMember?.period]
          }${state.tabActive} 立即开通`
        } else {
          return '立即开通'
        }
      }
      return '立即续费'
    })

    /** 当前用户会员状态 动态判断vip svip */
    const userMemberStatus = computed(() => {
      // vip类型 VIP:会员 SVIP:SVIP，PERMANENT_SVIP:永久SVIP，NOT_VIP:不是vip
      // vip过期类型 VIP:会员 SVIP:SVIP，ALL_VIP:全vip
      if (state.tabActive === 'SVIP') {
        if (userInfo.value.userVip?.vipType === 'PERMANENT_SVIP') {
          return 'PERMANENT'
        } else if (
          userInfo.value.userVip?.vipType === 'SVIP' ||
          userInfo.value.userVip?.svipEndDays > 0
        ) {
          return 'VIP'
        } else if (
          ['SVIP', 'ALL_VIP'].includes(userInfo.value.userVip?.expireVipType)
        ) {
          return 'EXPIREVIP'
        } else if (userInfo.value.userVip?.vipType === 'NOT_VIP') {
          return 'NOT_VIP'
        }
      } else if (state.tabActive === 'VIP') {
        if (userInfo.value.userVip?.vipType === 'PERMANENT_SVIP') {
          return 'PERMANENT'
        } else if (
          userInfo.value.userVip?.vipType === 'VIP' ||
          userInfo.value.userVip?.vipEndDays > 0
        ) {
          return 'VIP'
        } else if (
          ['VIP', 'ALL_VIP'].includes(userInfo.value.userVip?.expireVipType)
        ) {
          return 'EXPIREVIP'
        } else if (userInfo.value.userVip?.vipType === 'NOT_VIP') {
          return 'NOT_VIP'
        }
      }
      return 'NOT_VIP'
    })

    /** 会员信息 */
    const memberInfos = computed(() => {
      return {
        memberLength: state.memberShowList.length,
        vipLength: vipList.value.legnth,
        svipLength: svipList.value.legnth,
        onlyVip:
          vipList.value.length > 0 && svipList.value.length <= 0 ? true : false,
        onlySVip:
          svipList.value.length > 0 && vipList.value.length <= 0 ? true : false,
        hasAll:
          vipList.value.length > 0 && svipList.value.length > 0 ? true : false
      }
    })

    /** 分享 */
    const onShare = async () => {
      try {
        const res = await request.post('/api-teacher/open/vipProfit', {
          data: {
            userId: userInfo.value.id
          }
        })

        state.shareUrl = `${location.origin}/teacher#/shareVip?recomUserId=${userInfo.value.id}&userType=${baseState.platformType}`
        // 判断是否有我分享的编号
        if (res.data && res.data.activityId) {
          state.shareUrl = state.shareUrl + '&activityId=' + res.data.activityId
        }
        state.shareStatus = true
        state.shareDiscount = res.data.discount || 0
        return
      } catch {
        //
      }
    }

    useEventListener('scroll', () => {
      const height =
        window.scrollY ||
        window.pageYOffset ||
        document.documentElement.scrollTop
      state.titleOpacity = height > 30 ? 1 : 0
    })

    /** 切换购买类型 */
    const onChangeTab = (type: 'SVIP' | 'VIP') => {
      if (type === 'SVIP') {
        state.memberShowList = deepClone(svipList.value)
        state.selectMember = state.memberShowList[0]
      } else if (type === 'VIP') {
        state.memberShowList = deepClone(vipList.value)
        state.selectMember = state.memberShowList[0]
      }
      state.tabActive = type

      nextTick(() => {
        document.querySelector('.system-list')?.scroll(0, 0)
      })
    }

    const calcSalePrice = (item: any) => {
      // 有活动 以活动价格为准
      if (item.id === activitData.vipCardId) {
        return activitData.registrationPrice
      }
      // discount
      if (item.discount === 1) {
        const tempPrice = Number(
          (item.salePrice - item.discountPrice).toFixed(2)
        )
        return tempPrice >= 0 ? tempPrice : 0
      }
      return item.salePrice
    }

    const onSubmit = async () => {
      try {
        // 永久会员
        if (isPermanent.value) return
        const { data } = await request.post(
          `${state.apiSuffix}/memberPriceSettings/list`,
          {
            data: {
              status: 1
            }
          }
        )
        const result = data.list || []
        const selectItem = result.find(
          (item: any) => item.id === state.selectMember?.id
        )
        // 状态、售价变更时
        if (
          !selectItem ||
          (selectItem && selectItem.salePrice !== state.selectMember.salePrice)
        ) {
          state.dialogVisiable = true
          return
        }

        // 判断是否有待支付订单
        const resPadding = await request.post(
          `${state.apiSuffix}/userOrder/getPendingOrder`,
          {
            data: { goodType: state.tabActive }
          }
        )
        console.log(resPadding, 'resPadding')
        if (resPadding?.data?.id) {
          state.orderVisiable = true
          state.orderDetail = resPadding.data || {}
          return
        }

        const member: any = state.selectMember
        // 判断是否有会员
        let startTime = new Date()
        // vip类型 VIP:会员 SVIP:SVIP，PERMANENT_SVIP:永久SVIP，NOT_VIP:不是vip
        // vip过期类型 VIP:会员 SVIP:SVIP，ALL_VIP:全vip
        if (state.tabActive === 'SVIP') {
          startTime = dayjs(
            userInfo.value.userVip.svipEndDate || new Date()
          ).toDate()
        } else if (state.tabActive === 'VIP') {
          // 购买Vip时，先有vip的有效时间，如果没有则取SVIP有效时间，都没有默认当前
          startTime = dayjs(
            userInfo.value.userVip.vipEndDate ||
              userInfo.value.userVip.svipEndDate ||
              new Date()
          ).toDate()
        } else if (isPermanent.value) {
          Toast('您已是永久SVIP会员')
          return
        }
        let endTime = new Date()
        if (member.period === 'MONTH') {
          endTime = dayjs(startTime).add(1, 'month').toDate()
        } else if (member.period === 'QUARTERLY') {
          endTime = dayjs(startTime).add(3, 'month').toDate()
        } else if (member.period === 'YEAR_HALF') {
          endTime = dayjs(startTime).add(6, 'month').toDate()
        } else if (member.period === 'YEAR') {
          endTime = dayjs(startTime).add(1, 'year').toDate()
        }

        orderStatus.orderObject.orderType = state.tabActive
        orderStatus.orderObject.orderName = `小酷Ai ${state.tabActive} ${member.title}`
        orderStatus.orderObject.orderDesc = `小酷Ai ${state.tabActive} ${member.title}`
        orderStatus.orderObject.actualPrice = calcSalePrice(member)
        orderStatus.orderObject.recomUserId = state.recomUserId
        orderStatus.orderObject.activityId = state.activityId
        orderStatus.orderObject.orderNo = ''

        const orderData = {
          orderType: state.tabActive,
          goodsName: `小酷Ai ${state.tabActive} ${member.title}`,
          id: member.id,
          title: member.title,
          num: 1, // 购买个数
          salePrice: member.salePrice,
          period: member.period,
          vipEndDays: userInfo.value.userVip?.vipEndDays || 0, // 会员剩余天数
          svipEndDays: userInfo.value.userVip?.svipEndDays || 0,
          discount: member.discount, // 是否有折扣
          discountPrice: member.discountPrice, // 折扣金额
          price: calcSalePrice(member),
          startTime: dayjs(startTime).format('YYYY-MM-DD'),
          endTime: dayjs(endTime).format('YYYY-MM-DD'),
          recomUserId: state.recomUserId,
          activityBuyCount: 0, // 活动购买限制次数
          activityList: [], // 活动赠送的东西
          discountCardFlag: userInfo.value.discountCardFlag, // 畅学卡结束时间
          discountEndTime: userInfo.value.discountEndTime, // 畅学卡结束时间
          discountStartTime: userInfo.value.discountStartTime // 畅学卡开始时间
        }
        // 当能购买并且是当前活动商品时候加上 活动信息
        const canBuyNum = activitData.buyCount - activitData.buyNum
        if (member.id === activitData.vipCardId && canBuyNum > 0) {
          orderData.activityBuyCount = canBuyNum
          orderData.activityList = activitData.activityList
          orderStatus.orderObject.activityId = activitData.activityId
        }
        orderStatus.orderObject.orderList = [orderData]
        router.push({
          path: '/orderDetail',
          query: {
            orderType: state.tabActive
          }
        })
      } catch {
        //
      }
    }

    // 取消支付
    const onCancelOrder = async () => {
      try {
        await request.post(`${state.apiSuffix}/userOrder/orderCancel`, {
          data: { orderNo: state.orderDetail.orderNo }
        })
      } catch {
        //
      }
      state.orderVisiable = false
    }
    // 继续支付
    const onContinueOrder = async () => {
      const orderDetail = state.orderDetail || {}
      tradeOrder(orderDetail, () => {
        router.push({
          path: '/orderDetail',
          query: {
            orderType: orderDetail.orderType
          }
        })
      })
    }

    /** 格式化分类信息 */
    const formatMemberList = () => {
      // console.log(vipList.value, svipList.value, 'vipList.value')
      const onlyVip =
        vipList.value.length > 0 && svipList.value.length <= 0 ? true : false
      const onlySVip =
        svipList.value.length > 0 && vipList.value.length <= 0 ? true : false
      const hasAll =
        vipList.value.length > 0 && svipList.value.length > 0 ? true : false

      if (hasAll) {
        state.tabActive = 'SVIP'
        state.memberShowList = deepClone(svipList.value)
      } else if (onlySVip) {
        state.tabActive = 'SVIP'
        state.memberShowList = deepClone(svipList.value)
      } else if (onlyVip) {
        state.tabActive = 'VIP'
        state.memberShowList = deepClone(vipList.value)
      }

      if (state.memberShowList.length > 0) {
        // 判断是否有数据更新了，需要重新为选择的赋值
        const item = state.memberShowList.find(
          (item: any) => item.id === state.selectMember?.id
        )
        if (item) {
          state.selectMember = item
        } else {
          state.selectMember = state.memberShowList[0]
        }
      }
    }

    const _init = async () => {
      try {
        const { data } = await request.post(
          `${state.apiSuffix}/memberPriceSettings/list`,
          {
            data: {
              activityId: Number(state.activityId),
              userId: state.recomUserId,
              status: 1
            }
          }
        )
        const { list, ...more } = data

        // 学生端 活动 有分享活动的时候 就不支持折扣活动
        if (baseState.platformType === 'STUDENT' && !state.activityId) {
          const activitRes = await request.post(
            `/api-student/memberPriceSettings/getMemberBuyGift`
          )
          if (activitRes.code === 200 && activitRes.data) {
            const {
              activityStart,
              activityEnd,
              registrationPrice,
              buyCount,
              buyNum,
              vipCardId,
              activityRewardList,
              extConfig,
              id
            } = activitRes.data || {}
            // 匹配当前的 会员
            const vipData = list.find(item => {
              return item.id === vipCardId
            })
            // 当匹配上会员 并且没有达到购买限制的时候才有活动
            if (vipData && (buyCount < 1 || buyCount > buyNum)) {
              activitData.activityId = id
              activitData.vipType = vipData.vipType
              activitData.activityStart = activityStart
              activitData.activityEnd = activityEnd
              activitData.registrationPrice = registrationPrice
              activitData.buyCount = buyCount < 1 ? 99999 : buyCount //buyCount 小于1的时候 代表能无限购买
              activitData.buyNum = buyNum
              activitData.vipCardId = vipCardId
              extConfig && (activitData.extConfig = JSON.parse(extConfig))
              activitData.activityList = (activityRewardList || []).map(
                item => {
                  const { rewardType, vipCardId, unit } = item.activityReward
                  if (rewardType === 'DISCOUNT') {
                    return {
                      goodType: rewardType,
                      goodName: `畅学卡 ${studyCardType[unit]}`,
                      goodNum: 1,
                      bizContent: vipCardId,
                      giftFlag: true,
                      vipEndDays: null,
                      goodsNum: 1,
                      unit
                    }
                  }
                  return {
                    goodType: rewardType,
                    goodName: `小酷Ai ${rewardType} ${memberType[unit]}`,
                    goodNum: 1,
                    bizContent: vipCardId,
                    giftFlag: true,
                    vipEndDays: null,
                    goodsNum: 1,
                    unit
                  }
                }
              )
            }
          }
        }

        state.discountTeacher = {
          ...more
        }
        const result = list || []
        const vipTemp = [] as any
        const svipTemp = [] as any
        result.forEach((item: any) => {
          item.title = memberType[item.period]
          if (item.vipType === 'VIP' && item.period !== 'DAY') {
            vipTemp.push(item)
          } else if (item.vipType === 'SVIP' && item.period !== 'DAY') {
            svipTemp.push(item)
          }
        })
        vipList.value = vipTemp ? vipTemp.reverse() : []
        svipList.value = svipTemp ? svipTemp.reverse() : []

        formatMemberList()
      } catch {
        //
      }
    }
    onMounted(async () => {
      try {
        const userInfo = await request.get(
          baseState.platformType === 'TEACHER'
            ? '/api-teacher/teacher/queryUserInfo'
            : '/api-student/student/queryUserInfo'
        )
        setLogin(userInfo.data)

        _init()
      } catch {
        //
      }
    })
    return () => (
      <div class={styles.memberCenter}>
        <ColHeader
          background={`rgba(255,255,255, ${state.titleOpacity})`}
          color={`rgba(0,0,0, ${state.titleOpacity})`}
          backIconColor="black"
          hideHeader={false}
          border={false}
          v-slots={{
            right: () => (
              <Image
                src={iconShare}
                class={styles.shareBtn}
                onClick={onShare}
              />
            )
          }}
        />

        <div class={styles.memberContainer}>
          <i class={styles.showBrid}></i>
          <div class={styles.userSection}>
            <div
              class={[
                styles.userImgSection,
                state.tabActive === 'VIP' ? styles.userVip : styles.userSVip,
                userMemberStatus.value === 'PERMANENT' ||
                userMemberStatus.value === 'VIP'
                  ? styles.isVip
                  : ''
                // userMemberStatus.value === 'EXPIREVIP' ? styles.expireVip : ''
              ]}
            >
              <Image
                class={styles.userImg}
                src={userInfo.value.avatar || iconStudent}
                fit="cover"
              />
              <i class={styles.showMemeber}></i>
            </div>
            <div class={styles.userInfo}>
              <div class={styles.userName}>
                <span class={styles.name}>{userInfo.value.username}</span>
                {userInfo.value.phone && (
                  <span class={styles.phone}>({userInfo.value.phone})</span>
                )}
              </div>
              <div class={styles.member_time}>
                {userMemberStatus.value === 'PERMANENT' && (
                  <>
                    您已是<span>永久SVIP</span>
                  </>
                )}
                {userMemberStatus.value === 'VIP' && (
                  <>
                    {state.tabActive}有效期至{' '}
                    <span>
                      {state.tabActive === 'VIP'
                        ? dayjs(userInfo.value.userVip.vipEndDate).format(
                            'YYYY-MM-DD'
                          )
                        : dayjs(userInfo.value.userVip.svipEndDate).format(
                            'YYYY-MM-DD'
                          )}
                    </span>
                  </>
                )}
                {userMemberStatus.value === 'EXPIREVIP' && (
                  <>
                    您的{state.tabActive}已过期，续费后{state.tabActive}
                    权益可继续使用
                  </>
                )}
                {userMemberStatus.value === 'NOT_VIP' && (
                  <>您还未开通{state.tabActive}会员哦～</>
                )}
              </div>
            </div>
          </div>

          <div class={styles.memberSection}>
            {memberInfos.value.hasAll ? (
              <>
                <div class={styles.member_tabs}>
                  <div
                    class={[
                      styles.member_tab,
                      state.tabActive === 'VIP' ? styles.member_tab_active : ''
                    ]}
                    onClick={() => onChangeTab('VIP')}
                  >
                    <div class={[styles.top_tab, styles.top_tab_vip]}>
                      <i class={[styles.icon_member]}></i>
                      <span class={styles.icon_text}>
                        <i class={styles.bottom_line}></i>
                      </span>
                    </div>
                    <div class={styles.vip_member_tip}></div>
                    {/* 活动显示 */}
                    {!!activitData.vipCardId &&
                      activitData.vipType === 'VIP' &&
                      activitData.extConfig?.title1 && (
                        <div class={styles.activitTip}>
                          {activitData.extConfig?.title1}
                        </div>
                      )}
                  </div>
                  <div
                    class={[
                      styles.member_tab,
                      state.tabActive === 'SVIP' ? styles.member_tab_active : ''
                    ]}
                    onClick={() => onChangeTab('SVIP')}
                  >
                    <div class={[styles.top_tab, styles.top_tab_svip]}>
                      <i class={[styles.icon_member]}></i>
                      <span class={styles.icon_text}>
                        <i class={styles.bottom_line}></i>
                      </span>
                    </div>
                    <div class={styles.svip_member_tip}></div>
                    {/* 活动显示 */}
                    {!!activitData.vipCardId &&
                      activitData.vipType === 'SVIP' &&
                      activitData.extConfig?.title1 && (
                        <div class={styles.activitTip}>
                          {activitData.extConfig?.title1}
                        </div>
                      )}
                  </div>
                </div>
              </>
            ) : memberInfos.value.onlyVip ? (
              <div class={styles.member_tabs}>
                <div
                  class={[
                    styles.member_tab,
                    styles.member_tab_active,
                    styles.member_tab_single
                  ]}
                >
                  <div class={[styles.top_tab, styles.top_tab_vip]}>
                    <i class={[styles.icon_member]}></i>
                    <span class={styles.icon_text}>
                      <i class={styles.bottom_line}></i>
                    </span>
                  </div>
                  <div class={styles.vip_member_tip}></div>
                </div>
              </div>
            ) : memberInfos.value.onlySVip ? (
              // 只有SVIP
              <div class={styles.member_tabs}>
                <div
                  class={[
                    styles.member_tab,
                    styles.member_tab_active,
                    styles.member_tab_single
                  ]}
                >
                  <div class={[styles.top_tab, styles.top_tab_svip]}>
                    <i class={[styles.icon_member]}></i>
                    <span class={styles.icon_text}>
                      <i class={styles.bottom_line}></i>
                    </span>
                  </div>
                  <div class={styles.svip_member_tip}></div>
                </div>
              </div>
            ) : null}

            {/* 选择会员模式 */}
            {(vipList.value.length > 0 || svipList.value.length > 0) && (
              <>
                {/* 判断是否有推荐老师 一个会员都没有配置不显示优惠信息 */}
                {state.discountTeacher.discount == 1 && (
                  <div class={styles.memberDiscount}>
                    <Image
                      src={state.discountTeacher.avatar || iconTeacher}
                      class={styles.discountAvatar}
                    />
                    <TheNoticeBar class={styles.discountName} isAnimation>
                      {state.discountTeacher.username}
                      老师的
                      <span>专属优惠～</span>
                    </TheNoticeBar>

                    <Image src={iconGift} class={styles.discountGift} />
                  </div>
                )}
                <div class={styles.system_list_section}>
                  <div
                    class={[
                      'system-list',
                      styles['system-list'],
                      state.tabActive === 'VIP' ? styles.system_list_vip : '',
                      memberInfos.value.memberLength === 2
                        ? styles.list_two
                        : '',
                      memberInfos.value.memberLength === 1
                        ? styles.list_one
                        : ''
                    ]}
                  >
                    {memberInfos.value.memberLength >= 2 ? (
                      <>
                        {state.memberShowList.map((member: any) => (
                          <div
                            key={member.id}
                            class={[
                              styles['system-item'],
                              member.id === state.selectMember.id
                                ? styles.active
                                : ''
                            ]}
                            onClick={() => {
                              state.selectMember = member
                            }}
                          >
                            {/* 有活动优先展示活动 */}
                            {activitData.vipCardId === member.id &&
                            activitData.extConfig?.title2 ? (
                              <div class={styles.activitTip1}>
                                {activitData.extConfig?.title2}
                              </div>
                            ) : (
                              /* 只有永久才会有数量提示 */
                              member.period === 'PERPETUAL' && (
                                <span class={[styles.iconPermanent]}></span>
                              )
                            )}

                            <p class={styles.s_title}>
                              {member.title}
                              {/* 优惠标识 */}
                              {member.discount === 1 && (
                                <span class={styles.discountTag}></span>
                              )}
                            </p>
                            <p class={styles.price}>
                              <span>￥</span>
                              {moneyFormat(calcSalePrice(member), '0,0[.]00')}
                            </p>
                            <del
                              class={[
                                styles.originalPrice,
                                calcSalePrice(member) >= member.originalPrice ||
                                member.desc
                                  ? styles.originalPriceHide
                                  : ''
                              ]}
                            >
                              ￥{moneyFormat(member.originalPrice, '0,0[.]00')}
                            </del>

                            {member.desc && (
                              <p class={styles.extraTip}>{member.desc}</p>
                            )}
                          </div>
                        ))}
                      </>
                    ) : (
                      <>
                        {/* 一条数据的样式 */}
                        {state.memberShowList.map((member: any) => (
                          <div class={[styles['system-item']]}>
                            {/* 有活动优先展示活动 */}
                            {activitData.vipCardId === member.id &&
                            activitData.extConfig?.title2 ? (
                              <div class={styles.activitTip1}>
                                {activitData.extConfig?.title2}
                              </div>
                            ) : (
                              /* 只有永久才会有数量提示 */
                              member.period === 'PERPETUAL' && (
                                <span class={[styles.iconPermanent]}></span>
                              )
                            )}

                            {member.discount === 1 && (
                              <span class={styles.discountTag}></span>
                            )}
                            <div class={styles.oneInfo}>
                              <div class={styles.priceS}>
                                <p class={styles.price}>
                                  <span>￥</span>
                                  {moneyFormat(
                                    calcSalePrice(member),
                                    '0,0[.]00'
                                  )}
                                </p>
                                <p class={styles.s_title}>{member.title}</p>
                              </div>
                              <div
                                class={[
                                  styles.oneMaxNum,
                                  styles.oneMaxNumPrice
                                ]}
                              >
                                ¥{member.originalPrice}
                              </div>
                            </div>
                            <span
                              class={[
                                styles.oneBtn,
                                ['EXPIREVIP', 'VIP', 'PERMANENT'].includes(
                                  userMemberStatus.value
                                )
                                  ? styles.onBtnRenew
                                  : '',
                                userMemberStatus.value === 'PERMANENT'
                                  ? styles.onBtnDisbled
                                  : ''
                              ]}
                              onClick={() => {
                                if (userMemberStatus.value === 'PERMANENT')
                                  return
                                onSubmit()
                              }}
                            ></span>
                            <i class={styles.itemBg}></i>
                          </div>
                        ))}
                      </>
                    )}
                  </div>
                </div>
              </>
            )}

            {/* 是选择会员 会员天数大于0 */}
            {state.tabActive === 'VIP' &&
              userInfo.value.userVip?.vipEndDays > 0 && (
                <div class={styles.discountTips}>
                  购买VIP的会员续费SVIP年度会员，
                  <span>原VIP会员天数升级为SVIP</span>
                </div>
              )}
            {/* 活动描述 */}
            {state.selectMember?.id === activitData.vipCardId &&
              activitData.extConfig?.describe && (
                <div class={styles.activitTip2}>
                  <div class={styles.activitTipText}>
                    {activitData.extConfig?.describe}
                  </div>
                </div>
              )}
            <MemberInteres type={state.tabActive} />
          </div>
        </div>

        {(vipList.value.length > 0 || svipList.value.length > 0) && (
          <ColSticky position="bottom">
            <div class={styles.btnGroup}>
              <Button
                block
                color="linear-gradient( 241deg, #FFD984 0%, #FFEAB9 100%)"
                class={[
                  styles.btn,
                  isPermanent.value ? styles.btnDisabled : ''
                ]}
                onClick={onSubmit}
              >
                {btnSubmitText.value}
              </Button>
            </div>
          </ColSticky>
        )}

        <Popup
          v-model:show={state.shareStatus}
          style={{ background: 'transparent' }}
        >
          <ColShare
            teacherId={userInfo.value.id}
            shareUrl={state.shareUrl}
            shareType="vip"
            shareLength={2}
          >
            <div class={styles.shareVip}>
              {state.shareDiscount === 1 && (
                <div class={styles.tagDiscount}>专属优惠</div>
              )}

              <img class={styles.icon} src={iconMemberLogo} />
              <div class={styles.info}>
                <h4 class="van-multi-ellipsis--l2">小酷Ai会员</h4>
                <p>海量曲谱、智能评测，专为器乐学习者量身打造</p>
              </div>
            </div>
          </ColShare>
        </Popup>

        <Popup
          v-model:show={state.dialogVisiable}
          style={{ background: 'transparent' }}
          closeOnClickOverlay={false}
        >
          <div class={styles.dialogContainer}>
            <div class={styles.dialogTitle}>提示</div>
            <div class={styles.dialogContent}>产品信息已更新，请重新选择</div>

            <div class={styles.dialogBtnGroup}>
              <Button
                round
                type="primary"
                block
                // class={styles.dialogBtn}
                onClick={() => {
                  _init()
                  state.dialogVisiable = false
                }}
              >
                重新选择
              </Button>
            </div>
          </div>
        </Popup>

        <Popup
          v-model:show={state.orderVisiable}
          style={{ background: 'transparent' }}
          closeOnClickOverlay={false}
        >
          <div class={styles.dialogContainer}>
            <div class={styles.dialogTitle}>提示</div>
            <div class={styles.dialogContent}>
              您有待支付的订单,是否继续支付
            </div>

            <div class={[styles.dialogBtnGroup, styles.orderGroup]}>
              <Button round type="default" plain block onClick={onCancelOrder}>
                取消订单
              </Button>
              <Button
                round
                type="primary"
                block
                class={styles.dialogBtn}
                onClick={onContinueOrder}
              >
                继续支付
              </Button>
            </div>
          </div>
        </Popup>
      </div>
    )
  }
})