拨打第一通电话

   <call-core-view style="height: 50px; width: 50px;"></call-core-view>

<template>
  <view class="btn" @tap="handleHangup">
    <image class="btn-img" :style="[style]" :src="HANGUP_SRC"></image>
    <text class="btn-text" v-if="isShowText">
      挂断
    </text>
  </view>
</template>

<script setup lang="ts">
  import { computed } from "vue";
  import HANGUP_SRC from "../../../static/icon/hangup.png"; // 根据实际情况替换为您存放图标的路径
  import {
    useCallState
  } from '@/uni_modules/tuikit-atomic-x/state/CallState';
  const {
    hangup
  } = useCallState()

  const props = defineProps({
    size: {
      type: Number,
      default: 60,
    },
    isShowText: {
      type: Boolean,
      default: true,
    },
  });

  const style = computed(() => ({
    width: props.size + "px",
    height: props.size + "px",
  }));

  const handleHangup = () => {
    hangup();
    // 在点击事件中调用 hangup 接口并销毁页面
  };
</script>

<style scoped>
  .btn {
    margin: 10px 20px;
  }

  .btn-img {
    width: 60px;
    height: 60px;
    border-radius: 140px;
  }

  .btn-text {
    font-size: 12px;
    color: #d5e0f2;
    font-weight: 400;
    text-align: center;
    margin-top: 10px;
  }
</style>
    
  

<template>
  <view class="btn" @tap="handleMic">
    <image class="btn-img" :src="microphoneStatus === DeviceStatus.ON ? MIC_ON_SRC : MIC_OFF_SRC"></image>
    <text class="btn-text">
      {{ microphoneStatus === DeviceStatus.ON ? '麦克风已开' : '麦克风已关' }}
    </text>
  </view>
</template>

<script setup lang="ts">
  import MIC_ON_SRC from "../../../static/icon/mic-on.png"; // 根据实际情况替换为您存放图标的路径
  import MIC_OFF_SRC from "../../../static/icon/mic-off.png"; // 根据实际情况替换为您存放图标的路径
  import {
    useDeviceState,
    DeviceStatus
  } from '@/uni_modules/tuikit-atomic-x/state/DeviceState';
  const {
    microphoneStatus,
    openLocalMicrophone,
    closeLocalMicrophone,
  } = useDeviceState()

  // 点击事件调用开启或关闭麦克风
  const handleMic = () => {
    if (microphoneStatus.value === DeviceStatus.ON) {
      closeLocalMicrophone();
    } else {
      openLocalMicrophone();
    }
  };
</script>

<style scoped>
  .btn {
    margin: 10px 20px;
  }

  .btn-img {
    width: 60px;
    height: 60px;
    border-radius: 140px;
  }

  .btn-text {
    font-size: 12px;
    color: #d5e0f2;
    font-weight: 400;
    text-align: center;
    margin-top: 10px;
  }
</style>

 <template>
  <div class="btn" @tap="handleCamera">
    <image class="btn-img" :src="cameraStatus === DeviceStatus.ON ? CAMERA_ON_SRC : CAMERA_OFF_SRC "></image>
    <text class="btn-text">
      {{cameraStatus === DeviceStatus.ON ? '摄像头已开' : '摄像头已关'}}
    </text>
  </div>
</template>

<script setup lang="ts">
  import CAMERA_ON_SRC from "../../../static/icon/camera-on.png"; // 根据实际情况替换为您存放图标的路径
  import CAMERA_OFF_SRC from "../../../static/icon/camera-off.png"; // 根据实际情况替换为您存放图标的路径
  import {
    useDeviceState,
    DeviceStatus
  } from '@/uni_modules/tuikit-atomic-x/state/DeviceState';
  const {
    cameraStatus,
    openLocalCamera,
    closeLocalCamera,
    isFrontCamera,
  } = useDeviceState()

  // 摄像头按钮点击事件
  const handleCamera = () => {
    if (cameraStatus.value === DeviceStatus.ON) {
      closeLocalCamera()
    } else {
      openLocalCamera({ isFront: isFrontCamera.value })
    }
  };
</script>

<style>
  .btn {
    margin: 10px 20px;
  }

  .btn-img {
    width: 60px;
    height: 60px;
    border-radius: 140px;
  }

  .btn-text {
    font-size: 12px;
    color: #d5e0f2;
    font-weight: 400;
    text-align: center;
    margin-top: 10px;
  }
</style>

  
<template>
  <view class="call-view-container">
    <view :style="{ height: systemInfo?.windowHeight + 'px', width: systemInfo?.safeArea?.width + 'px' }">
      <call-core-view
        :style="{ height: systemInfo?.windowHeight + 'px', width: systemInfo?.safeArea?.width + 'px' }"
        :networkQualityIcons="networkQualityIcons"
      ></call-core-view>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from 'vue';

  const systemInfo = ref({});

  /**
   * 将 /static/ 相对路径转为原生层可用的本地绝对路径
   */
  function toAbsolutePath(relativePath) {
    if (plus && plus.io && plus.io.convertLocalFileSystemURL) {
      return plus.io.convertLocalFileSystemURL(relativePath);
    }
    return relativePath;
  }

  /**
   * 批量转换对象中所有 value 的路径为绝对路径
   */
  function convertIconPaths(iconMap) {
    const result = {};
    Object.keys(iconMap).forEach(key => {
      result[key] = toAbsolutePath(iconMap[key]);
    });
    return result;
  }

  const networkQualityIcons = ref(convertIconPaths({
    "BAD": "/static/images/callview-network-bad.png",  // 可以替换您项目中的实际图标路径
    "VERY_BAD": "/static/images/callview-network-bad.png"  // 可以替换您项目中的实际图标路径
  }));

  onMounted(() => {
    uni.getSystemInfo({
      success: (res) => {
        systemInfo.value = res;
      }
    });
  });
</script>

<style>
  .call-view-container {
    background: rgba(15, 16, 20, 0.5);
    overflow: hidden;
  }
</style>