feat: c端路由改造 (#296)

didi · Jun 14, 2024 · 2e1af4a · 2e1af4a
1 parent e0537ab
commit 2e1af4a
Show file tree

Hide file tree

Showing 11 changed files with 295 additions and 279 deletions.
diff --git a/web/src/management/pages/edit/modules/logicModule/components/ConditionView.vue b/web/src/management/pages/edit/modules/logicModule/components/ConditionView.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-      class="condition-wrapper"
-      :class="{ 'is-last': isLastCondition }"
-      :data-content-before="!isLastCondition ? '且' : ''"
+    class="condition-wrapper"
+    :class="{ 'is-last': isLastCondition }"
+    :data-content-before="!isLastCondition ? '且' : ''"
   >
     <span class="desc">如果</span>
     <el-form-item
@@ -15,16 +15,9 @@
         placeholder="请选择题目"
         @change="(val: any) => handleChange(conditionNode, 'field', val)"
       >
-        <el-option
-            v-for="{ label, value } in fieldList"
-            :key="value"
-            :label="label"
-            :value="value"
-        >
+        <el-option v-for="{ label, value } in fieldList" :key="value" :label="label" :value="value">
         </el-option>
-        <template #empty>
-          无数据
-        </template>
+        <template #empty> 无数据 </template>
       </el-select>
     </el-form-item>
     <span class="desc">选择了</span>
@@ -45,9 +38,7 @@
           :label="label"
           :value="value"
         ></el-option>
-        <template #empty>
-          无数据
-        </template>
+        <template #empty> 无数据 </template>
       </el-select>
     </el-form-item>
     <span class="desc">中的任一选项 </span>

diff --git a/web/src/management/pages/edit/modules/logicModule/components/RuleNodeView.vue b/web/src/management/pages/edit/modules/logicModule/components/RuleNodeView.vue
@@ -36,9 +36,7 @@
                 :value="value"
               >
               </el-option>
-              <template #empty>
-                无数据
-              </template>
+              <template #empty> 无数据 </template>
             </el-select>
           </el-form-item>
         </div>

diff --git a/web/src/render/App.vue b/web/src/render/App.vue
@@ -1,49 +1,15 @@
 <template>
   <div id="app">
-    <Component
-      v-if="store.state.router"
-      :is="
-        components[
-          upperFirst(store.state.router) as 'IndexPage' | 'EmptyPage' | 'ErrorPage' | 'SuccessPage'
-        ]
-      "
-    >
-    </Component>
-    <LogoIcon
-      v-if="!['successPage', 'indexPage'].includes(store.state.router)"
-      :logo-conf="logoConf"
-      :readonly="true"
-    />
+    <router-view></router-view>
   </div>
 </template>
 <script setup lang="ts">
-import { computed, watch, onMounted } from 'vue'
+import { computed, watch } from 'vue'
 import { useStore } from 'vuex'
-
-import { getPublishedSurveyInfo, getPreviewSchema } from './api/survey'
-import useCommandComponent from './hooks/useCommandComponent'
-
-import EmptyPage from './pages/EmptyPage.vue'
-import IndexPage from './pages/IndexPage.vue'
-import ErrorPage from './pages/ErrorPage.vue'
-import SuccessPage from './pages/SuccessPage.vue'
-import AlertDialog from './components/AlertDialog.vue'
-// @ts-ignore
-import communalLoader from '@materials/communals/communalLoader.js'
-import { get as _get, upperFirst } from 'lodash-es'
-import { initRuleEngine } from '@/render/hooks/useRuleEngine.js'
-
-const LogoIcon = communalLoader.loadComponent('LogoIcon')
+import { get as _get } from 'lodash-es'
 
 const store = useStore()
-const logoConf = computed(() => store.state?.bottomConf || {})
 const skinConf = computed(() => _get(store, 'state.skinConf', {}))
-const components = {
-  EmptyPage,
-  IndexPage,
-  ErrorPage,
-  SuccessPage
-}
 
 const updateSkinConfig = (value: any) => {
   const root = document.documentElement
@@ -65,66 +31,9 @@ const updateSkinConfig = (value: any) => {
   }
 }
 
-const loadData = (res: any, surveyPath: string) => {
-  if (res.code === 200) {
-    const data = res.data
-    const {
-      bannerConf,
-      baseConf,
-      bottomConf,
-      dataConf,
-      skinConf,
-      submitConf,
-      logicConf
-    } = data.code
-    const questionData = {
-      bannerConf,
-      baseConf,
-      bottomConf,
-      dataConf,
-      skinConf,
-      submitConf
-    }
-
-    document.title = data.title
-
-    updateSkinConfig(skinConf)
-
-    store.commit('setSurveyPath', surveyPath)
-    store.dispatch('init', questionData)
-    initRuleEngine(logicConf?.showLogicConf)
-  } else {
-    throw new Error(res.errmsg)
-  }
-}
-
 watch(skinConf, (value) => {
   updateSkinConfig(value)
 })
-
-onMounted(async () => {
-  const surveyPath = location.pathname.split('/').pop()
-
-  if (!surveyPath) {
-    store.commit('setRouter', 'EmptyPage')
-    return
-  }
-
-  const alert = useCommandComponent(AlertDialog)
-  try {
-    if (surveyPath.length > 8) {
-      const res: any = await getPreviewSchema({ surveyPath })
-      loadData(res, surveyPath)
-    } else {
-      const res: any = await getPublishedSurveyInfo({ surveyPath })
-      loadData(res, surveyPath)
-      store.dispatch('getEncryptInfo')
-    }
-  } catch (error: any) {
-    console.log(error)
-    alert({ title: error.message || '获取问卷失败' })
-  }
-})
 </script>
 <style lang="scss">
 @import url('./styles/icon.scss');

diff --git a/web/src/render/main.js b/web/src/render/main.js
@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import EventBus from './utils/eventbus'
-
+import router from './router'
 import store from './store'
 
 const app = createApp(App)
@@ -10,7 +10,7 @@ const $bus = new EventBus()
 app.provide('$bus', $bus)
 // 挂载到this上
 app.config.globalProperties.$bus = $bus
-
+app.use(router)
 app.use(store)
 
 app.mount('#app')
diff --git a/web/src/render/pages/ErrorPage.vue b/web/src/render/pages/ErrorPage.vue
@@ -1,16 +1,21 @@
 <template>
   <div class="result-page-wrap">
     <div class="result-page">
-      <div class="error-wrapper">
-        <img class="error-img" :src="errorImageUrl" />
-        <div class="bottom-word" v-html="errorMsg"></div>
+      <div class="page-content">
+        <img class="img" :src="errorImageUrl" />
+        <div class="msg" v-html="errorMsg"></div>
       </div>
+      <LogoIcon :logo-conf="logoConf" :readonly="true" />
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useStore } from 'vuex'
+// @ts-ignore
+import communalLoader from '@materials/communals/communalLoader.js'
+
+const LogoIcon = communalLoader.loadComponent('LogoIcon')
 
 const store = useStore()
 
