Skip to content

L
live-management-web
Commit f39c3486 by haojie
Options

v1版本最后一次提交

parent f5df0725
Showing with 315 additions and 14 deletions
src/assets/svg/home/add.svg 0 → 100644
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1534_74)">
<path d="M2.5 21.25C1.75 21.25 1.25 20.75 1.25 20C1.25 19.25 1.75 18.75 2.5 18.75H37.5C38.25 18.75 38.75 19.25 38.75 20C38.75 20.75 38.25 21.25 37.5 21.25H2.5Z" fill="#E0E0E0"/>
<path d="M37.5 17.5H2.5C1 17.5 0 18.5 0 20C0 21.5 1 22.5 2.5 22.5H37.5C39 22.5 40 21.5 40 20C40 18.5 39 17.5 37.5 17.5Z" fill="#E0E0E0"/>
<path d="M20 38.75C19.25 38.75 18.75 38.25 18.75 37.5V2.5C18.75 1.75 19.25 1.25 20 1.25C20.75 1.25 21.25 1.75 21.25 2.5V37.5C21.25 38.25 20.75 38.75 20 38.75Z" fill="#E0E0E0"/>
<path d="M20 0C18.5 0 17.5 1 17.5 2.5V37.5C17.5 39 18.5 40 20 40C21.5 40 22.5 39 22.5 37.5V2.5C22.5 1 21.5 0 20 0Z" fill="#E0E0E0"/>
</g>
<defs>
<clipPath id="clip0_1534_74">
<rect width="40" height="40" fill="white"/>
</clipPath>
</defs>
</svg>
\ No newline at end of file
src/components/ScriptTemplate.vue
...@@ -4,26 +4,79 @@ ...@@ -4,26 +4,79 @@
:style="{ :style="{
height: height, height: height,
}" }"
></div> >
<div class="script-template-tool" v-if="showTool">
<div class="edit-box" @click="onEdit">
<img :src="imgs.edit" alt="" />
</div>
<div class="delete-box" @click="onDelete">
<img :src="imgs.delete" alt="" />
</div>
</div>
<div class="script-template-body">
<slot />
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
height?:string; height?: string;
showTool?: boolean;
}>(), }>(),
{ {
height:'175px'; height: '175px',
showTool: true,
}, },
); );
const emit = defineEmits(['edit','delete']); const emit = defineEmits(['edit', 'delete']);
const imgs = {
edit: new URL('../assets/svg/home/edit.svg', import.meta.url).href,
delete: new URL('../assets/svg/home/delete.svg', import.meta.url).href,
};
const onEdit = () => {
emit('edit');
};
const onDelete = () => {
emit('delete');
};
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/variables';
.custom-script-template { .custom-script-template {
width: 100%; width: 100%;
border-radius: 3px; border-radius: 3px;
border: 1px solid #464646; border: 1px solid #464646;
background: #1e1e1e; background: #1e1e1e;
position: relative;
.script-template-tool {
position: absolute;
right: 12px;
top: 12px;
.da();
.edit-box,
.delete-box {
cursor: pointer;
img {
width: 20px;
height: 20px;
}
}
.edit-box {
margin-right: 12px;
}
}
.script-template-body {
padding: 12px;
height: 100%;
}
& + & {
margin-top: 6px;
}
} }
</style> </style>
src/pages/createLive/components/TextScriptDialog.vue 0 → 100644
<template>
<Dialog v-model="visible" @confirm="confirm">
<div class="text-script-dialog-body">
<div class="input-box">
<div class="label">标题：</div>
<CustomInput v-model="titleValue" align="left" placeholder="请输入标题"></CustomInput>
</div>
<div class="input-box">
<div class="label">内容：</div>
<CustomTextarea v-model="contentValue"></CustomTextarea>
</div>
</div>
</Dialog>
</template>
<script lang="ts" setup>
import { watch, ref } from 'vue';
import Dialog from '@/components/Dialog.vue';
import CustomInput from '@/components/input/index.vue';
import CustomTextarea from '@/components/textarea.vue';
import { show_message } from '@/utils/tool';
const props = withDefaults(
defineProps<{
modelValue: boolean;
info: any;
}>(),
{},
);
const emit = defineEmits(['update:modelValue', 'submit']);
const visible = ref(props.modelValue);
// 标题
const titleValue = ref('');
const contentValue = ref('');
const confirm = () => {
if (titleValue.value && contentValue.value) {
const { info } = props;
visible.value = false;
emit('submit', {
title: titleValue.value,
content: contentValue.value,
index: typeof info.index === 'number' ? info.index : false,
});
// 清空
titleValue.value = '';
contentValue.value = '';
} else {
show_message('标题或内容必填');
}
};
watch(
() => props.info,
(v) => {
if (Object.keys(v).length) {
titleValue.value = v.title;
contentValue.value = v.content;
}
},
);
watch(
() => visible.value,
(v) => {
emit('update:modelValue', v);
},
);
watch(
() => props.modelValue,
(v) => {
visible.value = v;
},
);
</script>
<style lang="less">
@import '@/style/variables';
.text-script-dialog-body {
margin: 16px 0;
.input-box {
display: flex;
.label {
color: #fff;
font-size: @size-14;
white-space: nowrap;
}
}
.input-box + .input-box {
margin-top: 12px;
}
}
</style>
src/pages/createLive/components/scripts.vue
...@@ -85,21 +85,60 @@ ...@@ -85,21 +85,60 @@
</div> </div>
</div> </div>
</div> </div>
<div class="script-setting-text flex1" v-show="currentOption === scriptTypeText"> <div
class="script-setting-text flex1 narrow-scrollbar"
ref="scriptSettingText"
v-show="currentOption === scriptTypeText"
>
<template v-if="isDev()">
<template v-for="(item, index) in textScriptList" :key="index">
<ScriptTemplate @edit="editTextScript(item, index)" @delete="deleteTextScript(index)">
<div class="script-template-body__text">
<div class="title-box">
<div class="label">标题：</div>
<div class="value">{{ item.title }}</div>
</div>
<div class="content-box">
<div class="label">内容：</div>
<div class="value narrow-scrollbar">
{{ item.content }}
</div>
</div>
</div>
</ScriptTemplate>
</template>
<ScriptTemplate :showTool="false">
<div class="script-template-body__text-add" @click="addTextScript">
<img :src="imgs.add" alt="" />
<div class="label">添加脚本</div>
</div>
</ScriptTemplate>
</template>
<template v-else>
<Textarea v-model="textareaValue" @change="textareaChange"></Textarea> <Textarea v-model="textareaValue" @change="textareaChange"></Textarea>
</template>
</div> </div>
<div class="script-setting-upload flex1" v-show="currentOption === scriptTypePhonetics"> <div class="script-setting-upload flex1" v-show="currentOption === scriptTypePhonetics">
<CustomUpload v-model="mp3Url" :uploadInfo="uploadInfo" :config="ossConfig" @change="uploadChange"></CustomUpload> <CustomUpload v-model="mp3Url" :uploadInfo="uploadInfo" :config="ossConfig" @change="uploadChange"></CustomUpload>
</div> </div>
<TextScriptDialog v-model="textScriptVisible" @submit="textScriptSubmit" :info="editTextInfo"></TextScriptDialog>
<ConfirmDialog
v-model="confirmDeleteVisible"
title="确定要删除该声音吗？"
@confirm="confirmDeleteText"
></ConfirmDialog>
</div> </div>
</template> </template>
<script lang="tsx" setup> <script lang="tsx" setup>
import { computed, onMounted, reactive, ref, watch } from 'vue'; import { computed, onMounted, reactive, ref, watch } from 'vue';
import ConfirmDialog from '@/components/ConfirmDialog.vue';
import TextScriptDialog from './TextScriptDialog.vue';
import ScriptTemplate from '@/components/ScriptTemplate.vue';
import CustomUpload from '@/components/upload'; import CustomUpload from '@/components/upload';
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 } from '@/utils/tool'; import { show_message, isDev } from '@/utils/tool';
import { createLiveKeys, scriptTypeList, scriptTypeText, scriptTypePhonetics } from '@/service/CreateLive'; import { createLiveKeys, scriptTypeList, scriptTypeText, scriptTypePhonetics } from '@/service/CreateLive';
import { useLiveInfoSubmit } from '@/hooks/useStoreCommit'; import { useLiveInfoSubmit } from '@/hooks/useStoreCommit';
import Textarea from '@/components/textarea.vue'; import Textarea from '@/components/textarea.vue';
...@@ -117,6 +156,7 @@ const props = withDefaults( ...@@ -117,6 +156,7 @@ const props = withDefaults(
const imgs = { const imgs = {
success: new URL('../../../assets/svg/upload/success1.svg', import.meta.url).href, success: new URL('../../../assets/svg/upload/success1.svg', import.meta.url).href,
add: new URL('../../../assets/svg/home/add.svg', import.meta.url).href,
}; };
const store = useStore(); const store = useStore();
...@@ -125,6 +165,17 @@ const route = useRoute(); ...@@ -125,6 +165,17 @@ const route = useRoute();
// 编辑信息 // 编辑信息
const editInfo = computed(() => store.getters['live/getEditLive']); const editInfo = computed(() => store.getters['live/getEditLive']);
// 文本脚本列表
const textScriptList = ref([]);
// 文本脚本el
const scriptSettingText = ref<HTMLDivElement>();
// 文本编辑时的行信息
const editTextInfo = ref({});
// 文本脚本删除时选择的下标
const deleteTextId = ref();
// 确认删除弹窗
const confirmDeleteVisible = ref(false);
const lists = reactive({ const lists = reactive({
tones: [], tones: [],
soundColor: [], soundColor: [],
...@@ -143,6 +194,9 @@ const soundColorValue = ref(''); ...@@ -143,6 +194,9 @@ const soundColorValue = ref('');
const soundColorInfo = ref({}); const soundColorInfo = ref({});
const disabled = ref(true); const disabled = ref(true);
// 文本脚本弹窗
const textScriptVisible = ref(false);
// 阿里云上传配置 // 阿里云上传配置
const ossConfig = ref({}); const ossConfig = ref({});
// 上传的音频文件链接 // 上传的音频文件链接
...@@ -165,6 +219,43 @@ const textareaValue = ref(''); ...@@ -165,6 +219,43 @@ const textareaValue = ref('');
const currentOption = ref(scriptTypeText); const currentOption = ref(scriptTypeText);
// 新增文本脚本
const addTextScript = () => {
// 打开弹窗
textScriptVisible.value = true;
};
// 编辑脚本
const editTextScript = (item: any, index: number) => {
item.index = index;
editTextInfo.value = JSON.parse(JSON.stringify(item));
textScriptVisible.value = true;
};
// 删除文本脚本
const deleteTextScript = (index: number) => {
deleteTextId.value = index;
// 打开确认弹窗
confirmDeleteVisible.value = true;
};
// 确定删除文本
const confirmDeleteText = () => {
textScriptList.value.splice(deleteTextId.value, 1);
};
// 提交文本脚本
const textScriptSubmit = (params: any) => {
if (params.title && params.content) {
if (typeof params.index === 'number') {
textScriptList.value[params.index].title = params.title;
textScriptList.value[params.index].content = params.content;
} else {
textScriptList.value.push(params);
}
}
};
// 更新对应的info // 更新对应的info
const updateTonesInfo = (tone_id: any, phonetic_timbres_id: any) => { const updateTonesInfo = (tone_id: any, phonetic_timbres_id: any) => {
if (tone_id) { if (tone_id) {
...@@ -354,18 +445,17 @@ onMounted(async () => { ...@@ -354,18 +445,17 @@ onMounted(async () => {
<style lang="less"> <style lang="less">
@import '@/style/variables'; @import '@/style/variables';
.create-live-script-setting { .create-live-script-setting {
width: 550px;
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 4px; padding: 0 12px;
overflow: hidden; height: 100%;
.all-select { .all-select {
height: 74px; height: 74px;
padding: 12px 0; padding: 12px 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex: 0 0 auto;
.right-chose-tones { .right-chose-tones {
width: 245px; width: 245px;
height: 50px; height: 50px;
...@@ -459,9 +549,11 @@ onMounted(async () => { ...@@ -459,9 +549,11 @@ onMounted(async () => {
} }
} }
.flex1 { .flex1 {
flex: 1; flex: 1 1 auto;
} }
.script-setting-text { .script-setting-text {
overflow-y: auto;
transition: 0.3s;
.custom-textarea-box { .custom-textarea-box {
height: 100%; height: 100%;
.custom-t-textarea { .custom-t-textarea {
...@@ -471,6 +563,49 @@ onMounted(async () => { ...@@ -471,6 +563,49 @@ onMounted(async () => {
} }
} }
} }
.script-template-body__text {
.dj();
flex-direction: column;
height: 100%;
.title-box,
.content-box {
font-size: @size-14;
display: flex;
.label {
white-space: nowrap;
}
}
.title-box {
color: #fff;
}
.content-box {
color: #b4b4b4;
margin-top: 16px;
flex: 1;
overflow: hidden;
.value {
height: 100%;
word-break: break-all;
overflow-y: auto;
}
}
}
.script-template-body__text-add {
height: 100%;
.dja();
flex-direction: column;
cursor: pointer;
img {
width: 40px;
height: 40px;
margin-bottom: 12px;
}
.label {
font-size: @size-18;
color: #b4b4b4;
font-weight: 600;
}
}
} }
.script-setting-upload { .script-setting-upload {
.custom-real-upload { .custom-real-upload {
......
src/pages/createLive/index.vue
...@@ -95,7 +95,7 @@ const confirmVisible = ref(false); ...@@ -95,7 +95,7 @@ const confirmVisible = ref(false);
const publicTool = ref<HTMLElement>(); const publicTool = ref<HTMLElement>();
const toolHeight = ref(0); const toolHeight = ref(0);
const currentSetp = ref(1); const currentSetp = ref(2);
// 通知子组件初始化 // 通知子组件初始化
const initNum = ref(1); const initNum = ref(1);
...@@ -110,7 +110,7 @@ const getLoadStatus = (value: number) => { ...@@ -110,7 +110,7 @@ const getLoadStatus = (value: number) => {
if (route.query.type === 'edit' || route.query.type === 'edit_drafts') { if (route.query.type === 'edit' || route.query.type === 'edit_drafts') {
return true; return true;
} else { } else {
if (value == 1) { if (value == currentSetp.value) {
return true; return true;
} else { } else {
return false; return false;
...@@ -478,9 +478,11 @@ onBeforeUnmount(() => { ...@@ -478,9 +478,11 @@ onBeforeUnmount(() => {
.steps-item { .steps-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1 1 auto;
overflow-y: auto;
} }
.public-tool { .public-tool {
flex: 0 0 auto;
padding: 20px; padding: 20px;
text-align: right; text-align: right;
.tool-button { .tool-button {
......
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