添加会员购买页面

src/components/col-share/share-item.tsx

@@ -53,7 +53,7 @@ export default defineComponent({
       } else if (this.shareType === 'mall') {
         return '这件商品挺不错！推荐给你～'
       } else if (this.shareType === 'vip') {
-        return '小酷Ai智能陪练VIP！推荐给你~'
+        return '小酷Ai智能陪练！推荐给你~'
       } else if (this.shareType === 'album') {
         return '更多曲目扫码下载酷乐秀查看'
       } else {

src/views/member-center/components/member-interes/index.module.less

@@ -0,0 +1,37 @@
+.member_insteres {
+  padding: 0 16px;
+
+  .title {
+    height: 28px;
+    text-align: center;
+    padding: 16px 0;
+
+    img {
+      height: inherit;
+      width: auto;
+    }
+  }
+
+  img {
+    width: 100%;
+  }
+
+  .intro {
+    img {
+      margin-bottom: 4px;
+
+      &:last-child {
+        margin-bottom: 0px;
+      }
+    }
+  }
+
+  .introVip {
+    line-height: 0;
+
+    img {
+      margin-bottom: 0;
+
+    }
+  }
+}

src/views/member-center/components/member-interes/index.tsx

@@ -0,0 +1,65 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import title1 from '../../new-images/icon-title-1.png'
+import title2 from '../../new-images/icon-title-2.png'
+import title3 from '../../new-images/icon-title-3.png'
+import iconEquity from '../../new-images/icon-equity-bg.png'
+import sVip1 from '../../new-images/svip-fun-1.png'
+import sVip2 from '../../new-images/svip-fun-2.png'
+import sVip3 from '../../new-images/svip-fun-3.png'
+import sVip4 from '../../new-images/svip-fun-4.png'
+import sVipQuestion from '../../new-images/svip-question-bg.png'
+import vip1 from '../../new-images/vip-fun-1.png'
+import vip2 from '../../new-images/vip-fun-2.png'
+import vip3 from '../../new-images/vip-fun-3.png'
+import vipQuestion from '../../new-images/vip-question-bg.png'
+
+export default defineComponent({
+  name: 'member-insteres',
+  props: {
+    type: {
+      type: String,
+      default: 'VIP'
+    }
+  },
+  setup(props) {
+    return () => (
+      <div class={styles.member_insteres}>
+        <div class={styles.title}>
+          <img src={title3} />
+        </div>
+
+        <img src={iconEquity} />
+
+        <div class={styles.title}>
+          <img src={title1} />
+        </div>
+
+        {props.type === 'SVIP' ? (
+          <div class={styles.intro}>
+            <img src={sVip1} />
+            <img src={sVip2} />
+            <img src={sVip3} />
+            <img src={sVip4} />
+          </div>
+        ) : (
+          <div class={[styles.intro, styles.introVip]}>
+            <img src={vip1} />
+            <img src={vip2} />
+            <img src={vip3} />
+          </div>
+        )}
+
+        <div class={styles.title}>
+          <img src={title2} />
+        </div>
+
+        {props.type === 'SVIP' ? (
+          <img src={sVipQuestion} />
+        ) : (
+          <img src={vipQuestion} />
+        )}
+      </div>
+    )
+  }
+})

src/views/member-center/index copy.tsx

@@ -0,0 +1,419 @@
+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://oss.dayaedu.com/daya/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
+                  }}
+                >
+                  {item.period === 'YEAR' && (
+                    <span class={[styles.bat]}>优惠</span>
+                  )}
+
+                  <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}
+          >
+            {this.userInfo.isVip ? (
+              <>立即续费</>
+            ) : !this.userInfo.isVip && this.userInfo.membershipEndTime ? (
+              <>立即续费</>
+            ) : (
+              <>立即支付</>
+            )}
+          </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>
+    )
+  }
+})

src/views/member-center/index.module copy.less

