orchestra-music-score/src/subpages/colexiu/popups/evaluating/index.tsx

import { Button, Dialog, Grid, GridItem, Popup, Toast } from 'vant'
import { defineComponent, ref, toRefs } from 'vue'
import styles from './index.module.less'
import iconTitle from './icons/title.svg'
import iconCancel from './icons/cancel.svg'
import iconConfirm from './icons/confirm.svg'
import Content from './content'
import SettingState from '/src/pages/detail/setting-state'
import { IPostMessage, postMessage } from '/src/helpers/native-message'
export const evaluatingShow = ref<boolean>(false)
const open = ref(false)

export type ResultContent = {
  /* 节奏 */
  cadence: number
  /* 完整性 */
  integrity: number
  /* 音调 */
  intonation: number
  playTime: number
  recordId: number
  /** 评测记录ID */
  recordIdStr: string
  /* 分数 */
  score: number
}

//效音组件
export default defineComponent({
  name: 'ColexiuEvaluating',
  props: {
    data: {
      type: Object as () => ResultContent | null,
      default: () => null,
    },
  },
  emits: ['restart'],
  setup(props) {
    const confirmShow = ref<boolean>(false)

    //
    const isSaveVideo = SettingState.sett.camera && SettingState.eva.save

    const sendUploadMessage = (res?: IPostMessage) => {
      postMessage({
        api: 'proxyServiceMessage',
        content: {
          header: {
            commond: 'videoUpload',
            status: 200,
            type: 'SOUND_COMPARE',
          },
          body: {
            filePath: res?.content?.filePath,
            recordId: props.data?.recordId,
          },
        },
      })
    }
    const videoUpdate = () => {
      if (isSaveVideo) {
        postMessage(
          {
            api: 'videoUpdate',
          },
          (res) => {
            confirmShow.value = false
            if (res?.content) {
              if (res.content.type === 'error') {
                Toast(res.content.message)
                return
              }
              sendUploadMessage(res)
            }
          }
        )
      } else {
        confirmShow.value = false
        sendUploadMessage()
        Toast.success('上传成功')
      }
    }

    return () => {
      return (
        <div>
          <Popup
            position="bottom"
            v-model:show={evaluatingShow.value}
            onOpen={() => (open.value = true)}
            onClosed={() => (open.value = false)}
            teleport="body"
            style={{ backgroundColor: 'transparent' }}
          >
            {open && (
              <Content
                data={props.data}
                onUpload={() => (confirmShow.value = true)}
                onRestart={() => (evaluatingShow.value = false)}
              />
            )}
          </Popup>
          <Dialog.Component
            teleport="body"
            class={styles.confirm}
            style={{
              overflow: 'initial',
            }}
            vSlots={{
              title: () => <img class={styles.iconTitle} src={iconTitle} />,
              footer: () => (
                <div class={styles.footer}>
                  <img src={iconCancel} onClick={() => (confirmShow.value = false)} />
                  <img src={iconConfirm} onClick={videoUpdate} />
                </div>
              ),
            }}
            v-model:show={confirmShow.value}
            message={`评测${isSaveVideo ? '音视频' : '音频'}是否保存演奏？`}
          />
        </div>
      )
    }
  },
})