feat: 编辑页和投放页交互优化 (#9)

2023-11-24 19:23:29 +08:00 · 2023-11-24 19:23:29 +08:00 · 630fe0541c
commit 630fe0541c
parent 14c768fdc6
20 changed files with 83 additions and 59 deletions
--- a/server/src/apps/surveyManage/template/surveyTemplate/survey/normal.json
+++ b/server/src/apps/surveyManage/template/surveyTemplate/survey/normal.json
@ -131,10 +131,6 @@
      "msg_9004": "提交失败！"
    }
  },
-  "bottomConf": {
-    "logoImage": "",
-    "logoImageWidth": "33%"
-  },
  "baseConf": {
    "begTime": "2018-05-22 17:17:48",
    "endTime": "2028-05-22 17:17:48",
--- a/server/src/apps/surveyManage/template/surveyTemplate/survey/nps.json
+++ b/server/src/apps/surveyManage/template/surveyTemplate/survey/nps.json
@ -17,10 +17,6 @@
    "skinColor": "#4a4c5b",
    "inputBgColor": "#ffffff"
  },
-  "bottomConf": {
-    "logoImage": "",
-    "logoImageWidth": "40%"
-  },
  "bannerConf": {
    "titleConfig": {
      "mainTitle": "<h3 style=\"text-align: center\">满意度调研</h3> <p>&nbsp;</p> <p>为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，<span style=\"color: rgb(204, 0, 0)\">期待您的参与</span></p>",
--- a/server/src/apps/surveyManage/template/surveyTemplate/survey/register.json
+++ b/server/src/apps/surveyManage/template/surveyTemplate/survey/register.json
@ -163,10 +163,6 @@
    },
    "link": ""
  },
-  "bottomConf": {
-    "logoImage": "",
-    "logoImageWidth": "33%"
-  },
  "baseConf": {
    "begTime": "2018-05-22 17:17:48",
    "endTime": "2028-05-22 17:17:48",
--- a/server/src/apps/surveyManage/template/surveyTemplate/survey/vote.json
+++ b/server/src/apps/surveyManage/template/surveyTemplate/survey/vote.json
@ -150,10 +150,6 @@
      "msg_9004": "提交失败！"
    }
  },
