index.tsx 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import { defineComponent, reactive } from "vue";
  2. import styles from "./index.module.less"
  3. import { headImg } from "../image";
  4. import { headTopData } from "../index"
  5. import { Switch, showToast, Field, Popup } from "vant";
  6. import state from "/src/state"
  7. import { smoothAnimationState} from "/src/page-instrument/view-detail/smoothAnimation"
  8. import Recommendation from "../../custom-plugins/helper-model/recommendation";
  9. export default defineComponent({
  10. name: "settting",
  11. setup() {
  12. const helperData = reactive({
  13. screenModelShow: false, // 投屏帮助
  14. recommendationShow: false, // 建议
  15. });
  16. // 加减评测频率
  17. const operateHz = (type: number) => {
  18. const minFrequency = state.baseFrequency - 10, maxFrequency = state.baseFrequency + 10
  19. let currentFrequency = state.setting.frequency
  20. if (type === 1) {
  21. if (currentFrequency - 1 < minFrequency) return showToast({ message: `最低标准音高${minFrequency}HZ` })
  22. currentFrequency = currentFrequency - 1
  23. } else {
  24. if (currentFrequency + 1 > maxFrequency) return showToast({ message: `最高标准音高${maxFrequency}HZ` })
  25. currentFrequency = currentFrequency + 1
  26. }
  27. state.setting.frequency = currentFrequency >= 0 ? currentFrequency : 0
  28. }
  29. const formatterTimeMs = (value: any) => value = String(Math.min(3000, value));
  30. return () => (
  31. <div class={styles.settting}>
  32. <div class={styles.head}>
  33. <img class={styles.headTit} src={headImg("settingName.png")} />
  34. <img class={styles.closeImg} src={headImg("closeImg.png")} onClick={()=>{ headTopData.settingMode = false }} />
  35. </div>
  36. <div class={styles.content}>
  37. <div class={styles.conBox}>
  38. <div class={styles.cellBox}>
  39. <div class={styles.tit}>指法</div>
  40. <Switch v-model={state.setting.displayFingering}></Switch>
  41. </div>
  42. <div class={styles.cellBox}>
  43. <div class={styles.tit}>循环播放</div>
  44. <Switch v-model={state.setting.repeatAutoPlay}></Switch>
  45. </div>
  46. <div class={styles.cellBox}>
  47. <div class={styles.tit}>旋律线</div>
  48. <Switch v-model={smoothAnimationState.isShow.value}></Switch>
  49. </div>
  50. <div class={styles.cellBox}>
  51. <div class={styles.tit}>标准音高</div>
  52. <div class={styles.frequency}>
  53. <img src={headImg("cutImg.png")} class={[styles.btn]} onClick={() => operateHz(1)} />
  54. <div class={styles.frequencyNum}>{state.setting.frequency}HZ</div>
  55. <img src={headImg("addImg.png")} class={[styles.btn]} onClick={() => operateHz(2)} />
  56. </div>
  57. </div>
  58. <div class={styles.cellBox}>
  59. <div class={styles.tit}>反应时间</div>
  60. <div class={styles.reactionTimeBox}>
  61. <Field class={styles.reactionTime} type="digit"
  62. placeholder="最大可输入3000毫秒"
  63. formatter={formatterTimeMs}
  64. input-align={'center'}
  65. v-model:modelValue={state.setting.reactionTimeMs} />
  66. <div class={styles.timeName}>毫秒</div>
  67. </div>
  68. </div>
  69. <div class={styles.cellBox}>
  70. <div class={styles.tit}>切换谱面</div>
  71. <div class={styles.radioBox}>
  72. {
  73. [{name:'单行谱',value:true},{name:'多行谱',value:false}].map(item=>{
  74. return <div class={ state.isSingleLine===item.value && styles.active } onClick={ ()=>{ state.isSingleLine = item.value } }>{item.name}</div>
  75. })
  76. }
  77. </div>
  78. </div>
  79. <div class={styles.cellBox}>
  80. <div class={styles.tit}>转谱</div>
  81. <div class={styles.radioBox}>
  82. {
  83. [{name:'五线谱',value:'staff'},{name:'首调',value:'firstTone'},{name:'固定谱',value:'fixedTone'}].map(item=>{
  84. return <div class={ state.musicRenderType===item.value && styles.active } onClick={ ()=>{ state.musicRenderType = item.value as any} }>{item.name}</div>
  85. })
  86. }
  87. </div>
  88. </div>
  89. <div class={styles.cellBtnBox}>
  90. <img src={headImg("tpbz.png")} />
  91. <img src={headImg("yjfk.png")} onClick={() => (helperData.recommendationShow = true)} />
  92. </div>
  93. </div>
  94. </div>
  95. <Popup
  96. v-model:show={helperData.recommendationShow}
  97. class="popup-custom van-scale center-closeBtn recommenBoxClass_drag"
  98. transition="van-scale"
  99. teleport="body"
  100. overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}
  101. >
  102. <Recommendation
  103. onClose={() => {
  104. helperData.recommendationShow = false;
  105. }}
  106. />
  107. </Popup>
  108. </div>
  109. );
  110. },
  111. });