修改样式

src/components/the-sticky/index.tsx

@@ -58,11 +58,13 @@ export default defineComponent({
     const divRef = ref()
     const div2Ref = ref()
     onMounted(() => {
+      console.log(forms.divStyle, 'forms.divStyle', props.position)
       if (props.position === 'top') {
         forms.divStyle.top = props.offsetTop || '0px'
       } else {
         forms.divStyle.bottom = props.offsetBottom || '0px'
       }
+
       // const resize = new ResizeObserver(() => {
       //   const { height } = useRect(div2Ref.value);
       //   __initHeight(height);

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

@@ -861,105 +861,106 @@ export default defineComponent({
           )}
         </div>
 
-        {musicDetail.value?.id && !buyState.value.hasTenantAlbum && (
-          <TheSticky position="bottom">
-            <div style={{ backgroundColor: '#fff' }}>
-              <div class={styles.videoOperation}>
-                {audioFileUrl.value && (
-                  <>
-                    {!buyState.value.play &&
-                      freeRate.value != 100 &&
-                      freeRate.value != 0 && (
-                        <div class={[styles.audition]}>
-                          <img src={iconListen} />
-                          <span>每首曲目可试听{freeRate.value}%</span>
-                        </div>
-                      )}
+        {musicDetail.value?.id &&
+          (!buyState.value.hasTenantAlbum || buyState.value.play) && (
+            <TheSticky position="bottom">
+              <div style={{ backgroundColor: '#fff' }}>
+                <div class={styles.videoOperation}>
+                  {audioFileUrl.value && (
+                    <>
+                      {!buyState.value.play &&
+                        freeRate.value != 100 &&
+                        freeRate.value != 0 && (
+                          <div class={[styles.audition]}>
+                            <img src={iconListen} />
+                            <span>每首曲目可试听{freeRate.value}%</span>
+                          </div>
+                        )}
 
-                    <div class={[styles.audio, styles.collectCell]}>
-                      <audio id="player" controls ref={audio}>
-                        <source src={audioFileUrl.value} type="audio/mp3" />
-                      </audio>
-                    </div>
-                  </>
-                )}
-              </div>
+                      <div class={[styles.audio, styles.collectCell]}>
+                        <audio id="player" controls ref={audio}>
+                          <source src={audioFileUrl.value} type="audio/mp3" />
+                        </audio>
+                      </div>
+                    </>
+                  )}
+                </div>
 
-              <div ref={footers} class={styles.footers}>
-                {/* 判断是否是免费的，或者已经购买过 */}
-                {buyState.value.play ? (
-                  <Button
-                    round
-                    block
-                    type="primary"
-                    color="linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%)"
-                    onClick={() => {
-                      const throttleFn = useThrottleFn(() => {
-                        player.value && player.value.stop()
-                        const item: any = partColumns.value.find(
-                          (c: any) => c.value === staffData.partIndex
-                        )
-                        const index = staffData.tempPartList.findIndex(
-                          (i: any) => i.track === item?.track
-                        )
-                        musicBuy(musicDetail.value, () => {}, {
-                          'part-index': index || 0,
-                          sett: staff.radio,
-                          // 1：忽略系统节拍器
-                          ignoreSysMetronome:
-                            route.query.subjectType === 'MUSIC' ? 1 : 0
-                        })
-                      }, 500)
+                <div ref={footers} class={styles.footers}>
+                  {/* 判断是否是免费的，或者已经购买过 */}
+                  {buyState.value.play ? (
+                    <Button
+                      round
+                      block
+                      type="primary"
+                      color="linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%)"
+                      onClick={() => {
+                        const throttleFn = useThrottleFn(() => {
+                          player.value && player.value.stop()
+                          const item: any = partColumns.value.find(
+                            (c: any) => c.value === staffData.partIndex
+                          )
+                          const index = staffData.tempPartList.findIndex(
+                            (i: any) => i.track === item?.track
+                          )
+                          musicBuy(musicDetail.value, () => {}, {
+                            'part-index': index || 0,
+                            sett: staff.radio,
+                            // 1：忽略系统节拍器
+                            ignoreSysMetronome:
+                              route.query.subjectType === 'MUSIC' ? 1 : 0
+                          })
+                        }, 500)
 
-                      throttleFn()
-                    }}
-                  >
-                    立即练习
-                  </Button>
-                ) : (
-                  <div class={[styles.buyBtn]}>
-                    {/* 判断是否是需要收费的 */}
-                    {buyState.value.charge && (
-                      <Button
-                        round
-                        type="primary"
-                        color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
-                        class={styles.primary}
-                        onClick={onBuy}
-                      >
-                        立即点播
-                      </Button>
-                    )}
+                        throttleFn()
+                      }}
+                    >
+                      立即练习
+                    </Button>
+                  ) : (
+                    <div class={[styles.buyBtn]}>
+                      {/* 判断是否是需要收费的 */}
+                      {buyState.value.charge && (
+                        <Button
+                          round
+                          type="primary"
+                          color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
+                          class={styles.primary}
+                          onClick={onBuy}
+                        >
+                          立即点播
+                        </Button>
+                      )}
 
-                    {/* 判断是否有会员的 */}
-                    {buyState.value.vip && (
-                      <Button
-                        round
-                        block={!buyState.value.charge ? true : false}
-                        type="primary"
-                        color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
-                        class={styles.memeber}
-                        onClick={() => {
-                          router.push({
-                            path: '/memberCenter',
-                            query: {
-                              ...route.query
-                            }
-                          })
-                        }}
-                      >
-                        {studentActivityId.value > 0 && (
-                          <div class={[styles.buttonDiscount]}>专属优惠</div>
-                        )}
-                        开通会员
-                      </Button>
-                    )}
-                  </div>
-                )}
+                      {/* 判断是否有会员的 */}
+                      {buyState.value.vip && (
+                        <Button
+                          round
+                          block={!buyState.value.charge ? true : false}
+                          type="primary"
+                          color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
+                          class={styles.memeber}
+                          onClick={() => {
+                            router.push({
+                              path: '/memberCenter',
+                              query: {
+                                ...route.query
+                              }
+                            })
+                          }}
+                        >
+                          {studentActivityId.value > 0 && (
+                            <div class={[styles.buttonDiscount]}>专属优惠</div>
+                          )}
+                          开通会员
+                        </Button>
+                      )}
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
-          </TheSticky>
-        )}
+            </TheSticky>
+          )}
 
         <Popup
           v-model:show={shareStatus.value}

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

@@ -65,18 +65,18 @@
 }
 
 .albumSearchTitle {
-  color: #F41E4B;
-  font-size: 14px;
-  background-color: #fff;
+  color: #F41E4B !important;
+  font-size: 14px !important;
+  background-color: #fff !important;
   padding: 6px 21px 2px 8px !important;
-  border-radius: 30px;
+  border-radius: 30px !important;
 
   &>div {
     max-width: 70px;
   }
 
   &::after {
-    right: 8px;
+    right: 8px !important;
     border-color: transparent transparent #F41E4B #F41E4B !important;
   }
 }

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

@@ -72,6 +72,7 @@ export default defineComponent({
     const isError = ref(false)
     const searchObj = ref<any>({})
     const searchRef = ref()
+    const albumRef = ref()
     const albumRecord = ref<any>([])
 
     const apiSuffix = ref(
@@ -199,6 +200,7 @@ export default defineComponent({
                         <DropdownItem
                           titleClass={styles.albumSearchTitle}
                           title={params.albumName}
+                          ref={albumRef}
                         >
                           <div
                             class={styles.albumSearchResult}
@@ -219,6 +221,8 @@ export default defineComponent({
                                   )
                                   params.albumId = item.tenantAlbumId
                                   params.albumName = item.tenantAlbumName
+                                  onSearch(params.keyword)
+                                  albumRef.value?.toggle()
                                 }}
                               >
                                 {{

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

@@ -20,13 +20,14 @@ import iconMenu from './images/icon-menu.png'
 import iconRightTop from './images/icon-right-top.png'
 import iconAlbumCover from '../../images/icon-album-cover.png'
 import iconTimer from './images/icon-timer.png'
-import { state as baseState } from '@/state'
+import { state as baseState, setLogout } from '@/state'
 import Song from '../component/song'
 import { useRoute, useRouter } from 'vue-router'
 import ColResult from '@/components/col-result'
 import { moneyFormat } from '@/helpers/utils'
 import { orderStatus } from '@/views/order-detail/orderStatus'
 import { postMessage } from '@/helpers/native-message'
+import { browser } from '@/helpers/utils'
 // Import Swiper Vue.js components
 // import Swiper core and required modules
 import { Pagination } from 'swiper/modules'
@@ -49,6 +50,7 @@ export default defineComponent({
       buy: route.query.buy as any,
       albumId: route.query.albumId || null,
       activeTab: route.query.subjectType || 'SUBJECT',
+      loadingAlbum: false,
       loading: false,
       finished: false,
       isError: false,
@@ -82,6 +84,7 @@ export default defineComponent({
     })
 
     const getDetails = async () => {
+      state.loadingAlbum = true
       try {
         // tenantGroupAlbum/buyAlbumInfo
         if (state.albumId) {
@@ -104,14 +107,33 @@ export default defineComponent({
           state.albumList = data || []
           if (state.albumList.length > 0) {
             state.details = state.albumList[0]
+          } else {
+            // state.albumList
+            Dialog.alert({
+              title: '提示',
+              message: '该专辑不可购买',
+              confirmButtonText: '确定',
+              confirmButtonColor: '#2dc7aa'
+            }).then(() => {
+              if (browser().isApp) {
+                postMessage({ api: 'back' })
+              } else {
+                setLogout()
+                router.replace({
+                  path: '/login' as any,
+                  query: {
+                    returnUrl: '/train-tool',
+                    ...route.query
+                  }
+                })
+              }
+            })
           }
         }
-
-        // state.tenantAlbumStatus = data.tenantAlbumStatus
-        // state.ablumStatus = data.status
       } catch {
         //
       }
+      state.loadingAlbum = false
     }
 
     watch(
@@ -214,8 +236,10 @@ export default defineComponent({
       })
 
       state.loading = true
+      state.loadingAlbum = true
       await getDetails()
       await FetchList()
+      state.loadingAlbum = false
       state.loading = false
     })
 
@@ -331,8 +355,8 @@ export default defineComponent({
             )}
           </>
         ) : (
-          <>
-            {!route.query.taId && (
+          !state.loadingAlbum && (
+            <>
               <TheSticky
                 position="top"
                 onBarHeight={(height: any) => {
@@ -343,204 +367,205 @@ export default defineComponent({
                   background={background.value}
                   border={false}
                   isFixed={false}
+                  hideHeader={route.query.taId ? true : false}
                   color={color.value}
                   backIconColor="white"
                 />
               </TheSticky>
-            )}
-            {/* <img class={styles.bgImg} src={state.details?.coverImg} /> */}
-            <div class={styles.musicContent}></div>
-            <div class={styles.bg}>
-              <div class={styles.alumWrap}>
-                {isSingleAlbum.value ? (
-                  <div class={styles.singleAlbum}>
-                    <div class={styles.img}>
-                      {state.details?.buyTimesFlag && (
-                        <span class={styles.quota}>
-                          限购:{state.details?.buyedTimes}/
-                          {state.details?.buyTimes}次
-                        </span>
-                      )}
-                      <Image
-                        class={styles.image}
-                        width="100%"
-                        height="100%"
-                        fit="cover"
-                        src={state.details?.coverImg || iconAlbumCover}
-                        errorIcon={iconAlbumCover}
-                      />
-                      <div class={styles.iconPian}></div>
+
+              {/* <img class={styles.bgImg} src={state.details?.coverImg} /> */}
+              <div class={styles.musicContent}></div>
+              <div class={styles.bg}>
+                <div class={styles.alumWrap}>
+                  {isSingleAlbum.value ? (
+                    <div class={styles.singleAlbum}>
+                      <div class={styles.img}>
+                        {state.details?.buyTimesFlag && (
+                          <span class={styles.quota}>
+                            限购:{state.details?.buyedTimes}/
+                            {state.details?.buyTimes}次
+                          </span>
+                        )}
+                        <Image
+                          class={styles.image}
+                          width="100%"
+                          height="100%"
+                          fit="cover"
+                          src={state.details?.coverImg || iconAlbumCover}
+                          errorIcon={iconAlbumCover}
+                        />
+                        <div class={styles.iconPian}></div>
+                      </div>
                     </div>
-                  </div>
-                ) : (
-                  <Swiper
-                    watchSlidesProgress={true}
-                    slidesPerView={'auto'}
-                    centeredSlides={true}
-                    modules={[Pagination]}
-                    pagination={{ clickable: true }}
-                    onSlideChange={(swiper: any) => {
-                      state.details = state.albumList[swiper.activeIndex]
-                    }}
-                    onTransitionEnd={() => {
-                      params.page = 1
-                      state.list = []
-                      FetchList()
-                    }}
-                  >
-                    {state.albumList.map((album: any) => (
-                      <SwiperSlide>
-                        <div class={styles.img}>
-                          {album.buyTimesFlag && (
-                            <span class={styles.quota}>
-                              限购:{album.buyedTimes}/{album.buyTimes}次
-                            </span>
-                          )}
+                  ) : (
+                    <Swiper
+                      watchSlidesProgress={true}
+                      slidesPerView={'auto'}
+                      centeredSlides={true}
+                      modules={[Pagination]}
+                      pagination={{ clickable: true }}
+                      onSlideChange={(swiper: any) => {
+                        state.details = state.albumList[swiper.activeIndex]
+                      }}
+                      onTransitionEnd={() => {
+                        params.page = 1
+                        state.list = []
+                        FetchList()
+                      }}
+                    >
+                      {state.albumList.map((album: any) => (
+                        <SwiperSlide>
+                          <div class={styles.img}>
+                            {album.buyTimesFlag && (
+                              <span class={styles.quota}>
+                                限购:{album.buyedTimes}/{album.buyTimes}次
+                              </span>
+                            )}
 
-                          <Image
-                            class={styles.image}
-                            width="100%"
-                            height="100%"
-                            fit="cover"
-                            src={album?.coverImg || iconAlbumCover}
-                            errorIcon={iconAlbumCover}
-                          />
-                          <div class={styles.iconPian}></div>
-                        </div>
-                      </SwiperSlide>
-                    ))}
-                  </Swiper>
-                )}
+                            <Image
+                              class={styles.image}
+                              width="100%"
+                              height="100%"
+                              fit="cover"
+                              src={album?.coverImg || iconAlbumCover}
+                              errorIcon={iconAlbumCover}
+                            />
+                            <div class={styles.iconPian}></div>
+                          </div>
+                        </SwiperSlide>
+                      ))}
+                    </Swiper>
+                  )}
 
-                <div class={styles.alumDes}>
-                  <div class={[styles.alumTitle, 'van-ellipsis']}>
-                    {state.details?.name}
-                  </div>
-                  <div
-                    class={[styles.des, 'van-multi-ellipsis--l2']}
-                    style={{
-                      height: '32px',
-                      lineHeight: '16px'
-                    }}
-                  >
-                    {state.details?.describe}
+                  <div class={styles.alumDes}>
+                    <div class={[styles.alumTitle, 'van-ellipsis']}>
+                      {state.details?.name}
+                    </div>
+                    <div
+                      class={[styles.des, 'van-multi-ellipsis--l2']}
+                      style={{
+                        height: '32px',
+                        lineHeight: '16px'
+                      }}
+                    >
+                      {state.details?.describe}
+                    </div>
                   </div>
-                </div>
 
-                {state.buy != '1' && baseState.platformType === 'STUDENT' && (
-                  <div class={styles.albumPriceGroup}>
-                    <div class={styles.albumTimer}>
-                      <img src={iconTimer} class={styles.iconTimer} />
-                      <span>有效期：{state.details?.purchaseNum || 0}天</span>
-                    </div>
-                    <div class={styles.albumPriceList}>
-                      {(state.details?.originalPrice || 0) >
-                        (state.details?.actualPrice || 0) && (
-                        <span class={styles.originPrice}>
-                          原价：¥
-                          {moneyFormat(state.details?.originalPrice || 0)}
-                        </span>
-                      )}
+                  {state.buy != '1' && baseState.platformType === 'STUDENT' && (
+                    <div class={styles.albumPriceGroup}>
+                      <div class={styles.albumTimer}>
+                        <img src={iconTimer} class={styles.iconTimer} />
+                        <span>有效期：{state.details?.purchaseNum || 0}天</span>
+                      </div>
+                      <div class={styles.albumPriceList}>
+                        {(state.details?.originalPrice || 0) >
+                          (state.details?.actualPrice || 0) && (
+                          <span class={styles.originPrice}>
+                            原价：¥
+                            {moneyFormat(state.details?.originalPrice || 0)}
+                          </span>
+                        )}
 
-                      <span class={styles.currentPrice}>
-                        <span>
-                          ¥{moneyFormat(state.details?.actualPrice || 0)}
+                        <span class={styles.currentPrice}>
+                          <span>
+                            ¥{moneyFormat(state.details?.actualPrice || 0)}
+                          </span>
                         </span>
-                      </span>
+                      </div>
                     </div>
-                  </div>
-                )}
+                  )}
+                </div>
               </div>
-            </div>
 
-            <div class={styles.musicList}>
-              <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
+              <div class={styles.musicList}>
+                <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>
-              </Sticky>
+                      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
-                  loading={state.loading}
-                  finished={state.finished}
-                  finished-text={' '}
-                  onLoad={FetchList}
-                  immediateCheck={false}
-                  error={state.isError}
-                >
-                  {state.list && state.list.length ? (
-                    <Song
-                      showNumber
-                      list={state.list}
-                      onDetail={(item: any) => {
-                        sessionStorage.setItem(
-                          'tool-subject-type',
-                          state.activeTab as any
-                        )
-                        router.push({
-                          path: '/music-detail',
-                          query: {
-                            id: item.id,
-                            tenantAlbumId: item.tenantAlbumId
-                            // albumId: route.params.id
-                          }
-                        })
-                      }}
-                    />
-                  ) : (
-                    !state.loading && (
-                      <ColResult
-                        tips="暂无曲目"
-                        classImgSize="SMALL"
-                        btnStatus={false}
-                      />
-                    )
-                  )}
-                </List>
-              </div>
-            </div>
-            {baseState.platformType === 'STUDENT' && state.buy != '1' && (
-              <TheSticky position="bottom">
-                <div class={styles.btnGroup}>
-                  <Button
-                    round
-                    block
-                    disabled={
-                      state.details?.musicNum <= 0 && !state.hasBuyStatus
-                    }
-                    color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
-                    onClick={onSubmit}
+                <div class={styles.alumnList}>
+                  <List
+                    loading={state.loading}
+                    finished={state.finished}
+                    finished-text={' '}
+                    onLoad={FetchList}
+                    immediateCheck={false}
+                    error={state.isError}
                   >
-                    购买教程
-                  </Button>
+                    {state.list && state.list.length ? (
+                      <Song
+                        showNumber
+                        list={state.list}
+                        onDetail={(item: any) => {
+                          sessionStorage.setItem(
+                            'tool-subject-type',
+                            state.activeTab as any
+                          )
+                          router.push({
+                            path: '/music-detail',
+                            query: {
+                              id: item.id,
+                              tenantAlbumId: item.tenantAlbumId
+                              // albumId: route.params.id
+                            }
+                          })
+                        }}
+                      />
+                    ) : (
+                      !state.loading && (
+                        <ColResult
+                          tips="暂无曲目"
+                          classImgSize="SMALL"
+                          btnStatus={false}
+                        />
+                      )
+                    )}
+                  </List>
                 </div>
-              </TheSticky>
-            )}
-          </>
+              </div>
+              {baseState.platformType === 'STUDENT' && state.buy != '1' && (
+                <TheSticky position="bottom">
+                  <div class={styles.btnGroup}>
+                    <Button
+                      round
+                      block
+                      disabled={
+                        state.details?.musicNum <= 0 && !state.hasBuyStatus
+                      }
+                      color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
+                      onClick={onSubmit}
+                    >
+                      购买教程
+                    </Button>
+                  </div>
+                </TheSticky>
+              )}
+            </>
+          )
         )}
-        {/**/}
       </div>
     )
   }

vite.config.ts

@@ -12,7 +12,7 @@ function resolve(dir: string) {
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://online.colexiu.com/';
-const proxyUrl = 'https://dev.colexiu.com/'
+const proxyUrl = 'https://test.colexiu.com/'
 // const proxyUrl = 'http://192.168.3.14:8000/'
 export default defineConfig({
   base: './',