Merge branch 'iteration-20240715' into dev

src/student/teacher-dependent/model/teacher-header.module.less

@@ -1,355 +1,398 @@
-.headerContent {
-  padding-top: 40px;
-  padding-bottom: 20px;
-  min-height: 100px;
-  position: relative;
-}
-.teacherContent {
-  display: flex;
-  justify-content: space-between;
-  flex-shrink: 0;
-}
-.teacherIcon {
-  position: relative;
-  margin-top: -38px;
-  line-height: 0;
-  .avatar {
-    position: relative;
-    width: 78px;
-    height: 78px;
-    box-sizing: border-box;
-    border: 2px solid #fff;
-    background-color: #fff;
-  }
-  .avatarActive {
-    border-color: #ffe0b9;
-    background-color: #ffe0b9;
-  }
-  .teacherIconVip {
-    position: absolute;
-    bottom: 0;
-    right: -30px;
-    width: 46px;
-    height: 20px;
-  }
-}
-.teacherInfo {
-  display: flex;
-  align-items: center;
-  padding: 14px 0;
-  .teacherInfoName {
-    font-size: 20px;
-    font-weight: 500;
-    color: #1a1a1a;
-    // line-height: 22px;
-    max-width: 150px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  & > img {
-    margin-left: 10px;
-    width: 39px;
-    height: 16px;
-  }
-}
-.teacherHonor {
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  line-height: 16px;
-  color: #666;
-  font-weight: 500;
-  padding-bottom: 12px;
-  padding-top: 10px;
-  .score {
-    margin-left: 25px;
-  }
-}
-
-.headerCount {
-  width: calc(100% - 28px);
-  padding: 12px;
-  margin: 0 auto;
-  background-color: #fff;
-  border-radius: 10px;
-  box-sizing: border-box;
-}
-
-.teacherOperation {
-  :global {
-    .van-button {
-      height: 28px;
-    }
-  }
-
-  .btn {
-    padding: 3px 12px 1px;
-    min-width: 62px;
-  }
-  .btnStar {
-    color: #f18400;
-    border-color: #f18400;
-  }
-}
-
-.subjectSection {
-  margin-right: 10px;
-  // height: 18px;
-  max-width: 68px;
-  box-sizing: content-box;
-}
-
-.teacher-bottom {
-  padding: 30px 0 0 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.followFans {
-  padding-top: 10px !important;
-}
-
-.teacher-data {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .teacher-data_item {
-    font-size: 14px;
-    color: #333333;
-    position: relative;
-    span {
-      font-weight: 500;
-      color: #000000;
-      font-size: 20px;
-      margin-left: 5px;
-    }
-    &::after {
-      content: ' ';
-      display: inline-block;
-      position: absolute;
-      right: 0px;
-      top: 2px;
-      width: 1px;
-      height: 16px;
-      background: #ebebeb;
-    }
-    &:first-child {
-      padding-right: 15px;
-      margin-right: 15px;
-    }
-    &:last-child {
-      &::after {
-        display: none;
-      }
-    }
-  }
-}
-
-.iconVip {
-  width: 34px !important;
-  margin-right: 5px;
-}
-
-.iconOther {
-  margin-left: 6px;
-  width: 18px;
-  height: 18px;
-}
-
-.teacher-info {
-  margin-left: 8px;
-  .teacher-name {
-    font-size: 18px;
-    font-weight: 500;
-    color: #1a1a1a;
-    padding-bottom: 6px;
-    display: flex;
-    justify-content: space-between;
-    .teacherCert {
-      display: flex;
-      align-items: center;
-    }
-
-    .teacherLast {
-      display: inline-block;
-      max-width: 120px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-}
-
-.subjectList::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
-}
-.subjectList {
-  overflow: auto;
-  width: 255px;
-  // height: 18px;
-  display: flex;
-  flex-wrap: nowrap;
-}
-
-.piNameSubject {
-  display: flex;
-  align-items: center;
-
-  .subject {
-    display: flex;
-    align-items: center;
-    margin-left: 4px;
-    background: #effbf9;
-    border-radius: 8px;
-    font-size: 12px;
-    line-height: 16px;
-    color: #2dc7aa;
-    padding: 0 5px;
-    white-space: nowrap;
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-}
-
-.rTitle {
-  display: flex;
-  align-items: center;
-  &::before {
-    margin-right: 8px;
-    content: ' ';
-    display: inline-block;
-    width: 4px;
-    height: 14px;
-    background: #2dc7aa;
-    border-radius: 3px;
-  }
-}
-
-.liveTag {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  line-height: 16px;
-  background: #ff6363;
-  border-radius: 20px;
-  text-align: center;
-  color: #fff;
-  font-size: 10px;
-  font-weight: 500;
-  padding: 2px 0;
-  width: 60%;
-  z-index: 10;
-}
-
-.teacherName {
-  display: inline-block;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100px;
-}
-
-.teacherIcons {
-  display: flex;
-  align-items: center;
-}
-.teaherPopup {
-  background: transparent;
-  width: 276px;
-  overflow: initial;
-}
-.teacherIconWrap {
-  padding: 50px 22px 22px 22px;
-  background-color: #fff;
-  border-radius: 0 0 10px 10px;
-  margin-top: -25px;
-}
-.teacherIconItem {
-  margin-bottom: 16px;
-  .teacherIconItemTop {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-  :global {
-    .van-image {
-      margin-right: 8px;
-      width: 24px;
-      height: 24px;
-    }
-  }
-  .teacherIconTitle {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-  }
-  .teacherIconDes {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 400;
-    padding-left: 3px;
-    color: #666;
-  }
-}
-.closeIcon {
-  position: absolute;
-  bottom: -54px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 0.96rem;
-  height: 0.96rem;
-}
-.liveList {
-  padding: 12px 0;
-  .headerFollow {
-    margin-bottom: 12px;
-    .teacherIcon {
-      margin: 0 10px 0 0;
-    }
-    .score {
-      margin-left: 10px;
-    }
-    .teacherIconVip {
-      left: 50%;
-      right: initial;
-      transform: translateX(-50%);
-      bottom: -6px;
-    }
-    .liveTag {
-      // bottom: -30px;
-      width: 80%;
-    }
-    .avatar {
-      width: 60px;
-      height: 60px;
-    }
-    .piNameSubject {
-      align-items: flex-start;
-    }
-    .subjectList {
-      flex-wrap: wrap;
-    }
-    .subject {
-      margin: 2px 5px 3px 0;
-    }
-    .teacher-bottom {
-      padding-top: 24px;
-    }
-    .unlinkeBtn {
-      font-size: 12px;
-      color: #ff6363;
-      border: 1px solid #ff6363;
-      padding: 5px 10px;
-      border-radius: 20px;
-    }
-  }
-}
-.followContainer {
-  display: flex;
-  align-items: flex-start;
-}
+.headerContent {
+  padding-top: 40px;
+  padding-bottom: 20px;
+  min-height: 100px;
+  position: relative;
+}
+
+.teacherContent {
+  display: flex;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.teacherIcon {
+  position: relative;
+  margin-top: -38px;
+  line-height: 0;
+
+  .avatar {
+    position: relative;
+    width: 78px;
+    height: 78px;
+    box-sizing: border-box;
+    border: 2px solid #fff;
+    background-color: #fff;
+  }
+
+  .avatarActive {
+    border-color: #F0AF88;
+    background-color: #F0AF88;
+  }
+
+  .teacherIconVip {
+    position: absolute;
+    bottom: 0;
+    right: -12px;
+    width: 39px;
+    height: 18px;
+  }
+}
+
+.teacherInfo {
+  display: flex;
+  align-items: center;
+  padding: 14px 0;
+
+  .teacherInfoName {
+    font-size: 20px;
+    font-weight: 500;
+    color: #1a1a1a;
+    // line-height: 22px;
+    max-width: 150px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &>img {
+    margin-left: 10px;
+    width: 39px;
+    height: 16px;
+  }
+}
+
+.teacherHonor {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  line-height: 16px;
+  color: #666;
+  font-weight: 500;
+  padding-bottom: 12px;
+  padding-top: 10px;
+
+  .score {
+    margin-left: 25px;
+  }
+}
+
+.headerCount {
+  width: calc(100% - 28px);
+  padding: 12px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 10px;
+  box-sizing: border-box;
+}
+
+.teacherOperation {
+  :global {
+    .van-button {
+      height: 28px;
+    }
+  }
+
+  .btn {
+    padding: 3px 12px 1px;
+    min-width: 62px;
+  }
+
+  .btnStar {
+    color: #f18400;
+    border-color: #f18400;
+  }
+}
+
+.subjectSection {
+  margin-right: 10px;
+  // height: 18px;
+  max-width: 68px;
+  box-sizing: content-box;
+}
+
+.teacher-bottom {
+  padding: 30px 0 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.followFans {
+  padding-top: 10px !important;
+}
+
+.teacher-data {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .teacher-data_item {
+    font-size: 14px;
+    color: #333333;
+    position: relative;
+
+    span {
+      font-weight: 500;
+      color: #000000;
+      font-size: 20px;
+      margin-left: 5px;
+    }
+
+    &::after {
+      content: ' ';
+      display: inline-block;
+      position: absolute;
+      right: 0px;
+      top: 2px;
+      width: 1px;
+      height: 16px;
+      background: #ebebeb;
+    }
+
+    &:first-child {
+      padding-right: 15px;
+      margin-right: 15px;
+    }
+
+    &:last-child {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
+.iconVip {
+  width: 34px !important;
+  margin-right: 5px;
+}
+
+.iconOther {
+  margin-left: 6px;
+  width: 18px;
+  height: 18px;
+}
+
+.teacher-info {
+  margin-left: 8px;
+
+  .teacher-name {
+    font-size: 18px;
+    font-weight: 500;
+    color: #1a1a1a;
+    padding-bottom: 6px;
+    display: flex;
+    justify-content: space-between;
+
+    .teacherCert {
+      display: flex;
+      align-items: center;
+    }
+
+    .teacherLast {
+      display: inline-block;
+      max-width: 120px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+.subjectList::-webkit-scrollbar {
+  display: none;
+  /* Chrome Safari */
+}
+
+.subjectList {
+  overflow: auto;
+  width: 255px;
+  // height: 18px;
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.piNameSubject {
+  display: flex;
+  align-items: center;
+
+  .subject {
+    display: flex;
+    align-items: center;
+    margin-left: 4px;
+    background: #effbf9;
+    border-radius: 8px;
+    font-size: 12px;
+    line-height: 16px;
+    color: #2dc7aa;
+    padding: 0 5px;
+    white-space: nowrap;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.rTitle {
+  display: flex;
+  align-items: center;
+
+  &::before {
+    margin-right: 8px;
+    content: ' ';
+    display: inline-block;
+    width: 4px;
+    height: 14px;
+    background: #2dc7aa;
+    border-radius: 3px;
+  }
+}
+
+.liveTag {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  line-height: 16px;
+  background: #ff6363;
+  border-radius: 20px;
+  text-align: center;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 500;
+  padding: 2px 0;
+  width: 60%;
+  z-index: 10;
+}
+
+.teacherName {
+  display: inline-block;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100px;
+}
+
+.teacherIcons {
+  display: flex;
+  align-items: center;
+}
+
+.teaherPopup {
+  background: transparent;
+  width: 276px;
+  overflow: initial;
+}
+
+.teacherIconWrap {
+  padding: 50px 22px 22px 22px;
+  background-color: #fff;
+  border-radius: 0 0 10px 10px;
+  margin-top: -25px;
+}
+
+.teacherIconItem {
+  margin-bottom: 16px;
+
+  .teacherIconItemTop {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  :global {
+    .van-image {
+      margin-right: 8px;
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .teacherIconTitle {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+  }
+
+  .teacherIconDes {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+    padding-left: 3px;
+    color: #666;
+  }
+}
+
+.closeIcon {
+  position: absolute;
+  bottom: -54px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0.96rem;
+  height: 0.96rem;
+}
+
+.liveList {
+  padding: 12px 0;
+
+  .headerFollow {
+    margin-bottom: 12px;
+
+    .teacherIcon {
+      margin: 0 10px 0 0;
+    }
+
+    .score {
+      margin-left: 10px;
+    }
+
+    .teacherIconVip {
+      left: 50%;
+      right: initial;
+      transform: translateX(-50%);
+      bottom: -6px;
+    }
+
+    .liveTag {
+      // bottom: -30px;
+      width: 80%;
+    }
+
+    .avatar {
+      width: 60px;
+      height: 60px;
+    }
+
+    .piNameSubject {
+      align-items: flex-start;
+    }
+
+    .subjectList {
+      flex-wrap: wrap;
+    }
+
+    .subject {
+      margin: 2px 5px 3px 0;
+    }
+
+    .teacher-bottom {
+      padding-top: 24px;
+    }
+
+    .unlinkeBtn {
+      font-size: 12px;
+      color: #ff6363;
+      border: 1px solid #ff6363;
+      padding: 5px 10px;
+      border-radius: 20px;
+    }
+  }
+}
+
+.followContainer {
+  display: flex;
+  align-items: flex-start;
+}

src/student/teacher-dependent/model/teacher-header.tsx

@@ -1,313 +1,331 @@
-import { Button, Cell, Icon, Image, Popup, Rate, Toast } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './teacher-header.module.less'
-import { postMessage } from '@/helpers/native-message'
-import iconTeacher from '@common/images/icon_teacher.png'
-import request from '@/helpers/request'
-import IconXueli from '@common/images/icon-xueli.png'
-import IconJiaozi from '@common/images/icon-jiaozi.png'
-import IconChat from '../images/icon-chat.png'
-
-export const getAssetsHomeFile = (fileName: string) => {
-  const path = `../images/${fileName}`
-  const modules = import.meta.globEager('../images/*')
-  return modules[path].default
-}
-
-export default defineComponent({
-  name: 'teacher-header',
-  props: {
-    userInfo: {
-      type: Object,
-      default: {}
-    },
-    teacherId: {
-      type: String || Number,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      iconShow: false
-    }
-  },
-  computed: {
-    subjectNameList() {
-      const userInfo: any = this.userInfo
-      const subjectName = userInfo.subjectName
-      return subjectName ? subjectName.split(',') : []
-    },
-    starGrade() {
-      const { starGrade } = this.userInfo as any
-      return Number(starGrade) || 0
-    }
-  },
-  methods: {
-    async onStart() {
-      // 关注与取消关注
-      try {
-        const star = this.userInfo.isStar ? 0 : 1
-        await request.get('/api-student/teacher/starOrUnStar', {
-          params: {
-            userId: this.teacherId,
-            starStatus: star
-          }
-        })
-        // const str = star ? '关注成功' : '已取消关注'
-        this.userInfo.isStar = star
-        let count = star ? this.userInfo.fansNum + 1 : this.userInfo.fansNum - 1
-        this.userInfo.fansNum = count <= 0 ? 0 : count
-        // Toast(str)
-      } catch {
-        //
-      }
-    },
-    // 检验是否有对应徽章
-    checkBadge(type: string) {
-      // tag : 老师点亮图标
-      // STYLE:个人风采
-      // VIDEO：视频课
-      // LIVE：直播课，
-      // MUSIC：曲目 逗号隔开
-      let status = false
-      const { userInfo } = this
-      switch (type) {
-        case 'STYLE':
-        case 'VIDEO':
-        case 'LIVE':
-        case 'MUSIC':
-          if (userInfo.tag) {
-            status = userInfo.tag.indexOf(type) > -1
-          }
-          break
-        case 'VIP':
-          status = userInfo.isVip > 0
-          break
-        default:
-          status = false
-          break
-      }
-      return status
-    },
-
-    openTeacherIcon() {
-      this.iconShow = true
-    }
-  },
-  render() {
-    const iconList = [
-      {
-        icon: 'cert_active.png',
-        title: '演奏Mlog达人',
-        des: '个人风采中上传老师风采视频并通过审核'
-      },
-      {
-        icon: 'video_active.png',
-        title: '教学视频达人',
-        des: '发布您制作的教学视频课程并通过审核'
-      },
-      {
-        icon: 'live_active.png',
-        title: '直播up达人',
-        des: '达到开通直播权限标准并开通直播功能'
-      },
-      {
-        icon: 'music_active.png',
-        title: '乐谱歌单达人',
-        des: '上传您制作的乐谱并通过审核'
-      }
-    ]
-    return (
-      <>
-        <div class={styles.headerContent}>
-          <div class={styles.headerCount}>
-            <div class={styles.teacherContent}>
-              <div
-                class={styles.teacherIcon}
-                onClick={() => {
-                  // 判断是否在直播中
-                  if (this.userInfo.liveing === 1) {
-                    postMessage({
-                      api: 'joinLiveRoom',
-                      content: {
-                        roomId: this.userInfo.roomUid,
-                        teacherId: this.userInfo.userId
-                      }
-                    })
-                  }
-                }}
-              >
-                {/* iy */}
-                <Image
-                  class={[
-                    styles.avatar,
-                    this.checkBadge('VIP') && styles.avatarActive
-                  ]}
-                  round
-                  src={this.userInfo.heardUrl || iconTeacher}
-                  fit="cover"
-                />
-
-                {this.userInfo.liveing === 1 && (
-                  <p class={styles.liveTag}>直播中</p>
-                )}
-
-                <Image
-                  class={styles.teacherIconVip}
-                  src={
-                    this.checkBadge('VIP')
-                      ? getAssetsHomeFile('vip_active.png')
-                      : getAssetsHomeFile('vip_default.png')
-                  }
-                />
-              </div>
-              <div class={styles.teacherOperation}>
-                <Button
-                  type="primary"
-                  size="small"
-                  plain
-                  round
-                  class={[
-                    styles.btn,
-                    this.userInfo.isStar ? styles.btnStar : ''
-                  ]}
-                  onClick={this.onStart}
-                >
-                  {/* {!this.userInfo.isStar && <Icon name="plus" />} */}
-
-                  {this.userInfo.isStar ? '已关注' : '关注'}
-                </Button>
-                <Button
-                  type="primary"
-                  size="small"
-                  round
-                  style={{ marginLeft: '5px' }}
-                  class={styles.btn}
-                  icon={IconChat}
-                  onClick={() => {
-                    postMessage({
-                      api: 'joinChatGroup',
-                      content: {
-                        type: 'single', // single 单人 multi 多人
-                        id: this.userInfo.imUserId
-                        // id: this.teacherId
-                      }
-                    })
-                  }}
-                >
-                  {/* <Icon name={} size="16" style={{ marginRight: '3px' }} /> */}
-                  聊天
-                </Button>
-              </div>
-            </div>
-            <div class={styles.teacherInfo}>
-              <div class={styles.teacherInfoName}>
-                {this.userInfo.username || `游客${this.userInfo.userId || ''}`}
-              </div>
-              {this.userInfo.degreeFlag ? <img src={IconXueli} /> : null}
-              {this.userInfo.teacherFlag ? <img src={IconJiaozi} /> : null}
-            </div>
-            <div class={styles.teacherHonor}>
-              <div>勋章：</div>
-              <div class={styles.teacherIcons} onClick={this.openTeacherIcon}>
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('STYLE')
-                      ? getAssetsHomeFile('cert_active.png')
-                      : getAssetsHomeFile('cert_default.png')
-                  }
-                />
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('VIDEO')
-                      ? getAssetsHomeFile('video_active.png')
-                      : getAssetsHomeFile('video_default.png')
-                  }
-                />
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('LIVE')
-                      ? getAssetsHomeFile('live_active.png')
-                      : getAssetsHomeFile('live_default.png')
-                  }
-                />
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('MUSIC')
-                      ? getAssetsHomeFile('music_active.png')
-                      : getAssetsHomeFile('music_default.png')
-                  }
-                />
-              </div>
-              <div class={styles.score}>评分：</div>
-              <div class={styles.level}>
-                {this.starGrade ? (
-                  <Rate
-                    readonly
-                    modelValue={this.starGrade}
-                    iconPrefix="iconfont"
-                    color="#FFC459"
-                    void-icon="star_default"
-                    icon="star_active"
-                    size={15}
-                  />
-                ) : (
-                  <span style={{ fontSize: '12px', color: '#999999' }}>
-                    暂无评分
-                  </span>
-                )}
-              </div>
-            </div>
-            <div class={styles.piNameSubject}>
-              <Image
-                class={styles.subjectSection}
-                src={getAssetsHomeFile('icon_subject.png')}
-                fit="contain"
-              />
-              <div class={styles.subjectList}>
-                {this.subjectNameList.map((item: any) => (
-                  <span class={styles.subject}>{item}</span>
-                ))}
-              </div>
-            </div>
-            <div class={styles['teacher-bottom']}>
-              <div class={styles['teacher-data']}>
-                <div class={styles['teacher-data_item']}>
-                  粉丝 <span>{this.userInfo.fansNum || 0}</span>
-                </div>
-                <div class={styles['teacher-data_item']}>
-                  已上课时 <span>{this.userInfo.expTime || 0}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <Popup class={styles['teaherPopup']} v-model:show={this.iconShow}>
-          <Image src={getAssetsHomeFile('teacher-icon.png')} />
-          <div class={styles.teacherIconWrap}>
-            {iconList.map(n => {
-              return (
-                <div class={styles.teacherIconItem}>
-                  <div class={styles.teacherIconItemTop}>
-                    <Image src={getAssetsHomeFile(n.icon)} />
-                    <div class={styles.teacherIconTitle}>{n.title}</div>
-                  </div>
-                  <div class={styles.teacherIconDes}>{n.des}</div>
-                </div>
-              )
-            })}
-          </div>
-          <Image
-            onClick={() => (this.iconShow = false)}
-            class={styles.closeIcon}
-            src={getAssetsHomeFile('icon-close.png')}
-          />
-        </Popup>
-      </>
-    )
-  }
-})
+import { Button, Cell, Icon, Image, Popup, Rate, Toast } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './teacher-header.module.less'
+import { postMessage } from '@/helpers/native-message'
+import iconTeacher from '@common/images/icon_teacher.png'
+import request from '@/helpers/request'
+import IconXueli from '@common/images/icon-xueli.png'
+import IconJiaozi from '@common/images/icon-jiaozi.png'
+import IconChat from '../images/icon-chat.png'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../images/${fileName}`
+  const modules = import.meta.globEager('../images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'teacher-header',
+  props: {
+    userInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    teacherId: {
+      type: String || Number,
+      default: ''
+    }
+  },
+  emits: ['star'],
+  data() {
+    return {
+      iconShow: false
+    }
+  },
+  computed: {
+    subjectNameList() {
+      const userInfo: any = this.userInfo
+      const subjectName = userInfo.subjectName
+      return subjectName ? subjectName.split(',') : []
+    },
+    starGrade() {
+      const { starGrade } = this.userInfo as any
+      return Number(starGrade) || 0
+    }
+  },
+  methods: {
+    async onStart() {
+      // 关注与取消关注
+      try {
+        const star = this.userInfo.isStar ? 0 : 1
+        await request.get('/api-student/teacher/starOrUnStar', {
+          params: {
+            userId: this.teacherId,
+            starStatus: star
+          }
+        })
+        // const str = star ? '关注成功' : '已取消关注'
+        // this.userInfo.isStar = star
+        const count = star
+          ? this.userInfo.fansNum + 1
+          : this.userInfo.fansNum - 1
+        // this.userInfo.fansNum = count <= 0 ? 0 : count
+        this.$emit('star', {
+          isStar: star,
+          fansNum: count <= 0 ? 0 : count
+        })
+
+        // Toast(str)
+      } catch {
+        //
+      }
+    },
+    // 检验是否有对应徽章
+    checkBadge(type: string) {
+      // tag : 老师点亮图标
+      // STYLE:个人风采
+      // VIDEO：视频课
+      // LIVE：直播课，
+      // MUSIC：曲目 逗号隔开
+      let status = false
+      const { userInfo } = this
+      switch (type) {
+        case 'STYLE':
+        case 'VIDEO':
+        case 'LIVE':
+        case 'MUSIC':
+          if (userInfo.tag) {
+            status = userInfo.tag.indexOf(type) > -1
+          }
+          break
+        case 'VIP':
+          status = userInfo.userVip?.vipType === 'VIP'
+          break
+        case 'SVIP':
+          status =
+            userInfo.userVip?.vipType === 'SVIP' ||
+            userInfo.userVip?.vipType === 'PERMANENT_SVIP'
+          break
+        default:
+          status = false
+          break
+      }
+      return status
+    },
+
+    openTeacherIcon() {
+      this.iconShow = true
+    }
+  },
+  render() {
+    const iconList = [
+      {
+        icon: 'cert_active.png',
+        title: '演奏Mlog达人',
+        des: '个人风采中上传老师风采视频并通过审核'
+      },
+      {
+        icon: 'video_active.png',
+        title: '教学视频达人',
+        des: '发布您制作的教学视频课程并通过审核'
+      },
+      {
+        icon: 'live_active.png',
+        title: '直播up达人',
+        des: '达到开通直播权限标准并开通直播功能'
+      },
+      {
+        icon: 'music_active.png',
+        title: '乐谱歌单达人',
+        des: '上传您制作的乐谱并通过审核'
+      }
+    ]
+    return (
+      <>
+        <div class={styles.headerContent}>
+          <div class={styles.headerCount}>
+            <div class={styles.teacherContent}>
+              <div
+                class={styles.teacherIcon}
+                onClick={() => {
+                  // 判断是否在直播中
+                  if (this.userInfo.liveing === 1) {
+                    postMessage({
+                      api: 'joinLiveRoom',
+                      content: {
+                        roomId: this.userInfo.roomUid,
+                        teacherId: this.userInfo.userId
+                      }
+                    })
+                  }
+                }}
+              >
+                {/* iy */}
+                <Image
+                  class={[
+                    styles.avatar,
+                    (this.checkBadge('SVIP') || this.checkBadge('VIP')) &&
+                      styles.avatarActive
+                  ]}
+                  round
+                  src={this.userInfo.heardUrl || iconTeacher}
+                  fit="cover"
+                />
+
+                {this.userInfo.liveing === 1 && (
+                  <p class={styles.liveTag}>直播中</p>
+                )}
+
+                {(this.checkBadge('SVIP') || this.checkBadge('VIP')) && (
+                  <Image
+                    class={styles.teacherIconVip}
+                    src={
+                      this.checkBadge('SVIP')
+                        ? getAssetsHomeFile('svip_active.png')
+                        : this.checkBadge('VIP')
+                        ? getAssetsHomeFile('vip_active.png')
+                        : ''
+                    }
+                  />
+                )}
+              </div>
+              <div class={styles.teacherOperation}>
+                <Button
+                  type="primary"
+                  size="small"
+                  plain
+                  round
+                  class={[
+                    styles.btn,
+                    this.userInfo.isStar ? styles.btnStar : ''
+                  ]}
+                  onClick={this.onStart}
+                >
+                  {/* {!this.userInfo.isStar && <Icon name="plus" />} */}
+
+                  {this.userInfo.isStar ? '已关注' : '关注'}
+                </Button>
+                <Button
+                  type="primary"
+                  size="small"
+                  round
+                  style={{ marginLeft: '5px' }}
+                  class={styles.btn}
+                  icon={IconChat}
+                  onClick={() => {
+                    postMessage({
+                      api: 'joinChatGroup',
+                      content: {
+                        type: 'single', // single 单人 multi 多人
+                        id: this.userInfo.imUserId
+                        // id: this.teacherId
+                      }
+                    })
+                  }}
+                >
+                  {/* <Icon name={} size="16" style={{ marginRight: '3px' }} /> */}
+                  聊天
+                </Button>
+              </div>
+            </div>
+            <div class={styles.teacherInfo}>
+              <div class={styles.teacherInfoName}>
+                {this.userInfo.username || `游客${this.userInfo.userId || ''}`}
+              </div>
+              {this.userInfo.degreeFlag ? <img src={IconXueli} /> : null}
+              {this.userInfo.teacherFlag ? <img src={IconJiaozi} /> : null}
+            </div>
+            <div class={styles.teacherHonor}>
+              <div>勋章：</div>
+              <div class={styles.teacherIcons} onClick={this.openTeacherIcon}>
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('STYLE')
+                      ? getAssetsHomeFile('cert_active.png')
+                      : getAssetsHomeFile('cert_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('VIDEO')
+                      ? getAssetsHomeFile('video_active.png')
+                      : getAssetsHomeFile('video_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('LIVE')
+                      ? getAssetsHomeFile('live_active.png')
+                      : getAssetsHomeFile('live_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('MUSIC')
+                      ? getAssetsHomeFile('music_active.png')
+                      : getAssetsHomeFile('music_default.png')
+                  }
+                />
+              </div>
+              <div class={styles.score}>评分：</div>
+              <div class={styles.level}>
+                {this.starGrade ? (
+                  <Rate
+                    readonly
+                    modelValue={this.starGrade}
+                    iconPrefix="iconfont"
+                    color="#FFC459"
+                    void-icon="star_default"
+                    icon="star_active"
+                    size={15}
+                  />
+                ) : (
+                  <span style={{ fontSize: '12px', color: '#999999' }}>
+                    暂无评分
+                  </span>
+                )}
+              </div>
+            </div>
+            <div class={styles.piNameSubject}>
+              <Image
+                class={styles.subjectSection}
+                src={getAssetsHomeFile('icon_subject.png')}
+                fit="contain"
+              />
+              <div class={styles.subjectList}>
+                {this.subjectNameList.map((item: any) => (
+                  <span class={styles.subject}>{item}</span>
+                ))}
+              </div>
+            </div>
+            <div class={styles['teacher-bottom']}>
+              <div class={styles['teacher-data']}>
+                <div class={styles['teacher-data_item']}>
+                  粉丝 <span>{this.userInfo.fansNum || 0}</span>
+                </div>
+                <div class={styles['teacher-data_item']}>
+                  已上课时 <span>{this.userInfo.expTime || 0}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Popup class={styles['teaherPopup']} v-model:show={this.iconShow}>
+          <Image src={getAssetsHomeFile('teacher-icon.png')} />
+          <div class={styles.teacherIconWrap}>
+            {iconList.map(n => {
+              return (
+                <div class={styles.teacherIconItem}>
+                  <div class={styles.teacherIconItemTop}>
+                    <Image src={getAssetsHomeFile(n.icon)} />
+                    <div class={styles.teacherIconTitle}>{n.title}</div>
+                  </div>
+                  <div class={styles.teacherIconDes}>{n.des}</div>
+                </div>
+              )
+            })}
+          </div>
+          <Image
+            onClick={() => (this.iconShow = false)}
+            class={styles.closeIcon}
+            src={getAssetsHomeFile('icon-close.png')}
+          />
+        </Popup>
+      </>
+    )
+  }
+})

src/student/teacher-dependent/teacher-home.tsx

@@ -93,7 +93,14 @@ export default defineComponent({
         <img class={styles.bgImg} src={this.userInfo.heardUrl} />
         <div class={styles.bg}></div>
         <div class={styles.teacherHeader}>
-          <TeacherHeader userInfo={this.userInfo} teacherId={this.teacherId} />
+          <TeacherHeader
+            userInfo={this.userInfo}
+            teacherId={this.teacherId}
+            onStar={(val: any) => {
+              this.userInfo.isStar = val.isStar
+              this.userInfo.fansNum = val.fansNum
+            }}
+          />
         </div>
         <Tabs
           color="var(--van-primary)"

src/student/trade/list/index.tsx

@@ -23,6 +23,7 @@ import dayjs from 'dayjs'
 import ColResult from '@/components/col-result'
 import { orderStatus } from '@/views/order-detail/orderStatus'
 import { tradeOrder } from '../tradeOrder'
+import { state } from '@/state'
 
 export default defineComponent({
   name: 'list',
@@ -152,6 +153,11 @@ export default defineComponent({
           `/api-student/userOrder/detailByOrderNo/${item.orderNo}`
         )
         const result = res.data
+        const orderDetailList = result.orderDetailList || []
+        orderDetailList.forEach((item: any) => {
+          item.vipEndDays = state.user.data?.userVip?.vipEndDays || 0 // 会员剩余天数
+        })
+
         tradeOrder(result, () => {
           this.$router.push({
             path: '/orderDetail',
@@ -164,7 +170,6 @@ export default defineComponent({
     }
   },
   render() {
-    console.log(this.height, 'height')
     return (
       <div class={styles.tradeList}>
         <Sticky position="top" offsetTop={this.height}>

src/student/trade/tradeOrder.ts

@@ -84,6 +84,7 @@ export const formatOrderDetail = async (item: any, amount?: IAmount) => {
       break
     }
     case 'VIP':
+    case 'SVIP':
       {
         try {
           const res = await getVipDetail(item.id)
@@ -92,15 +93,16 @@ export const formatOrderDetail = async (item: any, amount?: IAmount) => {
             goodName: item.goodName,
             id: item.id,
             title: memberType[res.period] || '',
+            vipEndDays: item.vipEndDays,
             // 判断是否有优惠金额
             price: amount?.couponAmount
               ? Number(
-                  (
-                    res.salePrice -
-                    amount.couponAmount +
-                    amount.discountPrice
-                  ).toFixed(2)
-                )
+                (
+                  res.salePrice -
+                  amount.couponAmount +
+                  amount.discountPrice
+                ).toFixed(2)
+              )
               : res.salePrice || item.actualPrice,
             startTime: dayjs(res.startTime).format('YYYY-MM-DD'),
             endTime: dayjs(res.endTime).format('YYYY-MM-DD')

src/teacher/teacher-dependent/model/teacher-header.module.less

@@ -1,355 +1,398 @@
-.headerContent {
-  padding-top: 40px;
-  min-height: 100px;
-  position: relative;
-}
-.teacherContent {
-  display: flex;
-  // justify-content: space-between;
-  flex-shrink: 0;
-}
-.teacherIcon {
-  position: relative;
-  margin-top: -38px;
-  line-height: 0;
-  .avatar {
-    position: relative;
-    width: 78px;
-    height: 78px;
-    box-sizing: border-box;
-    border: 2px solid #fff;
-    background-color: #fff;
-  }
-  .avatarActive {
-    border-color: #ffe0b9;
-    background-color: #ffe0b9;
-  }
-  .teacherIconVip {
-    position: absolute;
-    bottom: 0;
-    right: -30px;
-    width: 46px;
-    height: 20px;
-  }
-}
-.teacherInfo {
-  display: flex;
-  align-items: center;
-  // padding: 14px 0;
-  padding-left: 46px;
-  .teacherInfoName {
-    font-size: 20px;
-    font-weight: 500;
-    color: #1a1a1a;
-    // line-height: 22px;
-    max-width: 150px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  & > img {
-    margin-left: 10px;
-    width: 39px;
-    height: 16px;
-  }
-}
-.teacherHonor {
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  line-height: 16px;
-  color: #666;
-  font-weight: 500;
-  padding-bottom: 12px;
-  padding-top: 10px;
-  .score {
-    margin-left: 25px;
-  }
-}
-
-.headerCount {
-  width: calc(100% - 28px);
-  padding: 12px;
-  margin: 0 auto;
-  background-color: #fff;
-  border-radius: 10px;
-  box-sizing: border-box;
-}
-
-.teacherOperation {
-  :global {
-    .van-button {
-      height: 28px;
-    }
-  }
-
-  .btn {
-    padding: 3px 12px 1px;
-    min-width: 62px;
-  }
-  .btnStar {
-    color: #f18400;
-    border-color: #f18400;
-  }
-}
-
-.subjectSection {
-  margin-right: 10px;
-  // height: 18px;
-  max-width: 68px;
-  box-sizing: content-box;
-}
-
-.teacher-bottom {
-  padding: 30px 0 0 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.followFans {
-  padding-top: 10px !important;
-}
-
-.teacher-data {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .teacher-data_item {
-    font-size: 14px;
-    color: #333333;
-    position: relative;
-    span {
-      font-weight: 500;
-      color: #000000;
-      font-size: 20px;
-      margin-left: 5px;
-    }
-    &::after {
-      content: ' ';
-      display: inline-block;
-      position: absolute;
-      right: 0px;
-      top: 2px;
-      width: 1px;
-      height: 16px;
-      background: #ebebeb;
-    }
-    &:first-child {
-      padding-right: 15px;
-      margin-right: 15px;
-    }
-    &:last-child {
-      &::after {
-        display: none;
-      }
-    }
-  }
-}
-
-.iconVip {
-  width: 34px !important;
-  margin-right: 5px;
-}
-
-.iconOther {
-  margin-left: 6px;
-  width: 18px;
-  height: 18px;
-}
-
-.teacher-info {
-  margin-left: 8px;
-  .teacher-name {
-    font-size: 18px;
-    font-weight: 500;
-    color: #1a1a1a;
-    padding-bottom: 6px;
-    display: flex;
-    justify-content: space-between;
-    .teacherCert {
-      display: flex;
-      align-items: center;
-    }
-
-    .teacherLast {
-      display: inline-block;
-      max-width: 120px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-}
-
-.subjectList::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
-}
-.subjectList {
-  overflow: auto;
-  width: 255px;
-  // height: 18px;
-  display: flex;
-  flex-wrap: nowrap;
-}
-
-.piNameSubject {
-  display: flex;
-  align-items: center;
-
-  .subject {
-    display: flex;
-    align-items: center;
-    margin-left: 4px;
-    background: #effbf9;
-    border-radius: 8px;
-    font-size: 12px;
-    line-height: 16px;
-    color: #2dc7aa;
-    padding: 0 5px;
-    white-space: nowrap;
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-}
-
-.rTitle {
-  display: flex;
-  align-items: center;
-  &::before {
-    margin-right: 8px;
-    content: ' ';
-    display: inline-block;
-    width: 4px;
-    height: 14px;
-    background: #2dc7aa;
-    border-radius: 3px;
-  }
-}
-
-.liveTag {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  line-height: 16px;
-  background: #ff6363;
-  border-radius: 20px;
-  text-align: center;
-  color: #fff;
-  font-size: 10px;
-  font-weight: 500;
-  padding: 2px 0;
-  width: 60%;
-  z-index: 10;
-}
-
-.teacherName {
-  display: inline-block;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100px;
-}
-
-.teacherIcons {
-  display: flex;
-  align-items: center;
-}
-.teaherPopup {
-  background: transparent;
-  width: 276px;
-  overflow: initial;
-}
-.teacherIconWrap {
-  padding: 50px 22px 22px 22px;
-  background-color: #fff;
-  border-radius: 0 0 10px 10px;
-  margin-top: -25px;
-}
-.teacherIconItem {
-  margin-bottom: 16px;
-  .teacherIconItemTop {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-  :global {
-    .van-image {
-      margin-right: 8px;
-      width: 24px;
-      height: 24px;
-    }
-  }
-  .teacherIconTitle {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-  }
-  .teacherIconDes {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 400;
-    padding-left: 3px;
-    color: #666;
-  }
-}
-.closeIcon {
-  position: absolute;
-  bottom: -54px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 0.96rem;
-  height: 0.96rem;
-}
-.liveList {
-  padding: 12px 0;
-  .headerFollow {
-    margin-bottom: 12px;
-    .teacherIcon {
-      margin: 0 10px 0 0;
-    }
-    .score {
-      margin-left: 10px;
-    }
-    .teacherIconVip {
-      left: 50%;
-      right: initial;
-      transform: translateX(-50%);
-      bottom: -6px;
-    }
-    .liveTag {
-      // bottom: -30px;
-      width: 80%;
-    }
-    .avatar {
-      width: 60px;
-      height: 60px;
-    }
-    .piNameSubject {
-      align-items: flex-start;
-    }
-    .subjectList {
-      flex-wrap: wrap;
-    }
-    .subject {
-      margin: 2px 5px 3px 0;
-    }
-    .teacher-bottom {
-      padding-top: 24px;
-    }
-    .unlinkeBtn {
-      font-size: 12px;
-      color: #ff6363;
-      border: 1px solid #ff6363;
-      padding: 5px 10px;
-      border-radius: 20px;
-    }
-  }
-}
-.followContainer {
-  display: flex;
-  align-items: flex-start;
-}
+.headerContent {
+  padding-top: 40px;
+  min-height: 100px;
+  position: relative;
+}
+
+.teacherContent {
+  display: flex;
+  // justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.teacherIcon {
+  position: relative;
+  margin-top: -38px;
+  line-height: 0;
+
+  .avatar {
+    position: relative;
+    width: 78px;
+    height: 78px;
+    box-sizing: border-box;
+    border: 2px solid #fff;
+    background-color: #fff;
+  }
+
+  .avatarActive {
+    border-color: #F0AF88;
+    background-color: #F0AF88;
+  }
+
+  .teacherIconVip {
+    position: absolute;
+    bottom: 0;
+    right: -12px;
+    width: 39px;
+    height: 18px;
+  }
+}
+
+.teacherInfo {
+  display: flex;
+  align-items: center;
+  // padding: 14px 0;
+  padding-left: 46px;
+
+  .teacherInfoName {
+    font-size: 20px;
+    font-weight: 500;
+    color: #1a1a1a;
+    // line-height: 22px;
+    max-width: 150px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &>img {
+    margin-left: 10px;
+    width: 39px;
+    height: 16px;
+  }
+}
+
+.teacherHonor {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  line-height: 16px;
+  color: #666;
+  font-weight: 500;
+  padding-bottom: 12px;
+  padding-top: 10px;
+
+  .score {
+    margin-left: 25px;
+  }
+}
+
+.headerCount {
+  width: calc(100% - 28px);
+  padding: 12px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 10px;
+  box-sizing: border-box;
+}
+
+.teacherOperation {
+  :global {
+    .van-button {
+      height: 28px;
+    }
+  }
+
+  .btn {
+    padding: 3px 12px 1px;
+    min-width: 62px;
+  }
+
+  .btnStar {
+    color: #f18400;
+    border-color: #f18400;
+  }
+}
+
+.subjectSection {
+  margin-right: 10px;
+  // height: 18px;
+  max-width: 68px;
+  box-sizing: content-box;
+}
+
+.teacher-bottom {
+  padding: 30px 0 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.followFans {
+  padding-top: 10px !important;
+}
+
+.teacher-data {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .teacher-data_item {
+    font-size: 14px;
+    color: #333333;
+    position: relative;
+
+    span {
+      font-weight: 500;
+      color: #000000;
+      font-size: 20px;
+      margin-left: 5px;
+    }
+
+    &::after {
+      content: ' ';
+      display: inline-block;
+      position: absolute;
+      right: 0px;
+      top: 2px;
+      width: 1px;
+      height: 16px;
+      background: #ebebeb;
+    }
+
+    &:first-child {
+      padding-right: 15px;
+      margin-right: 15px;
+    }
+
+    &:last-child {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
+.iconVip {
+  width: 34px !important;
+  margin-right: 5px;
+}
+
+.iconOther {
+  margin-left: 6px;
+  width: 18px;
+  height: 18px;
+}
+
+.teacher-info {
+  margin-left: 8px;
+
+  .teacher-name {
+    font-size: 18px;
+    font-weight: 500;
+    color: #1a1a1a;
+    padding-bottom: 6px;
+    display: flex;
+    justify-content: space-between;
+
+    .teacherCert {
+      display: flex;
+      align-items: center;
+    }
+
+    .teacherLast {
+      display: inline-block;
+      max-width: 120px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+.subjectList::-webkit-scrollbar {
+  display: none;
+  /* Chrome Safari */
+}
+
+.subjectList {
+  overflow: auto;
+  width: 255px;
+  // height: 18px;
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.piNameSubject {
+  display: flex;
+  align-items: center;
+
+  .subject {
+    display: flex;
+    align-items: center;
+    margin-left: 4px;
+    background: #effbf9;
+    border-radius: 8px;
+    font-size: 12px;
+    line-height: 16px;
+    color: #2dc7aa;
+    padding: 0 5px;
+    white-space: nowrap;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.rTitle {
+  display: flex;
+  align-items: center;
+
+  &::before {
+    margin-right: 8px;
+    content: ' ';
+    display: inline-block;
+    width: 4px;
+    height: 14px;
+    background: #2dc7aa;
+    border-radius: 3px;
+  }
+}
+
+.liveTag {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  line-height: 16px;
+  background: #ff6363;
+  border-radius: 20px;
+  text-align: center;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 500;
+  padding: 2px 0;
+  width: 60%;
+  z-index: 10;
+}
+
+.teacherName {
+  display: inline-block;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100px;
+}
+
+.teacherIcons {
+  display: flex;
+  align-items: center;
+}
+
+.teaherPopup {
+  background: transparent;
+  width: 276px;
+  overflow: initial;
+}
+
+.teacherIconWrap {
+  padding: 50px 22px 22px 22px;
+  background-color: #fff;
+  border-radius: 0 0 10px 10px;
+  margin-top: -25px;
+}
+
+.teacherIconItem {
+  margin-bottom: 16px;
+
+  .teacherIconItemTop {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  :global {
+    .van-image {
+      margin-right: 8px;
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .teacherIconTitle {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+  }
+
+  .teacherIconDes {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+    padding-left: 3px;
+    color: #666;
+  }
+}
+
+.closeIcon {
+  position: absolute;
+  bottom: -54px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0.96rem;
+  height: 0.96rem;
+}
+
+.liveList {
+  padding: 12px 0;
+
+  .headerFollow {
+    margin-bottom: 12px;
+
+    .teacherIcon {
+      margin: 0 10px 0 0;
+    }
+
+    .score {
+      margin-left: 10px;
+    }
+
+    .teacherIconVip {
+      left: 50%;
+      right: initial;
+      transform: translateX(-50%);
+      bottom: -6px;
+    }
+
+    .liveTag {
+      // bottom: -30px;
+      width: 80%;
+    }
+
+    .avatar {
+      width: 60px;
+      height: 60px;
+    }
+
+    .piNameSubject {
+      align-items: flex-start;
+    }
+
+    .subjectList {
+      flex-wrap: wrap;
+    }
+
+    .subject {
+      margin: 2px 5px 3px 0;
+    }
+
+    .teacher-bottom {
+      padding-top: 24px;
+    }
+
+    .unlinkeBtn {
+      font-size: 12px;
+      color: #ff6363;
+      border: 1px solid #ff6363;
+      padding: 5px 10px;
+      border-radius: 20px;
+    }
+  }
+}
+
+.followContainer {
+  display: flex;
+  align-items: flex-start;
+}

src/teacher/teacher-dependent/model/teacher-header.tsx

@@ -1,256 +1,266 @@
-import { Button, Cell, Icon, Image, Popup, Rate, Toast } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './teacher-header.module.less'
-import { postMessage } from '@/helpers/native-message'
-import iconTeacher from '@common/images/icon_teacher.png'
-import IconXueli from '@common/images/icon-xueli.png'
-import IconJiaozi from '@common/images/icon-jiaozi.png'
-
-export const getAssetsHomeFile = (fileName: string) => {
-  const path = `../images/${fileName}`
-  const modules = import.meta.globEager('../images/*')
-  return modules[path].default
-}
-
-export default defineComponent({
-  name: 'teacher-header',
-  props: {
-    userInfo: {
-      type: Object,
-      default: {}
-    },
-    teacherId: {
-      type: String || Number,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      iconShow: false
-    }
-  },
-  computed: {
-    subjectNameList() {
-      const userInfo: any = this.userInfo
-      const subjectName = userInfo.subjectName
-      return subjectName ? subjectName.split(',') : []
-    },
-    starGrade() {
-      const { starGrade } = this.userInfo as any
-      return Number(starGrade) || 0
-    }
-  },
-  methods: {
-    // 检验是否有对应徽章
-    checkBadge(type: string) {
-      // tag : 老师点亮图标
-      // STYLE:个人风采
-      // VIDEO：视频课
-      // LIVE：直播课，
-      // MUSIC：曲目 逗号隔开
-      let status = false
-      const { userInfo } = this
-      switch (type) {
-        case 'STYLE':
-        case 'VIDEO':
-        case 'LIVE':
-        case 'MUSIC':
-          if (userInfo.tag) {
-            status = userInfo.tag.indexOf(type) > -1
-          }
-          break
-        case 'VIP':
-          status = userInfo.isVip > 0
-          break
-        default:
-          status = false
-          break
-      }
-      return status
-    },
-
-    openTeacherIcon() {
-      this.iconShow = true
-    }
-  },
-  render() {
-    const iconList = [
-      {
-        icon: 'cert_active.png',
-        title: '演奏Mlog达人',
-        des: '个人风采中上传老师风采视频并通过审核'
-      },
-      {
-        icon: 'video_active.png',
-        title: '教学视频达人',
-        des: '发布您制作的教学视频课程并通过审核'
-      },
-      {
-        icon: 'live_active.png',
-        title: '直播up达人',
-        des: '达到开通直播权限标准并开通直播功能'
-      },
-      {
-        icon: 'music_active.png',
-        title: '乐谱歌单达人',
-        des: '上传您制作的乐谱并通过审核'
-      }
-    ]
-    return (
-      <>
-        <div class={styles.headerContent}>
-          <div class={styles.headerCount}>
-            <div class={styles.teacherContent}>
-              <div
-                class={styles.teacherIcon}
-                onClick={() => {
-                  // 判断是否在直播中
-                  if (this.userInfo.liveing === 1) {
-                    postMessage({
-                      api: 'joinLiveRoom',
-                      content: {
-                        roomId: this.userInfo.roomUid,
-                        teacherId: this.userInfo.userId
-                      }
-                    })
-                  }
-                }}
-              >
-                {/* iy */}
-                <Image
-                  class={[
-                    styles.avatar,
-                    this.checkBadge('VIP') && styles.avatarActive
-                  ]}
-                  round
-                  src={this.userInfo.heardUrl || iconTeacher}
-                  fit="cover"
-                />
-
-                {this.userInfo.liveing === 1 && (
-                  <p class={styles.liveTag}>直播中</p>
-                )}
-
-                <Image
-                  class={styles.teacherIconVip}
-                  src={
-                    this.checkBadge('VIP')
-                      ? getAssetsHomeFile('vip_active.png')
-                      : getAssetsHomeFile('vip_default.png')
-                  }
-                />
-              </div>
-              <div class={styles.teacherInfo}>
-                <div class={styles.teacherInfoName}>
-                  {this.userInfo.username ||
-                    `游客${this.userInfo.userId || ''}`}
-                </div>
-                {this.userInfo.degreeFlag ? <img src={IconXueli} /> : null}
-                {this.userInfo.teacherFlag ? <img src={IconJiaozi} /> : null}
-              </div>
-            </div>
-
-            <div class={styles.teacherHonor}>
-              <div>勋章：</div>
-              <div class={styles.teacherIcons} onClick={this.openTeacherIcon}>
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('STYLE')
-                      ? getAssetsHomeFile('cert_active.png')
-                      : getAssetsHomeFile('cert_default.png')
-                  }
-                />
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('VIDEO')
-                      ? getAssetsHomeFile('video_active.png')
-                      : getAssetsHomeFile('video_default.png')
-                  }
-                />
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('LIVE')
-                      ? getAssetsHomeFile('live_active.png')
-                      : getAssetsHomeFile('live_default.png')
-                  }
-                />
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('MUSIC')
-                      ? getAssetsHomeFile('music_active.png')
-                      : getAssetsHomeFile('music_default.png')
-                  }
-                />
-              </div>
-              <div class={styles.score}>评分：</div>
-              <div class={styles.level}>
-                {this.starGrade ? (
-                  <Rate
-                    readonly
-                    modelValue={this.starGrade}
-                    iconPrefix="iconfont"
-                    color="#FFC459"
-                    void-icon="star_default"
-                    icon="star_active"
-                    size={15}
-                  />
-                ) : (
-                  <span style={{ fontSize: '12px', color: '#999999' }}>
-                    暂无评分
-                  </span>
-                )}
-              </div>
-            </div>
-            <div class={styles.piNameSubject}>
-              <Image
-                class={styles.subjectSection}
-                src={getAssetsHomeFile('icon_subject.png')}
-                fit="contain"
-              />
-              <div class={styles.subjectList}>
-                {this.subjectNameList.map((item: any) => (
-                  <span class={styles.subject}>{item}</span>
-                ))}
-              </div>
-            </div>
-            <div class={styles['teacher-bottom']}>
-              <div class={styles['teacher-data']}>
-                <div class={styles['teacher-data_item']}>
-                  粉丝 <span>{this.userInfo.fansNum || 0}</span>
-                </div>
-                <div class={styles['teacher-data_item']}>
-                  已上课时 <span>{this.userInfo.expTime || 0}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <Popup class={styles['teaherPopup']} v-model:show={this.iconShow}>
-          <Image src={getAssetsHomeFile('teacher-icon.png')} />
-          <div class={styles.teacherIconWrap}>
-            {iconList.map(n => {
-              return (
-                <div class={styles.teacherIconItem}>
-                  <div class={styles.teacherIconItemTop}>
-                    <Image src={getAssetsHomeFile(n.icon)} />
-                    <div class={styles.teacherIconTitle}>{n.title}</div>
-                  </div>
-                  <div class={styles.teacherIconDes}>{n.des}</div>
-                </div>
-              )
-            })}
-          </div>
-          <Image
-            onClick={() => (this.iconShow = false)}
-            class={styles.closeIcon}
-            src={getAssetsHomeFile('icon-close.png')}
-          />
-        </Popup>
-      </>
-    )
-  }
-})
+import { Button, Cell, Icon, Image, Popup, Rate, Toast } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './teacher-header.module.less'
+import { postMessage } from '@/helpers/native-message'
+import iconTeacher from '@common/images/icon_teacher.png'
+import IconXueli from '@common/images/icon-xueli.png'
+import IconJiaozi from '@common/images/icon-jiaozi.png'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../images/${fileName}`
+  const modules = import.meta.globEager('../images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'teacher-header',
+  props: {
+    userInfo: {
+      type: Object,
+      default: {}
+    },
+    teacherId: {
+      type: String || Number,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      iconShow: false
+    }
+  },
+  computed: {
+    subjectNameList() {
+      const userInfo: any = this.userInfo
+      const subjectName = userInfo.subjectName
+      return subjectName ? subjectName.split(',') : []
+    },
+    starGrade() {
+      const { starGrade } = this.userInfo as any
+      return Number(starGrade) || 0
+    }
+  },
+  methods: {
+    // 检验是否有对应徽章
+    checkBadge(type: string) {
+      // tag : 老师点亮图标
+      // STYLE:个人风采
+      // VIDEO：视频课
+      // LIVE：直播课，
+      // MUSIC：曲目 逗号隔开
+      let status = false
+      const { userInfo } = this
+      switch (type) {
+        case 'STYLE':
+        case 'VIDEO':
+        case 'LIVE':
+        case 'MUSIC':
+          if (userInfo.tag) {
+            status = userInfo.tag.indexOf(type) > -1
+          }
+          break
+        case 'VIP':
+          status = userInfo.userVip?.vipType === 'VIP'
+          break
+        case 'SVIP':
+          status =
+            userInfo.userVip?.vipType === 'SVIP' ||
+            userInfo.userVip?.vipType === 'PERMANENT_SVIP'
+          break
+        default:
+          status = false
+          break
+      }
+      return status
+    },
+
+    openTeacherIcon() {
+      this.iconShow = true
+    }
+  },
+  render() {
+    const iconList = [
+      {
+        icon: 'cert_active.png',
+        title: '演奏Mlog达人',
+        des: '个人风采中上传老师风采视频并通过审核'
+      },
+      {
+        icon: 'video_active.png',
+        title: '教学视频达人',
+        des: '发布您制作的教学视频课程并通过审核'
+      },
+      {
+        icon: 'live_active.png',
+        title: '直播up达人',
+        des: '达到开通直播权限标准并开通直播功能'
+      },
+      {
+        icon: 'music_active.png',
+        title: '乐谱歌单达人',
+        des: '上传您制作的乐谱并通过审核'
+      }
+    ]
+    return (
+      <>
+        <div class={styles.headerContent}>
+          <div class={styles.headerCount}>
+            <div class={styles.teacherContent}>
+              <div
+                class={styles.teacherIcon}
+                onClick={() => {
+                  // 判断是否在直播中
+                  if (this.userInfo.liveing === 1) {
+                    postMessage({
+                      api: 'joinLiveRoom',
+                      content: {
+                        roomId: this.userInfo.roomUid,
+                        teacherId: this.userInfo.userId
+                      }
+                    })
+                  }
+                }}
+              >
+                {/* iy */}
+                <Image
+                  class={[
+                    styles.avatar,
+                    (this.checkBadge('SVIP') || this.checkBadge('VIP')) &&
+                      styles.avatarActive
+                  ]}
+                  round
+                  src={this.userInfo.heardUrl || iconTeacher}
+                  fit="cover"
+                />
+
+                {this.userInfo.liveing === 1 && (
+                  <p class={styles.liveTag}>直播中</p>
+                )}
+
+                {(this.checkBadge('SVIP') || this.checkBadge('VIP')) && (
+                  <Image
+                    class={styles.teacherIconVip}
+                    src={
+                      this.checkBadge('SVIP')
+                        ? getAssetsHomeFile('svip_active.png')
+                        : this.checkBadge('VIP')
+                        ? getAssetsHomeFile('vip_active.png')
+                        : ''
+                    }
+                  />
+                )}
+              </div>
+              <div class={styles.teacherInfo}>
+                <div class={styles.teacherInfoName}>
+                  {this.userInfo.username ||
+                    `游客${this.userInfo.userId || ''}`}
+                </div>
+                {this.userInfo.degreeFlag ? <img src={IconXueli} /> : null}
+                {this.userInfo.teacherFlag ? <img src={IconJiaozi} /> : null}
+              </div>
+            </div>
+
+            <div class={styles.teacherHonor}>
+              <div>勋章：</div>
+              <div class={styles.teacherIcons} onClick={this.openTeacherIcon}>
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('STYLE')
+                      ? getAssetsHomeFile('cert_active.png')
+                      : getAssetsHomeFile('cert_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('VIDEO')
+                      ? getAssetsHomeFile('video_active.png')
+                      : getAssetsHomeFile('video_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('LIVE')
+                      ? getAssetsHomeFile('live_active.png')
+                      : getAssetsHomeFile('live_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('MUSIC')
+                      ? getAssetsHomeFile('music_active.png')
+                      : getAssetsHomeFile('music_default.png')
+                  }
+                />
+              </div>
+              <div class={styles.score}>评分：</div>
+              <div class={styles.level}>
+                {this.starGrade ? (
+                  <Rate
+                    readonly
+                    modelValue={this.starGrade}
+                    iconPrefix="iconfont"
+                    color="#FFC459"
+                    void-icon="star_default"
+                    icon="star_active"
+                    size={15}
+                  />
+                ) : (
+                  <span style={{ fontSize: '12px', color: '#999999' }}>
+                    暂无评分
+                  </span>
+                )}
+              </div>
+            </div>
+            <div class={styles.piNameSubject}>
+              <Image
+                class={styles.subjectSection}
+                src={getAssetsHomeFile('icon_subject.png')}
+                fit="contain"
+              />
+              <div class={styles.subjectList}>
+                {this.subjectNameList.map((item: any) => (
+                  <span class={styles.subject}>{item}</span>
+                ))}
+              </div>
+            </div>
+            <div class={styles['teacher-bottom']}>
+              <div class={styles['teacher-data']}>
+                <div class={styles['teacher-data_item']}>
+                  粉丝 <span>{this.userInfo.fansNum || 0}</span>
+                </div>
+                <div class={styles['teacher-data_item']}>
+                  已上课时 <span>{this.userInfo.expTime || 0}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Popup class={styles['teaherPopup']} v-model:show={this.iconShow}>
+          <Image src={getAssetsHomeFile('teacher-icon.png')} />
+          <div class={styles.teacherIconWrap}>
+            {iconList.map(n => {
+              return (
+                <div class={styles.teacherIconItem}>
+                  <div class={styles.teacherIconItemTop}>
+                    <Image src={getAssetsHomeFile(n.icon)} />
+                    <div class={styles.teacherIconTitle}>{n.title}</div>
+                  </div>
+                  <div class={styles.teacherIconDes}>{n.des}</div>
+                </div>
+              )
+            })}
+          </div>
+          <Image
+            onClick={() => (this.iconShow = false)}
+            class={styles.closeIcon}
+            src={getAssetsHomeFile('icon-close.png')}
+          />
+        </Popup>
+      </>
+    )
+  }
+})

src/teacher/teacher-dependent/teacher-home.tsx

@@ -1,88 +1,88 @@
-import ColHeader from '@/components/col-header'
-import { defineComponent } from 'vue'
-import styles from './teacher-home.module.less'
-import Single from './components/single'
-import request from '@/helpers/request'
-import { listenerMessage } from '@/helpers/native-message'
-import { useEventListener, useWindowScroll } from '@vueuse/core'
-import TeacherHeader from './model/teacher-header'
-import { useRect } from '@vant/use'
-
-export default defineComponent({
-  name: 'teacherHome',
-  data() {
-    // 先取session中的数据，没有再取参数，默认为老师风采
-    const tabs = sessionStorage.getItem('teacherHomeTabs') || ''
-    const query = this.$route.query
-    return {
-      teacherId: query.teacherId as string,
-      tabs: tabs || query.tabs || 'single',
-      userInfo: {} as any,
-      background: 'rgba(55, 205, 177, 0)',
-      headColor: '#fff',
-      height: 'auto' as any,
-      backIconColor: 'white',
-      homeContaiterHeight: ''
-    }
-  },
-  async created() {},
-  async mounted() {
-    this.getTeacherDetail()
-    // 监听页面返回
-    listenerMessage('webViewOnResume', () => {
-      this.getTeacherDetail()
-    })
-    useEventListener(document, 'scroll', evt => {
-      const { y } = useWindowScroll()
-      // this.background = `rgba(255, 255, 255, ${y.value / 100})`
-      // console.log(y.value) 142
-      if (y.value > 52) {
-        this.headColor = '#000'
-        this.background = '#fff'
-        this.backIconColor = 'black'
-      } else {
-        this.background = 'transparent'
-        this.headColor = '#fff'
-        this.backIconColor = 'white'
-      }
-    })
-  },
-  methods: {
-    async getTeacherDetail() {
-      try {
-        const res = await request.get('/api-student/teacher/queryTeacherHome', {
-          params: {
-            userId: this.teacherId
-          }
-        })
-        this.userInfo = res.data
-      } catch {}
-    }
-  },
-  render() {
-    return (
-      <div class={styles['teacher-record']}>
-        <div ref="headers">
-          <ColHeader
-            background={this.background}
-            border={false}
-            color={this.headColor}
-            backIconColor={this.backIconColor as any}
-            onHeaderBack={() => {
-              this.$nextTick(() => {
-                const { height } = useRect((this as any).$refs.headers)
-                this.height = height
-              })
-            }}
-          />
-        </div>
-        <img class={styles.bgImg} src={this.userInfo.heardUrl} />
-        <div class={styles.bg}></div>
-        <div class={styles.teacherHeader}>
-          <TeacherHeader userInfo={this.userInfo} teacherId={this.teacherId} />
-        </div>
-        <Single userInfo={this.userInfo} />
-      </div>
-    )
-  }
-})
+import ColHeader from '@/components/col-header'
+import { defineComponent } from 'vue'
+import styles from './teacher-home.module.less'
+import Single from './components/single'
+import request from '@/helpers/request'
+import { listenerMessage } from '@/helpers/native-message'
+import { useEventListener, useWindowScroll } from '@vueuse/core'
+import TeacherHeader from './model/teacher-header'
+import { useRect } from '@vant/use'
+
+export default defineComponent({
+  name: 'teacherHome',
+  data() {
+    // 先取session中的数据，没有再取参数，默认为老师风采
+    const tabs = sessionStorage.getItem('teacherHomeTabs') || ''
+    const query = this.$route.query
+    return {
+      teacherId: query.teacherId as string,
+      tabs: tabs || query.tabs || 'single',
+      userInfo: {} as any,
+      background: 'rgba(55, 205, 177, 0)',
+      headColor: '#fff',
+      height: 'auto' as any,
+      backIconColor: 'white',
+      homeContaiterHeight: ''
+    }
+  },
+  async created() {},
+  async mounted() {
+    this.getTeacherDetail()
+    // 监听页面返回
+    listenerMessage('webViewOnResume', () => {
+      this.getTeacherDetail()
+    })
+    useEventListener(document, 'scroll', evt => {
+      const { y } = useWindowScroll()
+      // this.background = `rgba(255, 255, 255, ${y.value / 100})`
+      // console.log(y.value) 142
+      if (y.value > 52) {
+        this.headColor = '#000'
+        this.background = '#fff'
+        this.backIconColor = 'black'
+      } else {
+        this.background = 'transparent'
+        this.headColor = '#fff'
+        this.backIconColor = 'white'
+      }
+    })
+  },
+  methods: {
+    async getTeacherDetail() {
+      try {
+        const res = await request.get('/api-student/teacher/queryTeacherHome', {
+          params: {
+            userId: this.teacherId
+          }
+        })
+        this.userInfo = res.data
+      } catch {}
+    }
+  },
+  render() {
+    return (
+      <div class={styles['teacher-record']}>
+        <div ref="headers">
+          <ColHeader
+            background={this.background}
+            border={false}
+            color={this.headColor}
+            backIconColor={this.backIconColor as any}
+            onHeaderBack={() => {
+              this.$nextTick(() => {
+                const { height } = useRect((this as any).$refs.headers)
+                this.height = height
+              })
+            }}
+          />
+        </div>
+        <img class={styles.bgImg} src={this.userInfo.heardUrl} />
+        <div class={styles.bg}></div>
+        <div class={styles.teacherHeader}>
+          <TeacherHeader userInfo={this.userInfo} teacherId={this.teacherId} />
+        </div>
+        <Single userInfo={this.userInfo} />
+      </div>
+    )
+  }
+})

src/views/creation/index-share.tsx

@@ -10,7 +10,9 @@ import {
 // import Regions from 'wavesurfer.js/dist/plugins/regions.js';
 import styles from './index.module.less'
 import { Cell, Image, List, Popup, Slider } from 'vant'
-import iconMember from './images/icon-member.png'
+// import iconMember from './images/icon-member.png'
+import iconVip from './images/icon-vip.png'
+import iconSVip from './images/icon-svip.png'
 import iconZan from './images/icon-zan.png'
 import iconZanActive from './images/icon-zan-active.png'
 import iconZ from './images/icon-z.png'
@@ -347,8 +349,12 @@ export default defineComponent({
               <div class={styles.userInfo}>
                 <p class={styles.name}>
                   <span>{state.musicDetail.username}</span>
-                  {state.musicDetail.vipFlag && (
-                    <img src={iconMember} class={styles.iconMember} />
+                  {state.musicDetail.vipType === 'VIP' && (
+                    <img src={iconVip} class={styles.iconMember} />
+                  )}
+                  {(state.musicDetail.vipType === 'SVIP' ||
+                    state.musicDetail.vipType === 'PERMANENT_SVIP') && (
+                    <img src={iconSVip} class={styles.iconMember} />
                   )}
                 </p>
                 <p class={styles.sub}>

src/views/creation/index.module.less

@@ -228,6 +228,7 @@
     margin-right: 10px;
     border-radius: 50%;
     overflow: hidden;
+    flex-shrink: 0;
   }
 
   .userInfo {

src/views/creation/index.tsx

@@ -7,7 +7,9 @@ import { Button, Cell, Dialog, Image, List, Popup, Slider, Toast } from 'vant'
 import iconDownload from './images/icon-download.png'
 import iconShare from './images/icon-share.png'
 import iconDelete from './images/icon-delete.png'
-import iconMember from './images/icon-member.png'
+// import iconMember from './images/icon-member.png'
+import iconVip from './images/icon-vip.png'
+import iconSVip from './images/icon-svip.png'
 import iconZan from './images/icon-zan.png'
 import iconZanActive from './images/icon-zan-active.png'
 import iconPlay from './images/icon-play.png'
@@ -354,8 +356,12 @@ export default defineComponent({
               <div class={styles.userInfo}>
                 <p class={styles.name}>
                   <span>{state.musicDetail?.username}</span>
-                  {state.musicDetail.vipFlag && (
-                    <img src={iconMember} class={styles.iconMember} />
+                  {state.musicDetail.vipType === 'VIP' && (
+                    <img src={iconVip} class={styles.iconMember} />
+                  )}
+                  {(state.musicDetail.vipType === 'SVIP' ||
+                    state.musicDetail.vipType === 'PERMANENT_SVIP') && (
+                    <img src={iconSVip} class={styles.iconMember} />
                   )}
                 </p>
                 <p class={styles.sub}>

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

@@ -21,7 +21,7 @@
   top: 10px;
   left: 16px;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 
   .userImgSection {
     position: relative;
@@ -86,6 +86,7 @@
 
   .userInfo {
     padding-top: 5px;
+    max-width: 175px;
 
     .userName {
       display: flex;
@@ -111,6 +112,7 @@
     .member_time {
       font-size: 12px;
       color: #777777;
+      line-height: 17px;
 
       span {
         color: #FF623A;
@@ -352,7 +354,7 @@
   .btn {
     border-radius: 12px;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     color: #662610 !important;
     line-height: 24px;
   }
@@ -380,7 +382,7 @@
   position: relative;
   user-select: none;
   box-sizing: content-box;
-  padding-top: 16px;
+  padding-top: 15px;
 
 
   &.list_two {
@@ -490,7 +492,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-    padding: 0 8px;
+    padding: 2px 8px 1px;
     border-radius: 0px 0px 7px 7px;
   }
 
@@ -512,6 +514,8 @@
 }
 
 .list_one {
+  padding-top: 6px;
+
   .system-item {
     flex-direction: row;
     justify-content: space-between;

src/views/member-center/index.tsx

@@ -54,10 +54,6 @@ export default defineComponent({
         phone: users?.phone,
         avatar: users?.heardUrl,
         id: users?.userId,
-        // memberRankSettingId: users?.memberRankSettingId,
-        // isVip: users?.isVip,
-        // membershipDays: users?.membershipDays,
-        // membershipEndTime: users?.membershipEndTime
         userVip: users?.userVip
       }
     })
@@ -93,7 +89,10 @@ export default defineComponent({
       if (state.tabActive === 'SVIP') {
         if (userInfo.value.userVip?.vipType === 'PERMANENT_SVIP') {
           return 'PERMANENT'
-        } else if (userInfo.value.userVip?.vipType === 'SVIP') {
+        } else if (
+          userInfo.value.userVip?.vipType === 'SVIP' ||
+          userInfo.value.userVip?.svipEndDays > 0
+        ) {
           return 'VIP'
         } else if (
           ['SVIP', 'ALL_VIP'].includes(userInfo.value.userVip?.expireVipType)
@@ -103,7 +102,10 @@ export default defineComponent({
           return 'NOT_VIP'
         }
       } else if (state.tabActive === 'VIP') {
-        if (userInfo.value.userVip?.vipType === 'VIP') {
+        if (
+          userInfo.value.userVip?.vipType === 'VIP' ||
+          userInfo.value.userVip?.vipEndDays > 0
+        ) {
           return 'VIP'
         } else if (
           ['VIP', 'ALL_VIP'].includes(userInfo.value.userVip?.expireVipType)
@@ -274,7 +276,7 @@ export default defineComponent({
 
     /** 格式化分类信息 */
     const formatMemberList = () => {
-      console.log(vipList.value, svipList.value, 'vipList.value')
+      // console.log(vipList.value, svipList.value, 'vipList.value')
       const onlyVip =
         vipList.value.length > 0 && svipList.value.length <= 0 ? true : false
       const onlySVip =
@@ -410,9 +412,15 @@ export default defineComponent({
                 {userMemberStatus.value === 'VIP' && (
                   <>
                     有效期至{' '}
-                    {state.tabActive === 'VIP'
-                      ? userInfo.value.userVip.vipEndDate
-                      : userInfo.value.userVip.svipEndDate}
+                    <span>
+                      {state.tabActive === 'VIP'
+                        ? dayjs(userInfo.value.userVip.vipEndDate).format(
+                            'YYYY-MM-DD'
+                          )
+                        : dayjs(userInfo.value.userVip.svipEndDate).format(
+                            'YYYY-MM-DD'
+                          )}
+                    </span>
                   </>
                 )}
                 {userMemberStatus.value === 'EXPIREVIP' && (
@@ -569,7 +577,9 @@ export default defineComponent({
                           ￥{moneyFormat(member.originalPrice, '0,0[.]00')}
                         </del>
 
-                        <p class={styles.extraTip}>{member.desc}</p>
+                        {member.desc && (
+                          <p class={styles.extraTip}>{member.desc}</p>
+                        )}
                       </div>
                     ))}
                   </>

src/views/order-detail/index.tsx

@@ -513,6 +513,7 @@ export default defineComponent({
                 return (
                   <OrderVip
                     item={item}
+                    disabled={orderStatus.orderObject.orderNo ? true : false}
                     onPriceChange={(price: number) => {
                       // 重置金额
                       this.orderAmount = Number(price)

src/views/order-detail/order-vip/index.tsx

@@ -15,7 +15,11 @@ export default defineComponent({
   props: {
     item: {
       type: Object,
-      default: {}
+      default: () => ({})
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['priceChange'],
@@ -59,7 +63,9 @@ export default defineComponent({
               title: () => (
                 <>
                   <div class={styles.container}>
-                    <div class={styles.title}>{item.goodsName}</div>
+                    <div class={styles.title}>
+                      {item.goodsName || item.goodName}
+                    </div>
                     <div class={styles.price}>
                       <i>¥</i>
                       {(this as any).$filters.moneyFormat(item.price)}
@@ -68,14 +74,12 @@ export default defineComponent({
                   <div class={styles.addNum}>
                     <Stepper
                       disableInput
-                      disabled={item.period === 'PERPETUAL'}
+                      disabled={item.period === 'PERPETUAL' || this.disabled}
                       v-model={item.num}
                       theme="round"
                       min={1}
                       max={99}
                       onChange={() => {
-                        console.log(item)
-
                         let endTime = new Date()
                         if (item.period === 'MONTH') {
                           endTime = dayjs(item.startTime)