-  "bottomConf": {
-    "logoImage": "",
-    "logoImageWidth": "33%"
-  },
  "baseConf": {
    "begTime": "2018-05-25 10:22:23",
    "endTime": "2028-05-25 10:22:23",
--- a/server/src/apps/surveyManage/template/surveyTemplate/templateBase.json
+++ b/server/src/apps/surveyManage/template/surveyTemplate/templateBase.json
@ -25,8 +25,8 @@
      }
    },
    "bottomConf": {
-      "logoImage": "",
-      "logoImageWidth": "28%"
+      "logoImage": "https://img-hxy021.didistatic.com/static/starimg/img/4XcFlkzll41700742941814.png",
+      "logoImageWidth": "60%"
    },
    "baseConf": {
      "begTime": "2018-05-30 10:38:31",
--- a/server/src/apps/ui/public/commom.css
+++ b/server/src/apps/ui/public/commom.css
@ -0,0 +1,12 @@
+#main{
+    width: 100wh;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.title{
+    font-size: 20px;
+    color: #4A4C5B;
+}
--- a/server/src/apps/ui/public/management.html
+++ b/server/src/apps/ui/public/management.html
@ -5,8 +5,12 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问卷管理端</title>
+    <link rel="stylesheet" href="./commom.css">
 </head>
 <body>
-    <h2 id="hello">问卷管理端</h2>
+    <div id="main">
+        <img src="./nodata.png" alt="">
+        <p class="title">暂无数据</p>
+    </div>
 </body>
 </html>
--- a/server/src/apps/ui/public/nodata.png
+++ b/server/src/apps/ui/public/nodata.png
--- a/server/src/apps/ui/public/render.html
+++ b/server/src/apps/ui/public/render.html
@ -5,8 +5,12 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问卷投放端</title>
+    <link rel="stylesheet" href="./commom.css">
 </head>
 <body>
-    <h2 id="hello">问卷投放端</h2>
+    <div id="main">
+        <img src="./nodata.png" alt="">
+        <p class="title">暂无数据</p>
+    </div>
 </body>
 </html>
--- a/web/public/imgs/nodata.png
+++ b/web/public/imgs/nodata.png
--- a/web/public/management.html
+++ b/web/public/management.html
@ -8,9 +8,6 @@
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
-    <noscript>
-      <strong><%= htmlWebpackPlugin.options.title %>页面不允许执行JavaScript，请修改设置</strong>
-    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
--- a/web/public/render.html
+++ b/web/public/render.html
@ -43,9 +43,6 @@
 </head>

 <body>
-  <noscript>
-    <strong> <%= htmlWebpackPlugin.options.title %>页面不允许执行JavaScript，请修改设置</strong>
-  </noscript>
  <div id="app"></div>
 </body>

--- a/web/src/management/config/setterConfig/bannerConfig.js
+++ b/web/src/management/config/setterConfig/bannerConfig.js
@ -22,7 +22,7 @@ export default [
      {
        label: '视频海报地址',
        type: 'Input',
-        key: 'bannerConfig.posterImg',
+        key: 'bannerConfig.postImg',
        direction: 'horizon',
      },
    ],
--- a/web/src/management/pages/edit/modules/questionModule/components/banner.vue
+++ b/web/src/management/pages/edit/modules/questionModule/components/banner.vue
@ -14,8 +14,8 @@
          :poster="bannerConf.bannerConfig.postImg"
          preload="auto"
          controls
+          :src="bannerConf.bannerConfig.videoLink" 
        >
-          <source :src="bannerConf.bannerConfig.videoLink" type="video/mp4" />
        </video>
      </div>
    </div>
--- a/web/src/management/pages/edit/modules/questionModule/components/logo.vue
+++ b/web/src/management/pages/edit/modules/questionModule/components/logo.vue
@ -1,14 +1,16 @@
 <template>
-  <div class="question-logo" @click="onSelect">
-    <img
-      v-if="logoImg !== ''"
-      :style="{ width: bottomConf.logoImageWidth }"
-      class="bottom-logo"
-      :src="logoImg"
-    />
-    <div class="logo-placeholder-wrapper" v-else>
-      <div class="logo-placeholder">LOGO</div>
-      <div class="no-logo-tip">若不配置logo，该图片将不会在问卷中展示</div>
+  <div class="container">
+    <div class="question-logo" @click="onSelect">
+      <img
+        v-if="logoImg !== ''"
+        :style="{ width: bottomConf.logoImageWidth  }"
+        class="bottom-logo"
+        :src="logoImg"
+      />
+      <div class="logo-placeholder-wrapper" v-else>
+        <div class="logo-placeholder">LOGO</div>
+        <div class="no-logo-tip">若不配置logo，该图片将不会在问卷中展示</div>
+      </div>
    </div>
  </div>
 </template>
@ -36,11 +38,16 @@ export default {
 };
 </script>
 <style lang="scss" rel="stylesheet/scss" scoped>
+.container{
+  display: flex;
+  justify-content: center;
+}
 .question-logo {
-  position: relative;
+  max-width: 300px;
  text-align: center;
  padding: 0 0 0.6rem;
  margin-top: -0.2rem;
+  cursor: pointer;
 }

 .logo-placeholder-wrapper {
--- a/web/src/management/pages/edit/modules/questionModule/components/questionWrapper.vue
+++ b/web/src/management/pages/edit/modules/questionModule/components/questionWrapper.vue
@ -93,7 +93,7 @@ export default defineComponent({
    };
    const onDelete = async () => {
      try {
-        await proxy.$confirm('确定删除题目吗?', '提示', {
+        await proxy.$confirm('本次操作会影响数据统计查看，是否确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
--- a/web/src/materials/setters/widgets/InputPercent.vue
+++ b/web/src/materials/setters/widgets/InputPercent.vue
@ -30,9 +30,6 @@ export default {
      immediate: true,
      handler(newVal) {
        let val = parseFloat(newVal);
-        if (isNaN(val)) {
-          val = 50;
-        }
        if (val === this.value) {
          return;
        }
--- a/web/src/render/components/header.vue
+++ b/web/src/render/components/header.vue
@ -27,7 +27,7 @@
        </video>
        <div
          class="video-modal"
-          :style="`background-image:url(${bannerConf.bannerConfig.posterImg})`"
+          :style="`background-image:url(${bannerConf.bannerConfig.postImg})`"
        ></div>
        <div class="iconfont icon-kaishi play-icon" @click="play()"></div>
      </div>
@ -72,6 +72,12 @@ export default {
      }
      window.open(formatLink(jumpLink));
    },
+    play() {
+      const video = document.getElementById("video");
+      document.querySelector('.play-icon').style.display = 'none';
+      document.querySelector(".video-modal").style.display = 'none';
+      video.play();
+  },
  },
 };
 </script>
--- a/web/src/render/components/logo.vue
+++ b/web/src/render/components/logo.vue
@ -1,10 +1,12 @@
 <template>
+  <div class="container">
  <div v-if="logoImage" class="logo-wrapper">
    <img
      :style="{ width: !isMobile ? '20%' : logoImageWidth || '20%' }"
      :src="logoImage"
    />
  </div>
+  </div> 
 </template>
 <script>
 export default {
@ -23,8 +25,12 @@ export default {
 };
 </script>
 <style lang="scss" rel="stylesheet/scss" scoped>
+.container{
+  display: flex;
+  justify-content: center;
+}
 .logo-wrapper {
-  position: relative;
+  max-width: 300px;
  text-align: center;
  font-size: 0;
  padding: 0.1rem 0 0.5rem;
--- a/web/src/render/pages/emptyPage.vue
+++ b/web/src/render/pages/emptyPage.vue
@ -1,7 +1,9 @@
 <template>
-  <div class="not-found">
-    <h1>404</h1>
-    <p>问卷找不到啦～</p>
+  <div class="container">
+    <img src="/imgs/nodata.png" alt="" class="ui-404"> 
+    <div class="ui-title">     
+      <div class="ui-maintitle">问卷找不到啦~</div>     
+    </div>
  </div>
 </template>

@ -12,21 +14,29 @@ export default {
 </script>

 <style scoped>
-.not-found {
+.container {
  text-align: center;
  margin-top: 20vh;
  font-family: 'Arial', sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
 }
-
-h1 {
-  font-size: 5rem;
-  color: #ff5722;
-  margin: 0;
+.ui-404{
+  width: 75%;
+  max-width: 300px;
+  margin: .4rem auto 0;
+  display: block;
 }
-
-p {
-  font-size: 1.5rem;
-  color: #555;
-  margin: 10px 0;
+.ui-title {
+    margin-top: .3rem;
+    text-align: center;
+    font-size: .5rem;
+}
+.ui-title .ui-subtitle {
+    padding-top: 10px;
+    font-size: 12px;
+    color: #909090;
 }
 </style>