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

import { computed, defineComponent, onMounted, reactive, shallowRef } from 'vue'
import styles from './index.module.less'
import ColHeader from '@/components/col-header'
import { Button, Image, 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 } from '@/constant'
import dayjs from 'dayjs'
import { orderStatus } from '../order-detail/orderStatus'

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,
      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 userInfo = computed(() => {
      const users = baseState.user.data
      return {
        username: users?.username,
        phone: users?.phone,
        avatar: users?.heardUrl,
        id: users?.userId,
        userVip: users?.userVip
      }
    })

    // 是否为永久会员
    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 === '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 > 100 ? 1 : height / 100
    })

    /** 切换购买类型 */
    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
    }

    const calcSalePrice = (item: any) => {
      // 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 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 (userInfo.value.userVip.vipType === 'SVIP') {
          startTime = dayjs(
            userInfo.value.userVip.svipEndDate || new Date()
          ).toDate()
        } else if (userInfo.value.userVip.vipType === 'VIP') {
          startTime = dayjs(
            userInfo.value.userVip.vipEndDate || new Date()
          ).toDate()
        } else if (userInfo.value.userVip.vipType === 'PERMANENT_SVIP') {
          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 = ''

        orderStatus.orderObject.orderList = [
          {
            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, // 会员剩余天数
            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
          }
        ]
        router.push({
          path: '/orderDetail',
          query: {
            orderType: state.tabActive
          }
        })
      } catch {
        //
      }
    }

    /** 格式化分类信息 */
    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
        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}
          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' && (
                  <>
                    有效期至{' '}
                    <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>
                  </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>
                  </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}

            {/* 判断是否有推荐老师 */}
            {state.discountTeacher.discount == 1 && (
              <div class={styles.memberDiscount}>
                <Image
                  src={state.discountTeacher.avatar || iconTeacher}
                  class={styles.discountAvatar}
                />

                <span class={styles.discountName}>
                  {state.discountTeacher.username}老师的<span>专属优惠～</span>
                </span>

                <Image src={iconGift} class={styles.discountGift} />
              </div>
            )}

            {/* 选择会员模式 */}
            {(vipList.value.length > 0 || svipList.value.length > 0) && (
              <div class={styles.system_list_section}>
                <div
                  class={[
                    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
                          class={[
                            styles['system-item'],
                            member.id === state.selectMember.id
                              ? styles.active
                              : '',
                            member.discount === 1 ? styles.discountItem : ''
                          ]}
                          onClick={() => {
                            state.selectMember = member
                          }}
                        >
                          {/* 只有永久才会有数量提示 */}
                          {member.period === 'PERPETUAL' && (
                            <span class={[styles.iconPermanent]}></span>
                          )}

                          <p class={styles.s_title}>{member.title}</p>
                          {member.discount === 1 && (
                            <span class={styles.discountTag}></span>
                          )}
                          <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']]}>
                          {/* 只有永久才会有数量提示 */}
                          {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>
                            {/* 只有永久才会有数量提示 */}
                            {member.period === 'PERPETUAL' ? (
                              <div class={styles.oneMaxNum}>限量1000份</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>
              )}

            <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>
      </div>
    )
  }
})