修复互动内容的bug

7ec3301a · haojie · cb4f9a87 · 7ec3301a · 7ec3301a · 7ec3301a
Commit 7ec3301a authored Jul 29, 2023 by haojie
13 changed files
--- a/src/components/upload/index.tsx
+++ b/src/components/upload/index.tsx
@@ -96,8 +96,10 @@ export default defineComponent({
        }
        if (props.accept) {
          let fileName = file.name.split('.')[1];
-          if (props.accept.indexOf(fileName) == -1) {
+          fileName = fileName.toLowerCase();
-            show_message(`本次上传仅支持${props.accept}格式`);
+          let proAccept = props.accept.toLowerCase();
+          if (proAccept.indexOf(fileName) == -1) {
+            show_message(`本次上传仅支持${proAccept}格式`);
            return false;
          }
        }

--- a/src/constants/token.ts
+++ b/src/constants/token.ts
@@ -53,13 +53,13 @@ export const getRoutes = () => {
        path: routerConfig.createLive.path,
        name: routerConfig.createLive.name,
        component: () => import('@/pages/createLive/index.vue'),
-        meta: { title: 'snowhome', liveName: true },
+        meta: { title: 'snowhome', liveName: true, keepAlive: true },
      },
      {
        path: routerConfig.createInteract.path,
        name: routerConfig.createInteract.name,
        component: () => import('@/pages/createInteract/index.vue'),
-        meta: { title: 'snowhome' },
+        meta: { title: 'snowhome', keepAlive: true },
      },
      {
        path: routerConfig.startLive.path,
@@ -77,13 +77,13 @@ export const getRoutes = () => {
        path: routerConfig.ImageCustomization.path,
        name: routerConfig.ImageCustomization.name,
        component: () => import('@/pages/ImageCustomization/index.vue'),
-        meta: { title: 'snowhome' },
+        meta: { title: 'snowhome', keepAlive: true },
      },
      {
        path: routerConfig.VocalCustomization.path,
        name: routerConfig.VocalCustomization.name,
        component: () => import('@/pages/VocalCustomization/index.vue'),
-        meta: { title: 'snowhome' },
+        meta: { title: 'snowhome', keepAlive: true },
      },
    ];
  }

--- a/src/layouts/components/Content.vue
+++ b/src/layouts/components/Content.vue
 <template>
+  <!-- <router-view v-slot="{ Component }">
+    <keep-alive>
+      <transition name="fade" mode="out-in">
+        <component :is="Component" v-if="route.meta.keepAlive" />
+      </transition>
+    </keep-alive>
+  </router-view> -->
  <router-view v-slot="{ Component }">
-    <transition name="fade" mode="out-in">
+    <keep-alive>
-      <component :is="Component" />
+      <component :is="Component" :key="getKey()" v-if="route.meta.keepAlive" />
-    </transition>
+    </keep-alive>
+    <component :is="Component" :key="getKey()" v-if="!route.meta.keepAlive" />
  </router-view>
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useRoute } from 'vue-router';
+const route = useRoute();
+const getKey = () => {
+  return route.fullPath;
+};
+</script>
 <style lang="less">
 @import '@/style/variables';

