修改样式

src/router/routes-tenant.ts

@@ -186,6 +186,14 @@ export default [
         }
       },
       {
+        path: '/goodsDetail',
+        name: 'goodsDetail',
+        component: () => import('@/tenant/trade/detail'),
+        meta: {
+          title: '订单详情'
+        }
+      },
+      {
         path: '/music-songbook',
         component: () => import('@/tenant/music/search/header'),
         meta: {

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

@@ -1 +1,15 @@
-.albumSection {}
+.albumSection {
+  background: url('../../images/album-bg.png') no-repeat top center #fff;
+  background-size: contain;
+  border-radius: 16px;
+  margin: 12px 13px;
+  padding: 12px 12px 0;
+
+  .albumTitle {
+    font-size: 16px;
+    font-weight: 500;
+    color: #131415;
+    line-height: 22px;
+    padding-bottom: 24px;
+  }
+}

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

@@ -3,6 +3,7 @@ import styles from './all-search.module.less'
 import { useRoute, useRouter } from 'vue-router'
 import MusicGrid from '../component/music-grid'
 import request from '@/helpers/request'
+import MusicSwiper from './music-swiper'
 
 export default defineComponent({
   name: 'MusicSearch',
@@ -29,7 +30,6 @@ export default defineComponent({
             rows: 3
           }
         })
-        console.log(data)
         state.albumList = data.rows || []
       } catch {
         //
@@ -44,6 +44,7 @@ export default defineComponent({
     return () => (
       <div class={styles.allSearch}>
         <div class={styles.albumSection}>
+          <div class={styles.albumTitle}>热门专辑</div>
           <div class={styles.musicGrid}>
             <MusicGrid
               list={state.albumList}
@@ -58,6 +59,10 @@ export default defineComponent({
             />
           </div>
         </div>
+
+        <div class={styles.musicGroup}>
+          <MusicSwiper defauleParams={props.defauleParams} />
+        </div>
       </div>
     )
   }

src/tenant/music/search/header.tsx

@@ -6,7 +6,7 @@ import {
   onBeforeRouteUpdate
 } from 'vue-router'
 import { defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'
-import mitt from 'mitt'
+import mitt from 'eventemitter3'
 import Search from '@/components/col-search'
 import { useLocalStorage } from '@vueuse/core'
 import styles from './index.module.less'
@@ -18,7 +18,7 @@ import { state } from '@/state'
 import TheSticky from '@/components/the-sticky'
 import bgImg from '../../images/bg-image-search.png'
 
-export const mitter = mitt()
+export const mitter = new mitt()
 
 const selectTagRef = ref()
 
@@ -47,10 +47,10 @@ export default defineComponent({
       }
     }
 
-    const searchInputRef = ref()
     localStorage.setItem('behaviorId', getRandomKey())
     const router = useRouter()
     const route = useRoute()
+    const searchResultStatus = ref(false)
     const keyword = ref('')
     const tagids = ref('')
     const words = useLocalStorage<string[]>('music-search', [])
@@ -107,8 +107,6 @@ export default defineComponent({
       subject.show = false
     }
 
-    onMounted(() => {})
-
     const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
     const subject = reactive({
       show: false,
@@ -169,8 +167,11 @@ export default defineComponent({
               <Search
                 modelValue={keyword.value}
                 background="transparent"
-                ref={searchInputRef}
-                onSearch={onSearch}
+                onSearch={(val: any) => {
+                  onSearch(val)
+
+                  // searchResultStatus.value = true
+                }}
                 type="tenant"
                 v-slots={{
                   left: () => (
@@ -277,6 +278,21 @@ export default defineComponent({
               onComfirm={onComfirmSubject}
             />
           </Popup>
+
+          <div
+            class={[styles.searchResult]}
+            style={{ display: searchResultStatus.value ? 'block' : 'none' }}
+          >
+            {/* <Popup
+              v-model:show={searchResultStatus.value}
+              position="top"
+              teleport={document.querySelector('#searchHeader')}
+              zIndex={99}
+              overlay={false}
+            >
+              <>1212121212121212</>
+            </Popup> */}
+          </div>
         </div>
       )
     }

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

@@ -150,6 +150,7 @@
   --van-cell-text-color: #333;
   --van-cell-value-color: #999;
   --van-cell-icon-size: 10px;
+  --van-tab-line-height: 22px;
 
   :global {
     .van-tab {
@@ -168,7 +169,110 @@
       height: 4px;
       background: linear-gradient(90deg, #FF3C81 0%, rgba(255, 118, 166, 0.5) 100%) !important;
       border-radius: 36px 36px 0px 0px;
+      bottom: 22px;
     }
 
   }
+}
+
+.hotMusic {
+
+  padding-bottom: 20px;
+
+  .swipeItem .swipeChild {
+    // padding-left: 14px;
+    margin: 0 7px;
+  }
+
+  .swipeItem:last-child .swipeChild {
+    margin-right: 14px;
+  }
+
+  .swipeItem:first-child .swipeChild {
+    margin-left: 14px;
+  }
+
+
+  .swipeItem {
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .swipeChild {
+    background: url('../../images/music-bg.png') no-repeat top center #fff;
+    background-size: contain;
+  }
+
+  .swipeTitle {
+    font-size: 16px;
+    font-weight: 500;
+    color: #131415;
+    line-height: 22px;
+    padding: 12px 12px 16px;
+  }
+
+  .swipeContent {
+    padding: 0 16px 8px;
+    border-radius: 10px;
+  }
+
+  .swipe {
+    font-size: 14px;
+    color: #6A6C77;
+    line-height: 20px;
+    max-width: 80%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 8px 0;
+
+    .num {
+      display: inline-block;
+      font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 600;
+
+      color: #8A8C95;
+      // margin-right: 20px;
+      width: 21px;
+    }
+
+    .hot {
+      display: inline-block;
+      width: 16px;
+      line-height: 16px;
+      text-align: center;
+      background: #FE2451;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #FFFFFF;
+      vertical-align: middle;
+      margin-left: 4px;
+      transform: scale(0.9);
+    }
+
+    &.swipeTop {
+      color: #131415;
+
+      .num {
+        color: #FE2451;
+      }
+    }
+  }
+}
+
+
+// 搜索结果样式
+.searchResult {
+  position: fixed;
+  top: 0;
+  z-index: 98;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  bottom: 0;
+  padding-top: var(--header-height);
+  background: url('../../images/bg-image-search.png') no-repeat top center #fafafa;
+  background-size: 100% 214px;
 }

src/tenant/music/search/index.tsx

@@ -1,13 +1,13 @@
 import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
 import AlbumList from '../album'
-import MusicList from '../list'
 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 AllSearch from './all-search'
+import MusicSwiper from './music-swiper'
 
 export default defineComponent({
   name: 'MusicSearch',
@@ -27,6 +27,7 @@ export default defineComponent({
     subject.value = getSubject.id
 
     const onSearch = val => {
+      console.log(val, 'val')
       keyword.value = val
       const indexOf = words.value.indexOf(val)
       if (indexOf > -1) {
@@ -94,33 +95,20 @@ export default defineComponent({
               hideSearch
               ref={albumList}
               defauleParams={{
-                // search: keyword.value,
-                // tagids: tagids.value,
                 albumTagIds: tagids.value,
                 subjectIds: subject.value
               }}
             />
           )}
           {activeTab.value === 'songe' && (
-            <MusicList
-              hideSearch
-              ref={musicList}
-              onItemClick={(item: any) => {
-                router.push({
-                  path: '/music-detail',
-                  query: {
-                    id: item.id,
-                    albumId: route.params.id
-                  }
-                })
-              }}
-              defauleParams={{
-                // search: keyword.value,
-                // tagids: tagids.value,
-                musicTagIds: tagids.value,
-                subjectIds: subject.value
-              }}
-            />
+            <div class={styles.musicGroup}>
+              <MusicSwiper
+                defauleParams={{
+                  musicTagIds: tagids.value,
+                  subjectIds: subject.value
+                }}
+              />
+            </div>
           )}
         </div>
       )

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

@@ -0,0 +1,129 @@
+import { Cell, Icon, Swipe, SwipeItem } from 'vant'
+import styles from './index.module.less'
+import { defineComponent, onMounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import request from '@/helpers/request'
+import { openDefaultWebView } from '@/state'
+// import event from '../../event'
+// import Song from '../component/song'
+
+export default defineComponent({
+  name: 'music-list',
+  props: {
+    title: {
+      type: String,
+      default: '最热曲目'
+    },
+    music: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    defauleParams: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const router = useRouter()
+    const state = reactive({
+      musicList: [] as any
+    })
+    const arrChange = (num: number, arr: any) => {
+      const newArr = [] as any
+      arr.forEach((item: any, index: number) => {
+        if (index <= 11) {
+          newArr.push(item)
+        }
+      })
+      return newArr
+    }
+
+    const getMusicList = async () => {
+      try {
+        // 曲谱
+        const music = await request.post(
+          '/api-student/music/sheet/appMusicSheet',
+          {
+            data: {
+              ...props.defauleParams
+            }
+          }
+        )
+        const musicData = music.data || []
+        state.musicList = [
+          arrChange(12, musicData.topMusicSheet || []),
+          arrChange(12, musicData.newMusicSheet || []),
+          arrChange(12, musicData.hotMusicSheet || [])
+        ]
+      } catch {
+        //
+      }
+    }
+
+    const 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
+          }
+        })
+      })
+    }
+
+    onMounted(() => {
+      getWidth()
+      getMusicList()
+    })
+
+    const swipeWidth = ref(260)
+    const swipeShow = ref(false)
+    const getWidth = () => {
+      swipeShow.value = false
+      const clientWidth =
+        document.body.clientWidth > 750 ? 750 : document.body.clientWidth
+
+      swipeWidth.value = clientWidth - 120
+      swipeShow.value = true
+    }
+    return () => (
+      <>
+        <div class={styles.hotMusic}>
+          {swipeShow.value && (
+            <Swipe showIndicators={false} loop={false} width={swipeWidth.value}>
+              {state.musicList.map((item: any, index: number) => (
+                <SwipeItem class={styles.swipeItem}>
+                  <div class={styles.swipeChild}>
+                    <div class={styles.swipeTitle}>
+                      {index === 0 && '推荐曲目'}
+                      {index === 1 && '最新曲目'}
+                      {index === 2 && '最热曲目'}
+                    </div>
+                    <div class={styles.swipeContent}>
+                      {item.map((child: any, j: number) => (
+                        <div
+                          class={[styles.swipe, j <= 2 && styles.swipeTop]}
+                          onClick={() => onDetail(child)}
+                        >
+                          <div class={styles.num}>{j + 1}</div>
+                          {child.musicSheetName}
+                          {child.exquisiteFlag === 'YES' && (
+                            <span class={styles.hot}>热</span>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </SwipeItem>
+              ))}
+            </Swipe>
+          )}
+        </div>
+      </>
+    )
+  }
+})

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

@@ -41,7 +41,6 @@ export default defineComponent({
     }
   },
   mounted() {
-    console.log(this.subject, '12')
     this.subject = {
       name: this.searchParams.id ? this.searchParams.name : '全部声部',
       id: this.searchParams.id || ''

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

@@ -38,6 +38,12 @@
     .van-dropdown-menu__title:after {
       border-color: transparent transparent rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.4);
     }
+
+    .van-dropdown-item__content {
+      border-radius: 0px 0px 20px 20px;
+
+    }
+
   }
 }
 
@@ -164,7 +170,7 @@
 }
 
 .searchResult {
-  padding: 16px 16px 0;
+  padding: 16px 16px 12px;
   overflow: hidden;
   margin-bottom: 20px;
 

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

@@ -47,6 +47,7 @@ export default defineComponent({
     const finished = ref(false)
     const isError = ref(false)
     const searchObj = ref<any>({})
+    const searchRef = ref()
 
     const apiSuffix = ref(
       baseState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
@@ -134,7 +135,7 @@ export default defineComponent({
                 v-slots={{
                   left: () => (
                     <DropdownMenu>
-                      <DropdownItem title="筛选">
+                      <DropdownItem title="筛选" ref={searchRef}>
                         <div
                           class={styles.searchResult}
                           style={{ maxHeight: '45vh', overflowY: 'auto' }}
@@ -153,8 +154,7 @@ export default defineComponent({
                                   {searchObj.value.subjects.map(
                                     (subject: any) => {
                                       const isActive =
-                                        subject.id ===
-                                        Number(params.subjectId || null)
+                                        subject.id === params.subjectId || null
                                       const type = isActive
                                         ? 'primary'
                                         : 'default'
@@ -165,8 +165,7 @@ export default defineComponent({
                                           type={type}
                                           round
                                           onClick={() => {
-                                            console.log(subject, '1212')
-                                            // this.subject = { ...subject }
+                                            params.subjectId = subject.id
                                           }}
                                         >
                                           {subject.name}
@@ -201,8 +200,7 @@ export default defineComponent({
                                           type={type}
                                           round
                                           onClick={() => {
-                                            console.log(subject, '1212')
-                                            // this.subject = { ...subject }
+                                            params.level = subject
                                           }}
                                         >
                                           {subject}
@@ -236,8 +234,7 @@ export default defineComponent({
                                         type={type}
                                         round
                                         onClick={() => {
-                                          console.log(subject, '1212')
-                                          // this.subject = { ...subject }
+                                          params.type = subject
                                         }}
                                       >
                                         {subject}
@@ -247,34 +244,33 @@ export default defineComponent({
                                 </div>
                               </>
                             )}
+                        </div>
 
-                          <Sticky position="bottom" offsetBottom={0}>
-                            <div class={['btnGroup', 'btnMore']}>
-                              <Button
-                                type="primary"
-                                plain
-                                round
-                                onClick={() => {
-                                  params.subjectId = null
-                                  params.level = ''
-                                  params.type = ''
-                                }}
-                              >
-                                重 置
-                              </Button>
+                        <div class={['btnGroup', 'btnMore']}>
+                          <Button
+                            type="primary"
+                            plain
+                            round
+                            onClick={() => {
+                              params.subjectId = null
+                              params.level = ''
+                              params.type = ''
+                            }}
+                          >
+                            重 置
+                          </Button>
 
-                              <Button
-                                type="primary"
-                                round
-                                block
-                                onClick={() => {
-                                  // this.onComfirm({ ...this.subject })
-                                }}
-                              >
-                                确 认
-                              </Button>
-                            </div>
-                          </Sticky>
+                          <Button
+                            type="primary"
+                            round
+                            block
+                            onClick={() => {
+                              onSearch('')
+                              searchRef.value?.toggle()
+                            }}
+                          >
+                            确 认
+                          </Button>
                         </div>
                       </DropdownItem>
                     </DropdownMenu>

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

@@ -85,11 +85,11 @@ export default defineComponent({
 
     const getDetails = async () => {
       try {
-        const { data } = await request.post(
-          apiSuffix.value +
-            '/userTenantAlbumRecord/detail?albumId=' +
-            state.albumId
-        )
+        let url = apiSuffix.value + '/userTenantAlbumRecord/detail'
+        if (state.albumId) {
+          url = url + '??albumId=' + state.albumId
+        }
+        const { data } = await request.post(url)
         state.details = data || {}
         console.log(state.details, 'details')
         state.buyList.forEach((item: any, index: number) => {
@@ -365,20 +365,22 @@ export default defineComponent({
             </List>
           </div>
         </div>
-        {!state.loading && !state.details.ifBuy && (
-          <TheSticky position="bottom">
-            <div class={styles.btnGroup}>
-              <Button
-                round
-                block
-                color="#FE2451"
-                onClick={() => (state.popupStatus = true)}
-              >
-                购买教程
-              </Button>
-            </div>
-          </TheSticky>
-        )}
+        {!state.loading &&
+          !state.details.ifBuy &&
+          baseState.platformType === 'STUDENT' && (
+            <TheSticky position="bottom">
+              <div class={styles.btnGroup}>
+                <Button
+                  round
+                  block
+                  color="#FE2451"
+                  onClick={() => (state.popupStatus = true)}
+                >
+                  购买教程
+                </Button>
+              </div>
+            </TheSticky>
+          )}
         <Popup
           v-model:show={state.popupStatus}
           position="bottom"

src/tenant/trade/detail.tsx

@@ -0,0 +1,152 @@
+import { moneyFormat } from '@/helpers/utils'
+import dayjs from 'dayjs'
+import { CellGroup, Cell, Image, Row, Col } from 'vant'
+import { defineComponent, onMounted, ref } from 'vue'
+import { state } from '@/state'
+import request from '@/helpers/request'
+import { useRoute } from 'vue-router'
+import ColHeader from '@/components/col-header'
+import TheSticky from '@/components/the-sticky'
+import styles from './index.module.less'
+import { orderType } from '@/constant'
+import iconMember from '@common/images/icon_member.png'
+
+export default defineComponent({
+  name: 'trade-detail',
+  setup() {
+    const route = useRoute()
+    const result = ref<any>({})
+    const getOrder = async (status?: true) => {
+      try {
+        const urlFix =
+          state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
+        const res = await request.get(
+          `${urlFix}/userOrder/detailByOrderNo/${route.query.orderNo}`,
+          {
+            hideLoading: status
+          }
+        )
+        console.log(res.data)
+        result.value = res.data
+      } catch {
+        //
+      }
+    }
+
+    onMounted(() => {
+      getOrder()
+    })
+    return () => (
+      <div>
+        <TheSticky>
+          <ColHeader isFixed={false} border={false} color="#131415" />
+        </TheSticky>
+        <div class={styles.tradeList}>
+          <CellGroup border={false} class={styles.orderDetailGroup}>
+            <Cell
+              border={false}
+              title={dayjs(result.value.createTime).format('YYYY-MM-DD HH:mm')}
+              value={orderType[result.value.status]}
+              valueClass={styles.tradeType}
+            />
+            {result.value.orderDetailList &&
+              result.value.orderDetailList.map((orderDetail: any) => (
+                <Cell
+                  border={false}
+                  class={styles.orderSection}
+                  v-slots={{
+                    icon: () => (
+                      <Image
+                        src={
+                          orderDetail.goodType === 'VIP'
+                            ? iconMember
+                            : orderDetail.bizInfo?.bizCover
+                        }
+                        class={styles.tradeLogo}
+                      />
+                    ),
+                    title: () => (
+                      <div class={styles.goodsSection}>
+                        <div class={[styles.title]}>
+                          <span class={[styles.name, 'van-ellipsis']}>
+                            {orderDetail.bizInfo?.bizName}
+                          </span>
+                          <span class={styles.desc}>
+                            ¥{moneyFormat(orderDetail.actualPrice)}
+                          </span>
+                        </div>
+
+                        <div class={styles.description}>
+                          <span class={[styles.d, 'van-ellipsis']}>
+                            {orderDetail.bizInfo?.bizDesc}
+                          </span>
+                          {orderDetail.goodType !== 'VIP' && (
+                            <>
+                              {orderDetail.goodType === 'TENANT_ALBUM' ? (
+                                <span class={styles.t}>
+                                  x{orderDetail.bizInfo?.bizValidTime}个月
+                                </span>
+                              ) : (
+                                <span class={styles.t}>永久</span>
+                              )}
+                            </>
+                          )}
+                        </div>
+
+                        {orderDetail.bizInfo?.bizMusicCount && (
+                          <span class={styles.songLength}>
+                            共{orderDetail.bizInfo?.bizMusicCount}首
+                          </span>
+                        )}
+                      </div>
+                    )
+                  }}
+                />
+              ))}
+
+            <div class={styles.paymentPrice}>
+              {['PAYING', 'WAIT_PAY'].includes(result.value.status)
+                ? '需付款'
+                : '实付款'}
+              <span>
+                <i>¥</i>
+                {moneyFormat(result.value.actualPrice)}
+              </span>
+            </div>
+          </CellGroup>
+
+          <div class={styles.optionGroup}>
+            <Row class={styles.optionRow}>
+              <Col span="8" offset={1}>
+                订单号:
+              </Col>
+              <Col span="14">{result.value.orderNo}</Col>
+              <Col span="1"> </Col>
+            </Row>
+            <Row class={styles.optionRow}>
+              <Col span="8" offset={1}>
+                交易流水号:
+              </Col>
+              <Col span="14">{result.value.transNo}</Col>
+              <Col span="1"> </Col>
+            </Row>
+            <Row class={styles.optionRow}>
+              <Col span="8" offset={1}>
+                创建时间:
+              </Col>
+              <Col span="14">{result.value.createTime}</Col>
+              <Col span="1"> </Col>
+            </Row>
+            <Row class={styles.optionRow}>
+              <Col span="8" offset={1}>
+                付款时间:
+              </Col>
+              <Col span="14">{result.value.payTime}</Col>
+              <Col span="1"> </Col>
+            </Row>
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

src/tenant/trade/index.module.less

@@ -253,4 +253,63 @@
       margin-left: 10px;
     }
   }
+}
+
+
+.orderDetailGroup {
+  margin: 0 12px 12px;
+  background: #FFFFFF;
+  border-radius: 10px;
+}
+
+.optionGroup {
+  background: #FFFFFF;
+  border-radius: 10px;
+  margin: 12px;
+  padding-top: 15px;
+}
+
+.optionRow {
+  line-height: 26px;
+  display: flex;
+  position: relative;
+  padding-bottom: 15px;
+  box-sizing: border-box;
+  color: #333333;
+  font-size: 14px;
+
+  :global {
+    .van-col {
+      display: flex;
+      line-height: 1.5;
+    }
+
+    .van-col--8 {
+      color: #131415;
+      justify-content: flex-start;
+    }
+
+    .van-col--14 {
+      color: #777777;
+      justify-content: flex-end;
+      word-break: break-word;
+      /* 文本行的任意字内断开 */
+      word-wrap: break-word;
+      /* IE */
+      white-space: -moz-pre-wrap;
+      /* Mozilla */
+      white-space: -hp-pre-wrap;
+      /* HP printers */
+      white-space: -o-pre-wrap;
+      /* Opera 7 */
+      white-space: -pre-wrap;
+      /* Opera 4-6 */
+      white-space: pre;
+      /* CSS2 */
+      white-space: pre-wrap;
+      /* CSS 2.1 */
+      white-space: pre-line;
+      /* CSS 3 (and 2.1 as well, actually) */
+    }
+  }
 }

src/tenant/trade/index.tsx

@@ -91,7 +91,7 @@ export default defineComponent({
     const onDetail = (item: any) => {
       if (state.type === 'refund') return
       router.push({
-        path: '/tradeDetail',
+        path: '/goodsDetail',
         query: {
           orderNo: item.orderNo,
           path: 'tradeRecord'