Merge branch 'colxiu-style-updatev1.0' into ponline

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

@@ -12,6 +12,11 @@
       padding: 0.13333rem var(--van-padding-xs) 0.13333rem 0 !important;
       background: transparent !important;
     }
+
+
+    .van-field__clear {
+      color: #C1BDC1 !important;
+    }
   }
 }
 

src/components/the-wx-tip/index.module.less

@@ -0,0 +1,53 @@
+.wxPopupDialog {
+  // position: relative;
+  overflow: initial;
+
+  // margin-top: -160px;
+  &::before {
+    position: absolute;
+    content: ' ';
+    top: -23px;
+    left: 50%;
+    margin-left: -50px;
+    display: inline-block;
+    background: url('../../common/images/wx-no-top.png') no-repeat top center;
+    background-size: contain;
+    width: 100px;
+    height: 60px;
+  }
+}
+
+.popupContainer {
+  background: url('../../common/images/wx-no-bg.png') no-repeat top center;
+  background-size: cover;
+  border-radius: 20px;
+  overflow: hidden;
+  padding-bottom: 16px;
+  text-align: center;
+
+  .title1 {
+    padding-top: 57px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 500;
+    color: #00153B;
+  }
+
+  .popupTips {
+    padding-top: 16px;
+    padding-bottom: 16px;
+    text-align: center;
+    font-size: 15px;
+    color: #777777;
+    line-height: 21px;
+  }
+
+  .button {
+    padding: 0 32px;
+    height: 30px;
+    // font-size: 16px;
+    font-size: 14px;
+    // color: #777;
+    // border-color: #E7E7E7;
+  }
+}

src/components/the-wx-tip/index.tsx

@@ -0,0 +1,79 @@
+import { Button, Popup } from 'vant'
+import { defineComponent, onMounted, ref, watch } from 'vue'
+import styles from './index.module.less'
+import { browser } from '@/helpers/utils'
+
+export default defineComponent({
+  name: 'm-wx-tip',
+  props: {
+    // 是否显示微信弹窗
+    show: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: '温馨提示'
+    },
+    message: {
+      type: String,
+      default: '请使用微信打开'
+    },
+    showButton: {
+      type: Boolean,
+      default: false
+    },
+    buttonText: {
+      type: String,
+      default: '确定'
+    }
+  },
+  emits: ['confirm'],
+  setup(props, { emit }) {
+    const showPopup = ref(false)
+    onMounted(() => {
+      if (props.show) {
+        showPopup.value = true
+        return
+      }
+    })
+
+    watch(
+      () => [props.show, props.message],
+      () => {
+        if (props.show) {
+          showPopup.value = true
+        } else {
+          showPopup.value = false
+        }
+      }
+    )
+    return () => (
+      <>
+        <Popup
+          v-model:show={showPopup.value}
+          round
+          style={{ width: '88%' }}
+          closeOnClickOverlay={false}
+          class={styles.wxPopupDialog}
+        >
+          <div class={styles.popupContainer}>
+            <p class={styles.title1}>{props.title}</p>
+            <p class={styles.popupTips}>{props.message}</p>
+
+            {props.showButton && (
+              <Button
+                round
+                type="primary"
+                class={styles.button}
+                onClick={() => emit('confirm')}
+              >
+                {props.buttonText}
+              </Button>
+            )}
+          </div>
+        </Popup>
+      </>
+    )
+  }
+})

src/router/routes-tenant.ts

