Skip to content

L
live-management-web
Commit eec1262b by haojie
Options

新增中控台

parent 5302e7c1
Showing with 316 additions and 412 deletions
src/assets/svg/ctrl/add.svg 0 → 100644
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1715_118)">
<path d="M0.9375 7.96875C0.65625 7.96875 0.46875 7.78125 0.46875 7.5C0.46875 7.21875 0.65625 7.03125 0.9375 7.03125H14.0625C14.3438 7.03125 14.5312 7.21875 14.5312 7.5C14.5312 7.78125 14.3438 7.96875 14.0625 7.96875H0.9375Z" fill="#B4B4B4"/>
<path d="M14.0625 6.5625H0.9375C0.375 6.5625 0 6.9375 0 7.5C0 8.0625 0.375 8.4375 0.9375 8.4375H14.0625C14.625 8.4375 15 8.0625 15 7.5C15 6.9375 14.625 6.5625 14.0625 6.5625Z" fill="#B4B4B4"/>
<path d="M7.5 14.5312C7.21875 14.5312 7.03125 14.3438 7.03125 14.0625V0.9375C7.03125 0.65625 7.21875 0.46875 7.5 0.46875C7.78125 0.46875 7.96875 0.65625 7.96875 0.9375V14.0625C7.96875 14.3438 7.78125 14.5312 7.5 14.5312Z" fill="#B4B4B4"/>
<path d="M7.5 0C6.9375 0 6.5625 0.375 6.5625 0.9375V14.0625C6.5625 14.625 6.9375 15 7.5 15C8.0625 15 8.4375 14.625 8.4375 14.0625V0.9375C8.4375 0.375 8.0625 0 7.5 0Z" fill="#B4B4B4"/>
</g>
<defs>
<clipPath id="clip0_1715_118">
<rect width="15" height="15" fill="white"/>
</clipPath>
</defs>
</svg>
\ No newline at end of file
src/assets/svg/ctrl/andom.svg 0 → 100644
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.5943 2.63555V3.58606C10.3247 3.58606 9.63501 3.53911 8.47868 4.39739C8.27666 4.54706 8.11496 4.70116 7.91981 4.87458C7.8173 4.96516 7.74653 5.04524 7.65732 5.13471C7.56725 5.22529 7.49219 5.30261 7.40427 5.40755C7.34808 5.47548 7.33821 5.47272 7.28246 5.53237C6.9003 5.94384 5.92582 7.23622 5.51793 7.76699C5.427 7.88573 5.36052 7.93157 5.27131 8.04756C5.17867 8.16906 5.11605 8.21932 5.02555 8.32978C4.42422 9.06766 3.35838 9.821 2.49071 9.85358C2.18661 9.86518 1.86536 9.85193 1.55955 9.85137C0.863861 9.85027 1.01355 10.4898 1.01355 11.5072C1.01355 11.7397 1.21556 11.9998 1.39656 11.9998C2.84584 11.9998 3.64532 12.0352 4.92475 11.0863C5.10833 10.9505 5.2533 10.8389 5.427 10.6771L5.89194 10.2198C6.39848 9.70667 7.62172 8.09284 8.18316 7.3616C8.58633 6.83636 9.10445 6.37518 9.62558 6.04988C9.71479 5.99465 9.81344 5.9477 9.91852 5.89965C10.4302 5.66603 11.02 5.73341 11.5943 5.73341C11.5943 6.56241 11.4763 7.28262 12.0317 7.28262C12.3174 7.28262 13.0727 6.09682 13.3232 5.77759C13.4124 5.66382 13.4806 5.5749 13.5694 5.46057C13.9237 5.00437 14 5.01818 14 4.53657C14 4.28472 13.2301 3.38668 13.0637 3.17238L12.4534 2.37431C12.0892 1.76512 11.5943 1.93302 11.5943 2.63555Z" fill="#B4B4B4"/>
<path d="M7.02127 9.12862C7.19172 9.45602 8.1874 10.4172 8.52616 10.6425C9.78674 11.4795 10.2174 11.416 11.5918 11.416C11.5918 12.0548 11.4797 13 11.9747 13C12.2663 13 12.4329 12.6516 12.5561 12.4805L13.5552 11.1963C13.9184 10.7292 14 10.7237 14 10.2549C14 10.0015 13.4122 9.35278 13.1988 9.06789C13.1374 8.98507 13.1314 8.95416 13.076 8.87355C12.9288 8.65823 12.7454 8.44787 12.5836 8.23973C12.3715 7.96699 12.2718 7.72075 11.9202 7.72075C11.4891 7.72075 11.5918 8.80288 11.5918 9.26941C10.2728 9.26941 9.81165 9.33842 8.67858 8.19335C8.58627 8.10005 8.50297 8.02496 8.42354 7.92337C8.35613 7.83724 8.24407 7.71357 8.17065 7.65063C7.97315 7.78479 7.73657 8.15029 7.58759 8.37886C7.43044 8.62124 7.14406 8.89232 7.02127 9.12862ZM1 3.49768V4.65931C1 4.90003 1.18892 5.1275 1.4388 5.15069C2.2915 5.22964 2.62511 4.97125 3.64354 5.51839C3.84404 5.62605 4.00462 5.74199 4.18366 5.87947C4.6405 6.22951 4.75728 6.4233 5.12095 6.78548L5.57048 7.29839C5.77013 7.12668 6.38754 6.21515 6.59492 6.01142C6.67607 5.93137 6.69324 5.92474 6.74734 5.82039C6.68251 5.69562 6.45667 5.41846 6.35792 5.30086L6.03204 4.94586C5.81092 4.71673 5.77399 4.63115 5.45026 4.3562C5.11536 4.07187 4.81653 3.80631 4.42926 3.59319C4.23905 3.48829 4.04284 3.37677 3.83503 3.30113C2.83206 2.93618 2.40055 3.0052 1.38341 3.0052C1.1975 3.0052 1 3.25696 1 3.49768Z" fill="#B4B4B4"/>
</svg>
\ No newline at end of file
src/components/SelectionPopup.vue
...@@ -79,7 +79,7 @@ import ResetSvg from '@/assets/svg/home/reset.svg'; ...@@ -79,7 +79,7 @@ import ResetSvg from '@/assets/svg/home/reset.svg';
import Grid from '@/components/Grid.vue'; import Grid from '@/components/Grid.vue';
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
modelValue: boolean; modelValue?: boolean;
value: string | number; value: string | number;
disabled?: boolean; disabled?: boolean;
title?: string; title?: string;
...@@ -91,6 +91,7 @@ const props = withDefaults( ...@@ -91,6 +91,7 @@ const props = withDefaults(
playAudio?: boolean; playAudio?: boolean;
}>(), }>(),
{ {
modelValue: false,
disabled: false, disabled: false,
title: '', title: '',
list: null, list: null,
...@@ -187,6 +188,7 @@ const onSelect = (item: any) => { ...@@ -187,6 +188,7 @@ const onSelect = (item: any) => {
} }
} }
.list { .list {
padding-top: 6px;
height: 174px; height: 174px;
overflow-y: auto; overflow-y: auto;
.chose-tones-item { .chose-tones-item {
......
src/componentsUsiness/selectTone.vue 0 → 100644
<template>
<div :class="['default-label', className]">
<SelectionPopup
title="选择一种音色"
v-model="popupVisible"
v-model:value="soundColorValue"
:list="list"
:reset="reset"
@itemChange="soundColorItemChange"
>
<div class="my-tones-default" v-show="!soundColorValue">我的音色</div>
<div class="my-tones-active" v-show="soundColorValue">
<img :src="soundColorInfo.img" alt="" />
<div>
<div class="name">{{ soundColorInfo.c_name }}</div>
<div class="categorie">
{{ soundColorInfo.c_categorie }}
</div>
</div>
</div>
</SelectionPopup>
</div>
</template>
<script lang="ts" setup>
import SelectionPopup from '@/components/SelectionPopup.vue';
import { computed } from 'vue';
const props = withDefaults(
defineProps<{
visible: boolean;
// 音色id
value: string | number;
// 音调id
toneValue: string | number;
info?: any;
list: any[];
reset?: boolean;
className?: string;
}>(),
{
info: {},
reset: false,
className: '',
},
);
const emit = defineEmits(['update:visible', 'update:value', 'update:toneValue', 'update:info', 'itemChange']);
// 弹窗状态
const popupVisible = computed({
get() {
return props.visible;
},
set(value) {
emit('update:visible', value);
},
});
// 选择的音色id
const soundColorValue = computed({
get() {
return props.value;
},
set(value) {
emit('update:value', value);
},
});
// 音调id
const tonesValue = computed({
get() {
return props.toneValue;
},
set(value) {
emit('update:toneValue', value);
},
});
// 音色id对应的信息
const soundColorInfo = computed({
get() {
return props.info;
},
set(value) {
emit('update:info', value);
},
});
const soundColorItemChange = (item: any) => {
soundColorInfo.value = item;
// 记录对应的音色id
tonesValue.value = item.tone_id;
emit('itemChange', item);
};
</script>
<style lang="less">
@import '@/style/variables.less';
.default-label {
.my-tones-default {
border-radius: 6px;
border: 1px solid #b5b5b5;
color: #b5b5b5;
font-size: @size-12;
height: 38px;
width: 100px;
.dja();
cursor: pointer;
}
.my-tones-active {
border-radius: 6px;
border: 1px solid #04ae8a;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px 6px;
cursor: pointer;
& > :last-child {
margin-left: 4px;
}
img {
width: 25px;
height: 25px;
border-radius: 50%;
}
.name {
font-size: @size-12;
color: #e2e2e2;
line-height: 14px;
}
.categorie {
font-size: @size-10;
color: #d0d0d0;
white-space: nowrap;
overflow: hidden;
max-width: 64px;
text-overflow: ellipsis;
}
}
}
</style>
src/pages/InteractiveResponse/components/human.vue
...@@ -2,66 +2,19 @@ ...@@ -2,66 +2,19 @@
<div class="start-live-human-box"> <div class="start-live-human-box">
<Loading v-show="loading"></Loading> <Loading v-show="loading"></Loading>
<div class="content"> <div class="content">
<slot></slot>
<Button theme="green" class="jump-btn" @click="onJump">连接直播平台</Button> <Button theme="green" class="jump-btn" @click="onJump">连接直播平台</Button>
<div class="header">人工回复</div> <div class="header">人工回复</div>
<div class="chose-sound-color"> <div class="chose-sound-color">
<div class="label">选择音色</div> <div class="label">选择音色：</div>
<div class="value"> <div class="value">
<div <SelectTone
class="right-chose-tones" v-model:visible="soundColorVisible"
:class="{
'not-soundColor-class': !lists.soundColor.length,
}"
>
<div class="default-label">
<SelectionPopup
v-model="textTonesVisible"
title="选择一种音调"
:list="lists.tones"
v-model:value="textTonesValue"
@itemChange="textTonesChange"
>
<div>
<template v-if="!textTonesValue"> 音调</template>
<template v-else>
<div class="chose-tones-item">
<img :src="textTonesInfo.img" alt="" />
<div>
<div class="name">{{ textTonesInfo.c_name }}</div>
<div class="categorie">{{ textTonesInfo.c_categorie }}</div>
</div>
</div>
</template>
</div>
</SelectionPopup>
</div>
<template v-if="lists.soundColor.length">
<div class="default-add">+</div>
<div @click="openSoundColor" class="default-label">
<SelectionPopup
title="选择一种音色"
v-model="soundColorVisible"
:disabled="disabled"
v-model:value="soundColorValue" v-model:value="soundColorValue"
v-model:toneValue="textTonesValue"
v-model:info="soundColorInfo"
:list="lists.soundColor" :list="lists.soundColor"
:reset="true" ></SelectTone>
@itemChange="soundColorItemChange"
>
<div>
<template v-if="!soundColorValue"> 音色</template>
<template v-else>
<div class="chose-tones-item">
<img :src="soundColorInfo.img" alt="" />
<div>
<div class="name">{{ soundColorInfo.c_name }}</div>
</div>
</div>
</template>
</div></SelectionPopup
>
</div>
</template>
</div>
</div> </div>
</div> </div>
<div class="input-box"> <div class="input-box">
...@@ -80,7 +33,6 @@ ...@@ -80,7 +33,6 @@
</span> </span>
</div> </div>
<div class="stop" v-if="route.query.is_live == '1'"> <div class="stop" v-if="route.query.is_live == '1'">
<!-- <span class="start-time">00：52：20</span> -->
<Button theme="opacity" @click="closeLive">关闭直播</Button> <Button theme="opacity" @click="closeLive">关闭直播</Button>
</div> </div>
</div> </div>
...@@ -95,15 +47,16 @@ import LiveSvg from '@/assets/svg/home/live.svg'; ...@@ -95,15 +47,16 @@ import LiveSvg from '@/assets/svg/home/live.svg';
import Loading from '@/components/loading.vue'; import Loading from '@/components/loading.vue';
import Button from '@/components/Button.vue'; import Button from '@/components/Button.vue';
import Textarea from '@/components/textarea.vue'; import Textarea from '@/components/textarea.vue';
import SelectionPopup from '@/components/SelectionPopup.vue';
import { show_message } from '@/utils/tool'; import { show_message } from '@/utils/tool';
import { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'; import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { getTonesList } from '@/service/Common'; import { getTonesList } from '@/service/Common';
import { liveInteractionReply, closeLiveTask, getHumanReplyCallback } from '@/utils/api/userApi'; import { liveInteractionReply, closeLiveTask, getHumanReplyCallback } from '@/utils/api/userApi';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import routerConfig from '@/router/tool'; import routerConfig from '@/router/tool';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { callPyjsInWindow } from '@/utils/pyqt'; import { callPyjsInWindow } from '@/utils/pyqt';
import SelectTone from '@/componentsUsiness/selectTone.vue';
const emit = defineEmits(['createAudio']); const emit = defineEmits(['createAudio']);
const store = useStore(); const store = useStore();
const router = useRouter(); const router = useRouter();
...@@ -118,25 +71,14 @@ const lists = reactive({ ...@@ -118,25 +71,14 @@ const lists = reactive({
const loading = ref(false); const loading = ref(false);
const textTonesVisible = ref(false);
const textTonesValue = ref(''); const textTonesValue = ref('');
const textTonesInfo = ref({});
const soundColorVisible = ref(false); const soundColorVisible = ref(false);
const soundColorValue = ref(''); const soundColorValue = ref('');
const soundColorInfo = ref({}); const soundColorInfo = ref({});
const disabled = ref(true);
const textareaValue = ref(''); const textareaValue = ref('');
const textTonesChange = (item: any) => {
textTonesInfo.value = item;
};
const soundColorItemChange = (item: any) => {
soundColorInfo.value = item;
};
const changeRouteQuery = () => { const changeRouteQuery = () => {
router.replace({ router.replace({
path: routerConfig.interactiveResponse.path, path: routerConfig.interactiveResponse.path,
...@@ -208,6 +150,10 @@ const submit = async () => { ...@@ -208,6 +150,10 @@ const submit = async () => {
show_message('请等待上一条回复完成'); show_message('请等待上一条回复完成');
return; return;
} }
if (!soundColorValue.value) {
show_message('音色必选');
return;
}
if (!textTonesValue.value) { if (!textTonesValue.value) {
show_message('音调必选'); show_message('音调必选');
return; return;
...@@ -223,6 +169,8 @@ const submit = async () => { ...@@ -223,6 +169,8 @@ const submit = async () => {
if (res.code == 0) { if (res.code == 0) {
// 开启轮询 // 开启轮询
openInterval(); openInterval();
} else {
loading.value = false;
} }
} catch (e) { } catch (e) {
loading.value = false; loading.value = false;
...@@ -231,16 +179,6 @@ const submit = async () => { ...@@ -231,16 +179,6 @@ const submit = async () => {
} }
}; };
watch(
() => textTonesValue.value,
(v) => {
if (v) {
disabled.value = false;
} else {
disabled.value = true;
}
},
);
const onJump = () => { const onJump = () => {
let params = { let params = {
id: route.query.id, id: route.query.id,
...@@ -278,7 +216,7 @@ onBeforeUnmount(() => { ...@@ -278,7 +216,7 @@ onBeforeUnmount(() => {
border-radius: 0px 3px 3px 3px; border-radius: 0px 3px 3px 3px;
border: 1px solid #464646; border: 1px solid #464646;
background: #1e1e1e; background: #1e1e1e;
margin-top: 40px; margin-top: 50px;
padding: 12px; padding: 12px;
display: flex; display: flex;
position: relative; position: relative;
...@@ -300,61 +238,7 @@ onBeforeUnmount(() => { ...@@ -300,61 +238,7 @@ onBeforeUnmount(() => {
color: #b4b4b4; color: #b4b4b4;
} }
.value { .value {
.right-chose-tones {
margin-left: 12px; margin-left: 12px;
width: 245px;
height: 38px;
border-radius: 6px;
border: 1px solid #b5b5b5;
background: #1a1b1b;
display: flex;
justify-content: space-around;
align-items: center;
.default-label {
color: #b5b5b5;
font-weight: 600;
font-size: @size-14;
cursor: pointer;
}
.default-add {
color: rgb(180, 180, 180);
font-size: @size-20;
font-weight: bold;
}
.chose-tones-item {
width: 110px;
height: 34px;
border-radius: 6px;
border: 1px solid #363636;
background: #1a1b1b;
transition: all 0.2s;
display: flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
padding: 0 6px;
& > :last-child {
margin-left: 4px;
}
img {
width: 25px;
height: 25px;
border-radius: 50%;
}
.name {
font-size: @size-12;
color: #e2e2e2;
line-height: 14px;
}
.categorie {
font-size: @size-10;
color: #d0d0d0;
}
}
}
.not-soundColor-class {
width: 120px;
}
} }
} }
.input-box { .input-box {
......
src/pages/InteractiveResponse/components/quickReply.vue 0 → 100644
<template>
<div class="quick-reply-box">
<div class="header">
<div class="label">中控台</div>
<div class="header-buttons">
<Button theme="dark">
<img :src="imgs.andom" alt="" class="quick-reply-button__image" />
随机播放</Button
>
<Button theme="dark">
<img :src="imgs.add" alt="" class="quick-reply-button__image" />
添加回复</Button
>
</div>
</div>
<div class="content"></div>
</div>
</template>
<script lang="ts" setup>
import Button from '@/components/Button.vue';
const imgs = {
andom: new URL('@/assets/svg/ctrl/andom.svg', import.meta.url).href,
add: new URL('@/assets/svg/ctrl/add.svg', import.meta.url).href,
};
</script>
<style lang="less">
@import '@/style/variables.less';
.quick-reply-box {
display: flex;
flex-direction: column;
padding: 0 4px;
position: relative;
.header {
height: 50px;
padding: 0 4px;
display: flex;
justify-content: space-between;
align-items: center;
.label {
font-size: @size-15;
color: white;
}
.header-buttons {
.t-button__text {
font-size: @size-14;
color: #b4b4b4;
display: flex;
align-items: center;
}
.quick-reply-button__image {
width: 15px;
height: 15px;
margin-right: 4px;
}
}
}
.content {
height: 100%;
border-radius: 0px 3px 3px 3px;
border: 1px solid #464646;
background: #1e1e1e;
padding: 12px;
display: flex;
position: relative;
flex-direction: column;
}
}
</style>
src/pages/InteractiveResponse/index.vue
<template> <template>
<div class="custom-interactive-response-page"> <div class="custom-interactive-response-page">
<Human @createAudio="createAudio"></Human> <QuickReply></QuickReply>
<Human @createAudio="createAudio">
<div v-show="false"> <div v-show="false">
<audio <audio
:volume="liveDefaultVolume" :volume="liveDefaultVolume"
...@@ -10,32 +11,21 @@ ...@@ -10,32 +11,21 @@
@ended="audioEnded" @ended="audioEnded"
></audio> ></audio>
</div> </div>
</Human>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { liveDefaultVolume } from '@/constants/token'; import { liveDefaultVolume } from '@/constants/token';
import { onBeforeUnmount, onMounted, ref } from 'vue'; import { ref } from 'vue';
import Human from './components/human.vue'; import Human from './components/human.vue';
import { useRoute } from 'vue-router'; import { callPyjsInWindow } from '@/utils/pyqt';
import { callPyjsInWindow, injectWindow } from '@/utils/pyqt'; import QuickReply from './components/quickReply.vue';
import { getliveTaskReply } from '@/utils/api/userApi';
import { useStore } from 'vuex';
import { writeLog } from '@/utils/pyqt';
// 互动回复
const store = useStore();
const route = useRoute();
// 音频文件 // 音频文件
const audioRef = ref<HTMLAudioElement>(); const audioRef = ref<HTMLAudioElement>();
const audioFile = ref(''); const audioFile = ref('');
const imgs = {
mp4: new URL('../../assets/img/1.mp4', import.meta.url).href,
};
const createAudio = (url: string) => { const createAudio = (url: string) => {
audioFile.value = url; audioFile.value = url;
}; };
...@@ -58,8 +48,13 @@ const audioEnded = () => { ...@@ -58,8 +48,13 @@ const audioEnded = () => {
.custom-interactive-response-page { .custom-interactive-response-page {
display: flex; display: flex;
width: @pageWidth2 !important; width: @pageWidth2 !important;
& > :nth-child(1) {
width: 30%;
}
& > :last-child {
flex: 1;
}
& > * { & > * {
width: 100%;
background: #303030; background: #303030;
height: 100%; height: 100%;
} }
......
src/pages/createInteract/components/AddInteractDialog.vue
...@@ -40,61 +40,14 @@ ...@@ -40,61 +40,14 @@
</SelectionPopup> </SelectionPopup>
</div> </div>
<!-- --> <!-- -->
<div <SelectTone
class="right-chose-tones"
:style="{
width: !lists.soundColor.length ? '120px' : '',
}"
v-show="currentTab == '2'" v-show="currentTab == '2'"
> v-model:visible="soundColorVisible"
<div class="default-label">
<SelectionPopup
v-model="textTonesVisible"
title="选择一种音调"
:list="lists.tones"
v-model:value="textTonesValue"
@itemChange="textTonesChange"
>
<div>
<template v-if="!textTonesValue"> 音调</template>
<template v-else>
<div class="chose-tones-item">
<img :src="textTonesInfo.img" alt="" />
<div>
<div class="name">{{ textTonesInfo.c_name }}</div>
<div class="categorie">{{ textTonesInfo.c_categorie }}</div>
</div>
</div>
</template>
</div>
</SelectionPopup>
</div>
<template v-if="lists.soundColor.length">
<div class="default-add">+</div>
<div @click="openSoundColor" class="default-label">
<SelectionPopup
title="选择一种音色"
v-model="soundColorVisible"
:disabled="disabled"
v-model:value="soundColorValue" v-model:value="soundColorValue"
v-model:toneValue="textTonesValue"
v-model:info="soundColorInfo"
:list="lists.soundColor" :list="lists.soundColor"
@itemChange="soundColorItemChange" ></SelectTone>
>
<div>
<template v-if="!soundColorValue"> 音色</template>
<template v-else>
<div class="chose-tones-item">
<img :src="soundColorInfo.img" alt="" />
<div>
<div class="name">{{ soundColorInfo.c_name }}</div>
</div>
</div>
</template>
</div></SelectionPopup
>
</div>
</template>
</div>
</div> </div>
</template> </template>
<CustomTabPanel name="1" label="音频回复"> <CustomTabPanel name="1" label="音频回复">
...@@ -146,6 +99,7 @@ import { show_message } from '@/utils/tool'; ...@@ -146,6 +99,7 @@ import { show_message } from '@/utils/tool';
import { getUploadConfig, getTonesList } from '@/service/Common'; import { getUploadConfig, getTonesList } from '@/service/Common';
import { createLiveInteraction } from '@/utils/api/userApi'; import { createLiveInteraction } from '@/utils/api/userApi';
import { audioAccept } from '@/constants/token'; import { audioAccept } from '@/constants/token';
import SelectTone from '@/componentsUsiness/selectTone.vue';
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
visible: boolean; visible: boolean;
...@@ -214,7 +168,6 @@ const textValue = ref(''); // 文本内容 ...@@ -214,7 +168,6 @@ const textValue = ref(''); // 文本内容
const soundColorVisible = ref(false); // 音色弹窗 const soundColorVisible = ref(false); // 音色弹窗
const soundColorValue = ref(''); // 音色id const soundColorValue = ref(''); // 音色id
const soundColorInfo = ref({}); // 音色信息 const soundColorInfo = ref({}); // 音色信息
const disabled = ref(true); // 是否禁用
watch( watch(
() => props.visible, () => props.visible,
...@@ -230,26 +183,6 @@ watch( ...@@ -230,26 +183,6 @@ watch(
}, },
); );
watch(
() => textTonesValue.value,
(v) => {
if (v) {
disabled.value = false;
} else {
disabled.value = true;
}
},
);
const openSoundColor = () => {
if (textTonesValue.value) {
// 允许打开
soundColorVisible.value = true;
} else {
show_message('请先选择音调');
}
};
// 弹窗关闭 // 弹窗关闭
const onClose = () => { const onClose = () => {
clearData(); clearData();
...@@ -260,14 +193,6 @@ const tonesItemChange = (item: any) => { ...@@ -260,14 +193,6 @@ const tonesItemChange = (item: any) => {
tonesInfo.value = item; tonesInfo.value = item;
}; };
const textTonesChange = (item: any) => {
textTonesInfo.value = item;
};
const soundColorItemChange = (item: any) => {
soundColorInfo.value = item;
};
// 清空dialog中所有的数据 // 清空dialog中所有的数据
const clearData = () => { const clearData = () => {
questionValue.value = ''; questionValue.value = '';
...@@ -284,7 +209,6 @@ const clearData = () => { ...@@ -284,7 +209,6 @@ const clearData = () => {
soundColorVisible.value = false; soundColorVisible.value = false;
soundColorValue.value = ''; soundColorValue.value = '';
soundColorInfo.value = {}; soundColorInfo.value = {};
disabled.value = true;
}; };
const onCreate = async (params: any, status: any) => { const onCreate = async (params: any, status: any) => {
...@@ -395,9 +319,17 @@ const onSave = async (status: boolean) => { ...@@ -395,9 +319,17 @@ const onSave = async (status: boolean) => {
} }
} else if (currentTab.value == '2') { } else if (currentTab.value == '2') {
// 文本 // 文本
// 音调，文字必填 // 文字必填
if (!textTonesValue.value || !textValue.value) { if (!textValue.value) {
show_message('音调或文字必填'); show_message('文字必填');
return;
}
if (!textTonesValue.value) {
show_message('音调必选');
return;
}
if (!soundColorValue.value) {
show_message('音色必选');
return; return;
} }
params.type = 2; params.type = 2;
...@@ -498,14 +430,12 @@ onMounted(() => { ...@@ -498,14 +430,12 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
} }
.my-tones-active { .my-tones-active {
width: 100px;
height: 38px;
border-radius: 6px; border-radius: 6px;
border: 1px solid #04ae8a; border: 1px solid #04ae8a;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
padding: 0 6px; padding: 2px 6px;
cursor: pointer; cursor: pointer;
& > :last-child { & > :last-child {
margin-left: 4px; margin-left: 4px;
...@@ -523,57 +453,10 @@ onMounted(() => { ...@@ -523,57 +453,10 @@ onMounted(() => {
.categorie { .categorie {
font-size: @size-10; font-size: @size-10;
color: #d0d0d0; color: #d0d0d0;
} white-space: nowrap;
} overflow: hidden;
.right-chose-tones { max-width: 64px;
width: 245px; text-overflow: ellipsis;
height: 38px;
border-radius: 6px;
border: 1px solid #b5b5b5;
background: #1a1b1b;
display: flex;
justify-content: space-around;
align-items: center;
.default-label {
color: #b5b5b5;
font-weight: 600;
font-size: @size-14;
cursor: pointer;
}
.default-add {
color: rgb(180, 180, 180);
font-size: @size-20;
font-weight: bold;
}
.chose-tones-item {
width: 110px;
height: 34px;
border-radius: 6px;
border: 1px solid #363636;
background: #1a1b1b;
transition: all 0.2s;
display: flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
padding: 0 6px;
& > :last-child {
margin-left: 4px;
}
img {
width: 25px;
height: 25px;
border-radius: 50%;
}
.name {
font-size: @size-12;
color: #e2e2e2;
line-height: 14px;
}
.categorie {
font-size: @size-10;
color: #d0d0d0;
}
} }
} }
} }
......
src/pages/createLive/components/scripts.vue
...@@ -29,58 +29,17 @@ ...@@ -29,58 +29,17 @@
>测试文案</Button >测试文案</Button
> >
</template> </template>
<div class="right-chose-tones" v-show="currentOption === scriptTypeText"> <SelectTone
<div @click="tonesVisible = true" class="default-label"> v-show="currentOption === scriptTypeText"
<SelectionPopup v-model:visible="soundColorVisible"
v-model="tonesVisible"
title="选择一种音调"
:list="lists.tones"
v-model:value="tonesValue"
@itemChange="tonesItemChange"
>
<div>
<template v-if="!tonesValue"> 音调</template>
<template v-else>
<div class="chose-tones-item">
<img :src="tonesInfo.img" alt="" />
<div>
<div class="name">{{ tonesInfo.c_name }}</div>
<div class="categorie">{{ tonesInfo.c_categorie }}</div>
</div>
</div>
</template>
</div>
</SelectionPopup>
</div>
<template v-if="lists.soundColor.length">
<div class="default-add">+</div>
<div @click="openSoundColor" class="default-label">
<SelectionPopup
title="选择一种音色"
v-model="soundColorVisible"
:disabled="disabled"
v-model:value="soundColorValue" v-model:value="soundColorValue"
v-model:toneValue="tonesValue"
v-model:info="soundColorInfo"
:list="lists.soundColor" :list="lists.soundColor"
:reset="true" className="right-chose-tones"
@itemChange="soundColorItemChange" @itemChange="soundColorItemChange"
> ></SelectTone>
<div> <!-- 音频 -->
<template v-if="!soundColorValue"> 音色</template>
<template v-else>
<div class="chose-tones-item">
<img :src="soundColorInfo.img" alt="" />
<div>
<div class="name">{{ soundColorInfo.c_name }}</div>
<div class="categorie">{{ soundColorInfo.c_categorie }}</div>
</div>
</div>
</template>
</div></SelectionPopup
>
</div>
</template>
</div>
<!-- -->
<div class="phonetics-chose" v-show="currentOption === scriptTypePhonetics"> <div class="phonetics-chose" v-show="currentOption === scriptTypePhonetics">
<div class="default-label"> <div class="default-label">
<SelectionPopup <SelectionPopup
...@@ -221,8 +180,9 @@ import TextScriptDialog from './TextScriptDialog.vue'; ...@@ -221,8 +180,9 @@ import TextScriptDialog from './TextScriptDialog.vue';
import ScriptTemplate from '@/components/ScriptTemplate.vue'; import ScriptTemplate from '@/components/ScriptTemplate.vue';
import Select from '@/components/Select.vue'; import Select from '@/components/Select.vue';
import SelectionPopup from '@/components/SelectionPopup.vue'; import SelectionPopup from '@/components/SelectionPopup.vue';
import { show_message, isDev, ecursionDeepCopy } from '@/utils/tool'; import { isDev, ecursionDeepCopy } from '@/utils/tool';
import AudioScriptDialog from './audioScriptDialog.vue'; import AudioScriptDialog from './audioScriptDialog.vue';
import SelectTone from '@/componentsUsiness/selectTone.vue';
import { import {
createLiveKeys, createLiveKeys,
scriptTypeList, scriptTypeList,
...@@ -287,8 +247,6 @@ const lists = reactive({ ...@@ -287,8 +247,6 @@ const lists = reactive({
soundColor: [], soundColor: [],
}); });
// 音调弹窗
const tonesVisible = ref(false);
// 选择的音调id // 选择的音调id
const tonesValue = ref(''); const tonesValue = ref('');
// 选择的音调对象 // 选择的音调对象
...@@ -433,10 +391,13 @@ const updateTonesInfo = (tone_id: any, phonetic_timbres_id: any) => { ...@@ -433,10 +391,13 @@ const updateTonesInfo = (tone_id: any, phonetic_timbres_id: any) => {
} }
} }
if (phonetic_timbres_id) { if (phonetic_timbres_id) {
//
let obj2 = lists.soundColor.find((item: any) => item.id == phonetic_timbres_id); let obj2 = lists.soundColor.find((item: any) => item.id == phonetic_timbres_id);
if (obj2) { if (obj2) {
if (currentOption.value == scriptTypeText) {
soundColorInfo.value = obj2; soundColorInfo.value = obj2;
} else {
phoneticsInfo.value = obj2;
}
} }
} }
}; };
...@@ -557,15 +518,6 @@ watch( ...@@ -557,15 +518,6 @@ watch(
}, },
); );
const openSoundColor = () => {
if (tonesValue.value) {
// 允许打开
soundColorVisible.value = true;
} else {
show_message('请先选择音调');
}
};
// 音频文件提交 // 音频文件提交
const uploadChange = () => { const uploadChange = () => {
commitInfo({ commitInfo({
...@@ -573,26 +525,26 @@ const uploadChange = () => { ...@@ -573,26 +525,26 @@ const uploadChange = () => {
}); });
}; };
// 音调提交
const tonesItemChange = (item: any) => {
tonesInfo.value = item;
commitInfo({
[createLiveKeys.textTones]: item.id,
});
};
// 文本 音色提交 // 文本 音色提交
const soundColorItemChange = (item: any = false) => { const soundColorItemChange = (item: any = false) => {
if (item) { if (item) {
soundColorInfo.value = item; soundColorInfo.value = item;
// 更新音色
commitInfo({ commitInfo({
[createLiveKeys.textSoundColor]: item.id, [createLiveKeys.textSoundColor]: item.id,
}); });
// 更新音调
commitInfo({
[createLiveKeys.textTones]: item.tone_id,
});
} else { } else {
soundColorInfo.value = {}; soundColorInfo.value = {};
commitInfo({ commitInfo({
[createLiveKeys.textSoundColor]: '', [createLiveKeys.textSoundColor]: '',
}); });
commitInfo({
[createLiveKeys.textTones]: '',
});
} }
}; };
...@@ -671,57 +623,13 @@ onActivated(() => { ...@@ -671,57 +623,13 @@ onActivated(() => {
align-items: center; align-items: center;
flex: 0 0 auto; flex: 0 0 auto;
.right-chose-tones { .right-chose-tones {
height: 50px; .my-tones-default,
border-radius: 6px; .my-tones-active {
border: 1px solid #0dd; border: 1px solid #0dd;
background: #1a1b1b; background: #1a1b1b;
display: flex;
justify-content: space-around;
align-items: center;
.default-label {
color: #e2e2e2;
font-weight: 600;
font-size: @size-14;
cursor: pointer;
height: 100%;
.dja();
width: 120px;
}
.default-add {
color: rgb(180, 180, 180);
font-size: @size-20;
font-weight: bold;
}
.chose-tones-item {
width: 110px;
height: 45px;
border-radius: 6px; border-radius: 6px;
border: 1px solid #363636; height: 50px;
background: #1a1b1b; padding: 0 16px;
transition: all 0.2s;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 0 6px;
& > :last-child {
margin-left: 4px;
}
img {
width: 35px;
height: 35px;
border-radius: 50%;
}
.name {
font-size: @size-14;
font-weight: 600;
color: #e2e2e2;
line-height: 14px;
}
.categorie {
font-size: @size-12;
color: #d0d0d0;
}
} }
} }
.phonetics-chose { .phonetics-chose {
......
src/utils/request.ts
...@@ -8,8 +8,7 @@ const error_messaage = '请求错误'; ...@@ -8,8 +8,7 @@ const error_messaage = '请求错误';
const getBaseUrl = async () => { const getBaseUrl = async () => {
if (isDev()) { if (isDev()) {
// // return 'http://156.247.11.21:93';
return 'http://156.247.11.21:93';
return ''; return '';
} }
// 默认线上地址 // 默认线上地址
...@@ -30,8 +29,8 @@ const getBaseUrl = async () => { ...@@ -30,8 +29,8 @@ const getBaseUrl = async () => {
const instance = axios.create({ const instance = axios.create({
baseURL: '', baseURL: '',
withCredentials: false, // withCredentials: false,
// withCredentials: isDev() ? true : false, withCredentials: isDev() ? true : false,
}); });
// 请求拦截 // 请求拦截
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment