lex пре 1 година
родитељ
комит
84205d104a

+ 55 - 23
src/tenant/exercise-record/exercis-detail.tsx

@@ -125,12 +125,42 @@ export default defineComponent({
         membershipEndTime: users?.membershipEndTime
       }
     })
+
+    // 初始化周一
+    const formatWeekDays = (time?: any) => {
+      const week = dayjs(time).day()
+      let startTime = ''
+      let endTime = ''
+      if (week === 0) {
+        // 星期天
+        startTime = dayjs(time).subtract(6, 'day').format('YYYY-MM-DD')
+        endTime = dayjs(time).format('YYYY-MM-DD')
+      } else if (week === 1) {
+        // 星期一
+        startTime = dayjs(time).format('YYYY-MM-DD')
+        endTime = dayjs(time).add(6, 'day').format('YYYY-MM-DD')
+      } else {
+        startTime = dayjs(time)
+          .subtract(week - 1, 'day')
+          .format('YYYY-MM-DD')
+        endTime = dayjs(time)
+          .add(7 - week, 'day')
+          .format('YYYY-MM-DD')
+      }
+      return {
+        startTime,
+        endTime
+      }
+    }
+
     const forms = reactive({
-      startTime: dayjs().day(1).format('YYYY-MM-DD'),
-      endTime: dayjs().day(7).format('YYYY-MM-DD'),
+      // startTime: dayjs().day(0).format('YYYY-MM-DD'),
+      // endTime: dayjs().day(6).format('YYYY-MM-DD'),
+      ...formatWeekDays(),
       page: 1,
       rows: 20
     })
+
     const refreshing = ref(false)
     const loading = ref(false)
     const finished = ref(false)
@@ -400,27 +430,29 @@ export default defineComponent({
                 dayjs(forms.endTime)
               )
             ) {
-              const week = dayjs(item[0]).day()
-              if (week === 0) {
-                // 星期天
-                forms.startTime = dayjs(item[0])
-                  .subtract(6, 'day')
-                  .format('YYYY-MM-DD')
-                forms.endTime = dayjs(item[0]).format('YYYY-MM-DD')
-              } else if (week === 1) {
-                // 星期一
-                forms.startTime = dayjs(item[0]).format('YYYY-MM-DD')
-                forms.endTime = dayjs(item[0])
-                  .add(6, 'day')
-                  .format('YYYY-MM-DD')
-              } else {
-                forms.startTime = dayjs(item[0])
-                  .subtract(week - 1, 'day')
-                  .format('YYYY-MM-DD')
-                forms.endTime = dayjs(item[0])
-                  .add(7 - week, 'day')
-                  .format('YYYY-MM-DD')
-              }
+              const times = formatWeekDays(item[0])
+              forms.startTime = times.startTime
+              forms.endTime = times.endTime
+              // if (week === 0) {
+              //   // 星期天
+              //   forms.startTime = dayjs(item[0])
+              //     .subtract(6, 'day')
+              //     .format('YYYY-MM-DD')
+              //   forms.endTime = dayjs(item[0]).format('YYYY-MM-DD')
+              // } else if (week === 1) {
+              //   // 星期一
+              //   forms.startTime = dayjs(item[0]).format('YYYY-MM-DD')
+              //   forms.endTime = dayjs(item[0])
+              //     .add(6, 'day')
+              //     .format('YYYY-MM-DD')
+              // } else {
+              //   forms.startTime = dayjs(item[0])
+              //     .subtract(week - 1, 'day')
+              //     .format('YYYY-MM-DD')
+              //   forms.endTime = dayjs(item[0])
+              //     .add(7 - week, 'day')
+              //     .format('YYYY-MM-DD')
+              // }
             }
             state.showPopoverTime = false
             refreshing.value = true

+ 1 - 0
src/tenant/member-center/index.module.less

@@ -149,6 +149,7 @@
     padding-left: 26px;
     font-size: 13px;
     color: #742626;
+    position: relative;
 
     &::after {
       content: ' ';

+ 3 - 1
src/tenant/member-center/index.tsx

@@ -280,8 +280,10 @@ export default defineComponent({
                 </span>
               </div>
+            ) : !this.userInfo.isVip && this.userInfo.membershipEndTime ? (
+              <div>您的会员已过期,续费后会员权益可继续使用</div>
             ) : (
-              <div>亲,您还不是平台会员哦</div>
+              <div>亲,您还不是会员哦~</div>
             )}
           </div>
         </div>

+ 409 - 406
src/views/member-center/index.tsx

@@ -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>
+    )
+  }
+})