@@ -217,6 +217,14 @@ export default [
             }
           },
           {
+            path: '/music-songbook/searchAlbum',
+            name: 'searchAlbum',
+            component: () => import('@/tenant/music/search/searchAlbum'),
+            meta: {
+              title: '搜索结果'
+            }
+          },
+          {
             path: '/music-songbook/result',
             name: 'musicSongresult',
             component: () => import('@/tenant/music/search/search-result'),

src/student/invite-teacher/index.tsx

@@ -22,6 +22,7 @@ import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
 import ColPopup from '@/components/col-popup'
 import InviteCode from './invite-code'
 import TeacherChange from './teacher-change'
+import OWxTip from '@/components/the-wx-tip'
 
 export default defineComponent({
   name: 'login',
@@ -34,7 +35,8 @@ export default defineComponent({
       imgCodeStatus: false,
       checked: false,
       teacherChangeStatus: false,
-      changeInfo: {} as any // 更换老师信息
+      changeInfo: {} as any, // 更换老师信息
+      showTips: false
     }
   },
   computed: {
@@ -72,7 +74,20 @@ export default defineComponent({
       if (!this.checked) {
         return Toast('请阅读并同意协议')
       }
-      this.imgCodeStatus = true
+
+      try {
+        const { data } = await request.get(
+          '/api-student/open/checkPhone?phone=' + this.username
+        )
+        console.log(data)
+        if (data) {
+          this.imgCodeStatus = true
+        } else {
+          this.showTips = true
+        }
+      } catch {
+        //
+      }
     },
     previewProtocol(type: string) {
       if (type === 'user') {
@@ -91,7 +106,7 @@ export default defineComponent({
         })
       }
     },
-    async onLoginSuccess(isUpdate: boolean = false) {
+    async onLoginSuccess(isUpdate = false) {
       try {
         const res = await request.get('/api-student/open/bindTeacher', {
           params: {
@@ -222,6 +237,17 @@ export default defineComponent({
             }}
           />
         </Popup>
+
+        {/* 是否在微信中打开 */}
+        <OWxTip
+          show={this.showTips}
+          message={'您已绑定机构，无法再绑定老师'}
+          showButton={true}
+          buttonText="确定"
+          onConfirm={() => {
+            this.showTips = false
+          }}
+        />
       </div>
     )
   }

src/styles/index.less

@@ -118,6 +118,10 @@ body {
   margin-bottom: 12px !important;
 }
 
+.mt8 {
+  margin-top: 8px !important;
+}
+
 .btnGroup {
   padding: 0 28px;
   padding-bottom: 15px;
@@ -182,4 +186,4 @@ body {
   --music-list-item-free-color: #ff4700;
   --music-list-item-charge-bg: #e1f0ff;
   --music-list-item-charge-color: #0086ff;
-}
+}

src/styles/tenant.less

@@ -6,6 +6,12 @@
   --tag-color: #FE2451;
 }
 
+/* 以下是使用颜色关键字的代码 */
+progress::-webkit-progress-value {
+  background-color: #FE2451;
+}
+
+
 body {
   background-color: #fafafa;
   user-select: none;
@@ -16,13 +22,41 @@ body {
   justify-content: space-between !important;
 }
 
-
-/* 以下是使用颜色关键字的代码 */
-progress::-webkit-progress-value {
-  background-color: #FE2451;
-}
-
 input,
 textarea {
   caret-color: #FE2451;
+}
+
+.van-overlay {
+  --van-overlay-background-color: rgba(0, 0, 0, 0.5);
+}
+
+.confirm-button-group {
+  .van-dialog__message {
+    font-size: 15px;
+    color: #666666;
+    padding: 20px 12px 25px !important;
+  }
+
+  .van-action-bar-button--last,
+  .van-action-bar-button--first {
+    border-radius: 999px;
+    font-size: 16px;
+    font-weight: 400 !important;
+    line-height: 40px;
+    line-height: 40px;
+  }
+
+  .van-action-bar-button--first {
+    background: #FFFFFF;
+    border: 1px solid #DBDBDB;
+    color: #333333;
+  }
+
+  .van-action-bar-button--last {
+    margin-left: 15px;
+    color: #fff !important;
+    background-color: var(--van-primary) !important;
+    color: #FFFFFF;
+  }
 }

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

@@ -12,6 +12,7 @@ import ColSticky from '@/components/col-sticky'
 import LiveItem from '@/views/live-class/live-item'
 import { state } from '@/state'
 import { postMessage } from '@/helpers/native-message'
+import ColHeader from '@/components/col-header'
 export default defineComponent({
   name: 'VideoDetail',
   data() {
@@ -140,6 +141,7 @@ export default defineComponent({
   render() {
     return (
       <div class={[styles['video-detail'], 'mb12']}>
+        <ColHeader />
         {this.userInfo.id && <UserDetail userInfo={this.userInfo} />}
         <SectionDetail border>
           <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>

src/tenant/activation-code/index.module.less

@@ -131,10 +131,14 @@
     }
 
     .liveBtn {
+      height: 25px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 1;
+      min-width: 64px;
       background: #FE2451;
       border-radius: 6px;
-      padding: 0 12px;
-      height: 25px;
     }
   }
 }

src/tenant/activation-code/index.tsx

@@ -142,8 +142,8 @@ export default defineComponent({
               </div>
               <Row class={styles.colRow}>
                 <Col span={5}>激活码</Col>
-                <Col span={4}>周期</Col>
-                <Col span={6}>激活状态</Col>
+                <Col span={5}>周期</Col>
+                <Col span={5}>激活状态</Col>
                 <Col span={9}>激活时间</Col>
               </Row>
 
@@ -151,10 +151,10 @@ export default defineComponent({
                 {state.list.map((item: any) => (
                   <Row>
                     <Col span={5}>{item.activationCode}</Col>
-                    <Col span={4}>{item.purchaseCycle}个月</Col>
+                    <Col span={5}>{item.purchaseCycle}个月</Col>
                     <Col
-                      span={6}
-                      class={item.activationStatus ? styles.c1 : styles.c3}
+                      span={5}
+                      class={item.activationStatus ? styles.c1 : styles.c2}
                     >
                       {item.activationStatus ? '已激活' : '待激活'}
                     </Col>

src/tenant/exercise-record/echats.ts

@@ -146,6 +146,7 @@ export const lineChartOption = {
   ],
   formatter: (item: any) => {
     if (Array.isArray(item)) {
+      // console.log(item, 'formatter')
       return [
         item[0].axisValueLabel,
         ...item.map(

src/tenant/exercise-record/exercis-detail.module.less

@@ -21,7 +21,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 214px;
+
     z-index: -1;
   }
 }
@@ -43,6 +43,7 @@
 
 
   .level {
+    margin-top: -4px;
     width: 44px;
     height: 17px;
   }
@@ -145,7 +146,7 @@
       span {
         margin-left: 1px;
         font-size: 12px;
-        font-weight: 400;
+        font-weight: 400 !important;
         color: #333333;
         line-height: 17px;
       }
@@ -164,7 +165,7 @@
   :global {
     .van-sticky {
       background: url('../images/bg-image-1.png') no-repeat top center;
-      background-size: 100% 214px;
+      background-size: cover;
       z-index: 99999999;
     }
   }

src/tenant/exercise-record/modals/detail-item.module.less

@@ -33,7 +33,7 @@
         }
 
         .iconPlay {
-          margin-top: -1px;
+          margin-top: -1px !important;
           font-size: 20px;
           width: 20px;
           height: 20px;

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

@@ -192,7 +192,7 @@
       background: linear-gradient(44deg, #FCE3E1 0%, #FEF3EC 29%, #FDDDD5 59%, #FEDBE3 100%);
       border-radius: 12px;
       // opacity: 0.27;
-      margin: 13px 12px 20px;
+      margin: 0px 12px 20px;
 
       text-align: justify;
       font-size: 14px;
@@ -275,13 +275,13 @@
       margin-top: 8px;
       border-radius: 8px;
       overflow: hidden;
-      background-color: #faefe3;
+      background: #FDF1EA;
       text-align: center;
     }
 
     .function_text {
       font-size: 12px;
-      color: #814014;
+      color: #811C14;
       line-height: 16px;
     }
   }
@@ -406,11 +406,9 @@
         height: 14px;
         background: url('./images/icon-arrow-line.png') no-repeat center;
         background-size: contain;
-        transition: all .2s;
 
         &.iconArrowLineHide {
           transform: rotate(180deg);
-          transition: all .2s;
         }
       }
     }

src/tenant/music/album-detail/index.module.less

@@ -161,7 +161,7 @@
 .musicContent {
   position: absolute;
   top: 0;
-  height: 265px;
+  height: 305px;
   width: 100%;
   padding-top: 55px;
   z-index: 10;
@@ -173,7 +173,7 @@
 .bg {
   position: relative;
   height: 100%;
-  padding: 5px 16px 12px;
+  padding: 5px 16px 18px;
   z-index: 11;
 }
 
@@ -201,7 +201,7 @@
     width: calc(100% - 129px);
 
     .des {
-      color: #999;
+      color: rgba(255, 255, 255, 0.5);
       line-height: 16px;
     }
   }
@@ -236,9 +236,9 @@
     justify-content: center;
     width: 32%;
     height: 36px;
-    font-size: 15px;
+    font-size: 14px;
     color: #fff;
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(255, 255, 255, 0.2);
     border-radius: 99px;
     font-weight: 600;
 
@@ -255,7 +255,8 @@
   background-size: contain;
   // border-radius: 16px;
   // opacity: 0.32;
-  padding: 11px 10px 10px;
+  padding: 0 10px;
+  height: 36px;
   margin-top: 12px;
   font-size: 13px;
   font-weight: 500;
@@ -267,7 +268,7 @@
 
   .albumPrice {
     font-size: 13px;
-    font-weight: 400;
+    font-weight: 500;
     color: #FFE1AE;
     line-height: 18px;
     background: #262626;
@@ -307,6 +308,7 @@
       font-size: 12px;
       color: #808593;
       padding-left: 3px;
+      font-weight: 400;
     }
   }
 }

src/tenant/music/album-detail/index.tsx

@@ -165,7 +165,8 @@ export default defineComponent({
         Dialog.confirm({
           title: '提示',
           message: '您有一个未支付的订单，是否继续支付？',
-          confirmButtonColor: '#269a93',
+          theme: 'round-button',
+          className: 'confirm-button-group',
           cancelButtonText: '取消订单',
           confirmButtonText: '继续支付'
         })
@@ -297,7 +298,10 @@ export default defineComponent({
                 class={styles.alumCollectItem}
                 onClick={() =>
                   router.push({
-                    path: '/music-album'
+                    path: '/look-album-list',
+                    query: {
+                      id: route.params.id
+                    }
                   })
                 }
               >

src/tenant/music/album/index.module.less

@@ -2,7 +2,7 @@
   position: relative;
   z-index: 1;
   background: url('@/tenant/images/bg-image.png') no-repeat top center;
-  background-size: 100% 265px;
+  background-size: 100% 346px;
 }
 
 .headerImg {
@@ -10,13 +10,17 @@
   left: 0;
   top: 0;
   width: 100%;
-  height: 265px;
+  height: 346px;
   object-fit: cover;
   filter: blur(10px);
 }
 
 .headerContent {
   :global {
+    .van-search {
+      padding-bottom: 0;
+    }
+
     .van-search__content {
       background: rgba(255, 255, 255, 0.5) !important;
 
@@ -87,7 +91,7 @@
 }
 
 .musicGrid {
-  margin: 16px 12px;
+  margin: 8px 12px;
 }
 
 .tagTabs {

src/tenant/music/component/music-grid/index.module.less

@@ -16,11 +16,11 @@
   }
 
   .item {
-    margin-bottom: 14px;
+    margin-bottom: 20px;
 
     .title {
-      font-size: 14px;
-      color: #333;
+      font-size: 13px;
+      color: #131415;
       line-height: 20px;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -37,7 +37,7 @@
 
   .imgWrap {
     position: relative;
-    height: 104px;
+    height: 88px;
     // height: calc((100vw - 28px) / 3);
     border-radius: 10px;
     overflow: hidden;

src/tenant/music/component/song/index.module.less

@@ -52,7 +52,8 @@
     .top {
       display: flex;
       align-items: center;
-      margin-bottom: 10px;
+      margin-bottom: 4px;
+      padding-top: 1px;
     }
 
     .tag {
@@ -65,6 +66,10 @@
       margin-left: 6px;
     }
 
+    .tag:last-child {
+      margin-left: 6px;
+    }
+
     .user {
       display: flex;
       align-items: center;
@@ -73,8 +78,7 @@
         font-size: 13px;
         color: #999;
         line-height: 16px;
-        margin-left: 6px;
-        padding-top: 2px;
+        // padding-top: 2px;
         max-width: 120px;
         white-space: nowrap;
         overflow: hidden;
@@ -88,9 +92,11 @@
         color: #FE2451;
         padding: 2px 6px;
         transform: scale(0.9);
+        margin-right: 6px;
       }
 
       .tags {
+
         &>span {
           display: inline-block;
           background: #FFEAF2;

src/tenant/music/component/song/index.tsx

@@ -104,7 +104,7 @@ export default defineComponent({
                   />
 
                   {n.exquisiteFlag === 1 && (
-                    <div class={styles.exquisiteTag}>精选</div>
+                    <div class={styles.exquisiteTag}>精品</div>
                   )}
 
                   <div class={styles.tags}>

src/tenant/music/list/index.module.less

@@ -21,7 +21,7 @@
       }
 
       .van-field__clear {
-        color: rgba(0, 0, 0, 0.4) !important;
+        color: #C1BDC1 !important;
       }
     }
 
@@ -39,11 +39,18 @@
       border-color: transparent transparent rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.4);
     }
 
+    .van-dropdown-menu__title--active::after {
+      border-color: transparent transparent #FE2451 #FE2451;
+    }
+
     .van-dropdown-item__content {
       border-radius: 0px 0px 20px 20px;
-
     }
 
+
+    .van-search {
+      padding-bottom: 0;
+    }
   }
 
   .titleActive {

src/tenant/music/list/index.tsx

@@ -386,8 +386,8 @@ export default defineComponent({
                     left: () => (
                       <DropdownMenu>
                         <DropdownItem
-                          titleClass={styles.titleActive}
-                          title="筛选"
+                          // titleClass={styles.titleActive}
+                          title={subject.name}
                           ref={searchRef}
                         >
                           <SelectSubject

src/tenant/music/music-detail/index.module.less

@@ -266,8 +266,8 @@
 
   // border: 1px solid #2dc7aa;
   .icon {
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     border-radius: 10px;
   }
 
@@ -287,6 +287,7 @@
     >p {
       color: var(--music-list-item-mate-color);
       line-height: 17px;
+      padding-top: 3px !important;
     }
   }
 
@@ -333,6 +334,7 @@
     }
 
     >p {
+      padding-top: 3px;
       color: var(--music-list-item-mate-color);
       line-height: 17px;
     }
@@ -391,7 +393,7 @@
 
   .tag {
     flex-shrink: 0;
-    padding: 2px 4px 0;
+    padding: 0px 4px 0;
     border-radius: 4px;
 
     &+.tag {
@@ -414,6 +416,7 @@
     }
 
     >p {
+      padding-top: 3px;
       font-size: 12px;
       color: #999;
       line-height: 17px;

src/tenant/music/music-detail/new-index.module.less

@@ -178,7 +178,7 @@
 
   .tag {
     margin: 0 2px;
-    padding: 2px 6px;
+    padding: 1px 6px;
     color: #000;
     // background-color: rgba(113, 138, 147, 1);
     border-radius: 4px;
@@ -218,9 +218,11 @@
 
 .albumTips {
   background: url('../album-detail/charge_bg.png') no-repeat center;
-  background-size: contain;
+  background-size: cover;
   padding: 10px 10px;
   margin-top: 12px;
+  border-radius: 10px;
+  overflow: hidden;
   font-size: 13px;
   font-weight: 500;
   color: #5E3314;
@@ -414,7 +416,7 @@
 
   :global {
     .van-button {
-      font-size: 18px;
+      font-size: 16px;
       font-weight: 600;
       color: #FFFFFF;
       line-height: 25px;
@@ -494,6 +496,8 @@
 }
 
 .staffContainer {
+  background: linear-gradient(180deg, #FFEAEE 0%, #FFFFFF 100%) no-repeat;
+  background-size: 100% 59px;
   // text-align: center;
   padding: 15px 15px 24px;
 
@@ -502,6 +506,7 @@
     font-size: 16px;
     color: #1a1a1a;
     line-height: 22px;
+    text-align: center;
   }
 
   .staffImg {
@@ -511,8 +516,7 @@
 
   .name {
     padding-left: 17px;
-    font-size: 13px;
-    font-weight: 500;
+    font-size: 14px;
     color: #333333;
   }
 
@@ -520,6 +524,7 @@
     background: transparent !important;
     width: 15px;
     height: 15px;
+    font-size: 20px;
     border: transparent !important;
   }
 
@@ -528,7 +533,8 @@
     border-radius: 8px;
 
     .name {
-      color: var(--van-primary);
+
+      font-weight: 600;
     }
   }
 
@@ -591,8 +597,8 @@
 
   // border: 1px solid #2dc7aa;
   .icon {
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     border-radius: 10px;
   }
 
@@ -612,6 +618,7 @@
     >p {
       color: var(--music-list-item-mate-color);
       line-height: 17px;
+      padding-top: 3px;
     }
   }
 
@@ -628,4 +635,9 @@
     color: #ffffff;
     line-height: 20px;
   }
+}
+
+.staffChange {
+  --van-popup-close-icon-color: #4C4949;
+  --van-popup-close-icon-size: 18px;
 }

src/tenant/music/music-detail/new-index.tsx

@@ -430,7 +430,8 @@ export default defineComponent({
         Dialog.confirm({
           title: '提示',
           message: '您有一个未支付的订单，是否继续支付？',
-          confirmButtonColor: '#269a93',
+          theme: 'round-button',
+          className: 'confirm-button-group',
           cancelButtonText: '取消订单',
           confirmButtonText: '继续支付'
         })
@@ -647,7 +648,6 @@ export default defineComponent({
               <span>{musicDetail.value?.favoriteCount}</span>
             </div>
           </div>
-
           {musicDetail.value?.id && !buyState.value.play && (
             <div class={styles.albumTips}>
               {buyState.value.charge && buyState.value.vip ? (
@@ -862,6 +862,7 @@ export default defineComponent({
           teleport="body"
           closeable
           style={{ width: '80%' }}
+          class={styles.staffChange}
           round
         >
           <div class={styles.staffContainer}>
@@ -885,7 +886,6 @@ export default defineComponent({
                           icon: (props: any) => (
                             <Icon
                               class={styles.boxStyle}
-                              size={16}
                               name={
                                 props.checked
                                   ? activeButtonIcon
@@ -915,7 +915,6 @@ export default defineComponent({
                           icon: (props: any) => (
                             <Icon
                               class={styles.boxStyle}
-                              size={16}
                               name={
                                 props.checked
                                   ? activeButtonIcon
@@ -945,7 +944,6 @@ export default defineComponent({
                           icon: (props: any) => (
                             <Icon
                               class={styles.boxStyle}
-                              size={16}
                               name={
                                 props.checked
                                   ? activeButtonIcon

src/tenant/music/personal/index.module.less

@@ -36,7 +36,7 @@
   :global {
     .van-sticky {
       background: url('../../images/bg-image-1.png') no-repeat top center;
-      background-size: 100% 214px;
+      background-size: cover;
     }
 
     .van-search__content {
@@ -62,7 +62,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 214px;
+
     // object-fit: cover;
     z-index: -1;
   }
@@ -122,6 +122,8 @@
   }
 
   .tenantContent {
+    padding-top: 6px;
+
     h2 {
       font-size: 16px;
       font-weight: 500;
@@ -130,6 +132,7 @@
     }
 
     p {
+      padding-top: 6px;
       font-size: 13px;
       color: #777777;
       line-height: 24px;

src/tenant/music/search/all-search.module.less

@@ -2,7 +2,7 @@
   background: url('../../images/album-bg.png') no-repeat top center #fff;
   background-size: contain;
   border-radius: 16px;
-  margin: 12px 13px;
+  margin: 8px 13px;
   padding: 12px 12px 0;
 
   .albumTitle {
@@ -11,6 +11,14 @@
     color: #131415;
     line-height: 22px;
     padding-bottom: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .iconArrow {
+    font-size: 12px;
+    color: #877C81;
   }
 }
 

src/tenant/music/search/all-search.tsx

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import MusicGrid from '../component/music-grid'
 import request from '@/helpers/request'
 import MusicSwiper from './music-swiper'
+import { Icon } from 'vant'
 
 export default defineComponent({
   name: 'MusicSearch',
@@ -44,7 +45,19 @@ export default defineComponent({
     return () => (
       <div class={styles.allSearch}>
         <div class={styles.albumSection}>
-          <div class={styles.albumTitle}>热门专辑</div>
+          <div class={styles.albumTitle}>
+            <p>热门专辑</p>
+
+            <Icon
+              name="arrow"
+              class={styles.iconArrow}
+              onClick={() => {
+                router.push({
+                  path: '/music-album'
+                })
+              }}
+            />
+          </div>
           <div class={styles.musicGrid}>
             <MusicGrid
               list={state.albumList}

src/tenant/music/search/header.tsx

@@ -30,6 +30,7 @@ import { state } from '@/state'
 import TheSticky from '@/components/the-sticky'
 import bgImg from '../../images/bg-image-search.png'
 import iconSearch from './icon-search.png'
+import iconDelete from './icon-delete.png'
 import request from '@/helpers/request'
 import { browser } from '@/helpers/utils'
 import ColHeader from '@/components/col-header'
@@ -89,7 +90,12 @@ export default defineComponent({
     const searchResultStatus = ref(false)
     const keyword = ref('')
     const tagids = ref('')
-    const words = useLocalStorage<string[]>('music-search', [])
+    const words = useLocalStorage<string[]>(
+      route.path === '/music-songbook/search'
+        ? 'music-search'
+        : 'music-search-ablum',
+      []
+    )
     const activeTab = ref('all')
 
     if (route.path === '/music-songbook/result') {
@@ -129,15 +135,36 @@ export default defineComponent({
     const searchList = ref<any>([])
     const onInputSearch = useThrottleFn(async (val: any) => {
       try {
-        const { data } = await request.post('/api-student/music/sheet/search', {
-          hideLoading: true,
-          data: {
-            subjectId: subjects.id,
-            name: val,
-            rows: 10
-          }
-        })
-        const tempMusics = data.musicNames || []
+        let tData: any = {}
+        if (route.path === '/music-songbook/searchAlbum') {
+          const { data } = await request.post(
+            '/api-student/music/sheet/searchTenant',
+            {
+              hideLoading: true,
+              data: {
+                // subjectId: subjects.id,
+                name: val,
+                rows: 10
+              }
+            }
+          )
+          tData = data
+        } else {
+          const { data } = await request.post(
+            '/api-student/music/sheet/search',
+            {
+              hideLoading: true,
+              data: {
+                subjectId: subjects.id,
+                name: val,
+                rows: 10
+              }
+            }
+          )
+          tData = data
+        }
+
+        const tempMusics = tData.musicNames || []
         tempMusics.forEach((item: any, index: number) => {
           if (index < 10) {
             item.name = item.name.replace(val, `<span>${val}</span>`)
@@ -161,18 +188,27 @@ export default defineComponent({
         words.value.unshift(val)
         // console.log(words.value.length, 'words.value.length')
         words.value.length = Math.min(words.value.length, 10)
+        // 结合搜索
         if (route.path === '/music-songbook/search') defaultClose()
+        // 机构专辑搜索
+        if (route.path === '/music-songbook/searchAlbum') defaultClose()
       }
-      // mitter.emit('search', val)
-      if (route.path !== '/music-songbook/result') {
-        router.replace({
-          path: '/music-songbook/result',
-          query: {
-            search: val
-          }
-        })
-        searchResultStatus.value = false
-        searchList.value = []
+      // 机构专辑详情
+      if (route.path !== '/music-songbook/searchAlbum') {
+        // 综合搜索
+        if (route.path !== '/music-songbook/result') {
+          router.replace({
+            path: '/music-songbook/result',
+            query: {
+              search: val
+            }
+          })
+          searchResultStatus.value = false
+          searchList.value = []
+        } else {
+          searchResultStatus.value = false
+          mitter.emit('search', val)
+        }
       } else {
         searchResultStatus.value = false
         mitter.emit('search', val)
@@ -230,7 +266,7 @@ export default defineComponent({
             }
 
             if (!collapse.arrowStatus) {
-              if (collapse.line > 2) {
+              if (collapse.line > 1) {
                 //从第3行开始 隐藏标签
                 item.$el.style.display = 'none'
               } else {
@@ -247,6 +283,7 @@ export default defineComponent({
     }
     // 首先调用默认收起的方法
     if (route.path === '/music-songbook/search') defaultClose()
+    if (route.path === '/music-songbook/searchAlbum') defaultClose()
 
     onMounted(() => {
       postMessage({
@@ -259,7 +296,12 @@ export default defineComponent({
         <div class={styles.search}>
           <div class={styles.sticky}>
             <TheSticky position="top">
-              <ColHeader isFixed={false} background="transparent" title=" " />
+              <ColHeader
+                isFixed={false}
+                background="transparent"
+                isBack={false}
+                title=" "
+              />
               <Search
                 modelValue={keyword.value}
                 background="transparent"
@@ -274,43 +316,41 @@ export default defineComponent({
                     if (route.path === '/music-songbook/result') {
                       router.replace('/music-songbook/search')
                     }
+
+                    if (route.path === '/music-songbook/searchAlbum') {
+                      mitter.emit('search', '')
+                    }
                   }
                 }}
                 onSearch={(val: any) => {
-                  if (!val) return
+                  if (!val) {
+                    if (route.path === '/music-songbook/searchAlbum') {
+                      mitter.emit('search', '')
+                    }
+                    return
+                  }
                   keyword.value = val
-                  console.log(val, 'val')
                   onSearch(val)
                   // searchResultStatus.value = true
                 }}
                 type="tenant"
                 v-slots={{
-                  left: () => (
-                    // <div
-                    //   class={styles.label}
-                    //   onClick={() => (subject.show = true)}
-                    // >
-                    //   {subject.name}
-                    //   <Icon
-                    //     classPrefix="iconfont"
-                    //     name="down"
-                    //     size={12}
-                    //     color="#333"
-                    //   />
-                    // </div>
-                    <DropdownMenu>
-                      <DropdownItem
-                        titleClass={styles.titleActive}
-                        title="筛选"
-                        ref={searchRef}
-                      >
-                        <SelectSubject
-                          searchParams={subject}
-                          onComfirm={onComfirmSubject}
-                        />
-                      </DropdownItem>
-                    </DropdownMenu>
-                  ),
+                  left: () =>
+                    route.path !== '/music-songbook/searchAlbum' && (
+                      <DropdownMenu>
+                        <DropdownItem
+                          // titleClass={styles.titleActive}
+                          title={subject.name}
+                          ref={searchRef}
+                        >
+                          <SelectSubject
+                            isReset
+                            searchParams={subject}
+                            onComfirm={onComfirmSubject}
+                          />
+                        </DropdownItem>
+                      </DropdownMenu>
+                    ),
                   action: () => (
                     <span
                       class={styles.searchCancel}
@@ -346,49 +386,53 @@ export default defineComponent({
             </TheSticky>
             <img class={styles.bgImg} src={bgImg} />
           </div>
-          {words.value.length > 0 && route.path === '/music-songbook/search' && (
-            <div class={styles.keywordSection}>
-              <div class={styles.keywordTitle}>
-                <span class={styles.t}>搜索历史</span>
-                <Icon
-                  class={styles.remove}
-                  name="delete-o"
-                  onClick={() => (words.value = [])}
-                />
-              </div>
-              <div class={classNames(styles.keywords)}>
-                <div class={styles.content}>
-                  {words.value.map((item: any, index: number) => (
-                    <Tag
-                      ref={(el: any) => (tagRef.value[index] = el)}
-                      round
-                      class={[styles.searchKeyword, 'van-ellipsis']}
-                      key={item}
-                      onClick={() => {
-                        keyword.value = item
-                        onSearch(item)
-                      }}
-                    >
-                      {item}
-                    </Tag>
-                  ))}
-                  {collapse.line > 2 && (
-                    <span
-                      class={[styles.arrowMore]}
-                      onClick={() => {
-                        collapse.arrowStatus = !collapse.arrowStatus
-                        defaultClose()
-                      }}
-                    >
-                      <Icon
-                        name={collapse.arrowStatus ? 'arrow-up' : 'arrow-down'}
-                      />
-                    </span>
-                  )}
+          {words.value.length > 0 &&
+            (route.path === '/music-songbook/search' ||
+              route.path === '/music-songbook/searchAlbum') && (
+              <div class={styles.keywordSection}>
+                <div class={styles.keywordTitle}>
+                  <span class={styles.t}>搜索历史</span>
+                  <Icon
+                    class={styles.remove}
+                    name={iconDelete}
+                    onClick={() => (words.value = [])}
+                  />
+                </div>
+                <div class={classNames(styles.keywords)}>
+                  <div class={styles.content}>
+                    {words.value.map((item: any, index: number) => (
+                      <Tag
+                        ref={(el: any) => (tagRef.value[index] = el)}
+                        round
+                        class={[styles.searchKeyword, 'van-ellipsis']}
+                        key={item}
+                        onClick={() => {
+                          keyword.value = item
+                          onSearch(item)
+                        }}
+                      >
+                        {item}
+                      </Tag>
+                    ))}
+                    {collapse.line > 1 && (
+                      <span
+                        class={[styles.arrowMore]}
+                        onClick={() => {
+                          collapse.arrowStatus = !collapse.arrowStatus
+                          defaultClose()
+                        }}
+                      >
+                        <Icon
+                          name={
+                            collapse.arrowStatus ? 'arrow-up' : 'arrow-down'
+                          }
+                        />
+                      </span>
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-          )}
+            )}
           {route.path === '/music-songbook/search' && (
             <Tabs
               color="var(--van-primary)"
@@ -406,22 +450,6 @@ export default defineComponent({
           )}
           <RouterView />
 
-          {/* 声部弹框 */}
-          {/* <Popup
-            show={subject.show}
-            position="bottom"
-            round
-            closeable
-            safe-area-inset-bottom
-            onClose={() => (subject.show = false)}
-            onClosed={() => (subject.show = false)}
-          >
-            <SelectSubject
-              searchParams={subject}
-              onComfirm={onComfirmSubject}
-            />
-          </Popup> */}
-
           <div
             class={[styles.searchResult]}
             style={{ display: searchResultStatus.value ? 'block' : 'none' }}

src/tenant/music/search/index.module.less

@@ -1,3 +1,7 @@
+body {
+  background-color: #f8f8f8;
+}
+
 .search {
   --van-cell-background-color: transparent;
   --van-cell-font-size: 16px;
@@ -49,7 +53,10 @@
 
       .van-dropdown-item__content {
         border-radius: 0px 0px 20px 20px;
+      }
 
+      .van-dropdown-menu__title--active::after {
+        border-color: transparent transparent #FE2451 #FE2451;
       }
     }
 
@@ -153,7 +160,7 @@
   :global {
     .van-sticky {
       background: url('../../images/bg-image-search.png') no-repeat top center;
-      background-size: 100% 214px;
+      background-size: 100% 261px;
       box-shadow: none !important;
     }
 
@@ -169,7 +176,7 @@
       }
 
       .van-field__clear {
-        color: rgba(0, 0, 0, 0.4) !important;
+        color: #C1BDC1 !important;
       }
     }
 
@@ -181,7 +188,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 214px;
+  height: 261px;
   // object-fit: cover;
   z-index: -1;
 }
@@ -214,6 +221,23 @@
       bottom: 22px;
     }
 
+    .van-tabs__nav--line.van-tabs__nav--shrink,
+    .van-tabs__nav--line.van-tabs__nav--complete {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .van-tab--shrink {
+      padding: 0 15px 0 9px;
+    }
+  }
+}
+
+.alubmGroupSearch {
+  :global {
+    .van-list>div {
+      margin-top: 8px;
+    }
   }
 }
 
@@ -243,6 +267,7 @@
   .swipeChild {
     background: url('../../images/music-bg.png') no-repeat top center #fff;
     background-size: contain;
+    border-radius: 10px;
   }
 
   .swipeTitle {
@@ -315,7 +340,7 @@
   overflow: hidden;
   bottom: 0;
   padding-top: var(--header-height);
-  background: url('../../images/bg-image-search.png') no-repeat top center #fafafa;
+  background: url('../../images/bg-image-search.png') no-repeat top center #f8f8f8;
   background-size: 100% 214px;
 
 }
@@ -332,7 +357,7 @@
   .searchItem {
     display: flex;
     align-items: center;
-    padding: 0 12px 20px;
+    padding: 0 12px 32px;
 
     .rName {
       width: 90%;
@@ -351,4 +376,16 @@
     height: 16px;
     margin-right: 10px;
   }
+}
+
+.searchAlbum {
+  padding: 6px 13px 13px;
+
+  :global {
+    .van-list {
+      padding: 0 13px;
+      background: #FFFFFF;
+      border-radius: 16px;
+    }
+  }
 }

src/tenant/music/search/index.tsx

@@ -91,17 +91,19 @@ export default defineComponent({
             />
           )}
           {activeTab.value === 'album' && (
-            <AlbumList
-              hideSearch
-              ref={albumList}
-              defauleParams={{
-                albumTagIds: tagids.value,
-                subjectIds: subject.value
-              }}
-            />
+            <div class={styles.alubmGroupSearch}>
+              <AlbumList
+                hideSearch
+                ref={albumList}
+                defauleParams={{
+                  albumTagIds: tagids.value,
+                  subjectIds: subject.value
+                }}
+              />
+            </div>
           )}
           {activeTab.value === 'songe' && (
-            <div class={styles.musicGroup}>
+            <div class={[styles.musicGroup, 'mt8']}>
               <MusicSwiper
                 defauleParams={{
                   musicTagIds: tagids.value,

src/tenant/music/search/result-all-search.tsx

@@ -66,7 +66,7 @@ export default defineComponent({
         {state.albumList.length > 0 && (
           <div class={[styles.albumSection, styles.searchAllTitle]}>
             <div class={styles.albumTitle}>
-              <span>热门专辑</span>
+              <span>专辑</span>
 
               <span
                 class={styles.more}

src/tenant/music/search/search-result.tsx

@@ -91,20 +91,22 @@ export default defineComponent({
             />
           )}
           {activeTab.value === 'album' && (
-            <AlbumList
-              hideSearch
-              showLight
-              lightText={keyword.value as any}
-              ref={albumList}
-              defauleParams={{
-                search: keyword.value,
-                albumTagIds: tagids.value,
-                subjectIds: subject.value
-              }}
-            />
+            <div class="mt12">
+              <AlbumList
+                hideSearch
+                showLight
+                lightText={keyword.value as any}
+                ref={albumList}
+                defauleParams={{
+                  search: keyword.value,
+                  albumTagIds: tagids.value,
+                  subjectIds: subject.value
+                }}
+              />
+            </div>
           )}
           {activeTab.value === 'songe' && (
-            <div class={styles.musicGroup}>
+            <div class={[styles.musicGroup]}>
               <MusicList
                 hideSearch
                 showLight

src/tenant/music/search/searchAlbum.tsx

@@ -0,0 +1,136 @@
+import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+import styles from './index.module.less'
+import { useRoute, useRouter } from 'vue-router'
+import { getRandomKey } from '../music'
+import { mitter } from './header'
+import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
+import { List } from 'vant'
+import Song from '../component/song'
+import ColResult from '@/components/col-result'
+import { openDefaultWebView, state } from '@/state'
+import request from '@/helpers/request'
+
+export default defineComponent({
+  name: 'MusicSearch',
+  emits: ['confirm'],
+  setup() {
+    localStorage.setItem('behaviorId', getRandomKey())
+    const route = useRoute()
+    const router = useRouter()
+    const keyword = ref(route.query.keyword || '')
+    const subject = ref()
+
+    const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
+    subject.value = getSubject.id
+
+    const onSearch = val => {
+      keyword.value = val
+
+      if (data.value) {
+        data.value.rows = []
+      }
+      params.name = val
+      params.page = 1
+      FetchList()
+    }
+
+    const params = reactive({
+      name: (route.query.search as string) || '',
+      rows: 20,
+      page: 1
+    })
+    const data = ref<any>(null)
+    const loading = ref(false)
+    const finished = ref(false)
+    const isError = ref(false)
+
+    const FetchList = async () => {
+      if (loading.value) {
+        return
+      }
+      loading.value = true
+      isError.value = false
+      try {
+        const res = await request.post(
+          `/api-student/music/sheet/searchTenant`,
+          {
+            data: params
+          }
+        )
+        if (data.value) {
+          const result = (data.value?.rows || []).concat(
+            res.data.music.rows || []
+          )
+          data.value.rows = result
+        }
+        data.value = data.value || res.data.music
+
+        const temp = data.value.rows || []
+        temp.forEach((item: any) => {
+          if (keyword.value) {
+            item.musicSheetName = item.musicSheetName.replace(
+              keyword.value,
+              `<span style="color: #FE2451">${keyword.value}</span>`
+            )
+          }
+        })
+        data.value.rows = temp
+
+        params.page = res.data.music.pageNo + 1
+        finished.value = res.data.music.pageNo >= res.data.music.totalPage
+      } catch (error) {
+        isError.value = true
+      }
+      loading.value = false
+    }
+
+    onMounted(() => {
+      mitter.on('search', onSearch)
+      FetchList()
+    })
+
+    onUnmounted(() => {
+      mitter.off('search', onSearch)
+    })
+
+    return () => {
+      return (
+        <div class={[styles.search, styles.searchAlbum]}>
+          {data.value && data.value.rows.length ? (
+            <List
+              // loading={loading.value}
+              finished={finished.value}
+              finished-text={data.value && data.value.rows.length ? '' : ''}
+              onLoad={FetchList}
+              error={isError.value}
+              immediateCheck={false}
+            >
+              <Song
+                showTitleImg
+                list={data.value.rows}
+                onDetail={(item: any) => {
+                  const url =
+                    location.origin +
+                    location.pathname +
+                    '#/music-detail?id=' +
+                    item.id
+                  openDefaultWebView(url, () => {
+                    router.push({
+                      path: '/music-detail',
+                      query: {
+                        id: item.id
+                      }
+                    })
+                  })
+                }}
+              />
+            </List>
+          ) : (
+            !loading.value && <ColResult tips="暂无曲目" btnStatus={false} />
+          )}
+        </div>
+      )
+    }
+  }
+})

src/tenant/music/search/select-subject.module.less

@@ -16,6 +16,12 @@
     .van-button {
       font-size: 16px;
       line-height: 22px;
+      font-weight: bold;
+    }
+
+    .van-button--default {
+      color: #333;
+
     }
   }
 }
@@ -29,7 +35,7 @@
     color: #333333;
     line-height: 22px;
     font-size: 15px;
-    font-weight: 600;
+    font-weight: 600 !important;
   }
 }
 

src/tenant/music/search/select-subject.tsx

@@ -104,7 +104,7 @@ export default defineComponent({
           <div class={[styles.btnGroup, this.isReset ? 'btnMore' : '']}>
             {this.isReset && (
               <Button
-                type="primary"
+                // type="primary"
                 plain
                 round
                 onClick={() => {

src/tenant/music/train-tool/index.module.less

@@ -111,7 +111,7 @@
     .des {
 
       font-size: 12px;
-      color: #fff;
+      color: rgba(255, 255, 255, 0.5);
     }
   }
 }
@@ -148,9 +148,17 @@
       border-radius: 36px 36px 0px 0px;
     }
 
+    .van-tab--shrink {
+      padding: 0 12px 0 12px;
+    }
+
     .van-button--plain.van-button--primary {
       background-color: transparent;
     }
+
+    .van-sticky--fixed .van-tabs {
+      background-color: #fff;
+    }
   }
 
   .alumnList {
@@ -160,7 +168,7 @@
 
 .btnGroup {
   // background-color: #fff;
-  padding: 12px;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom));
 
   :global {
     .van-button {
@@ -308,7 +316,7 @@
     font-weight: 600;
     color: #131415;
     line-height: 22px;
-    padding: 26px 24px;
+    padding: 26px 24px 26px 13px;
 
     .iconArrowLine {
       display: inline-block;

src/tenant/music/train-tool/index.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, onMounted, reactive, ref } from 'vue'
-import { Image, Tabs, Tab, List, Button, Popup, Dialog } from 'vant'
+import { Image, Tabs, Tab, List, Button, Popup, Dialog, Sticky } from 'vant'
 import styles from './index.module.less'
 import TheSticky from '@/components/the-sticky'
 import ColHeader from '@/components/col-header'
@@ -78,7 +78,8 @@ export default defineComponent({
       musicCounts: false,
       subjectCounts: false,
       tenantAlbumStatus: 0 as any,
-      ablumStatus: false
+      ablumStatus: false,
+      heightV: 0
     })
     const params = reactive({
       page: 1,
@@ -113,29 +114,29 @@ export default defineComponent({
 
         if (state.subjectCounts) {
           state.activeTab = 'SUBJECT'
-        } else if (state.ensembleCounts) {
-          state.activeTab = 'ENSEMBLE'
         } else if (state.musicCounts) {
           state.activeTab = 'MUSIC'
+        } else if (state.ensembleCounts) {
+          state.activeTab = 'ENSEMBLE'
         }
         // 带的参数
         if (route.query.subjectType == 'SUBJECT' && state.subjectCounts) {
           state.activeTab = 'SUBJECT'
+        } else if (route.query.subjectType == 'MUSIC' && state.musicCounts) {
+          state.activeTab = 'MUSIC'
         } else if (
           route.query.subjectType == 'ENSEMBLE' &&
           state.ensembleCounts
         ) {
           state.activeTab = 'ENSEMBLE'
-        } else if (route.query.subjectType == 'MUSIC' && state.musicCounts) {
-          state.activeTab = 'MUSIC'
         }
         // subjectType 缓存
         if (subjectType == 'SUBJECT' && state.subjectCounts) {
           state.activeTab = 'SUBJECT'
-        } else if (subjectType == 'ENSEMBLE' && state.ensembleCounts) {
-          state.activeTab = 'ENSEMBLE'
         } else if (subjectType == 'MUSIC' && state.musicCounts) {
           state.activeTab = 'MUSIC'
+        } else if (subjectType == 'ENSEMBLE' && state.ensembleCounts) {
+          state.activeTab = 'ENSEMBLE'
         }
       } catch {
         //
@@ -238,7 +239,8 @@ export default defineComponent({
         Dialog.confirm({
           title: '提示',
           message: '您有一个未支付的订单，是否继续支付？',
-          confirmButtonColor: '#269a93',
+          theme: 'round-button',
+          className: 'confirm-button-group',
           cancelButtonText: '取消订单',
           confirmButtonText: '继续支付'
         })
@@ -286,7 +288,13 @@ export default defineComponent({
         {(state.tenantAlbumStatus === 0 || !state.ablumStatus) &&
         state.buy != '1' ? (
           <>
-            <TheSticky position="top">
+            <TheSticky
+              position="top"
+              onBarHeight={(height: any) => {
+                console.log(height, 'height', height)
+                state.heightV = height
+              }}
+            >
               <ColHeader border={false} isFixed={false} />
             </TheSticky>
             {!state.loading && (
@@ -307,7 +315,13 @@ export default defineComponent({
           </>
         ) : (
           <>
-            <TheSticky position="top">
+            <TheSticky
+              position="top"
+              onBarHeight={(height: any) => {
+                console.log(height, 'height', height)
+                state.heightV = height
+              }}
+            >
               <ColHeader
                 background={background.value}
                 border={false}
@@ -329,10 +343,10 @@ export default defineComponent({
                     src={state.details?.coverImg || iconAlbumCover}
                     errorIcon={iconAlbumCover}
                   />
-                  <span class={styles.numContent}>
+                  {/* <span class={styles.numContent}>
                     <img src={iconMenu} class={styles.iconMenu} />共
                     {state.details?.musicNum}首
-                  </span>
+                  </span> */}
 
                   <div class={styles.iconPian}>
                     <Image
@@ -362,28 +376,32 @@ export default defineComponent({
             </div>
 
             <div class={styles.musicList}>
-              <Tabs
-                color="var(--van-primary)"
-                background="transparent"
-                lineWidth={20}
-                shrink
-                v-model:active={state.activeTab}
-                onChange={val => {
-                  state.activeTab = val
+              <Sticky position="top" offsetTop={state.heightV}>
+                <Tabs
+                  color="var(--van-primary)"
+                  background="transparent"
+                  lineWidth={20}
+                  shrink
+                  v-model:active={state.activeTab}
+                  onChange={val => {
+                    state.activeTab = val
 
-                  params.page = 1
-                  state.list = []
-                  FetchList()
-                }}
-              >
-                {state.subjectCounts && (
-                  <Tab title="声部练习" name="SUBJECT"></Tab>
-                )}
-                {state.musicCounts && <Tab title="独奏曲目" name="MUSIC"></Tab>}
-                {state.ensembleCounts && (
-                  <Tab title="合奏练习" name="ENSEMBLE"></Tab>
-                )}
-              </Tabs>
+                    params.page = 1
+                    state.list = []
+                    FetchList()
+                  }}
+                >
+                  {state.subjectCounts && (
+                    <Tab title="声部练习" name="SUBJECT"></Tab>
+                  )}
+                  {state.musicCounts && (
+                    <Tab title="独奏曲目" name="MUSIC"></Tab>
+                  )}
+                  {state.ensembleCounts && (
+                    <Tab title="合奏练习" name="ENSEMBLE"></Tab>
+                  )}
+                </Tabs>
+              </Sticky>
 
               <div class={styles.alumnList}>
                 <List

src/tenant/trade/detail.tsx

@@ -93,11 +93,11 @@ export default defineComponent({
                           )}
                         </div>
 
-                        {orderDetail.bizInfo?.bizMusicCount > 0 && (
+                        {/* {orderDetail.bizInfo?.bizMusicCount > 0 && (
                           <span class={styles.songLength}>
                             共{orderDetail.bizInfo?.bizMusicCount}首
                           </span>
-                        )}
+                        )} */}
                       </div>
                     )
                   }}

src/tenant/trade/index.module.less

@@ -17,10 +17,14 @@
       }
 
       .van-field__clear {
-        color: rgba(0, 0, 0, 0.4) !important;
+        color: #C1BDC1 !important;
       }
     }
 
+    .van-search {
+      padding-bottom: 0;
+    }
+
   }
 }
 
@@ -131,12 +135,12 @@
 
 
 .tradeList {
-  padding-top: 12px;
+  padding-top: 16px;
 
   :global {
     .van-cell-group {
       overflow: hidden;
-      border-radius: 10px;
+      border-radius: 10px !important;
       margin-bottom: 12px;
       padding-bottom: 18px;
     }

src/tenant/trade/index.tsx

@@ -281,11 +281,11 @@ export default defineComponent({
                                 )}
                               </div>
 
-                              {orderDetail.bizInfo?.bizMusicCount > 0 && (
+                              {/* {orderDetail.bizInfo?.bizMusicCount > 0 && (
                                 <span class={styles.songLength}>
                                   共{orderDetail.bizInfo?.bizMusicCount}首
                                 </span>
-                              )}
+                              )} */}
                             </div>
                           )
                         }}

src/views/adapay/payment/index.module.less

@@ -121,7 +121,7 @@
     font-size: 11px;
     color: #ffffff;
     line-height: 16px;
-    padding: 0 5px;
+    padding: 1px 5px 0;
   }
 
   .payBtn {

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

@@ -76,14 +76,15 @@
     }
 
     .priceSection {
-      display: flex;
-      align-items: center;
+      // display: flex;
+      // align-items: center;
       font-size: 14px;
       font-weight: 500;
       color: #999999;
       line-height: 20px;
 
       .price {
+        display: inline-block;
         font-size: 28px;
         font-weight: bold;
         color: #ff3535;

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

@@ -24,6 +24,7 @@
 
       .info {
         margin-left: 14px;
+        padding-top: 2px;
         flex: 1;
 
         >h4 {
@@ -80,6 +81,7 @@
     :global {
       .van-tag {
         padding: 2px 6px 1px;
+        border-radius: 4px;
       }
     }
   }

src/views/order-detail/order-tennat-album/index.module.less

@@ -1,6 +1,6 @@
 .album {
   margin-bottom: 12px;
-  padding: 10px;
+  padding: 15px;
   background-color: var(--music-list-item-background-color);
   border-radius: 10px;
   display: flex;
@@ -82,4 +82,31 @@
       margin-top: 1px;
     }
   }
+}
+
+.albumWeek {
+  background-color: #fff;
+  margin-bottom: 12px;
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+
+  border-radius: 6px;
+
+  .albumTitle {
+    font-size: 16px;
+    font-weight: 600;
+    color: #131415;
+    line-height: 22px;
+  }
+
+  .albumNum {
+    font-size: 14px;
+    font-weight: 500;
+    color: #FE2451;
+    line-height: 20px;
+
+  }
 }

src/views/order-detail/order-tennat-album/index.tsx

@@ -15,18 +15,25 @@ export default defineComponent({
     const item = this.item
     console.log(item)
     return (
-      <div class={styles.album}>
-        <Image class={styles.img} src={item.coverImg} />
+      <>
+        <div class={styles.album}>
+          <Image class={styles.img} src={item.coverImg} />
 
-        <span class={styles.albumType}>{item.purchaseCycle}个月</span>
+          {/* <span class={styles.albumType}>{item.purchaseCycle}个月</span> */}
 
-        <div class={styles.content}>
-          <h4 class="van-ellipsis">{item.name}</h4>
-          <p class="van-multi-ellipsis--l2">{item.describe}</p>
+          <div class={styles.content}>
+            <h4 class="van-ellipsis">{item.name}</h4>
+            <p class="van-multi-ellipsis--l2">{item.describe}</p>
 
-          <span class={styles.musicNum}>共{item.musicNum}首</span>
+            {/* <span class={styles.musicNum}>共{item.musicNum}首</span> */}
+          </div>
         </div>
-      </div>
+
+        <div class={styles.albumWeek}>
+          <span class={styles.albumTitle}>购买周期</span>
+          <span class={styles.albumNum}>{item.purchaseCycle}个月</span>
+        </div>
+      </>
     )
   }
 })

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

@@ -3,6 +3,10 @@
   height: 98px;
 }
 
+.container {
+  padding-top: 2px;
+}
+
 .titleClass {
   padding-left: 15px;
 }
@@ -57,4 +61,17 @@
     font-weight: 600;
     color: #131415;
   }
+}
+
+.cellGroup {
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.cellGroupTimer {
+  :global {
+    .van-cell {
+      padding: 15px;
+    }
+  }
 }

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

@@ -19,11 +19,7 @@ export default defineComponent({
     const item = this.item
     return (
       <div class={styles.videoOrder}>
-        <CellGroup
-          class={'mb12'}
-          border={false}
-          style={{ borderRadius: '8px', overflow: 'hidden' }}
-        >
+        <CellGroup class={['mb12', styles.cellGroup]} border={false}>
           <Cell
             // center
             titleClass={styles.titleClass}
@@ -43,9 +39,8 @@ export default defineComponent({
         </CellGroup>
 
         <CellGroup
-          class={'mb12'}
+          class={['mb12', styles.cellGroup, styles.cellGroupTimer]}
           border={false}
-          style={{ borderRadius: '8px', overflow: 'hidden' }}
         >
           <Cell
             center

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

@@ -121,7 +121,7 @@
     font-size: 11px;
     color: #ffffff;
     line-height: 16px;
-    padding: 0 5px;
+    padding: 1px 5px 0;
   }
 
   .payBtn {