提交

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

@@ -368,7 +368,7 @@
       font-size: 16px;
       font-weight: bold;
       color: #1a1a1a;
-      width: 200px;
+      width: 175px;
       padding-bottom: 3px;
     }
     > p {
@@ -401,6 +401,13 @@
     margin-left: 5px;
     flex-shrink: 0;
   }
+
+  :global {
+    .van-cell__value {
+      display: flex;
+      justify-content: space-around;
+    }
+  }
 }
 
 .colSticky {
@@ -463,3 +470,77 @@
     width: 172px;
   }
 }
+
+.staffContainer {
+  // text-align: center;
+  padding: 15px 15px 24px;
+  .staffTitle {
+    padding-bottom: 25px;
+    font-size: 16px;
+    color: #1a1a1a;
+    line-height: 22px;
+  }
+
+  .staffImg {
+    width: 32px;
+    height: 20px;
+  }
+  .name {
+    padding-left: 17px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #333333;
+  }
+  .boxStyle {
+    background: transparent !important;
+    width: 15px;
+    height: 15px;
+    border: transparent !important;
+  }
+  .active {
+    background: #f7f8f9;
+    border-radius: 8px;
+    .name {
+      color: #2dc7aa;
+    }
+  }
+  :global {
+    .van-cell {
+      padding: 9px 16px 9px;
+      margin-bottom: 6px;
+      &:hover,
+      &:active,
+      &.active {
+        background: #f7f8f9;
+        border-radius: 8px;
+        .name {
+          color: #2dc7aa;
+        }
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    .van-cell__value {
+      display: flex;
+      justify-content: flex-end;
+    }
+    .van-checkbox {
+      overflow: inherit;
+      height: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    .van-checkbox__icon {
+      height: 15px;
+      line-height: 15px;
+      display: inline-block;
+      vertical-align: middle;
+    }
+    .van-checkbox__label {
+      line-height: 15px;
+    }
+  }
+}

src/views/music/music-detail/index.tsx

@@ -14,12 +14,16 @@ import ColHeader from '@/components/col-header'
 import {
   Button,
   Cell,
+  CellGroup,
+  Checkbox,
   Dialog,
   Icon,
   Image,
   Popup,
+  RadioGroup,
   Sticky,
   Tag,
+  Radio,
   Toast
 } from 'vant'
 import styles from './index.module.less'
@@ -35,6 +39,7 @@ import { orderStatus } from '@/views/order-detail/orderStatus'
 import iconShare from '@/views/music/album/icon_share.svg'
 import iconAlbum from '@/views/music/component/images/icon_album.png'
 import iconDownload from './images/icon_download.png'
+import iconChangeStaff from './images/icon-change-staff.png'
 import AstronautJSON from './animate/bigLoad.json'
 import ColShare from '@/components/col-share'
 import iconCollect from './images/icon_collect.png'
@@ -42,6 +47,16 @@ import iconCollectActive from './images/icon_collect_active.png'
 import iconListen from './images/icon_listen.png'
 import iconTeacher from '@common/images/icon_teacher.png'
 import emtpy from './images/emtpy.png'
+
+import activeButtonIcon from '@common/images/icon_checkbox.png'
+import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
+import staffDetafult from './images/staff-default.png'
+import staffActive from './images/staff-active.png'
+import firstDefault from './images/first-default.png'
+import firstActive from './images/first-active.png'
+import fixedDefault from './images/fixed-default.png'
+import fixedActive from './images/fixed-active.png'
+
 import Plyr from 'plyr'
 import 'plyr/dist/plyr.css'
 import Download from './download'
@@ -70,6 +85,10 @@ export default defineComponent({
     const showImg = ref<Array<any>>([])
     const accompanyUrl = ref<string>('')
     const downloadStatus = ref<boolean>(false)
+    const staff = reactive({
+      status: false,
+      radio: 'staff' // staff first fixed
+    })
 
     const colors: any = {
       FREE: {
@@ -86,6 +105,12 @@ export default defineComponent({
       }
     }
 
+    // 更改预览状态
+    const onChangeStaff = (type: string) => {
+      staff.radio = type
+      staff.status = false
+    }
+
     const FetchList = async (id?: any) => {
       if (loading.value) {
         return
@@ -533,18 +558,32 @@ export default defineComponent({
                     </p>
                   </div>
                 ),
-                value: () =>
-                  showImg.value.length > 0 && (
+                value: () => (
+                  <>
                     <span
                       class={styles.download}
                       onClick={() => {
-                        downloadStatus.value = true
+                        staff.status = true
+                      }}
+                    >
+                      <img src={iconChangeStaff} />
+                      <span>转谱</span>
+                    </span>
+                    <span
+                      class={styles.download}
+                      onClick={() => {
+                        if (showImg.value.length > 0) {
+                          downloadStatus.value = true
+                        } else {
+                          Toast('暂无图片')
+                        }
                       }}
                     >
                       <img src={iconDownload} />
-                      下载曲谱
+                      <span>下载曲谱</span>
                     </span>
-                  )
+                  </>
+                )
               }}
             />
             <div class={styles.musicContent}>
@@ -791,6 +830,112 @@ export default defineComponent({
               musicSheetName={musicDetail.value.musicSheetName}
             />
           </Popup>
+
+          <Popup
+            v-model:show={staff.status}
+            teleport="body"
+            closeable
+            style={{ width: '80%' }}
+            round
+          >
+            <div class={styles.staffContainer}>
+              <div class={styles.staffTitle}>选择转换曲谱</div>
+              <RadioGroup v-model={staff.radio}>
+                <CellGroup border={false}>
+                  <Cell
+                    center
+                    border={false}
+                    class={staff.radio === 'staff' ? styles.active : ''}
+                    onClick={() => onChangeStaff('staff')}
+                  >
+                    {{
+                      icon: () => (
+                        <Image src={staffDetafult} class={styles.staffImg} />
+                      ),
+                      title: () => <span class={styles.name}>五线谱</span>,
+                      value: () => (
+                        <Radio name="staff">
+                          {{
+                            icon: (props: any) => (
+                              <Icon
+                                class={styles.boxStyle}
+                                size={16}
+                                name={
+                                  props.checked
+                                    ? activeButtonIcon
+                                    : inactiveButtonIcon
+                                }
+                              />
+                            )
+                          }}
+                        </Radio>
+                      )
+                    }}
+                  </Cell>
+                  <Cell
+                    center
+                    border={false}
+                    class={staff.radio === 'first' ? styles.active : ''}
+                    onClick={() => onChangeStaff('first')}
+                  >
+                    {{
+                      icon: () => (
+                        <Image src={firstDefault} class={styles.staffImg} />
+                      ),
+                      title: () => <span class={styles.name}>简谱-首调</span>,
+                      value: () => (
+                        <Radio name="first">
+                          {{
+                            icon: (props: any) => (
+                              <Icon
+                                class={styles.boxStyle}
+                                size={16}
+                                name={
+                                  props.checked
+                                    ? activeButtonIcon
+                                    : inactiveButtonIcon
+                                }
+                              />
+                            )
+                          }}
+                        </Radio>
+                      )
+                    }}
+                  </Cell>
+                  <Cell
+                    center
+                    border={false}
+                    class={staff.radio === 'fixed' ? styles.active : ''}
+                    onClick={() => onChangeStaff('fixed')}
+                  >
+                    {{
+                      icon: () => (
+                        <Image src={fixedDefault} class={styles.staffImg} />
+                      ),
+                      title: () => <span class={styles.name}>简谱-固定调</span>,
+                      value: () => (
+                        <Radio name="fixed">
+                          {{
+                            icon: (props: any) => (
+                              <Icon
+                                class={styles.boxStyle}
+                                size={16}
+                                name={
+                                  props.checked
+                                    ? activeButtonIcon
+                                    : inactiveButtonIcon
+                                }
+                              />
+                            )
+                          }}
+                        </Radio>
+                      )
+                    }}
+                  </Cell>
+                </CellGroup>
+              </RadioGroup>
+            </div>
+          </Popup>
         </div>
       )
     }