music-score/src/page-instrument/header-top/settting/index.tsx

import { defineComponent, reactive, computed } from "vue";
import styles from "./index.module.less"
import { headImg } from "../image";
import { headTopData } from "../index"
import { Switch, showToast, Field, Popup, Slider } from "vant";
import state, { refreshMusicSvg } from "/src/state"
import { api_closeCamera, api_openCamera, api_savePicture } from "/src/helpers/communication";
import { smoothAnimationState} from "/src/page-instrument/view-detail/smoothAnimation"
import Recommendation from "../../custom-plugins/helper-model/recommendation";
import { resetRenderMusicScore } from "/src/view/music-score";
import ScreenModel from "../../custom-plugins/helper-model/screen-model";
import { getQuery } from "/src/utils/queryString";

export default defineComponent({
	name: "settting",
	setup() {
        const query = getQuery();
        const helperData = reactive({
			screenModelShow: false, // 投屏帮助
			recommendationShow: false, // 建议
		});
        // 加减评测频率
		const operateHz = (type: number) => {
			const minFrequency = state.baseFrequency - 10, maxFrequency = state.baseFrequency + 10
			let currentFrequency = state.setting.frequency
			if (type === 1) {
				if (currentFrequency - 1 < minFrequency) return showToast({ message: `最低标准音高${minFrequency}HZ` })
				currentFrequency = currentFrequency - 1
			} else {
				if (currentFrequency + 1 > maxFrequency) return showToast({ message: `最高标准音高${maxFrequency}HZ` })
				currentFrequency = currentFrequency + 1
			}
			state.setting.frequency = currentFrequency >= 0 ? currentFrequency : 0
		}
        const formatterTimeMs = (value: any) => value = String(Math.min(3000, value));

        const notationList = computed(() => {
            const list = state.enableNotation ? [{name:'五线谱',value:'staff'},{name:'首调',value:'firstTone'},{name:'固定调',value:'fixedTone'}] : [{name:'首调',value:'firstTone'},{name:'固定调',value:'fixedTone'}];
            return list;
        });

		return () => (
			<div class={[styles.settting, styles[state.modeType]]}>
                <div class={styles.head}>
					<img class={styles.headTit} src={headImg("settingName.png")} />
					<img class={styles.closeImg} src={headImg("closeImg.png")} onClick={()=>{ headTopData.settingMode = false }} />
				</div>
                <div class={styles.content}>
                    <div class={styles.conBox}>
                        {
                            state.isShowFingering && state.fingeringInfo.name && ["practise", "follow"].includes(state.modeType) && state.playType === "play" &&
                                <div class={styles.cellBox}>
                                <div class={styles.tit}>指法</div>
                                    <Switch v-model={state.setting.displayFingering}></Switch>
                                </div>
                        }
                        {
                            ["practise", "follow"].includes(state.modeType) &&                         
                                <div class={styles.cellBox}>
                                    <div class={styles.tit}>循环播放</div>
                                    <Switch v-model={state.setting.repeatAutoPlay}></Switch>
                                </div>
                        }
                        {
                            state.isSingleLine && state.modeType === "practise" && !state.isCombineRender && !state.isPercussion && 
                                <div class={styles.cellBox}>
                                <div class={styles.tit}>旋律线</div>
                                    <Switch v-model={smoothAnimationState.isShow.value}></Switch>
                                </div>   
                        }                           
                        {
                            state.modeType === "evaluating" && 
                            <>                       
                                {
                                    !query.workRecord &&                                 
                                    <div class={styles.cellBox}>
                                        <div class={styles.tit}>评测难度</div>
                                        <div class={styles.radioBox}>
                                            {
                                                [{name:'入门',value:"BEGINNER"},{name:'进阶',value:"ADVANCED"},{name:'大师',value:"PERFORMER"}].map(item=>{
                                                    return <div class={ state.setting.evaluationDifficulty===item.value && styles.active } onClick={ ()=>{
                                                        state.setting.evaluationDifficulty = item.value as any
                                                    } }>{item.name}</div>
                                                })
                                            }
                                        </div>
                                    </div>   
                                }                     
                                <div class={styles.cellBox}>
                                    <div class={styles.tit}>延迟检测</div>
                                    {/* <Switch v-model={state.setting.soundEffect}></Switch> */}
                                    <div class={styles.titbtn} onClick={() => state.setting.soundEffect = true}>重新检测</div>
                                </div> 
                                <div class={[styles.cellBox, state.setting.camera && styles.isCamera]}>
                                    <div class={styles.tit}>摄像头</div>
                                    <Switch 
                                        v-model={state.setting.camera}
                                        onChange={ async (value) => {
                                            if (value) {
                                                const res = await api_openCamera();
                                                // 没有授权
                                                if (res?.content?.reson) {
                                                    state.setting.camera = false
                                                }
                                            } else {
                                                api_closeCamera();
                                            }
                                        }}                                
                                    ></Switch>
                                </div>   
                                <div class={styles.cellBox} style={{ display: state.setting.camera ? "" : "none", paddingTop: 0 }}>
                                    <div class={styles.tit}>不透明度</div>
                                    <div class={styles.spendCon}>
                                        <div class={styles.sliderCon}>
                                            <Slider class={styles.slider} max={100} min={0} v-model={state.setting.cameraOpacity}>
                                                {{
                                                    button: () => 
                                                    <div class={styles.customButton}>
                                                        <div class={styles.speedVal}>{ state.setting.cameraOpacity }</div>
                                                        <div class={styles.speedBtn}></div>
                                                    </div>
                                                }}
                                            </Slider>
                                        </div>
                                    </div>
                                </div>                                                                     
                                <div class={styles.cellBox}>
                                    <div class={styles.tit}>标准音高</div>
                                    <div class={styles.frequency}>
                                        <img src={headImg("cutImg.png")} class={[styles.btn]} onClick={() => operateHz(1)} />
                                        <div class={styles.frequencyNum}>{state.setting.frequency}HZ</div>
                                        <img src={headImg("addImg.png")} class={[styles.btn]} onClick={() => operateHz(2)} />
                                    </div>
                                </div>                        
                                <div class={styles.cellBox}>
                                    <div class={styles.tit}>反应时间</div>
                                    <div class={styles.reactionTimeBox}>
                                        <Field class={styles.reactionTime} type="digit" 
                                            placeholder="最大可输入3000毫秒"
                                            formatter={formatterTimeMs}
                                            input-align={'center'}
                                            v-model:modelValue={state.setting.reactionTimeMs} />
                                        <div class={styles.timeName}>毫秒</div>    
                                    </div>
                                </div>
                            </>
                        }
                        {/** 练习模式才有单行/多行谱切换功能，跟练、评测只有单行谱模式 */}
                        {
                            state.modeType === 'practise' ? 
                            <div class={styles.cellBox}>
                                <div class={styles.tit}>切换谱面</div>
                                <div class={styles.radioBox}>
                                    {
                                        [{name:'单行谱',value:true},{name:'多行谱',value:false}].map(item=>{
                                            return <div class={ state.isSingleLine===item.value && styles.active } onClick={ ()=>{ 
                                                if(state.isSingleLine === item.value){
                                                    return
                                                }
                                                headTopData.settingMode = false
                                                state.isSingleLine = item.value 
                                                // resetRenderMusicScore(state.musicRenderType)
                                                const _time = setTimeout(() => {
                                                    clearTimeout(_time)
                                                    refreshMusicSvg();
                                                }, 100);
                                                // musicScoreRef.value?.refreshMusicScore()
                                            } }>{item.name}</div>
                                        })
                                    }
                                </div>
                            </div> : null                        
                        }
                        {
                            state.enableNotation || state.specialShowNotation ? 
                            <div class={styles.cellBox}>
                                <div class={styles.tit}>转谱</div>
                                <div class={styles.radioBox}>
                                    {
                                        notationList.value.map(item=>{
                                            return <div class={ state.musicRenderType===item.value && styles.active } onClick={ ()=>{ 
                                                if(state.musicRenderType === item.value){
                                                    return
                                                }
                                                headTopData.settingMode = false
                                                state.musicRenderType = item.value as any
                                                // resetRenderMusicScore(state.musicRenderType)
                                                const _time = setTimeout(() => {
                                                    clearTimeout(_time)
                                                    refreshMusicSvg();
                                                }, 100);
                                            } }>{item.name}</div>
                                        })
                                    }
                                </div>
                            </div> : null
                        }

                        <div class={styles.cellBtnBox}>
                            <img  src={headImg("tpbz.png")} onClick={() => (helperData.screenModelShow = true)} />
                            <img  src={headImg("yjfk.png")} onClick={() => (helperData.recommendationShow = true)} />
                        </div>
                    </div>  
                </div>
                <Popup
					v-model:show={helperData.recommendationShow}
					class="popup-custom van-scale center-closeBtn recommenBoxClass_drag"
					transition="van-scale"
					teleport="body"
                    overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}
				>
                    <Recommendation
                        onClose={() => {
                            helperData.recommendationShow = false;
                        }}
                    />
				</Popup>
                <Popup
					class={["popup-custom"]}
					v-model:show={helperData.screenModelShow}
					onClose={() => {
						helperData.screenModelShow = false;
					}}
					position="right"
					teleport="body"
				>
					<ScreenModel
						onClose={(open: Boolean) => {
							helperData.screenModelShow = false;
						}}
					/>
				</Popup>
			</div>
		);
	},
});