@@ -24,7 +29,8 @@ const errorImageUrl = computed(() => {
   return imageMap[errorType as 'overTime'] || imageMap.default
 })
 
-const errorMsg = computed(() => store.state?.errorInfo?.errorMsg)
+const errorMsg = computed(() => store.state?.errorInfo?.errorMsg || '提交失败')
+const logoConf = computed(() => store.state?.bottomConf || {})
 </script>
 <style lang="scss" scoped>
 .result-page-wrap {
@@ -42,25 +48,27 @@ const errorMsg = computed(() => store.state?.errorInfo?.errorMsg)
     height: 100%;
   }
 }
-.error-wrapper {
-  text-align: center;
-  font-size: 14px;
+.page-content {
+  position: relative;
+  max-width: 920px;
+  margin: 0 auto;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  padding-top: 2rem;
   flex: 1;
 
-  p {
-    text-align: center;
-  }
-
-  .error-img {
-    margin-top: 2rem;
-    margin-bottom: 30px;
+  .img {
     width: 2rem;
-    height: auto;
   }
 
-  .bottom-word {
-    color: #999;
-    margin-top: 10px;
+  .msg {
+    font-size: 0.32rem;
+    color: #4a4c5b;
+    letter-spacing: 0;
+    text-align: center;
+    font-weight: 500;
+    margin-top: 0.15rem;
   }
 }
 </style>