--- a/src/pages/createInteract/components/AddInteractDialog.vue
+++ b/src/pages/createInteract/components/AddInteractDialog.vue
@@ -310,12 +310,14 @@ const onCreate = async (params: any, status: any) => {
 // 修改
 const onEdit = async (params) => {
  // 通知父组件修改
+  loading.value = true;
  let result = await props.editRow(params, props.info.id);
  if (result) {
    // 更新表格
    emit('updateTable');
    emit('update:visible', false);
  }
+  loading.value = false;
 };
 watch(
@@ -332,6 +334,7 @@ watch(
  () => props.info,
  (v) => {
    if (v) {
+      console.log(v);
      if (Object.keys(v).length) {
        questionValue.value = v.problem;
        switchStatus.value = v.status == 1 ? true : false;
@@ -347,6 +350,16 @@ watch(
          textTonesValue.value = v.tone_id;
          soundColorValue.value = v.phonetic_timbres_id;
          textValue.value = v.reply_content;
+          // 选中后的音调信息
+          let tonesObj = lists.tones.find((item: any) => item.id == v.tone_id);
+          if (tonesObj) {
+            textTonesInfo.value = tonesObj;
+          }
+          // 选中后的音色信息
+          let soundColorObj = lists.soundColor.find((item: any) => item.id == v.phonetic_timbres_id);
+          if (soundColorObj) {
+            soundColorInfo.value = soundColorObj;
+          }
        }
      } else {
        //

--- a/src/pages/createInteract/components/AddInteractLib.vue
+++ b/src/pages/createInteract/components/AddInteractLib.vue
+<template>
+  <Dialog v-model="visible" @confirm="confirm">
+    <template #body>
+      <div class="custom-add-interact-lib-dialog-body">
+        <span class="input-label">请输入互动库标题：</span>
+        <CustomInput v-model="inputValue" align="left"></CustomInput>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import Dialog from '@/components/Dialog.vue';
+import CustomInput from '@/components/input/index.vue';
+import { show_message } from '@/utils/tool';
+import { ref, watch } from 'vue';
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+  }>(),
+  {},
+);
+const emit = defineEmits(['update:modelValue', 'submitTitle']);
+const visible = ref(props.modelValue);
+const inputValue = ref('');
+const confirm = () => {
+  if (!inputValue.value) {
+    show_message('标题必填');
+    return;
+  }
+  // 提交标题和清空
+  emit('submitTitle', inputValue.value);
+  inputValue.value = '';
+  emit('update:modelValue', false);
+};
+watch(
+  () => props.modelValue,
+  (v) => {
+    visible.value = v;
+  },
+);
+watch(
+  () => visible.value,
+  (v) => {
+    emit('update:modelValue', v);
+  },
+);
+</script>
+<style lang="less">
+.custom-add-interact-lib-dialog-body {
+  margin: 30px 0;
+  display: flex;
+  align-items: center;
+  .input-label {
+    color: white;
+  }
+}
+</style>
--- a/src/pages/createInteract/components/InteractTable.vue
+++ b/src/pages/createInteract/components/InteractTable.vue
@@ -100,7 +100,7 @@ const editRow = async (params: any, id: any) => {
 };
 const rowChange = (row: any) => {
-  tableList.row = row;
+  tableList.row = JSON.parse(JSON.stringify(row));
  dialogType.value = 'edit';
  dialogVisible.value = true;
 };

--- a/src/pages/createInteract/index.vue
+++ b/src/pages/createInteract/index.vue
@@ -80,6 +80,7 @@
      </div>
    </div>
    <ConfirmDialog v-model="confirmDialog" title="确定删除吗?" @confirm="onConfirm"></ConfirmDialog>
+    <AddInteractLib v-model="createLibVisible" @submitTitle="submitTitle"></AddInteractLib>
  </div>
 </template>
@@ -101,6 +102,7 @@ import { getLiveInteraction } from '@/service/Common';
 import { createInteraction, editGroupsInteractionName, deleteGroupsInteraction } from '@/utils/api/userApi';
 import { useStore } from 'vuex';
 import routerConfig from '@/router/tool';
+import AddInteractLib from './components/AddInteractLib.vue';
 const store = useStore();
@@ -114,6 +116,8 @@ const currentGroup = ref('');
 // 确认弹窗
 const confirmDialog = ref(false);
+// 创建互动库弹窗
+const createLibVisible = ref(false);
 // 本次item的参数
 const confirmParams = ref({});
@@ -180,16 +184,13 @@ const inputBlur = async (value: string, id: number) => {
 };
 //  新增互动
 const addInteract = () => {
-  interactList.list.push({
+  // 打开弹窗
-    name: '',
+  createLibVisible.value = true;
-    c_name: '',
+};
-    c_status: false,
-    number: 0,
+// 提交创建互动库
-    popup: false,
+const submitTitle = (title: string) => {
-    edit: true,
+  confirm(title);
-    blurNum: 1,
-    loading: false,
-  });
 };
 // 删除互动
@@ -225,30 +226,30 @@ const onConfirm = async () => {
  }
 };
-const confirm = async (item: any) => {
+const confirm = async (title: string) => {
-  if (!item.c_name) {
+  if (!title) {
    show_message('请输入标题');
    return;
  }
  // 提交创建
  try {
-    item.loading = true;
+    loading.value = true;
    let res: any = await createInteraction({
-      name: item.c_name,
+      name: title,
    });
    if (res.code == 0) {
      // 提交成功后修改状态
-      item.c_status = true;
-      item.loading = false;
-      item.name = item.c_name;
-      item.id = res.data.id;
      show_message('创建成功', 'success');
+      // 获取列表
+      getInteractList();
    } else {
      deleteInteract();
    }
+    loading.value = false;
  } catch (e) {
    console.log(e);
    deleteInteract();
+    loading.value = false;
  }
 };

--- a/src/pages/createLive/components/ChoseDigitalPerson.vue
+++ b/src/pages/createLive/components/ChoseDigitalPerson.vue
@@ -43,6 +43,7 @@ const [commitInfo] = useLiveInfoSubmit();
 const props = withDefaults(
  defineProps<{
    toolHeight: number;
+    initNum: number;
  }>(),
  {},
 );
@@ -107,6 +108,14 @@ watch(
  },
 );
+watch(
+  () => props.initNum,
+  (v) => {
+    // init
+    currentCard.value = '';
+  },
+);
 const onSelectChange = (value: string) => {
  commitInfo({
    [createLiveKeys.id_type]: value,

--- a/src/pages/createLive/components/interact.vue
+++ b/src/pages/createLive/components/interact.vue
@@ -39,6 +39,12 @@ import { useLiveInfoSubmit } from '@/hooks/useStoreCommit';
 import routerConfig from '@/router/tool';
 import { getLiveInteraction } from '@/service/Common';
 import { useRoute, useRouter } from 'vue-router';
+const props = withDefaults(
+  defineProps<{
+    initNum: number;
+  }>(),
+  {},
+);
 const [commitInfo] = useLiveInfoSubmit();
 const store = useStore();
 const router = useRouter();
@@ -82,6 +88,14 @@ watch(
  },
 );
+watch(
+  () => props.initNum,
+  (v) => {
+    currentComment.value = '';
+    interactiveLibrary.value = [];
+  },
+);
 const onCommentChange = (value: string) => {
  // 提交
  commitInfo({

--- a/src/pages/createLive/components/scripts.vue
+++ b/src/pages/createLive/components/scripts.vue
@@ -108,6 +108,12 @@ import { getUploadConfig, getTonesList } from '@/service/Common';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 const [commitInfo] = useLiveInfoSubmit();
+const props = withDefaults(
+  defineProps<{
+    initNum: number;
+  }>(),
+  {},
+);
 const imgs = {
  success: new URL('../../../assets/svg/upload/success1.svg', import.meta.url).href,
@@ -225,6 +231,22 @@ watch(
  },
 );
+watch(
+  () => props.initNum,
+  (v) => {
+    tonesValue.value = '';
+    tonesInfo.value = {};
+    soundColorValue.value = '';
+    soundColorInfo.value = {};
+    disabled.value = true;
+    mp3Url.value = '';
+    phoneticsValue.value = '';
+    phoneticsInfo.value = {};
+    textareaValue.value = '';
+    currentOption.value = scriptTypeText;
+  },
+);
 const openSoundColor = () => {
  if (tonesValue.value) {
    // 允许打开
@@ -250,13 +272,29 @@ const tonesItemChange = (item: any) => {
 };
 // 文本 音色提交
-const soundColorItemChange = (item: any) => {
+const soundColorItemChange = (item: any = false) => {
-  soundColorInfo.value = item;
+  if (item) {
-  commitInfo({
+    soundColorInfo.value = item;
-    [createLiveKeys.textSoundColor]: item.id,
+    commitInfo({
-  });
+      [createLiveKeys.textSoundColor]: item.id,
+    });
+  } else {
+    soundColorInfo.value = {};
+    commitInfo({
+      [createLiveKeys.textSoundColor]: '',
+    });
+  }
 };
+watch(
+  () => soundColorValue.value,
+  (v) => {
+    if (!v) {
+      soundColorItemChange();
+    }
+  },
+);
 // 音频 音色提交
 const phoneticsItemChange = (item: any) => {
  phoneticsInfo.value = item;

--- a/src/pages/createLive/index.vue
+++ b/src/pages/createLive/index.vue
@@ -7,17 +7,17 @@
      <div class="setps-body">
        <template v-if="setpsList[0].load">
          <div class="steps-item" v-show="currentSetp == '1'">
-            <ChoseDigitalPerson :toolHeight="toolHeight"></ChoseDigitalPerson>
+            <ChoseDigitalPerson :toolHeight="toolHeight" :initNum="initNum"></ChoseDigitalPerson>
          </div>
        </template>
        <template v-if="setpsList[1].load">
          <div class="steps-item" v-show="currentSetp == '2'">
-            <ScriptVue></ScriptVue>
+            <ScriptVue :initNum="initNum"></ScriptVue>
          </div>
        </template>
        <template v-if="setpsList[2].load">
          <div class="steps-item" v-show="currentSetp == '3'">
-            <InteractVue></InteractVue>
+            <InteractVue :initNum="initNum"></InteractVue>
          </div>
        </template>
        <div class="public-tool" ref="publicTool">
@@ -97,6 +97,9 @@ const toolHeight = ref(0);
 const currentSetp = ref(1);
+// 通知子组件初始化
+const initNum = ref(1);
 const videoPlay = ref<HTMLVideoElement>();
 const videoCanplay = () => {
@@ -392,14 +395,20 @@ const confirm = async () => {
    let res: any = await createLiveTask(filterFiled());
    if (res.code == 0) {
      show_message('创建成功', 'success');
+      // 回首页
+      backHome();
      // 清空name
      store.commit('live/setName', '');
      // 清空edit
      store.commit('live/clearEditLive');
      // 清空createLive
      store.commit('live/clearCreateLive');
-      // 回首页
+      store.commit('live/initLiveInfo');
-      backHome();
+      // 清空信息
+      // 通知三个模块清空自己的内容
+      initNum.value += 1;
+      // 回到模块1
+      currentSetp.value = 1;
    }
    loading.value = false;
  } catch (e) {

--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -104,16 +104,19 @@ const toolList = [
    label: '形象定制',
    icon: imgs.profile,
    path: routerConfig.ImageCustomization.path,
+    name: routerConfig.ImageCustomization.name,
  },
  {
    label: '音色定制',
    icon: imgs.speaking,
    path: routerConfig.VocalCustomization.path,
+    name: routerConfig.VocalCustomization.name,
  },
  {
    label: '互动回答',
    icon: imgs.interaction,
    path: routerConfig.createInteract.path,
+    name: routerConfig.createInteract.name,
  },
 ];
@@ -126,6 +129,7 @@ const openPage = (item: any) => {
  if (item.path) {
    router.push({
      path: item.path,
+      name: item.name,
    });
  }
 };

--- a/src/store/modules/live.ts
+++ b/src/store/modules/live.ts
@@ -33,6 +33,20 @@ const mutations = {
      state.createLive[item] = info[item];
    });
  },
+  initLiveInfo(state: StateType) {
+    state.createLive = {
+      [createLiveKeys.id]: '',
+      [createLiveKeys.id_type]: '',
+      [createLiveKeys.scriptType]: '',
+      [createLiveKeys.textTones]: '',
+      [createLiveKeys.textSoundColor]: '',
+      [createLiveKeys.textScriptValue]: '',
+      [createLiveKeys.phoneticsSoundColor]: '',
+      [createLiveKeys.phoneticsFile]: '',
+      [createLiveKeys.commentMethod]: '',
+      [createLiveKeys.interactiveLibrary]: [],
+    };
+  },
  // 清空创建直播时的参数
  clearCreateLive(state: StateType) {
    Object.keys(state.createLive).forEach((key: any) => {