|
|
@@ -1,8 +1,8 @@
|
|
|
-import { computed, defineComponent, reactive } from 'vue'
|
|
|
+import { computed, defineComponent, onMounted, reactive, shallowRef } from 'vue'
|
|
|
import styles from './index.module.less'
|
|
|
import ColHeader from '@/components/col-header'
|
|
|
-import { Button, Image, Popup } from 'vant'
|
|
|
-import { state as baseState } from '@/state'
|
|
|
+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'
|
|
|
@@ -14,16 +14,37 @@ 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,
|
|
|
- tabActive: 'SVIP' // 当前选中
|
|
|
+ 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(() => {
|
|
|
@@ -33,10 +54,80 @@ export default defineComponent({
|
|
|
phone: users?.phone,
|
|
|
avatar: users?.heardUrl,
|
|
|
id: users?.userId,
|
|
|
- memberRankSettingId: users?.memberRankSettingId,
|
|
|
- isVip: users?.isVip,
|
|
|
- membershipDays: users?.membershipDays,
|
|
|
- membershipEndTime: users?.membershipEndTime
|
|
|
+ // memberRankSettingId: users?.memberRankSettingId,
|
|
|
+ // isVip: users?.isVip,
|
|
|
+ // membershipDays: users?.membershipDays,
|
|
|
+ // membershipEndTime: users?.membershipEndTime
|
|
|
+ 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') {
|
|
|
+ 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') {
|
|
|
+ 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
|
|
|
}
|
|
|
})
|
|
|
|
|
|
@@ -71,9 +162,199 @@ export default defineComponent({
|
|
|
})
|
|
|
|
|
|
/** 切换购买类型 */
|
|
|
- const onChangeTab = (type: string) => {
|
|
|
+ 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 {
|
|
|
+ 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
|
|
|
@@ -95,7 +376,17 @@ export default defineComponent({
|
|
|
<div class={styles.memberContainer}>
|
|
|
<i class={styles.showBrid}></i>
|
|
|
<div class={styles.userSection}>
|
|
|
- <div class={styles.userImgSection}>
|
|
|
+ <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}
|
|
|
@@ -111,137 +402,243 @@ export default defineComponent({
|
|
|
)}
|
|
|
</div>
|
|
|
<div class={styles.member_time}>
|
|
|
- 您已是<span>永久SVIP</span>
|
|
|
+ {userMemberStatus.value === 'PERMANENT' && (
|
|
|
+ <>
|
|
|
+ 您已是<span>永久SVIP</span>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ {userMemberStatus.value === 'VIP' && (
|
|
|
+ <>
|
|
|
+ 有效期至{' '}
|
|
|
+ {state.tabActive === 'VIP'
|
|
|
+ ? userInfo.value.userVip.vipEndDate
|
|
|
+ : userInfo.value.userVip.svipEndDate}
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ {userMemberStatus.value === 'EXPIREVIP' && (
|
|
|
+ <>
|
|
|
+ 您的{state.tabActive}已过期，续费后{state.tabActive}
|
|
|
+ 权益可继续使用
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ {userMemberStatus.value === 'NOT_VIP' && (
|
|
|
+ <>您还未开通{state.tabActive}会员哦～</>
|
|
|
+ )}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class={styles.memberSection}>
|
|
|
- {/* <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>
|
|
|
+ {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>
|
|
|
- <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>
|
|
|
+ </>
|
|
|
+ ) : 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 class={styles.svip_member_tip}></div>
|
|
|
</div>
|
|
|
- </div> */}
|
|
|
-
|
|
|
- <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>
|
|
|
+ ) : 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.vip_member_tip}></div>
|
|
|
</div>
|
|
|
- <div class={styles.vip_member_tip}></div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ ) : null}
|
|
|
|
|
|
{/* 判断是否有推荐老师 */}
|
|
|
- <div class={styles.memberDiscount}>
|
|
|
- <Image src={iconTeacher} class={styles.discountAvatar} />
|
|
|
+ {state.discountTeacher.discount == 1 && (
|
|
|
+ <div class={styles.memberDiscount}>
|
|
|
+ <Image
|
|
|
+ src={state.discountTeacher.avatar || iconTeacher}
|
|
|
+ class={styles.discountAvatar}
|
|
|
+ />
|
|
|
|
|
|
- <span class={styles.discountName}>
|
|
|
- {/* {this.discountTeacher.username} */}
|
|
|
- 王老师的<span>专属优惠～</span>
|
|
|
- </span>
|
|
|
+ <span class={styles.discountName}>
|
|
|
+ {state.discountTeacher.username}老师的<span>专属优惠～</span>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <Image src={iconGift} class={styles.discountGift} />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
|
|
|
- <Image src={iconGift} class={styles.discountGift} />
|
|
|
- </div>
|
|
|
{/* 选择会员模式 */}
|
|
|
<div class={styles.system_list_section}>
|
|
|
<div
|
|
|
class={[
|
|
|
styles['system-list'],
|
|
|
state.tabActive === 'VIP' ? styles.system_list_vip : '',
|
|
|
- styles.list_one
|
|
|
+ memberInfos.value.memberLength === 2 ? styles.list_two : '',
|
|
|
+ memberInfos.value.memberLength === 1 ? styles.list_one : ''
|
|
|
]}
|
|
|
>
|
|
|
- {/* <div class={[styles['system-item'], styles.active]}>
|
|
|
- <span class={[styles.iconPermanent]}></span>
|
|
|
-
|
|
|
- <p class={styles.s_title}>永久会员</p>
|
|
|
- <p class={styles.price}>
|
|
|
- <span>￥</span>
|
|
|
- {moneyFormat(998, '0,0[.]00')}
|
|
|
- </p>
|
|
|
- <del class={styles.originalPrice}>
|
|
|
- ￥{moneyFormat(1888, '0,0[.]00')}
|
|
|
- </del>
|
|
|
- </div>
|
|
|
- <div class={[styles['system-item']]}>
|
|
|
- <p class={styles.s_title}>年度会员</p>
|
|
|
- <p class={styles.price}>
|
|
|
- <span>￥</span>
|
|
|
- {moneyFormat(998, '0,0[.]00')}
|
|
|
- </p>
|
|
|
- <del class={styles.originalPrice}>
|
|
|
- ￥{moneyFormat(1888, '0,0[.]00')}
|
|
|
- </del>
|
|
|
- </div> */}
|
|
|
- {/* <div class={[styles['system-item']]}>
|
|
|
- <p class={styles.s_title}>月度会员</p>
|
|
|
- <p class={styles.price}>
|
|
|
- <span>￥</span>
|
|
|
- {moneyFormat(998, '0,0[.]00')}
|
|
|
- </p>
|
|
|
- <del class={styles.originalPrice}>
|
|
|
- ￥{moneyFormat(1888, '0,0[.]00')}
|
|
|
- </del>
|
|
|
-
|
|
|
- <p class={styles.extraTip}>每天约¥2</p>
|
|
|
- </div> */}
|
|
|
- {/* 一条数据的样式 */}
|
|
|
- <div class={[styles['system-item']]}>
|
|
|
- <span class={[styles.iconPermanent]}></span>
|
|
|
- <div class={styles.oneInfo}>
|
|
|
- <div class={styles.priceS}>
|
|
|
- <p class={styles.price}>
|
|
|
- <span>￥</span>
|
|
|
- {moneyFormat(998, '0,0[.]00')}
|
|
|
- </p>
|
|
|
- <p class={styles.s_title}>永久会员</p>
|
|
|
- </div>
|
|
|
- <div class={styles.oneMaxNum}>限量1000份</div>
|
|
|
- </div>
|
|
|
- <span class={[styles.oneBtn, styles.onBtnRenew]}></span>
|
|
|
+ {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>
|
|
|
+ )}
|
|
|
|
|
|
- <i class={styles.itemBg}></i>
|
|
|
- </div>
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <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>
|
|
|
@@ -251,9 +648,10 @@ export default defineComponent({
|
|
|
<Button
|
|
|
block
|
|
|
color="linear-gradient( 241deg, #FFD984 0%, #FFEAB9 100%)"
|
|
|
- class={styles.btn}
|
|
|
+ class={[styles.btn, isPermanent.value ? styles.btnDisabled : '']}
|
|
|
+ onClick={onSubmit}
|
|
|
>
|
|
|
- 立即续费
|
|
|
+ {btnSubmitText.value}
|
|
|
</Button>
|
|
|
</div>
|
|
|
</ColSticky>
|
|
|
@@ -281,6 +679,32 @@ export default defineComponent({
|
|
|
</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>
|
|
|
)
|
|
|
}
|