@@ -0,0 +1,437 @@
+.member-center {
+  background-color: #ffe5cc;
+  min-height: 100vh;
+  position: relative;
+
+  :global {
+    .van-nav-bar {
+      background-color: transparent;
+    }
+  }
+
+  .member_container {
+    padding: 10px 14px 0;
+
+    .title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      line-height: 28px;
+      font-weight: 500;
+      color: #333333;
+
+      &::before {
+        content: ' ';
+        width: 4px;
+        height: 17px;
+        background: #01c1b5;
+        display: inline-block;
+        margin-right: 7px;
+        border-radius: 8px;
+      }
+    }
+  }
+
+  .level {
+    width: 18px;
+    height: 16px;
+  }
+
+  .userMember {
+    background: url('./images/member_bg.png') no-repeat center #534754;
+    background-size: cover;
+    width: auto;
+    border-radius: 10px;
+    padding: 20px 12px 30px;
+
+    .userImgSection {
+      background-color: transparent;
+      margin-right: 12px;
+    }
+
+    .userImg {
+      padding: 2px;
+      border: 1px solid #feecd2;
+      border-radius: 50%;
+      vertical-align: middle;
+      overflow: hidden;
+
+      img {
+        width: 46px;
+        height: 46px;
+        border-radius: 50%;
+      }
+    }
+
+    .userInfo {
+      display: flex;
+      align-items: center;
+      color: #fff;
+      padding-bottom: 5px;
+
+      .name {
+        font-size: 18px;
+        padding-right: 5px;
+        max-width: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .phone {
+        font-size: 14px;
+      }
+    }
+
+    .timeRemaining {
+      margin-top: 0;
+      font-size: 14px;
+      color: #c0c0c0;
+
+      .remaining {
+        color: #f7b500;
+        padding: 0 5px;
+      }
+    }
+
+    .member_time {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
+  .intro {
+    background: url('./images/tip_bg.png') no-repeat center;
+    background-size: contain;
+    height: 142px;
+    font-size: 14px;
+    color: #bb6e3a;
+
+    p {
+      padding: 45px 25px 0;
+      text-align: justify;
+      line-height: 22px;
+    }
+  }
+
+  .memberContainer {
+    // height: calc(100vh - 196px);
+    // overflow-y: auto;
+    background-color: #fff;
+    border-radius: 18px 18px 0px 0px;
+    position: relative;
+    margin-top: -15px;
+    padding: 0 14px 75px;
+    z-index: 99;
+  }
+
+  .memberItem {
+    padding-top: 20px;
+
+    .title {
+      font-size: 16px;
+      color: #333333;
+      font-weight: 500;
+
+      span {
+        color: #f7b500;
+      }
+    }
+  }
+
+  .member_function {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .function_item__content {
+      height: 100%;
+    }
+
+    .function_item {
+      width: 80px;
+      padding: 12px 0;
+      margin-top: 8px;
+      border-radius: 8px;
+      overflow: hidden;
+      background-color: #faefe3;
+      text-align: center;
+    }
+
+    .function_text {
+      font-size: 12px;
+      color: #814014;
+      line-height: 16px;
+    }
+  }
+
+  .system-list::-webkit-scrollbar {
+    display: none;
+    /* Chrome Safari */
+  }
+
+  .system-list {
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    display: flex;
+    position: relative;
+    user-select: none;
+    box-sizing: content-box;
+    padding-top: 16px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+  }
+
+  .system-item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1 0 auto;
+    width: 96px;
+    min-height: 120px;
+    box-sizing: border-box;
+    background: #ffffff;
+    border-radius: 12px;
+    border: 1px solid #e5e5e5;
+    margin-left: 10px;
+
+    .bat {
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      padding: 2px 5px 1px;
+      background: linear-gradient(90deg, #FF7878 0%, #FF4343 100%);
+      border-radius: 11px 10px 10px 0px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 17px;
+    }
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+    }
+
+    .price {
+      color: #dc9362;
+      font-size: 25px;
+      line-height: 1.5;
+
+      span {
+        font-size: 16px;
+      }
+    }
+
+    .originalPrice {
+      color: #937059;
+      font-size: 13px;
+    }
+
+    &.active {
+      background: linear-gradient(215deg,
+          #ffe7c4 0%,
+          rgba(250, 211, 156, 0.21) 100%);
+      border: 1px solid #b1652e;
+      position: relative;
+
+      .title {
+        color: #814014;
+      }
+
+      .price {
+        color: #b1652e;
+      }
+
+      .originalPrice {
+        color: #937059;
+      }
+
+      &::before {
+        content: '\e728';
+        font: 14px/1 'vant-icon';
+        color: #fff;
+        background-color: #b1652e;
+        width: 27px;
+        height: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: -1px;
+        right: -1px;
+        border-radius: 0 12px 0 12px;
+      }
+
+      .bat {
+        background: linear-gradient(270deg, rgba(255, 255, 255, 0.33) 0%, rgba(254, 234, 205, 0.33) 100%);
+        border-radius: 11px 10px 10px 0px;
+        border: 1px solid rgba(177, 101, 46, 0.33);
+        border-left: 0;
+        border-top: 0;
+        color: #B1652E;
+      }
+    }
+  }
+
+  .btnGroup {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    justify-content: space-between;
+    border-top: 1px solid #f0f0f0;
+
+    .btn {
+      padding: 0 22px;
+      color: #7a3104 !important;
+    }
+
+    .priceSection {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      color: #1a1a1a;
+
+      .price {
+        font-size: 18px;
+        font-weight: bold;
+        color: #ff3535;
+
+        .priceUnit {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+
+.memberDiscount {
+  margin-top: 16px;
+  position: relative;
+  background: url('./images/discount_bg.png') no-repeat center;
+  background-size: contain;
+  display: flex;
+  align-items: center;
+  height: 44px;
+  font-size: 16px;
+  color: #ff7100;
+  line-height: 18px;
+
+  .discountAvatar {
+    margin-left: 15px;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 1px solid #ffaf59;
+  }
+
+  .discountName {
+    padding-left: 30px;
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .discountGift {
+    position: absolute;
+    right: 26px;
+    top: 7px;
+    width: 29px;
+    height: 29px;
+  }
+}
+
+.discountItem {
+  height: 14px;
+  padding-bottom: 2px;
+
+  img {
+    height: 100%;
+  }
+}
+
+.discountBuy {
+  height: 18px;
+  padding-bottom: 0;
+  margin-left: 8px;
+}
+
+.shareBtn {
+  display: flex;
+  align-items: flex-start;
+  color: #666;
+  font-size: 14px;
+  line-height: 20px !important;
+
+  :global(.van-image) {
+    width: 18px;
+    height: 18px;
+    margin-right: 6px;
+  }
+}
+
+.shareVip {
+  position: relative;
+  margin-top: 50px;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding: 11px 6px 11px;
+  background: #ffffff;
+  border-radius: 10px;
+
+  .icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+  }
+
+  .info {
+    margin-left: 6px;
+    flex: 1;
+    word-break: break-all;
+
+    >h4 {
+      color: var(--music-list-item-title-color);
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    >p {
+      color: var(--music-list-item-mate-color);
+      line-height: 17px;
+    }
+  }
+}
+
+.tagDiscount {
+  position: absolute;
+  top: -23px;
+  left: 15px;
+  padding: 0 10px;
+  height: 23px;
+  background: linear-gradient(180deg, #ffb635 0%, #ff4e18 100%);
+  border-radius: 8px 8px 0px 0px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 24px;
+}

src/views/member-center/index.module.less

@@ -1,342 +1,289 @@
-.member-center {
-  background-color: #ffe5cc;
+.memberCenter {
   min-height: 100vh;
-  position: relative;
+  background: url('./new-images/icon-banner.png') no-repeat top center;
+  background-size: contain;
+  box-sizing: border-box;
 
   :global {
-    .van-nav-bar {
-      background-color: transparent;
+    .van-nav-bar__left .van-icon {
+      color: #000000;
     }
   }
 
-  .member_container {
-    padding: 10px 14px 0;
-
-    .title {
-      display: flex;
-      align-items: center;
-      font-size: 16px;
-      line-height: 28px;
-      font-weight: 500;
-      color: #333333;
-
-      &::before {
-        content: ' ';
-        width: 4px;
-        height: 17px;
-        background: #01c1b5;
-        display: inline-block;
-        margin-right: 7px;
-        border-radius: 8px;
-      }
-    }
-  }
-
-  .level {
-    width: 18px;
+  .shareBtn {
+    width: 16px;
     height: 16px;
   }
+}
 
-  .userMember {
-    background: url('./images/member_bg.png') no-repeat center #534754;
-    background-size: cover;
-    width: auto;
-    border-radius: 10px;
-    padding: 20px 12px 30px;
+.userSection {
+  position: absolute;
+  top: 10px;
+  left: 16px;
+  display: flex;
+  align-items: center;
 
-    .userImgSection {
-      background-color: transparent;
-      margin-right: 12px;
-    }
+  .userImgSection {
+    position: relative;
+    width: 48px;
+    height: 48px;
+    margin-right: 13px;
+    flex-shrink: 0;
 
     .userImg {
-      padding: 2px;
-      border: 1px solid #feecd2;
+      width: 48px;
+      height: 48px;
       border-radius: 50%;
-      vertical-align: middle;
       overflow: hidden;
+      border: 1px solid #F2F6F7;
+    }
 
-      img {
-        width: 46px;
-        height: 46px;
-        border-radius: 50%;
-      }
+    .showMemeber {
+      position: absolute;
+      bottom: 1px;
+      right: -3px;
+      width: 18px;
+      height: 18px;
+      background: url('./new-images/icon-vip-disabled.png') no-repeat center;
+      background-size: contain;
     }
+  }
 
-    .userInfo {
+  .userInfo {
+    padding-top: 5px;
+
+    .userName {
       display: flex;
       align-items: center;
-      color: #fff;
-      padding-bottom: 5px;
-
-      .name {
-        font-size: 18px;
-        padding-right: 5px;
-        max-width: 100px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .phone {
-        font-size: 14px;
-      }
+      padding-bottom: 4px;
     }
 
-    .timeRemaining {
-      margin-top: 0;
-      font-size: 14px;
-      color: #c0c0c0;
+    .name {
+      font-weight: 500;
+      font-size: 18px;
+      color: #000000;
+      max-width: 90px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-      .remaining {
-        color: #f7b500;
-        padding: 0 5px;
-      }
+    .phone {
+      font-size: 13px;
+      color: #777777;
     }
 
     .member_time {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+      font-size: 12px;
+      color: #777777;
+
+      span {
+        color: #FF623A;
+      }
     }
   }
+}
+
+.memberContainer {
+  position: relative;
+  padding-top: 100px;
 
-  .intro {
-    background: url('./images/tip_bg.png') no-repeat center;
+  .showBrid {
+    position: absolute;
+    right: 0;
+    top: -17px;
+    display: inline-block;
+    width: 129px;
+    height: 144px;
+    background: url('./new-images/icon-banner-brid.png') no-repeat center;
     background-size: contain;
-    height: 142px;
-    font-size: 14px;
-    color: #bb6e3a;
-
-    p {
-      padding: 45px 25px 0;
-      text-align: justify;
-      line-height: 22px;
-    }
   }
+}
 
-  .memberContainer {
-    // height: calc(100vh - 196px);
-    // overflow-y: auto;
-    background-color: #fff;
-    border-radius: 18px 18px 0px 0px;
-    position: relative;
-    margin-top: -15px;
-    padding: 0 14px 75px;
-    z-index: 99;
+
+.shareVip {
+  position: relative;
+  margin-top: 50px;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding: 11px 6px 11px;
+  background: #ffffff;
+  border-radius: 10px;
+
+  .icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
   }
 
-  .memberItem {
-    padding-top: 20px;
+  .info {
+    margin-left: 6px;
+    flex: 1;
+    word-break: break-all;
 
-    .title {
-      font-size: 16px;
-      color: #333333;
-      font-weight: 500;
+    >h4 {
+      color: var(--music-list-item-title-color);
+      font-size: 14px;
+      font-weight: 600;
+    }
 
-      span {
-        color: #f7b500;
-      }
+    >p {
+      color: var(--music-list-item-mate-color);
+      line-height: 17px;
     }
   }
+}
 
-  .member_function {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
+.tagDiscount {
+  position: absolute;
+  top: -23px;
+  left: 15px;
+  padding: 0 10px;
+  height: 23px;
+  background: linear-gradient(180deg, #ffb635 0%, #ff4e18 100%);
+  border-radius: 8px 8px 0px 0px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 24px;
+}
 
-    .function_item__content {
-      height: 100%;
-    }
 
-    .function_item {
-      width: 80px;
-      padding: 12px 0;
-      margin-top: 8px;
-      border-radius: 8px;
-      overflow: hidden;
-      background-color: #faefe3;
-      text-align: center;
-    }
+.memberSection {
+  position: relative;
+  z-index: 1;
+  background: linear-gradient(179deg, #FFFFFF 0%, #FFFFFF 45%, #BEF5D8 70%, #CDF7CB 100%);
+  border-radius: 16px 16px 0px 0px;
+  padding-bottom: 10px;
+}
 
-    .function_text {
-      font-size: 12px;
-      color: #814014;
-      line-height: 16px;
-    }
+.member_tabs {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .member_tab {
+    flex: 1;
+    text-align: center;
+    padding: 12px 0;
+    cursor: pointer;
+    opacity: 0.3;
   }
 
-  .system-list::-webkit-scrollbar {
-    display: none;
-    /* Chrome Safari */
+  .member_tab_active {
+    opacity: 1;
   }
 
-  .system-list {
-    width: 100%;
-    overflow-x: auto;
-    overflow-y: hidden;
-    display: flex;
-    position: relative;
-    user-select: none;
-    box-sizing: content-box;
-    padding-top: 16px;
-    padding-bottom: 10px;
-    margin-bottom: 10px;
+  .icon_member {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    margin-right: 6px;
   }
 
-  .system-item {
+  .icon_text {
     position: relative;
+    margin-top: 3px;
+  }
+
+  .bottom_line {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -3px;
+    z-index: -1;
+    height: 7px;
+    width: 100%;
+    display: inline-block;
+  }
+
+  .top_tab {
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
-    flex: 1 0 auto;
-    width: 96px;
-    min-height: 120px;
-    box-sizing: border-box;
-    background: #ffffff;
-    border-radius: 12px;
-    border: 1px solid #e5e5e5;
-    margin-left: 10px;
+    padding-bottom: 5px;
+  }
 
-    .bat {
-      position: absolute;
-      top: -1px;
-      left: -1px;
-      padding: 2px 5px 1px;
-      background: linear-gradient(90deg, #FF7878 0%, #FF4343 100%);
-      border-radius: 11px 10px 10px 0px;
-      font-size: 12px;
-      font-weight: 600;
-      color: #FFFFFF;
-      line-height: 17px;
+  .vip_member_tip {
+    width: 71px;
+    height: 14px;
+    background: url('./new-images/vip-bottom-tip.png') no-repeat center;
+    background-size: contain;
+    display: inline-block;
+  }
+
+  .top_tab_vip {
+    .icon_member {
+      background: url('./new-images/icon-vip.png') no-repeat center;
+      background-size: contain;
     }
 
-    &:first-child {
-      margin-left: 0;
+    .icon_text {
+      background: url('./new-images/icon-vip-text.png') no-repeat center;
+      background-size: contain;
+      width: 59px;
+      height: 15px;
     }
 
-    .title {
-      font-size: 14px;
-      font-weight: 500;
-      color: #333333;
-      line-height: 20px;
+    .bottom_line {
+      background: url('./new-images/icon-vip-bottom-line.png') no-repeat center;
+      background-size: contain;
     }
+  }
 
-    .price {
-      color: #dc9362;
-      font-size: 25px;
-      line-height: 1.5;
+  .svip_member_tip {
+    width: 122px;
+    height: 14px;
+    background: url('./new-images/svip-bottom-tip.png') no-repeat center;
+    background-size: contain;
+    display: inline-block;
+  }
 
-      span {
-        font-size: 16px;
-      }
+  .top_tab_svip {
+    .icon_member {
+      background: url('./new-images/icon-svip.png') no-repeat center;
+      background-size: contain;
     }
 
-    .originalPrice {
-      color: #937059;
-      font-size: 13px;
+    .icon_text {
+      background: url('./new-images/icon-svip-text.png') no-repeat center;
+      background-size: contain;
+      width: 68px;
+      height: 15px;
     }
 
-    &.active {
-      background: linear-gradient(215deg,
-          #ffe7c4 0%,
-          rgba(250, 211, 156, 0.21) 100%);
-      border: 1px solid #b1652e;
-      position: relative;
-
-      .title {
-        color: #814014;
-      }
-
-      .price {
-        color: #b1652e;
-      }
-
-      .originalPrice {
-        color: #937059;
-      }
-
-      &::before {
-        content: '\e728';
-        font: 14px/1 'vant-icon';
-        color: #fff;
-        background-color: #b1652e;
-        width: 27px;
-        height: 18px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        top: -1px;
-        right: -1px;
-        border-radius: 0 12px 0 12px;
-      }
-
-      .bat {
-        background: linear-gradient(270deg, rgba(255, 255, 255, 0.33) 0%, rgba(254, 234, 205, 0.33) 100%);
-        border-radius: 11px 10px 10px 0px;
-        border: 1px solid rgba(177, 101, 46, 0.33);
-        border-left: 0;
-        border-top: 0;
-        color: #B1652E;
-      }
+    .bottom_line {
+      background: url('./new-images/icon-svip-bottom-line.png') no-repeat center;
+      background-size: contain;
     }
   }
 
-  .btnGroup {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    background-color: #fff;
+
+  .member_tab_single {
     display: flex;
     align-items: center;
-    padding: 12px 16px;
     justify-content: space-between;
-    border-top: 1px solid #f0f0f0;
-
-    .btn {
-      padding: 0 22px;
-      color: #7a3104 !important;
-    }
-
-    .priceSection {
-      display: flex;
-      align-items: center;
-      font-size: 16px;
-      color: #1a1a1a;
-
-      .price {
-        font-size: 18px;
-        font-weight: bold;
-        color: #ff3535;
-
-        .priceUnit {
-          font-size: 14px;
-        }
-      }
-    }
+    padding: 11px 16px 0;
   }
 }
 
 .memberDiscount {
-  margin-top: 16px;
+  margin: 10px 16px 0;
   position: relative;
-  background: url('./images/discount_bg.png') no-repeat center;
+  background: url('./new-images/icon-discount-bg.png') no-repeat center;
   background-size: contain;
   display: flex;
   align-items: center;
-  height: 44px;
-  font-size: 16px;
-  color: #ff7100;
+  height: 40px;
+  font-size: 14px;
+  color: #6B4429;
   line-height: 18px;
 
   .discountAvatar {
     margin-left: 15px;
-    width: 36px;
-    height: 36px;
+    width: 34px;
+    height: 34px;
     border-radius: 50%;
     overflow: hidden;
     border: 1px solid #ffaf59;
@@ -348,90 +295,285 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    span {
+      color: #FF491A;
+    }
   }
 
   .discountGift {
     position: absolute;
-    right: 26px;
-    top: 7px;
-    width: 29px;
-    height: 29px;
+    right: 11px;
+    top: 0;
+    width: 40px;
+    height: 40px;
   }
 }
 
-.discountItem {
-  height: 14px;
-  padding-bottom: 2px;
+.btnGroup {
+  padding: 18px 15px;
+  background-color: #fff;
 
-  img {
-    height: 100%;
+  .btn {
+    border-radius: 12px;
+    font-weight: bold;
+    font-size: 20px;
+    color: #662610 !important;
+    line-height: 24px;
   }
 }
 
-.discountBuy {
-  height: 18px;
-  padding-bottom: 0;
-  margin-left: 8px;
+
+.system_list_section {
+  margin: 0 6px;
+}
+
+.system-list::-webkit-scrollbar {
+  display: none;
+  /* Chrome Safari */
 }
 
-.shareBtn {
+.system-list {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
   display: flex;
-  align-items: flex-start;
-  color: #666;
-  font-size: 14px;
-  line-height: 20px !important;
+  position: relative;
+  user-select: none;
+  box-sizing: content-box;
+  padding-top: 16px;
 
-  :global(.van-image) {
-    width: 18px;
-    height: 18px;
-    margin-right: 6px;
+
+  &.list_two {
+    .system-item {
+      width: 141px;
+
+      &.active {
+        width: 191px;
+      }
+    }
   }
 }
 
-.shareVip {
+.system-item {
   position: relative;
-  margin-top: 50px;
   display: flex;
-  flex: 1;
+  flex-direction: column;
   align-items: center;
-  padding: 11px 6px 11px;
+  justify-content: flex-start;
+  width: 96px;
+  min-height: 120px;
+  box-sizing: border-box;
   background: #ffffff;
-  border-radius: 10px;
+  border-radius: 8px;
+  border: 1px solid #E7E7E7;
+  margin-left: 10px;
+
+  // &:first-child {
+  //   margin-left: 0;
+  // }
+
+  .iconPermanent {
+    position: absolute;
+    left: -1px;
+    top: -7px;
+    width: 77px;
+    height: 20px;
+    background: url('./new-images/icon-permanent.png') no-repeat center;
+    background-size: contain;
 
-  .icon {
-    width: 36px;
-    height: 36px;
-    border-radius: 10px;
   }
 
-  .info {
-    margin-left: 6px;
-    flex: 1;
-    word-break: break-all;
+  .s_title {
+    font-weight: 500;
+    font-size: 13px;
+    color: #333333;
+    line-height: 18px;
+    padding-top: 25px;
+    width: 100%;
+    text-align: center;
+  }
 
-    >h4 {
-      color: var(--music-list-item-title-color);
-      font-size: 14px;
-      font-weight: 600;
+  .price {
+    font-family: DINAlternate, DINAlternate;
+    font-weight: bold;
+    font-size: 30px;
+    color: #333333;
+    padding: 6px 0 9px;
+
+    span {
+      font-size: 16px;
     }
+  }
 
-    >p {
-      color: var(--music-list-item-mate-color);
-      line-height: 17px;
+  .originalPrice {
+    color: #999999;
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  .extraTip {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    box-sizing: border-box;
+    background: #FFF5E0;
+    line-height: 21px;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    padding: 0 8px;
+    border-radius: 0px 0px 7px 7px;
+  }
+
+  &.active {
+    border: 2px solid #0ED8B0;
+    background: linear-gradient(51deg, #E3F9F2 0%, #BCF8E5 100%);
+    width: 130px;
+
+    .iconPermanent {
+      left: -2px;
+    }
+
+    .extraTip {
+      background: #0ED8B0;
+      color: #FFFFFF;
+      font-weight: 500;
     }
   }
 }
 
-.tagDiscount {
-  position: absolute;
-  top: -23px;
-  left: 15px;
-  padding: 0 10px;
-  height: 23px;
-  background: linear-gradient(180deg, #ffb635 0%, #ff4e18 100%);
-  border-radius: 8px 8px 0px 0px;
-  font-size: 14px;
-  font-weight: 600;
-  color: #ffffff;
-  line-height: 24px;
+.list_one {
+  .system-item {
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 20px;
+    width: 100%;
+    margin: 0 16px;
+    min-height: 81px;
+    border: 2px solid #0ED8B0;
+    background: linear-gradient(51deg, #E3F9F2 0%, #BCF8E5 100%);
+
+    .iconPermanent {
+      left: -2px;
+    }
+
+
+    .itemBg {
+      position: absolute;
+      right: 71px;
+      top: 0;
+      bottom: 0;
+      width: 100px;
+      background: url('./new-images/icon-svip-big-icon.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  .priceS {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+
+    .price {
+      color: #03A385;
+      padding-bottom: 0;
+      padding-top: 0;
+    }
+
+    .s_title {
+      padding-top: 4px;
+      padding-left: 10px;
+      font-weight: 500;
+      font-size: 15px;
+      color: #333333;
+      line-height: 21px;
+    }
+  }
+
+  .oneMaxNum {
+
+    margin-left: 4px;
+    display: inline-block;
+    background: linear-gradient(90deg, #BEFCE8 0%, #BFFAE8 100%);
+    border-radius: 2px;
+    font-size: 12px;
+    color: #03A385;
+    padding: 1px 2px;
+  }
+
+  .oneBtn {
+    position: relative;
+    z-index: 1;
+    width: 71px;
+    height: 30px;
+    background: url('./new-images/btn-svip.png') no-repeat center;
+    background-size: contain;
+    cursor: pointer;
+
+    &.onBtnRenew {
+      background: url('./new-images/btn-svip-review.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+}
+
+.system_list_vip {
+  .system-item {
+    &.active {
+      border: 2px solid #FFDB66;
+      background: linear-gradient(90deg, #FFF7C4 0%, #FEF098 100%);
+      width: 130px;
+    }
+  }
+
+  &.list_two {
+    .system-item {
+      width: 141px;
+
+      &.active {
+        width: 191px;
+      }
+    }
+  }
+
+  &.list_one {
+    .system-item {
+      background: linear-gradient(90deg, #FFF7C4 0%, #FEF098 100%);
+      border: 2px solid #FFDB66;
+
+
+      .itemBg {
+        background: url('./new-images/icon-vip-big-icon.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+
+    .priceS {
+      .price {
+        color: #FF7452;
+      }
+    }
+
+    .oneMaxNum {
+      background: linear-gradient(90deg, #FEDA66 0%, #FEDA66 100%);
+      color: #FF7452;
+      text-decoration: line-through;
+    }
+
+    .oneBtn {
+      background: url('./new-images/btn-vip.png') no-repeat center;
+      background-size: contain;
+      cursor: pointer;
+
+      &.onBtnRenew {
+        background: url('./new-images/btn-vip-review.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
 }

src/views/member-center/index.tsx

@@ -1,57 +1,33 @@
-import ColHeader from '@/components/col-header'
-import { Button, Cell, Icon, Image, Popup, Toast } from 'vant'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, reactive } from 'vue'
 import styles from './index.module.less'
-import request from '@/helpers/request'
-import { setLogin, state } from '@/state'
+import ColHeader from '@/components/col-header'
+import { Button, Image, Popup } from 'vant'
+import { state as baseState } 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 './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 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 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,
+  name: 'member-center',
+  setup() {
+    const state = reactive({
+      titleOpacity: 0,
+      shareStatus: false, // 分享
       shareUrl: '',
-      shareDiscount: 0 // 是否有优惠活动
-    }
-  },
-  computed: {
-    userInfo() {
-      const users = state.user.data
+      shareDiscount: 0,
+      tabActive: 'SVIP' // 当前选中
+    })
+
+    const userInfo = computed(() => {
+      const users = baseState.user.data
       return {
         username: users?.username,
         phone: users?.phone,
@@ -62,346 +38,238 @@ export default defineComponent({
         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() {
+    /** 分享 */
+    const onShare = async () => {
       try {
         const res = await request.post('/api-teacher/open/vipProfit', {
           data: {
-            userId: this.userInfo.id
+            userId: userInfo.value.id
           }
         })
 
-        this.shareUrl = `${location.origin}/teacher#/shareVip?recomUserId=${this.userInfo.id}&userType=${state.platformType}`
+        state.shareUrl = `${location.origin}/teacher#/shareVip?recomUserId=${userInfo.value.id}&userType=${baseState.platformType}`
         // 判断是否有我分享的编号
         if (res.data && res.data.activityId) {
-          this.shareUrl = this.shareUrl + '&activityId=' + res.data.activityId
+          state.shareUrl = state.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
+        state.shareStatus = true
+        state.shareDiscount = res.data.discount || 0
         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()
+      } catch {
+        //
       }
+    }
 
-      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'
-        }
-      })
+    useEventListener('scroll', () => {
+      const height =
+        window.scrollY ||
+        window.pageYOffset ||
+        document.documentElement.scrollTop
+      state.titleOpacity = height > 100 ? 1 : height / 100
+    })
+
+    /** 切换购买类型 */
+    const onChangeTab = (type: string) => {
+      state.tabActive = type
     }
-  },
-  render() {
-    return (
-      <div class={styles['member-center']}>
+    return () => (
+      <div class={styles.memberCenter}>
         <ColHeader
-          background="#ffe5cc"
+          background={`rgba(255,255,255, ${state.titleOpacity})`}
+          color={`rgba(0,0,0, ${state.titleOpacity})`}
+          backIconColor="black"
+          hideHeader={false}
           v-slots={{
             right: () => (
-              <div class={styles.shareBtn} onClick={this.onShare}>
-                <Image src={iconShare} />
-                分享
-              </div>
+              <Image
+                src={iconShare}
+                class={styles.shareBtn}
+                onClick={onShare}
+              />
             )
           }}
         />
-        <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://oss.dayaedu.com/daya/202107/ScSTL1D.png"
-                    />
-                  )}
-                  <span
-                    class={styles.phone}
-                    v-html={`（${this.userInfo.phone}）`}
-                  ></span>
+
+        <div class={styles.memberContainer}>
+          <i class={styles.showBrid}></i>
+          <div class={styles.userSection}>
+            <div class={styles.userImgSection}>
+              <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}>
+                您已是<span>永久SVIP</span>
+              </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>
                 </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 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>
-              )
-            }}
-          ></Cell>
-        </div>
+                <div class={styles.svip_member_tip}></div>
+              </div>
+            </div> */}
 
-        <div class={styles.memberContainer}>
-          <div class={styles.memberItem}>
-            <div class={styles.title}>
-              会员<span>VIP</span>
+            <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>
 
             {/* 判断是否有推荐老师 */}
-            {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>
+            <div class={styles.memberDiscount}>
+              <Image src={iconTeacher} class={styles.discountAvatar} />
 
-                <Image src={iconGift} class={styles.discountGift} />
-              </div>
-            )}
+              <span class={styles.discountName}>
+                {/* {this.discountTeacher.username} */}
+                王老师的<span>专属优惠～</span>
+              </span>
 
-            <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
-                  }}
-                >
-                  {item.period === 'YEAR' && (
-                    <span class={[styles.bat]}>优惠</span>
-                  )}
+              <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
+                ]}
+              >
+                {/*   <div class={[styles['system-item'], styles.active]}>
+                  <span class={[styles.iconPermanent]}></span>
 
-                  <div class={styles.discountItem}>
-                    {item.discount == 1 && <img src={iconDiscount} />}
-                  </div>
-                  <p class={styles.title}>{item.title}</p>
+                  <p class={styles.s_title}>永久会员</p>
                   <p class={styles.price}>
                     <span>￥</span>
-                    {moneyFormat(this.calcSalePrice(item), '0,0[.]00')}
+                    {moneyFormat(998, '0,0[.]00')}
                   </p>
                   <del class={styles.originalPrice}>
-                    ￥{moneyFormat(item.originalPrice, '0,0[.]00')}
+                    ￥{moneyFormat(1888, '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['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>
 
-              <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>
+                <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>
+
+                  <i class={styles.itemBg}></i>
+                </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>
-            )}
+            <MemberInteres type={state.tabActive} />
           </div>
-          <Button
-            color="linear-gradient(220deg, #DFA164 0%, #FAC87E 100%)"
-            round
-            class={styles.btn}
-            onClick={this.onSubmit}
-          >
-            {this.userInfo.isVip ? (
-              <>立即续费</>
-            ) : !this.userInfo.isVip && this.userInfo.membershipEndTime ? (
-              <>立即续费</>
-            ) : (
-              <>立即支付</>
-            )}
-          </Button>
         </div>
 
+        <ColSticky position="bottom">
+          <div class={styles.btnGroup}>
+            <Button
+              block
+              color="linear-gradient( 241deg, #FFD984 0%, #FFEAB9 100%)"
+              class={styles.btn}
+            >
+              立即续费
+            </Button>
+          </div>
+        </ColSticky>
+
         <Popup
-          v-model:show={this.shareStatus}
+          v-model:show={state.shareStatus}
           style={{ background: 'transparent' }}
         >
           <ColShare
-            teacherId={this.userInfo.id}
-            shareUrl={this.shareUrl}
+            teacherId={userInfo.value.id}
+            shareUrl={state.shareUrl}
             shareType="vip"
             shareLength={2}
           >
             <div class={styles.shareVip}>
-              {this.shareDiscount === 1 && (
+              {state.shareDiscount === 1 && (
                 <div class={styles.tagDiscount}>专属优惠</div>
               )}