feat: 新增组件

- 新增投放和新建问卷组件
- 首页修正模板显示异常问题
- 代码自动格式化

src/views/Design/components/ActionCompoents/QuestionAction.vue

@@ -162,8 +162,8 @@ const getSkipTypeText = (skipType) => {
   const ls = [];
   logics.map((item) => {
     if (
-      item.skip_type === skipType &&
-      item.question_index === activeQuestion.value.question_index
+      item.skip_type === skipType
+      && item.question_index === activeQuestion.value.question_index
     ) {
       ls.push(item);
     }

src/views/Design/components/Questions/paging/Paging.vue

@@ -11,8 +11,7 @@
           class="iconfont active-icon"
           :style="{ marginRight: isLastPage ? '0' : '16px' }"
           @click="activePage"
-          >&#xe86c;</i
-        >
+        >&#xe86c;</i>
         <template v-if="!isLastPage">
           <i class="iconfont moverQues" style="margin-right: 16px">&#xe71b;</i>
           <i class="iconfont" @click="deleteHandle">&#xe6c5;</i>

src/views/Home/Index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import Survey from './components/Suvrey/Index.vue';
+import Market from './components/Market/Index.vue';
 
 const func = [
   {
@@ -35,6 +36,8 @@ const func = [
     </div>
 
     <Survey />
+
+    <Market />
   </div>
 </template>
 

src/views/Market/Index.vue

@@ -3,9 +3,7 @@
     <div v-for="item in 10" :key="item" class="template">
       <img src="https://picsum.photos/131/128" width="110" height="100" alt="" />
       <span>报名/签到模板</span>
-      <span style="color: rgb(127, 127, 127)"
-        >报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span
-      >
+      <span style="color: rgb(127, 127, 127)">报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span>
     </div>
   </div>
 </template>

src/views/Survey/views/Create/Index.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="container">
+    <van-nav-bar title="标题" left-text="" left-arrow>
+      <template #right>
+        <van-icon name="search" size="18" />
+      </template>
+    </van-nav-bar>
+
+    <van-cell-group inset class="result-cell">
+      <div>
+        <div>请输入问卷标题</div>
+        <div>
+          为优化活动服务品质，烦请完成问卷，感谢配合！您的反馈至关重要！ (此
+          提示语为默认提示语，您可选择自行输入本问卷的提示语）
+        </div>
+
+        <button @click="show = true">添加题目</button>
+        <div class="ques">
+          <van-popup v-model:show="show" round position="bottom" :style="{ height: '50%' }">
+            <van-row class="ques_title">
+              <van-col :span="6">添加题目</van-col>
+              <van-col :span="6" :offset="12" @click="show = false"> <van-icon name="close" /></van-col>
+            </van-row>
+            <ul>
+              <li v-for="item in quesList" :key="item.type">
+                <div>
+                  <van-icon :name="item.icon" size="20" />
+                  <p>{{ item.name }}</p>
+                </div>
+              </li>
+            </ul>
+          </van-popup>
+        </div>
+      </div>
+    </van-cell-group>
+
+    <van-cell-group inset class="thanks-cell">
+      <div>您已完成本次调研，感谢您的参与！</div>
+    </van-cell-group>
+
+    <!-- 底部功能性按钮 -->
+    <div style="
+        position: fixed;
+        bottom: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-around;
+        width: 100%;
+        height: 50px;
+        background-color: white;
+      ">
+      <div>设置</div>
+      <div style="display: flex; flex-direction: row; justify-content: space-around; width: 60%">
+        <button size="small">预览</button>
+        <button size="small">保存</button>
+        <button size="small">投放</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const show = ref(false);
+
+const quesList = ref([
+  {
+    icon: 'location-o',
+    name: '单选题',
+    type: '1'
+  },
+  {
+    icon: 'like-o',
+    name: '多选题',
+    type: '2'
+  },
+  {
+    icon: 'star-o',
+    name: '填空题',
+    type: '3'
+  },
+  {
+    icon: 'phone-o',
+    name: '图形打分',
+    type: '4'
+  },
+  {
+    icon: 'cart-o',
+    name: '数值打分',
+    type: '5'
+  },
+  {
+    icon: 'comment-o',
+    name: '矩阵单选',
+    type: '6'
+  },
+  {
+    icon: 'bag-o',
+    name: '矩阵多选',
+    type: '7'
+  },
+  {
+    icon: 'gift-o',
+    name: '矩阵填空',
+    type: '8'
+  },
+  {
+    icon: 'bag-o',
+    name: '文件上传',
+    type: '9'
+  }
+]);
+
+const init = () => {
+  // event.detail 为当前输入的值
+  show.value = true;
+};
+
+// const handleInputIntro = (e: Event) => {
+//   // event.detail 为当前输入的值
+//   console.log(e);
+//   surveyIntro.value = e.target.value;
+// };
+
+defineExpose({ init });
+</script>
+
+<style scoped lang="scss">
+.container {
+  height: 100vh;
+  background-color: #f5f5f5;
+
+  button {
+    padding: 3px 20px;
+    border: none;
+    background-color: #f2f2f2;
+  }
+
+  * {
+    font-size: 12px;
+  }
+}
+
+.result-cell {
+  margin: 10px 5px;
+  padding: 5px;
+
+  &>div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+
+    &>button {
+      margin: 20px;
+      border-radius: 10px;
+      background-color: lightgreen;
+    }
+  }
+}
+
+.thanks-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 70px;
+  margin: 10px 5px;
+}
+
+.ques {
+  .ques_title {
+    margin: 20px 0 10px;
+    font-weight: bold;
+    font-size: 16px;
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 10px;
+
+    li {
+      width: 80px;
+      margin: 5px;
+      padding: 10px;
+      background-color: #f7fbf5;
+      font-weight: bold;
+      font-size: 14px;
+    }
+  }
+}
+</style>

src/views/Survey/views/Publish/Index.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="container">
+    <van-nav-bar title="问卷投放" left-text="" left-arrow>
+      <template #right>
+        <van-icon name="search" size="18" />
+      </template>
+    </van-nav-bar>
+
+    <van-cell-group inset style="margin-top: 20px;padding: 30px;">
+      <div>
+        <img width="100%"
+          src="https://files.axshare.com/gsc/DR6075/44/1a/03/441a03a8b1004755a7a392b311acf97f/images/%E6%8A%95%E6%94%BE/u14.jpg?pageId=2f9ba10c-92b8-4c9b-b40b-04e65a0b4333"
+          alt="" />
+      </div>
+      <div class="qrcode">
+        <img src="" alt="" width="100px" height="100px" />
+        <div>
+          <div>液态奶产品研究标准化问卷</div>
+          <div>扫码填写问卷</div>
+        </div>
+      </div>
+      <div>移动端仅做数据回收，问卷数据分析请前往PC端浏览</div>
+      <div class="operation">
+        <span v-for="item in 2" :key="item">
+          <img width="30px"
+            src="https://files.axshare.com/gsc/DR6075/44/1a/03/441a03a8b1004755a7a392b311acf97f/images/%E6%8A%95%E6%94%BE/u21.png?pageId=2f9ba10c-92b8-4c9b-b40b-04e65a0b4333" />
+
+
+          复制链接
+        </span>
+      </div>
+    </van-cell-group>
+    <!-- 底部功能性按钮 -->
+    <div style="
+        position: fixed;
+        bottom: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-around;
+        width: 100%;
+        height: 50px;
+        background-color: white;
+      ">
+      <van-button block>取消</van-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.container {
+  height: 100vh;
+  background-color: #f5f5f5;
+
+  * {
+    font-size: 10px;
+  }
+
+  button {
+    padding: 3px 20px;
+    border: none;
+    background-color: #f2f2f2;
+  }
+
+  * {
+    font-size: 12px;
+  }
+}
+
+.qrcode {
+  display: flex;
+}
+
+.operation {
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  margin-right: 20px;
+
+  span {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 10px
+  }
+}
+</style>