活动页面

src/components/col-header/index.module.less

@@ -1,4 +1,5 @@
 .colHeader {
+  --van-font-weight-bold: 600;
   :global {
     .van-nav-bar__title,
     .van-icon {

src/router/routes-student.ts

@@ -112,6 +112,15 @@ export default [
         meta: {
           title: '我的关注'
         }
+      },
+      {
+        path: '/track-review-activity',
+        component: () =>
+          import('@/student/share-active/track-review-activity/index'),
+        meta: {
+          title: '曲目评测活动',
+          isExternal: true // 是否外部浏览器可以打开
+        }
       }
     ]
   },

src/state.ts

@@ -1,4 +1,5 @@
 import { reactive } from 'vue'
+import { setAuth } from './helpers/utils'
 
 type status = 'init' | 'login' | 'logout' | 'error'
 

src/student/layout/auth.tsx

@@ -8,6 +8,7 @@ import { Button, Icon } from 'vant'
 import request from '@/helpers/request'
 import ColResult from '@/components/col-result'
 
+const browserInfo = browser()
 export default defineComponent({
   name: 'Auth',
   data() {
@@ -16,12 +17,20 @@ export default defineComponent({
     }
   },
   computed: {
+    isExternal() {
+      // 该路由在外部连接打开是否需要登录
+      return this.$route.meta.isExternal && !browserInfo.isApp
+    },
     isNeedView() {
-      return state.user.status === 'login' || this.$route.path === '/login'
+      return (
+        state.user.status === 'login' ||
+        this.$route.path === '/login' ||
+        this.isExternal
+      )
     }
   },
   mounted() {
-    this.setAuth()
+    !this.isExternal && this.setAuth()
   },
   methods: {
     async setAuth() {
@@ -58,8 +67,8 @@ export default defineComponent({
           postMessage({ api: 'login' })
         } else {
           try {
-            let route = this.$route
-            let query = {
+            const route = this.$route
+            const query = {
               returnUrl: this.$route.path,
               ...this.$route.query
             } as any

src/student/share-active/track-review-activity/index.module.less

@@ -0,0 +1,359 @@
+.review {
+  min-height: 100vh;
+
+  overflow: hidden;
+  color: #333;
+}
+
+.reviewContainer {
+  padding: 0 12px;
+}
+
+.section {
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 12px;
+  margin-bottom: 10px;
+  overflow: hidden;
+}
+.activeTime {
+  margin-top: 265px;
+  overflow: hidden;
+
+  .activeBg {
+    margin: 6px;
+    background: #ffffff;
+    border-radius: 8px;
+    display: flex;
+    align-items: flex-end;
+    padding: 8px;
+    font-size: 15px;
+    span {
+      font-weight: 600;
+    }
+  }
+
+  img {
+    width: 18px;
+    height: 18px;
+    margin-right: 9px;
+  }
+}
+
+.title {
+  background: url('./images/title_bg.png') top center no-repeat;
+  background-size: contain;
+  width: 137px;
+  line-height: 31px;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: center;
+  margin: 0 auto 5px;
+
+  span {
+    padding: 0 9px;
+  }
+  img {
+    height: 9px;
+  }
+}
+
+.tips {
+  margin: 0 10px 10px;
+  padding: 10px;
+  background-color: #ffffff;
+  font-size: 14px;
+  line-height: 20px;
+  border-radius: 7px;
+  text-align: justify;
+}
+
+.title2 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 10px 12px 8px;
+  span {
+    display: flex;
+    align-items: center;
+    line-height: 1.1;
+  }
+  .titlePrefix {
+    display: inline-block;
+    width: 4px;
+    height: 12px;
+    background: linear-gradient(180deg, #ff8636 0%, #ff4e19 100%);
+    border-radius: 2px;
+    margin-right: 6px;
+  }
+
+  .iconStar {
+    height: 16px;
+  }
+
+  .titleTips {
+    font-size: 12px;
+    color: #666666;
+    font-weight: 400;
+  }
+}
+
+.prize {
+  display: flex;
+  align-items: center;
+  margin: 0 10px 10px;
+  padding: 10px;
+  background-color: #ffffff;
+  border-radius: 12px;
+
+  img {
+    width: 74px;
+    height: 74px;
+    flex-shrink: 0;
+  }
+
+  .prizeContainer {
+    margin-left: 15px;
+  }
+  .prizeName {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+  .prizeDesc {
+    font-size: 13px;
+    line-height: 16px;
+  }
+}
+
+.musicItem {
+  margin: 0 10px 10px;
+  background: linear-gradient(270deg, #fff6f6 0%, #ffeeee 100%) !important;
+  border-radius: 12px;
+  :global {
+    .van-cell {
+      padding: 10px;
+      background-color: transparent;
+
+      &::after {
+        border-color: #ffe4e4;
+      }
+    }
+  }
+  .musicTitle {
+    flex: 1 auto;
+    max-width: 200px;
+    display: flex;
+  }
+
+  .cellLevel {
+    padding-bottom: 18px;
+  }
+
+  .iconMusic {
+    width: 20px;
+    height: 20px;
+  }
+  .kingSection {
+    display: flex;
+    .score {
+      width: 70px;
+      padding-left: 6px;
+      font-size: 27px;
+      font-weight: 600;
+      color: #ff1919;
+      line-height: 1;
+      span {
+        font-size: 12px;
+        font-weight: 400;
+      }
+    }
+  }
+  .iconKing {
+    width: 30px;
+    height: 24px;
+  }
+
+  .userImg {
+    flex-shrink: 0;
+    position: relative;
+    width: 34px;
+    height: 34px;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 220, 0, 1),
+      rgba(255, 182, 0, 1)
+    );
+    border-radius: 50%;
+
+    .iconLevel {
+      position: absolute;
+      bottom: -8px;
+      left: 50%;
+      margin-left: -12px;
+      width: 24px;
+      height: 16px;
+    }
+  }
+
+  .userInfo {
+    display: flex;
+    align-items: center;
+  }
+
+  .users {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .userName {
+    margin-left: 5px;
+    max-width: 88px;
+    p {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      width: 100%;
+      overflow: hidden;
+      line-height: 1;
+    }
+    .name {
+      padding-bottom: 3px;
+    }
+
+    .subjectName {
+      display: inline-block;
+      font-size: 12px;
+      color: #ff8c00;
+      background: #ffe3bc;
+      border-radius: 4px;
+      padding: 2px 4px;
+    }
+  }
+
+  .userLogo {
+    margin-top: 1px;
+    margin-left: 1px;
+    width: 32px;
+    height: 32px;
+    overflow: hidden;
+    border-radius: 50%;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 16px;
+      height: 15px;
+    }
+  }
+
+  .noText {
+    font-size: 14px;
+    font-weight: 500;
+    color: rgba(255, 25, 25, 0.5);
+  }
+
+  .musicName {
+    padding-left: 5px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    max-width: 200px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.btnGroup {
+  background-color: #fff;
+  padding: 16px 66px;
+}
+.submit {
+  background: linear-gradient(180deg, #ff7e7e 0%, #ff3224 100%);
+  box-shadow: 0px 4px 0px 0px #d01e1e, inset 0px 0px 13px 0px #ffd8d0;
+  border-radius: 22px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #ffffff;
+}
+
+.popupContainer {
+  padding: 0 18px;
+}
+.popupTitle {
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding: 16px 0 12px;
+  position: relative;
+  .line {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: linear-gradient(180deg, #59e5d5 0%, #2dc7aa 100%);
+    border-radius: 3px;
+    margin-right: 10px;
+  }
+
+  .popupClose {
+    position: absolute;
+    right: 0;
+    top: 16px;
+    color: #f5f4f7;
+    width: 22px;
+    height: 22px;
+  }
+}
+.popupContent {
+  font-size: 16px;
+  color: #666666;
+  line-height: 22px;
+  padding: 32px 0;
+  span {
+    color: var(--van-primary-color);
+    padding: 0 8px;
+  }
+  .popupTips {
+    font-size: 14px;
+    line-height: 20px;
+    padding-top: 16px;
+  }
+
+  .appOut {
+    text-align: center;
+    font-size: 16px;
+    color: #666666;
+    line-height: 22px;
+    padding: 15px 0 10px;
+
+    img {
+      height: 30px;
+      padding-bottom: 18px;
+    }
+  }
+}
+.popupBtn {
+  text-align: center;
+  padding-bottom: 24px;
+}
+
+.wxpopup {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  img {
+    width: 88%;
+    margin: 0 6%;
+  }
+}

src/student/share-active/track-review-activity/index.tsx

@@ -0,0 +1,434 @@
+import ColSticky from '@/components/col-sticky'
+import request from '@/helpers/request'
+import { browser, removeAuth } from '@/helpers/utils'
+import { postMessage } from '@/helpers/native-message'
+import { Button, Cell, CellGroup, Image, Notify, Popup } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import logo from '@/common/images/logo.png'
+import { shareCall } from '@/teacher/share-page/share'
+import { getRandomKey } from '@/views/music/music'
+import qs from 'query-string'
+import dayjs from 'dayjs'
+import { orderStatus } from '@/views/order-detail/orderStatus'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `./images/${fileName}`
+  const modules = import.meta.globEager('./images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'track-review-activity',
+  data() {
+    const query = this.$route.query
+    return {
+      id: query.id,
+      activeInfo: {} as any,
+      popupStatus: false,
+      wxStatus: false,
+      behaviorId: getRandomKey(),
+      selectMusic: {} as any
+    }
+  },
+  computed: {
+    activityMusic() {
+      const { activeInfo } = this
+      return activeInfo.activityMusicVoList || []
+    },
+    // 用户是否有中选的曲子
+    userSelectMusic() {
+      let status = false
+      this.activityMusic.forEach((item: any) => {
+        if (item.join === 1) {
+          status = true
+        }
+      })
+      return status
+    }
+  },
+  async mounted() {
+    this.getMusicInfo()
+    if (!browser().isApp) {
+      this.popupStatus = true
+      removeAuth()
+    }
+  },
+  methods: {
+    async getMusicInfo() {
+      try {
+        const res = await request.post(
+          '/api-student/open/activity/info/' + this.id
+        )
+        this.activeInfo = res.data
+      } catch {
+        //
+      }
+    },
+    async onJoinActve() {
+      const activeInfo = this.activeInfo
+      try {
+        // 判断是否是收费活动
+        if (activeInfo.registrationMethod === 'CHARGE') {
+          orderStatus.orderObject.orderType = 'ACTI_REGIST'
+          orderStatus.orderObject.orderName = activeInfo.activityName
+          orderStatus.orderObject.orderDesc = activeInfo.activityName
+          orderStatus.orderObject.actualPrice = activeInfo.registrationPrice
+          orderStatus.orderObject.orderNo = ''
+          orderStatus.orderObject.orderList = [
+            {
+              orderType: 'ACTI_REGIST',
+              goodsName: activeInfo.activityName,
+              activityId: activeInfo.id,
+              actualPrice: activeInfo.registrationPrice
+            }
+          ]
+          this.$router.push({
+            path: '/orderDetail',
+            query: {
+              orderType: 'ACTI_REGIST',
+              activityId: activeInfo.id
+            }
+          })
+          return
+        }
+
+        await request.post(
+          `/api-student/activity/joinActivity/${activeInfo.id}`
+        )
+
+        // 成功通知
+        Notify({ type: 'success', message: '报名成功' })
+        this.getMusicInfo()
+      } catch {
+        //
+      }
+    },
+    async onOpenMusic() {
+      try {
+        const selectMusic = this.selectMusic
+        if (selectMusic.join !== 1) {
+          await request.post(
+            `/api-student/activity/evaluation/${selectMusic.evaluationId}`
+          )
+        }
+        const browserInfo = browser()
+        const url = qs.stringifyUrl({
+          url: location.origin + '/colexiu.html',
+          query: {
+            id: this.id,
+            behaviorId: this.behaviorId,
+            client: browserInfo.isTeacher ? 'teacher' : 'student',
+            setting: encodeURIComponent(
+              JSON.stringify({
+                mode: this.activeInfo.activityType,
+                resets: ['SPEED'],
+                difficulty: 'PERFORMER',
+                feeType: 'FREE',
+                submitData: { evaluationId: this.selectMusic.evaluationId }
+              })
+            )
+          }
+        })
+        postMessage({
+          api: 'openAccompanyWebView',
+          content: {
+            url,
+            orientation: 0,
+            isHideTitle: true,
+            statusBarTextColor: false,
+            isOpenLight: true
+          }
+        })
+      } catch {
+        //
+      }
+    },
+    onOpenApp() {
+      //
+      if (!browser().isApp) {
+        if (browser().weixin) {
+          this.wxStatus = true
+          return
+        }
+        // 如果不在app里面则不需要唤起操作
+        const { origin } = location
+        const str = origin + `/student/#/track-review-activity?id=${this.id}`
+        shareCall(str, {})
+        // 不管有没有唤起，则跳转到下载页面
+        setTimeout(() => {
+          window.location.href = location.origin + '/student/#/download'
+        }, 3000)
+      } else {
+        this.popupStatus = false
+      }
+    }
+  },
+  render() {
+    return (
+      <div
+        class={styles.review}
+        style={{
+          background: `url(${this.activeInfo.subjectUrl}) no-repeat top center ${this.activeInfo.backgroundUrl}`,
+          backgroundSize: 'contain'
+        }}
+      >
+        <div class={styles.reviewContainer}>
+          <div class={[styles.section, styles.activeTime]}>
+            <div class={styles.activeBg}>
+              <img src={getAssetsHomeFile('icon_time.png')} />
+              <p>
+                <span>活动时间：</span>
+                {dayjs(this.activeInfo.activityStart).format(
+                  'YYYY-MM-DD'
+                )} ~ {dayjs(this.activeInfo.activityEnd).format('YYYY-MM-DD')}
+              </p>
+            </div>
+          </div>
+
+          <div class={[styles.section]}>
+            <div class={styles.title}>
+              <img src={getAssetsHomeFile('icon_arrow_left.png')} />
+              <span>活动介绍</span>
+              <img src={getAssetsHomeFile('icon_arrow_right.png')} />
+            </div>
+            <div class={styles.tips}>{this.activeInfo.describe}</div>
+          </div>
+
+          <div class={[styles.section]}>
+            <h2 class={styles.title2}>
+              <span>
+                <i class={styles.titlePrefix}></i>
+                活动奖品
+              </span>
+
+              <img
+                src={getAssetsHomeFile('star_bg.png')}
+                class={styles.iconStar}
+              />
+            </h2>
+            {this.activeInfo.activityRewardList &&
+              this.activeInfo.activityRewardList.map((item: any) => (
+                <div class={styles.prize}>
+                  <Image src={item.imgUrl} />
+                  <div class={styles.prizeContainer}>
+                    <div class={styles.prizeName}>{item.rewardName}</div>
+                    <div class={styles.prizeDesc}>{item.rewardDescribe}</div>
+                  </div>
+                </div>
+              ))}
+          </div>
+
+          <div class={[styles.section]} style={{ backgroundColor: '#fff' }}>
+            <h2 class={styles.title2}>
+              <span>
+                <i class={styles.titlePrefix}></i>
+                活动曲目
+              </span>
+
+              <span class={styles.titleTips}>
+                共{this.activityMusic.length || 0}
+                首曲目
+              </span>
+            </h2>
+
+            {this.activityMusic.map((item: any) => (
+              <CellGroup class={styles.musicItem} border={false}>
+                <Cell
+                  center
+                  titleClass={styles.musicTitle}
+                  v-slots={{
+                    icon: () => (
+                      <Image
+                        src={getAssetsHomeFile('icon_music.png')}
+                        class={styles.iconMusic}
+                      />
+                    ),
+                    title: () => (
+                      <span class={styles.musicName}>
+                        {item.musicSheetName}
+                      </span>
+                    ),
+                    value: () => <span>{item.musicSubject}</span>
+                  }}
+                />
+                <Cell
+                  center
+                  class={styles.cellLevel}
+                  v-slots={{
+                    icon: () => (
+                      <div class={styles.kingSection}>
+                        <Image
+                          src={getAssetsHomeFile('icon_king.png')}
+                          class={styles.iconKing}
+                        />
+                        <p class={styles.score}>
+                          {item.userId ? item.score : '--'}
+                          <span>分</span>
+                        </p>
+                      </div>
+                    ),
+                    title: () => (
+                      <div class={styles.users}>
+                        <div class={styles.userInfo}>
+                          <div class={styles.userImg}>
+                            {item.userId ? (
+                              <>
+                                <Image
+                                  src={item.userAvatar}
+                                  class={styles.userLogo}
+                                />
+                                <img
+                                  src={getAssetsHomeFile('icon_level.png')}
+                                  class={styles.iconLevel}
+                                />
+                              </>
+                            ) : (
+                              <div class={styles.userLogo}>
+                                <img
+                                  src={getAssetsHomeFile('icon_no_level.png')}
+                                />
+                              </div>
+                            )}
+                          </div>
+                          <div class={styles.userName}>
+                            {item.userId ? (
+                              <>
+                                <p class={styles.name}>{item.username}</p>
+                                <p>
+                                  <span class={styles.subjectName}>
+                                    {item.userSubject}
+                                  </span>
+                                </p>{' '}
+                              </>
+                            ) : (
+                              <span class={styles.noText}>虚位以待</span>
+                            )}
+                          </div>
+                        </div>
+                        <div class={styles.userBtn}>
+                          <Button
+                            round
+                            style={{
+                              padding: '0 8px',
+                              height: '32px'
+                            }}
+                            color="linear-gradient(180deg, #FFA200 0%, #FF6900 100%)"
+                            disabled={
+                              this.activeInfo.join === 0 ||
+                              (this.userSelectMusic && item.join !== 1)
+                            }
+                            onClick={() => {
+                              this.selectMusic = item
+                              this.popupStatus = true
+                            }}
+                          >
+                            立刻挑战
+                          </Button>
+                        </div>
+                      </div>
+                    )
+                  }}
+                ></Cell>
+              </CellGroup>
+            ))}
+          </div>
+
+          <div class={[styles.section]}>
+            <div class={styles.title}>
+              <img src={getAssetsHomeFile('icon_arrow_left.png')} />
+              <span>活动规则</span>
+              <img src={getAssetsHomeFile('icon_arrow_right.png')} />
+            </div>
+            <div class={styles.tips}>{this.activeInfo.ruleDescribe}</div>
+          </div>
+        </div>
+
+        {this.activeInfo.join !== 1 && (
+          <ColSticky position="bottom">
+            <div class={styles.btnGroup}>
+              <Button
+                round
+                class={styles.submit}
+                block
+                onClick={this.onJoinActve}
+              >
+                参与报名
+              </Button>
+            </div>
+          </ColSticky>
+        )}
+
+        <Popup
+          v-model:show={this.popupStatus}
+          round
+          style={{ width: '90%' }}
+          closeOnClickOverlay={false}
+        >
+          <div class={styles.popupContainer}>
+            <div class={[styles.popupTitle, 'van-hairline--bottom']}>
+              <i class={styles.line}></i>提示
+              <img
+                src={getAssetsHomeFile('icon_close.png')}
+                class={styles.popupClose}
+                onClick={this.onOpenApp}
+              />
+            </div>
+
+            <div class={styles.popupContent}>
+              {browser().isApp ? (
+                <>
+                  <p>
+                    确定要参加<span>我和我的祖国</span>评测<span>难度高</span>
+                    的比拼吗？
+                  </p>
+                  <p class={styles.popupTips}>
+                    每位用户仅可选择一首曲目的一个难度哦！
+                  </p>
+                </>
+              ) : (
+                <div class={styles.appOut}>
+                  <img src={logo} />
+                  <p>请在酷乐秀APP内打开活动链接！</p>
+                </div>
+              )}
+            </div>
+
+            {browser().isApp ? (
+              <div class={['btnGroup, btnMore', styles.popupBtn]}>
+                <Button
+                  type="primary"
+                  round
+                  plain
+                  onClick={() => (this.popupStatus = false)}
+                >
+                  再想想
+                </Button>
+                <Button type="primary" round onClick={this.onOpenMusic}>
+                  就是它了
+                </Button>
+              </div>
+            ) : (
+              <div class={['btnGroup, btnMore', styles.popupBtn]}>
+                <Button type="primary" round onClick={this.onOpenApp}>
+                  确定
+                </Button>
+              </div>
+            )}
+          </div>
+        </Popup>
+
+        {this.wxStatus && (
+          <div
+            class={styles.wxpopup}
+            onClick={() => {
+              this.wxStatus = false
+            }}
+          >
+            <img src={getAssetsHomeFile('wx_bg.png')} alt="" />
+          </div>
+        )}
+      </div>
+    )
+  }
+})

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

@@ -143,7 +143,8 @@ export default defineComponent({
                   this.$router.push({
                     path: '/teacherHome',
                     query: {
-                      teacherId: item.userId
+                      teacherId: item.userId,
+                      tabs: 'single'
                     }
                   })
                 }}

src/teacher/live-class/create-components/course.tsx

@@ -89,7 +89,7 @@ export default defineComponent({
             <Field
               v-model={createState.live.name}
               name="name"
-              maxlength={50}
+              maxlength={20}
               placeholder="请输入您的课程名称"
               rules={[{ required: true, message: '请输入您的课程名称' }]}
             />

src/teacher/piano-room/class-arrangement/class-info/index.tsx

@@ -158,7 +158,7 @@ export default defineComponent({
               <Field
                 label="课程名称"
                 placeholder="请输入课程名称"
-                maxlength={50}
+                maxlength={20}
                 name="courseName"
                 v-model={params.courseName}
                 rules={[{ required: true, message: '请输入您的课程名称' }]}
@@ -206,7 +206,9 @@ export default defineComponent({
                 label="课时数"
                 placeholder="请输入课时数"
                 v-slots={{
-                  input: () => <Stepper disable-input v-model={params.classNum}></Stepper>
+                  input: () => (
+                    <Stepper disable-input v-model={params.classNum}></Stepper>
+                  )
                 }}
               />
               <Field

src/teacher/share-page/share.ts

@@ -19,3 +19,35 @@ export const shareCall = (str: string, params?: any) => {
     Toast('请用手机或移动设备打开')
   }
 }
+
+export const appDownload = () => {
+  function failed() {
+    window.location.href = '应用商店的地址'
+  }
+
+  function transfer(cb) {
+    window.location.href = 'app的scheme'
+    const initialTime = +new Date()
+    let counter = 0
+    let waitTime = 0
+    const checkOpen = setInterval(() => {
+      counter++
+      waitTime = +new Date() - initialTime
+      if (waitTime > 3500) {
+        clearInterval(checkOpen)
+        cb()
+      }
+      if (counter < 1000) {
+        return
+      }
+    }, 20)
+
+    document.addEventListener('visibilitychange', () => {
+      const isHidden = document.hidden
+      if (isHidden) {
+        clearInterval(checkOpen)
+      }
+    })
+  }
+  transfer(failed)
+}

src/teacher/video-class/class-info.tsx

@@ -107,7 +107,7 @@ export default defineComponent({
             <Field
               v-model={createState.lessonGroup.lessonName}
               name="lessonName"
-              maxlength={50}
+              maxlength={20}
               placeholder="请输入您的课程名称"
               rules={[{ required: true, message: '请输入您的课程名称' }]}
             />

src/views/order-detail/index.tsx

@@ -26,6 +26,7 @@ import OrderMusic from './order-music'
 import { moneyFormat } from '@/helpers/utils'
 import OrderPinao from './order-pinao'
 import { getMusicDetail } from '@/student/trade/tradeOrder'
+import OrderActive from './order-active'
 
 export default defineComponent({
   name: 'order-detail',
@@ -105,6 +106,10 @@ export default defineComponent({
           }
         } else if (item.orderType === 'PINAO_ROOM') {
           params.bizContent = item.id
+        } else if (item.orderType === 'ACTI_REGIST') {
+          params.bizContent = {
+            activityId: item.activityId
+          }
         }
         return params
       })
@@ -136,11 +141,6 @@ export default defineComponent({
             ...item
           }
         ]
-
-        // orderStatus.orderObject.orderType = orderType
-        // orderStatus.orderObject.orderName = orderName
-        // orderStatus.orderObject.orderDesc = orderDesc
-        // orderStatus.orderObject.actualPrice = actualPrice
       } catch {
         //
       }
@@ -257,6 +257,8 @@ export default defineComponent({
                 return <OrderMusic item={item} />
               } else if (item.orderType === 'PINAO_ROOM') {
                 return <OrderPinao item={item} />
+              } else if (item.orderType === 'ACTI_REGIST') {
+                return <OrderActive item={item} />
               }
             })}
 

src/views/order-detail/order-active/index.module.less

@@ -0,0 +1,78 @@
+.liveOrder {
+  .tag {
+    margin-right: 5px;
+    padding: 2px 5px;
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--van-primary);
+    line-height: 16px;
+    background: #e0f7f3;
+    border-radius: 4px;
+    vertical-align: middle;
+  }
+  .title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333333;
+  }
+
+  .collapseItem {
+    :global(.van-cell) {
+      background: #f7f8f9;
+      padding-top: 9px;
+      padding-bottom: 9px;
+    }
+  }
+
+  .line {
+    margin-right: 6px;
+    display: inline-block;
+    width: 4px;
+    height: 12px;
+    border-radius: 4px;
+    background: linear-gradient(to bottom, #59e5d5, #2dc7aa);
+    vertical-align: middle;
+  }
+
+  .teacher {
+    margin-left: 12px;
+    color: #1a1a1a;
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .price {
+    font-size: 16px;
+    font-weight: 500;
+    color: #ff3535;
+    line-height: 20px;
+    i {
+      font-style: normal;
+      font-size: 14px;
+    }
+  }
+  .userLogo {
+    width: 42px;
+    height: 42px;
+    overflow: hidden;
+    border-radius: 50%;
+  }
+  .classItem {
+    font-size: 14px;
+    color: #333333;
+    line-height: 20px;
+    .time {
+      padding-bottom: 6px;
+    }
+    p {
+      color: var(--van-primary);
+    }
+  }
+  :global {
+    .van-cell-group {
+      margin-bottom: 10px;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+  }
+}

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

@@ -0,0 +1,73 @@
+import { Cell, CellGroup, Collapse, CollapseItem, Image } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+
+import activityLogo from '../images/activity_logo.png'
+import { moneyFormat } from '@/helpers/utils'
+
+export default defineComponent({
+  name: 'OrderLive',
+  props: {
+    item: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    return {
+      collapse: [1]
+    }
+  },
+  render() {
+    const item = this.item
+    return (
+      <div class={styles.liveOrder}>
+        <CellGroup border={false}>
+          <Cell
+            center
+            v-slots={{
+              title: () => (
+                <div class={[styles.title, 'van-ellipsis']}>
+                  <span class={styles.line}></span>
+                  活动报名
+                </div>
+              )
+            }}
+          />
+          <Cell
+            center
+            border={false}
+            title={item.goodsName}
+            titleClass={styles.teacher}
+            v-slots={{
+              icon: () => <Image class={styles.userLogo} src={activityLogo} />,
+              default: () => (
+                <span class={styles.price}>
+                  <i>¥</i>
+                  {moneyFormat(item.actualPrice)}
+                </span>
+              )
+            }}
+          />
+          {/* 
+          <Cell border={false}>
+            <Collapse border={false} v-model={this.collapse}>
+              <CollapseItem
+                title="课程详情"
+                name={1}
+                class={styles.collapseItem}
+              >
+                <div class={styles.classItem}>
+                  {item.courseInfo.map((item: any) => (
+                    <div class={styles.time}>{item.courseTime}</div>
+                  ))}
+                </div>
+              </CollapseItem>
+            </Collapse>
+          </Cell> */}
+        </CellGroup>
+      </div>
+      // 视频课
+    )
+  }
+})

src/views/order-detail/orderStatus.ts

@@ -8,6 +8,7 @@ type orderType =
   | 'VIP'
   | 'MUSIC'
   | 'PINAO_ROOM'
+  | 'ACTI_REGIST'
   | ''
 export const orderStatus = reactive({
   orderType: '' as orderType, // 购买类型