|
|
@@ -1,406 +1,409 @@
|
|
|
-import ColHeader from '@/components/col-header'
|
|
|
-import { Button, Cell, Icon, Image, Popup, Toast } from 'vant'
|
|
|
-import { defineComponent } from 'vue'
|
|
|
-import styles from './index.module.less'
|
|
|
-import request from '@/helpers/request'
|
|
|
-import { setLogin, state } from '@/state'
|
|
|
-import iconStudent from '@common/images/icon_student.png'
|
|
|
-import iconTeacher from '@common/images/icon_teacher.png'
|
|
|
-import iconGift from './images/icon_gift.png'
|
|
|
-import iconShare from '../music/album/icon_share2.svg'
|
|
|
-import iconDiscount from './images/icon_discount.png'
|
|
|
-import iconMemberLogo from './images/member_logo.png'
|
|
|
-import { orderStatus } from '@/views/order-detail/orderStatus'
|
|
|
-import dayjs from 'dayjs'
|
|
|
-import { memberType } from '@/constant'
|
|
|
-import { moneyFormat } from '@/helpers/utils'
|
|
|
-import ColShare from '@/components/col-share'
|
|
|
-
|
|
|
-export const getAssetsHomeFile = (fileName: string) => {
|
|
|
- const path = `./images/${fileName}`
|
|
|
- const modules = import.meta.globEager('./images/*')
|
|
|
- return modules[path].default
|
|
|
-}
|
|
|
-
|
|
|
-export default defineComponent({
|
|
|
- name: 'MemberCenter',
|
|
|
- data() {
|
|
|
- const query = this.$route.query
|
|
|
- return {
|
|
|
- activityId: query.activityId,
|
|
|
- recomUserId: query.recomUserId,
|
|
|
- apiSuffix:
|
|
|
- state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher',
|
|
|
- agreeStatus: false,
|
|
|
- functionList: [],
|
|
|
- memberList: [],
|
|
|
- selectMember: {} as any,
|
|
|
- params: {
|
|
|
- page: 1,
|
|
|
- rows: 20
|
|
|
- },
|
|
|
- discountTeacher: {
|
|
|
- avatar: '',
|
|
|
- discount: 0,
|
|
|
- username: ''
|
|
|
- },
|
|
|
- shareStatus: false,
|
|
|
- shareUrl: '',
|
|
|
- shareDiscount: 0 // 是否有优惠活动
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- userInfo() {
|
|
|
- const users = state.user.data
|
|
|
- return {
|
|
|
- username: users?.username,
|
|
|
- phone: users?.phone,
|
|
|
- avatar: users?.heardUrl,
|
|
|
- id: users?.userId,
|
|
|
- memberRankSettingId: users?.memberRankSettingId,
|
|
|
- isVip: users?.isVip,
|
|
|
- membershipDays: users?.membershipDays,
|
|
|
- membershipEndTime: users?.membershipEndTime
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- async mounted() {
|
|
|
- try {
|
|
|
- const userInfo = await request.get(
|
|
|
- state.platformType === 'TEACHER'
|
|
|
- ? '/api-teacher/teacher/queryUserInfo'
|
|
|
- : '/api-student/student/queryUserInfo'
|
|
|
- )
|
|
|
- setLogin(userInfo.data)
|
|
|
-
|
|
|
- const res = await request.post(
|
|
|
- `${this.apiSuffix}/memberPriceSettings/vipPermissions`
|
|
|
- )
|
|
|
- const result = res.data || []
|
|
|
- this.functionList = result.map((item: any) => {
|
|
|
- return {
|
|
|
- title: item.paramName,
|
|
|
- icon: getAssetsHomeFile(`${item.paramValue}.png`)
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- const setting = await request.post(
|
|
|
- `${this.apiSuffix}/memberPriceSettings/list`,
|
|
|
- {
|
|
|
- data: {
|
|
|
- activityId: Number(this.activityId),
|
|
|
- userId: this.recomUserId
|
|
|
- }
|
|
|
- }
|
|
|
- )
|
|
|
- const { list, ...more } = setting.data
|
|
|
- this.discountTeacher = {
|
|
|
- ...more
|
|
|
- }
|
|
|
- const settingResult = list || []
|
|
|
- let settingList: any = []
|
|
|
- settingResult.forEach((item: any) => {
|
|
|
- const tempItem = {
|
|
|
- title: '',
|
|
|
- salePrice: item.salePrice,
|
|
|
- originalPrice: item.originalPrice,
|
|
|
- period: item.period,
|
|
|
- id: item.id,
|
|
|
- discount: item.discount,
|
|
|
- discountPrice: item.discountPrice,
|
|
|
- status: false
|
|
|
- }
|
|
|
-
|
|
|
- tempItem.title = memberType[item.period]
|
|
|
-
|
|
|
- item.period !== 'DAY' && settingList.push(tempItem)
|
|
|
- })
|
|
|
-
|
|
|
- settingList = settingList ? settingList.reverse() : []
|
|
|
- if (settingList.length > 0) {
|
|
|
- settingList[0].status = true
|
|
|
- this.selectMember = settingList[0]
|
|
|
- }
|
|
|
- console.log(settingList)
|
|
|
- this.memberList = settingList
|
|
|
- } catch {}
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async onShare() {
|
|
|
- try {
|
|
|
- const res = await request.post('/api-teacher/open/vipProfit', {
|
|
|
- data: {
|
|
|
- userId: this.userInfo.id
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- this.shareUrl = `${location.origin}/teacher#/shareVip?recomUserId=${this.userInfo.id}&userType=${state.platformType}`
|
|
|
- // 判断是否有我分享的编号
|
|
|
- if (res.data && res.data.activityId) {
|
|
|
- this.shareUrl = this.shareUrl + '&activityId=' + res.data.activityId
|
|
|
- }
|
|
|
- this.shareStatus = true
|
|
|
- this.shareDiscount = res.data.discount || 0
|
|
|
- // let url =
|
|
|
- // location.origin +
|
|
|
- // `/accompany/colexiu-share.html?id=${moreData.value.id}&recomUserId=${state.user.data?.userId}`
|
|
|
- // // 判断是否有活动
|
|
|
- // if (res.data.discount === 1) {
|
|
|
- // url += `&activityId=${res.data.activityId}`
|
|
|
- // }
|
|
|
- // shareDiscount.value = res.data.discount || 0
|
|
|
- // shareUrl.value = url
|
|
|
- // isMore.value = false
|
|
|
- // shareStatus.value = true
|
|
|
- return
|
|
|
- } catch {}
|
|
|
- },
|
|
|
- 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
|
|
|
- },
|
|
|
- onSubmit() {
|
|
|
- const member: any = this.selectMember
|
|
|
- // 判断是否有会员
|
|
|
- const startTime = this.userInfo.isVip
|
|
|
- ? dayjs(this.userInfo.membershipEndTime).toDate()
|
|
|
- : new Date()
|
|
|
- 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 = 'VIP'
|
|
|
- orderStatus.orderObject.orderName = '小酷Ai' + member.title
|
|
|
- orderStatus.orderObject.orderDesc = '小酷Ai' + member.title
|
|
|
- orderStatus.orderObject.actualPrice = this.calcSalePrice(member)
|
|
|
- orderStatus.orderObject.recomUserId = this.recomUserId
|
|
|
- orderStatus.orderObject.activityId = this.activityId
|
|
|
- orderStatus.orderObject.orderNo = ''
|
|
|
- orderStatus.orderObject.orderList = [
|
|
|
- {
|
|
|
- orderType: 'VIP',
|
|
|
- goodsName: '小酷Ai' + member.title,
|
|
|
- id: member.id,
|
|
|
- title: member.title,
|
|
|
- price: this.calcSalePrice(member),
|
|
|
- startTime: dayjs(startTime).format('YYYY-MM-DD'),
|
|
|
- endTime: dayjs(endTime).format('YYYY-MM-DD'),
|
|
|
- recomUserId: this.recomUserId
|
|
|
- }
|
|
|
- ]
|
|
|
- this.$router.push({
|
|
|
- path: '/orderDetail',
|
|
|
- query: {
|
|
|
- orderType: 'VIP'
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- render() {
|
|
|
- return (
|
|
|
- <div class={styles['member-center']}>
|
|
|
- <ColHeader
|
|
|
- background="#ffe5cc"
|
|
|
- v-slots={{
|
|
|
- right: () => (
|
|
|
- <div class={styles.shareBtn} onClick={this.onShare}>
|
|
|
- <Image src={iconShare} />
|
|
|
- 分享
|
|
|
- </div>
|
|
|
- )
|
|
|
- }}
|
|
|
- />
|
|
|
- <div class={styles.member_container}>
|
|
|
- <Cell
|
|
|
- class={styles.userMember}
|
|
|
- labelClass={styles.timeRemaining}
|
|
|
- v-slots={{
|
|
|
- icon: () => (
|
|
|
- <div class={styles.userImgSection}>
|
|
|
- <Image
|
|
|
- class={styles.userImg}
|
|
|
- src={this.userInfo.avatar || iconStudent}
|
|
|
- fit="cover"
|
|
|
- />
|
|
|
- </div>
|
|
|
- ),
|
|
|
- title: () => (
|
|
|
- <div class={styles.userInfo}>
|
|
|
- <span class={styles.name}>{this.userInfo.username}</span>
|
|
|
- {!!this.userInfo.isVip && (
|
|
|
- <Image
|
|
|
- class={styles.level}
|
|
|
- src="https://daya.ks3-cn-beijing.ksyun.com/202107/ScSTL1D.png"
|
|
|
- />
|
|
|
- )}
|
|
|
- <span
|
|
|
- class={styles.phone}
|
|
|
- v-html={`（${this.userInfo.phone}）`}
|
|
|
- ></span>
|
|
|
- </div>
|
|
|
- ),
|
|
|
- label: () => (
|
|
|
- <div class={styles.member_time}>
|
|
|
- {this.userInfo.isVip ? (
|
|
|
- <div>
|
|
|
- 会员权益有效期剩余
|
|
|
- <span class={styles.remaining}>
|
|
|
- {this.userInfo.membershipDays}
|
|
|
- </span>
|
|
|
- 天
|
|
|
- </div>
|
|
|
- ) : (
|
|
|
- <div>亲，您还不是会员哟</div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- )
|
|
|
- }}
|
|
|
- ></Cell>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class={styles.memberContainer}>
|
|
|
- <div class={styles.memberItem}>
|
|
|
- <div class={styles.title}>
|
|
|
- 会员<span>VIP</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- {/* 判断是否有推荐老师 */}
|
|
|
- {this.discountTeacher.discount == 1 && (
|
|
|
- <div class={styles.memberDiscount}>
|
|
|
- <Image
|
|
|
- src={this.discountTeacher.avatar || iconTeacher}
|
|
|
- class={styles.discountAvatar}
|
|
|
- />
|
|
|
-
|
|
|
- <span class={styles.discountName}>
|
|
|
- {this.discountTeacher.username}老师的专属优惠～
|
|
|
- </span>
|
|
|
-
|
|
|
- <Image src={iconGift} class={styles.discountGift} />
|
|
|
- </div>
|
|
|
- )}
|
|
|
-
|
|
|
- <div class={styles['system-list']}>
|
|
|
- {this.memberList.map((item: any) => (
|
|
|
- <div
|
|
|
- class={[styles['system-item'], item.status && styles.active]}
|
|
|
- onClick={() => {
|
|
|
- this.memberList.forEach((item: any) => {
|
|
|
- item.status = false
|
|
|
- })
|
|
|
- item.status = true
|
|
|
- this.selectMember = item
|
|
|
- }}
|
|
|
- >
|
|
|
- <div class={styles.discountItem}>
|
|
|
- {item.discount == 1 && <img src={iconDiscount} />}
|
|
|
- </div>
|
|
|
- <p class={styles.title}>{item.title}</p>
|
|
|
- <p class={styles.price}>
|
|
|
- <span>￥</span>
|
|
|
- {moneyFormat(this.calcSalePrice(item), '0,0[.]00')}
|
|
|
- </p>
|
|
|
- <del class={styles.originalPrice}>
|
|
|
- ￥{moneyFormat(item.originalPrice, '0,0[.]00')}
|
|
|
- </del>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <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>
|
|
|
- )}
|
|
|
-
|
|
|
- {/* <ColProtocol
|
|
|
- v-model={this.agreeStatus}
|
|
|
- showHeader
|
|
|
- style={{ paddingLeft: 0, paddingRight: 0, marginBottom: '64px' }}
|
|
|
- /> */}
|
|
|
- </div>
|
|
|
- <div class={styles.btnGroup}>
|
|
|
- <div class={styles.priceSection}>
|
|
|
- 支付金额：
|
|
|
- <div class={styles.price}>
|
|
|
- <span class={styles.priceUnit}>￥</span>
|
|
|
- <span class={styles.priceNum}>
|
|
|
- {(this as any).$filters.moneyFormat(
|
|
|
- this.calcSalePrice(this.selectMember) || 0
|
|
|
- )}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- {this.selectMember?.discount == 1 && (
|
|
|
- <div class={[styles.discountItem, styles.discountBuy]}>
|
|
|
- <img src={iconDiscount} />
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- <Button
|
|
|
- color="linear-gradient(220deg, #DFA164 0%, #FAC87E 100%)"
|
|
|
- round
|
|
|
- class={styles.btn}
|
|
|
- onClick={this.onSubmit}
|
|
|
- >
|
|
|
- 立即支付
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <Popup
|
|
|
- v-model:show={this.shareStatus}
|
|
|
- style={{ background: 'transparent' }}
|
|
|
- >
|
|
|
- <ColShare
|
|
|
- teacherId={this.userInfo.id}
|
|
|
- shareUrl={this.shareUrl}
|
|
|
- shareType="vip"
|
|
|
- shareLength={2}
|
|
|
- >
|
|
|
- <div class={styles.shareVip}>
|
|
|
- {this.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>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
-})
|
|
|
+import ColHeader from '@/components/col-header'
|
|
|
+import { Button, Cell, Icon, Image, Popup, Toast } from 'vant'
|
|
|
+import { defineComponent } from 'vue'
|
|
|
+import styles from './index.module.less'
|
|
|
+import request from '@/helpers/request'
|
|
|
+import { setLogin, state } from '@/state'
|
|
|
+import iconStudent from '@common/images/icon_student.png'
|
|
|
+import iconTeacher from '@common/images/icon_teacher.png'
|
|
|
+import iconGift from './images/icon_gift.png'
|
|
|
+import iconShare from '../music/album/icon_share2.svg'
|
|
|
+import iconDiscount from './images/icon_discount.png'
|
|
|
+import iconMemberLogo from './images/member_logo.png'
|
|
|
+import { orderStatus } from '@/views/order-detail/orderStatus'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import { memberType } from '@/constant'
|
|
|
+import { moneyFormat } from '@/helpers/utils'
|
|
|
+import ColShare from '@/components/col-share'
|
|
|
+
|
|
|
+export const getAssetsHomeFile = (fileName: string) => {
|
|
|
+ const path = `./images/${fileName}`
|
|
|
+ const modules = import.meta.globEager('./images/*')
|
|
|
+ return modules[path].default
|
|
|
+}
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'MemberCenter',
|
|
|
+ data() {
|
|
|
+ const query = this.$route.query
|
|
|
+ return {
|
|
|
+ activityId: query.activityId,
|
|
|
+ recomUserId: query.recomUserId,
|
|
|
+ apiSuffix:
|
|
|
+ state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher',
|
|
|
+ agreeStatus: false,
|
|
|
+ functionList: [],
|
|
|
+ memberList: [],
|
|
|
+ selectMember: {} as any,
|
|
|
+ params: {
|
|
|
+ page: 1,
|
|
|
+ rows: 20
|
|
|
+ },
|
|
|
+ discountTeacher: {
|
|
|
+ avatar: '',
|
|
|
+ discount: 0,
|
|
|
+ username: ''
|
|
|
+ },
|
|
|
+ shareStatus: false,
|
|
|
+ shareUrl: '',
|
|
|
+ shareDiscount: 0 // 是否有优惠活动
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ userInfo() {
|
|
|
+ const users = state.user.data
|
|
|
+ return {
|
|
|
+ username: users?.username,
|
|
|
+ phone: users?.phone,
|
|
|
+ avatar: users?.heardUrl,
|
|
|
+ id: users?.userId,
|
|
|
+ memberRankSettingId: users?.memberRankSettingId,
|
|
|
+ isVip: users?.isVip,
|
|
|
+ membershipDays: users?.membershipDays,
|
|
|
+ membershipEndTime: users?.membershipEndTime
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ try {
|
|
|
+ const userInfo = await request.get(
|
|
|
+ state.platformType === 'TEACHER'
|
|
|
+ ? '/api-teacher/teacher/queryUserInfo'
|
|
|
+ : '/api-student/student/queryUserInfo'
|
|
|
+ )
|
|
|
+ setLogin(userInfo.data)
|
|
|
+
|
|
|
+ const res = await request.post(
|
|
|
+ `${this.apiSuffix}/memberPriceSettings/vipPermissions`
|
|
|
+ )
|
|
|
+ const result = res.data || []
|
|
|
+ this.functionList = result.map((item: any) => {
|
|
|
+ return {
|
|
|
+ title: item.paramName,
|
|
|
+ icon: getAssetsHomeFile(`${item.paramValue}.png`)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const setting = await request.post(
|
|
|
+ `${this.apiSuffix}/memberPriceSettings/list`,
|
|
|
+ {
|
|
|
+ data: {
|
|
|
+ activityId: Number(this.activityId),
|
|
|
+ userId: this.recomUserId
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ const { list, ...more } = setting.data
|
|
|
+ this.discountTeacher = {
|
|
|
+ ...more
|
|
|
+ }
|
|
|
+ const settingResult = list || []
|
|
|
+ let settingList: any = []
|
|
|
+ settingResult.forEach((item: any) => {
|
|
|
+ const tempItem = {
|
|
|
+ title: '',
|
|
|
+ salePrice: item.salePrice,
|
|
|
+ originalPrice: item.originalPrice,
|
|
|
+ period: item.period,
|
|
|
+ id: item.id,
|
|
|
+ discount: item.discount,
|
|
|
+ discountPrice: item.discountPrice,
|
|
|
+ status: false
|
|
|
+ }
|
|
|
+
|
|
|
+ tempItem.title = memberType[item.period]
|
|
|
+
|
|
|
+ item.period !== 'DAY' && settingList.push(tempItem)
|
|
|
+ })
|
|
|
+
|
|
|
+ settingList = settingList ? settingList.reverse() : []
|
|
|
+ if (settingList.length > 0) {
|
|
|
+ settingList[0].status = true
|
|
|
+ this.selectMember = settingList[0]
|
|
|
+ }
|
|
|
+ console.log(settingList)
|
|
|
+ this.memberList = settingList
|
|
|
+ } catch {}
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async onShare() {
|
|
|
+ try {
|
|
|
+ const res = await request.post('/api-teacher/open/vipProfit', {
|
|
|
+ data: {
|
|
|
+ userId: this.userInfo.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.shareUrl = `${location.origin}/teacher#/shareVip?recomUserId=${this.userInfo.id}&userType=${state.platformType}`
|
|
|
+ // 判断是否有我分享的编号
|
|
|
+ if (res.data && res.data.activityId) {
|
|
|
+ this.shareUrl = this.shareUrl + '&activityId=' + res.data.activityId
|
|
|
+ }
|
|
|
+ this.shareStatus = true
|
|
|
+ this.shareDiscount = res.data.discount || 0
|
|
|
+ // let url =
|
|
|
+ // location.origin +
|
|
|
+ // `/accompany/colexiu-share.html?id=${moreData.value.id}&recomUserId=${state.user.data?.userId}`
|
|
|
+ // // 判断是否有活动
|
|
|
+ // if (res.data.discount === 1) {
|
|
|
+ // url += `&activityId=${res.data.activityId}`
|
|
|
+ // }
|
|
|
+ // shareDiscount.value = res.data.discount || 0
|
|
|
+ // shareUrl.value = url
|
|
|
+ // isMore.value = false
|
|
|
+ // shareStatus.value = true
|
|
|
+ return
|
|
|
+ } catch {}
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ onSubmit() {
|
|
|
+ const member: any = this.selectMember
|
|
|
+ // 判断是否有会员
|
|
|
+ const startTime = this.userInfo.isVip
|
|
|
+ ? dayjs(this.userInfo.membershipEndTime).toDate()
|
|
|
+ : new Date()
|
|
|
+ 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 = 'VIP'
|
|
|
+ orderStatus.orderObject.orderName = '小酷Ai' + member.title
|
|
|
+ orderStatus.orderObject.orderDesc = '小酷Ai' + member.title
|
|
|
+ orderStatus.orderObject.actualPrice = this.calcSalePrice(member)
|
|
|
+ orderStatus.orderObject.recomUserId = this.recomUserId
|
|
|
+ orderStatus.orderObject.activityId = this.activityId
|
|
|
+ orderStatus.orderObject.orderNo = ''
|
|
|
+ orderStatus.orderObject.orderList = [
|
|
|
+ {
|
|
|
+ orderType: 'VIP',
|
|
|
+ goodsName: '小酷Ai' + member.title,
|
|
|
+ id: member.id,
|
|
|
+ title: member.title,
|
|
|
+ price: this.calcSalePrice(member),
|
|
|
+ startTime: dayjs(startTime).format('YYYY-MM-DD'),
|
|
|
+ endTime: dayjs(endTime).format('YYYY-MM-DD'),
|
|
|
+ recomUserId: this.recomUserId
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.$router.push({
|
|
|
+ path: '/orderDetail',
|
|
|
+ query: {
|
|
|
+ orderType: 'VIP'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <div class={styles['member-center']}>
|
|
|
+ <ColHeader
|
|
|
+ background="#ffe5cc"
|
|
|
+ v-slots={{
|
|
|
+ right: () => (
|
|
|
+ <div class={styles.shareBtn} onClick={this.onShare}>
|
|
|
+ <Image src={iconShare} />
|
|
|
+ 分享
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <div class={styles.member_container}>
|
|
|
+ <Cell
|
|
|
+ class={styles.userMember}
|
|
|
+ labelClass={styles.timeRemaining}
|
|
|
+ v-slots={{
|
|
|
+ icon: () => (
|
|
|
+ <div class={styles.userImgSection}>
|
|
|
+ <Image
|
|
|
+ class={styles.userImg}
|
|
|
+ src={this.userInfo.avatar || iconStudent}
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ title: () => (
|
|
|
+ <div class={styles.userInfo}>
|
|
|
+ <span class={styles.name}>{this.userInfo.username}</span>
|
|
|
+ {!!this.userInfo.isVip && (
|
|
|
+ <Image
|
|
|
+ class={styles.level}
|
|
|
+ src="https://daya.ks3-cn-beijing.ksyun.com/202107/ScSTL1D.png"
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ <span
|
|
|
+ class={styles.phone}
|
|
|
+ v-html={`（${this.userInfo.phone}）`}
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ label: () => (
|
|
|
+ <div class={styles.member_time}>
|
|
|
+ {this.userInfo.isVip ? (
|
|
|
+ <div>
|
|
|
+ 会员权益有效期剩余
|
|
|
+ <span class={styles.remaining}>
|
|
|
+ {this.userInfo.membershipDays}
|
|
|
+ </span>
|
|
|
+ 天
|
|
|
+ </div>
|
|
|
+ ) : !this.userInfo.isVip &&
|
|
|
+ this.userInfo.membershipEndTime ? (
|
|
|
+ <div>您的会员已过期，续费后会员权益可继续使用</div>
|
|
|
+ ) : (
|
|
|
+ <div>亲，您还不是会员哦~</div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ ></Cell>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.memberContainer}>
|
|
|
+ <div class={styles.memberItem}>
|
|
|
+ <div class={styles.title}>
|
|
|
+ 会员<span>VIP</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 判断是否有推荐老师 */}
|
|
|
+ {this.discountTeacher.discount == 1 && (
|
|
|
+ <div class={styles.memberDiscount}>
|
|
|
+ <Image
|
|
|
+ src={this.discountTeacher.avatar || iconTeacher}
|
|
|
+ class={styles.discountAvatar}
|
|
|
+ />
|
|
|
+
|
|
|
+ <span class={styles.discountName}>
|
|
|
+ {this.discountTeacher.username}老师的专属优惠～
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <Image src={iconGift} class={styles.discountGift} />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ <div class={styles['system-list']}>
|
|
|
+ {this.memberList.map((item: any) => (
|
|
|
+ <div
|
|
|
+ class={[styles['system-item'], item.status && styles.active]}
|
|
|
+ onClick={() => {
|
|
|
+ this.memberList.forEach((item: any) => {
|
|
|
+ item.status = false
|
|
|
+ })
|
|
|
+ item.status = true
|
|
|
+ this.selectMember = item
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div class={styles.discountItem}>
|
|
|
+ {item.discount == 1 && <img src={iconDiscount} />}
|
|
|
+ </div>
|
|
|
+ <p class={styles.title}>{item.title}</p>
|
|
|
+ <p class={styles.price}>
|
|
|
+ <span>￥</span>
|
|
|
+ {moneyFormat(this.calcSalePrice(item), '0,0[.]00')}
|
|
|
+ </p>
|
|
|
+ <del class={styles.originalPrice}>
|
|
|
+ ￥{moneyFormat(item.originalPrice, '0,0[.]00')}
|
|
|
+ </del>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <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>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* <ColProtocol
|
|
|
+ v-model={this.agreeStatus}
|
|
|
+ showHeader
|
|
|
+ style={{ paddingLeft: 0, paddingRight: 0, marginBottom: '64px' }}
|
|
|
+ /> */}
|
|
|
+ </div>
|
|
|
+ <div class={styles.btnGroup}>
|
|
|
+ <div class={styles.priceSection}>
|
|
|
+ 支付金额：
|
|
|
+ <div class={styles.price}>
|
|
|
+ <span class={styles.priceUnit}>￥</span>
|
|
|
+ <span class={styles.priceNum}>
|
|
|
+ {(this as any).$filters.moneyFormat(
|
|
|
+ this.calcSalePrice(this.selectMember) || 0
|
|
|
+ )}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ {this.selectMember?.discount == 1 && (
|
|
|
+ <div class={[styles.discountItem, styles.discountBuy]}>
|
|
|
+ <img src={iconDiscount} />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ <Button
|
|
|
+ color="linear-gradient(220deg, #DFA164 0%, #FAC87E 100%)"
|
|
|
+ round
|
|
|
+ class={styles.btn}
|
|
|
+ onClick={this.onSubmit}
|
|
|
+ >
|
|
|
+ 立即支付
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Popup
|
|
|
+ v-model:show={this.shareStatus}
|
|
|
+ style={{ background: 'transparent' }}
|
|
|
+ >
|
|
|
+ <ColShare
|
|
|
+ teacherId={this.userInfo.id}
|
|
|
+ shareUrl={this.shareUrl}
|
|
|
+ shareType="vip"
|
|
|
+ shareLength={2}
|
|
|
+ >
|
|
|
+ <div class={styles.shareVip}>
|
|
|
+ {this.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>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|
