mdm-client 1.0.0

package/src/components/other/selectSpecialDialog.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="check-dialog" :style="position">
+    <div class="check-dialog-inner">
+      <template v-if="dialogType === 'audio'">
+        <div class="control-list" style="border: none">
+          <div class="control-list-title">麦克风</div>
+          <div
+            :class="[
+              'control-list-item',
+              {
+                'control-list-item-checked':
+                  activeDevice?.audioInputDevice && item.value == activeDevice?.audioInputDevice,
+              },
+            ]"
+            v-for="item of audioDevices"
+            :key="item.value"
+            @click="chooseAudioInputDevice(item)"
+          >
+            <div
+              :class="[
+                'check',
+                {
+                  'is-checked':
+                    activeDevice?.audioInputDevice && item.value == activeDevice?.audioInputDevice,
+                },
+              ]"
+            ></div>
+            <div class="control-list-item-value">{{ item.label }}</div>
+          </div>
+        </div>
+        <div class="control-footer">
+          <div class="control-link" @click="detectMicroAndOutput">监测麦克风和扬声器</div>
+          <div class="control-link" @click="openSettingDialog('1')">更多设置</div>
+        </div>
+      </template>
+      <template v-else-if="dialogType === 'output'">
+        <div class="control-list">
+          <div class="control-list-title">扬声器</div>
+          <div
+            :class="[
+              'control-list-item',
+              {
+                'control-list-item-checked':
+                  activeDevice?.audioOutputDevice && item.value == activeDevice?.audioOutputDevice,
+              },
+            ]"
+            v-for="item of outputDevices"
+            :key="item.value"
+            @click="chooseAudioOutputDevice(item)"
+          >
+            <div class="control-list-item-value">{{ item.label }}</div>
+            <div
+              :class="[
+                'check',
+                {
+                  'is-checked':
+                    activeDevice?.audioOutputDevice &&
+                    item.value == activeDevice?.audioOutputDevice,
+                },
+              ]"
+            ></div>
+          </div>
+        </div>
+      </template>
+      <template v-else-if="dialogType === 'video'">
+        <div class="control-list">
+          <div class="control-list-title">摄像头</div>
+          <div
+            :class="[
+              'control-list-item',
+              {
+                'control-list-item-checked':
+                  activeDevice?.videoDevice && item.value == activeDevice?.videoDevice,
+              },
+            ]"
+            v-for="item of videoDevices"
+            :key="item.value"
+            @click="chooseVideoDevice(item)"
+          >
+            <div
+              :class="[
+                'check',
+                {
+                  'is-checked':
+                    activeDevice?.videoDevice && item.value == activeDevice?.videoDevice,
+                },
+              ]"
+            ></div>
+            <div class="control-list-item-value">{{ item.label }}</div>
+          </div>
+        </div>
+        <div class="control-footer">
+          <div class="control-link" @click="openSettingDialog('2')">更多设置</div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SelectSpecialDialog",
+  props: {
+    position: {
+      type: Object,
+      default: () => {
+        return {
+          left: "0px",
+          bottom: "30px",
+        };
+      },
+    },
+    dialogType: {
+      type: String,
+      default: "audio",
+    },
+    audioDevices: {
+      type: Array,
+      default: () => [],
+    },
+    outputDevices: {
+      type: Array,
+      default: () => [],
+    },
+    videoDevices: {
+      type: Array,
+      default: () => [],
+    },
+    activeDevice: {
+      type: Object,
+      default: () => ({}),
+    }
+  },
+  methods: {
+    chooseAudioInputDevice(item) {
+      this.$emit("chooseAudioInputDevice", item.value);
+      this.$emit('close');
+    },
+    
+    chooseAudioOutputDevice(item) {
+      this.$emit("chooseAudioOutputDevice", item.value);
+      this.$emit('close');
+    },
+    
+    chooseVideoDevice(item) {
+      this.$emit("chooseVideoDevice", item.value);
+      this.$emit('close');
+    },
+    
+    detectMicroAndOutput() {
+      this.$emit('detectMicroAndOutput');
+      this.$emit('close');
+    },
+    
+    openSettingDialog(type) {
+      this.$emit('openSettingDialog', type);
+      this.$emit('close');
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.check-dialog {
+  width: 206px;
+  padding-bottom: 10px;
+  position: absolute;
+  z-index: 1000;
+  &-inner {
+    width: 100%;
+    background: var(--dialog-bg);
+    box-shadow: 0px 0px 8px 0px var(--dialog-shadow-color);
+    border-radius: 6px;
+    border: 1px solid var(--dialog-border-color);
+    padding: 12px 20px;
+    .control-list {
+      width: 100%;
+      font-weight: 400;
+      color: var(--theme-font-color);
+      border-bottom: 1px solid var(--dialog-border-color);
+
+      &-title {
+        text-align: left;
+        font-size: 16px;
+        line-height: 22px;
+        margin-bottom: 10px;
+      }
+      &-item {
+        width: 100%;
+        height: 20px;
+        cursor: pointer;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        margin-bottom: 10px;
+        &-value {
+          width: fit-content;
+          max-width: calc(100% - 33px);
+          text-align: center;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .check {
+          width: 17px;
+          height: 17px;
+          margin-right: 16px;
+          background: url("../../assets/image/common/select_item_check.png") no-repeat center / 100% 100%;
+        }
+        .is-checked {
+          background: url("../../assets/image/common/select_item_checked.png") no-repeat center / 100% 100%;
+        }
+      }
+    }
+    .control-footer {
+      width: 100%;
+      padding-top: 10px;
+      .control-link {
+        width: 100%;
+        text-align: left;
+        cursor: pointer;
+        white-space: nowrap;
+        font-size: 14px;
+        line-height: 20px;
+        color: var(--theme-font-color);
+        &:not(:last-child) {
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+}
+</style>