调查问卷

package.json

@@ -65,7 +65,7 @@
     "node-sass": "npm:dart-sass@^1.25.0",
     "postcss-comment": "^2.0.0",
     "sass-loader": "^7.1.0",
-    "uview-ui": "^2.0.3",
+    "uview-ui": "^1.8.4",
     "vue-template-compiler": "^2.6.11"
   },
   "browserslist": [

src/apps/AppAskForm/AppAskForm.vue

@@ -1,18 +1,16 @@
 <template>
   <div class="form">
-    <div class="form-content">
+    <component
-      <add-list ref="addList" v-if="currIndex === 1"></add-list>
+      :is="component"
-      <list ref="list" v-if="currIndex === 0"></list>
+      @change="onChange"
-    </div>
+      :params="params">
-    <ai-tabbar :active.sync="currIndex" :list="tabBar"/>
+    </component>
-    <div class="form-footer"></div>
   </div>
 </template>
 
 <script>
-import addList from './components/addList.vue'
+  import Tabbar from './components/Tabbar.vue'
-import list from './components/list.vue'
+  import AddForm from './components/AddForm.vue'
-import AiTabbar from '../../components/AiTabbar'
 
   export default {
     name: 'AppAskForm',
@@ -20,28 +18,14 @@ export default {
 
     data () {
       return {
-      currIndex: 0
+        component: 'Tabbar',
+        params: {}
       }
     },
 
     components: {
-    addList,
+      Tabbar,
-    AiTabbar,
+      AddForm
-    list
-  },
-
-  computed: {
-    tabBar () {
-      const link = icon => `${this.$cdn}askform/${icon}.png`
-      return [
-        {text: "表单列表", iconPath: "bdlb1", selectedIconPath: "bdlb2" },
-        {text: "新建项目", iconPath: "xjxm1", selectedIconPath: "xjxm2" }
-      ].map(e => ({
-        ...e,
-        iconPath: link(e.iconPath),
-        selectedIconPath: link(e.selectedIconPath)
-      }))
-    }
     },
 
     onLoad () {
@@ -54,6 +38,13 @@ export default {
       })
     },
 
+    methods: {
+      onChange (e) {
+        this.params = e.params
+        this.component = e.type
+      },
+    },
+
     onReachBottom() {
       if (this.currIndex === 0) {
         this.$refs.list.getList()
@@ -63,7 +54,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .form {
-    padding-bottom: 98px;
-  }
 </style>

src/apps/AppAskForm/components/AddForm.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="add-form" v-if="pageShow">
+    <div v-show="!isShowConfig">
       <div class="header-pic">
         <image v-if="form.headPicture" :src="form.headPicture" />
         <span @click="upload">更换图片</span>
@@ -8,7 +9,16 @@
         <h2>文本选项</h2>
         <div class="form-info__wrapper">
           <textarea class="title" placeholder="请输入标题 (必填）" :maxlength="30" :auto-height="true" v-model="form.title"></textarea>
-        <u-input class="content" :clearable="false" type="textarea" v-model="form.tableExplain" placeholder="请输入表单描述 (选填）" :height="80" :auto-height="true" :maxlength="255"></u-input>
+          <textarea
+            style="wdith: 100%"
+            class="content"
+            border="none"
+            :clearable="false"
+            type="textarea"
+            v-model="form.tableExplain"
+            placeholder="请输入表单描述 (选填）"
+            :maxlength="255">
+          </textarea>
         </div>
       </div>
       <draggable
@@ -34,20 +44,20 @@
           </div>
           <div class="components-item__filed">
             <template v-if="(item.type === 'radio')">
-            <u-radio-group v-model="item.value" wrap>
+              <radio-group v-model="item.value">
-              <u-radio disabled :name="field.label" v-for="(field, i) in item.options" :key="i">
+                <radio class="u-radio" disabled style="display: block;" v-for="(field, i) in item.options" :key="i">
                   <image :src="field.img[0].url" v-if="field.img.length"/>
                   <span>{{ field.label }}</span>
-              </u-radio>
+                </radio>
-            </u-radio-group>
+              </radio-group>
             </template>
             <template v-if="(item.type === 'checkbox')">
-            <u-checkbox-group v-model="item.value" wrap>
+              <checkbox-group v-model="item.value" wrap>
-              <u-checkbox  disabled :name="field.label" v-for="(field, i) in item.options" :key="i">
+                <checkbox class="u-checkbox" disabled :name="field.label" v-for="(field, i) in item.options" :key="i">
                   <image :src="field.img[0].url" v-if="field.img.length"/>
                   <span>{{ field.label }}</span>
-              </u-checkbox>
+                </checkbox>
-            </u-checkbox-group>
+              </checkbox-group>
             </template>
             <template v-if="(item.type === 'select')">
               <div class="components-item__select">
@@ -85,7 +95,7 @@
         </div>
         <div @click="onConfirm">立即发布</div>
       </div>
-    <u-popup v-model="isShow" :closeable="false" mode="bottom">
+      <u-popup :show="isShow" :closeable="false" mode="bottom" @close="isShow = false">
         <div class="add-popup">
           <div class="add-popup__title">
             <h2>添加问题</h2>
@@ -101,17 +111,27 @@
           </div>
         </div>
       </u-popup>
-    <AiBack></AiBack>
+      <AiBack custom @back="back"></AiBack>
+    </div>
+    <div class="detail" v-if="isShowConfig">
+      <component :is="component" @change="onChange" @back="isShowConfig = false" :id="id" :type="type" :formConfig="formConfig"></component>
+    </div>
   </div>
 </template>
 
 <script>
   import AiBack from "@/components/AiBack";
   import draggable from 'vuedraggable'
+  import FiledConfig from './FiledConfig'
+  import FormSetting from './FormSetting'
+
   export default {
+    props: ['params'],
+
     data () {
       return {
         pageShow: false,
+        isShowConfig: false,
         form: {
           tableExplain: '详细描述',
           title: '问卷调查',
@@ -138,28 +158,32 @@
         id: '',
         isQuote: false,
         touchStart: 0,
+        component: '',
         formConfig: {}
       }
     },
 
     components: {
       AiBack,
-      draggable
+      draggable,
+      FormSetting,
+      // FiledConfig
     },
 
-    onLoad (query) {
+    mounted () {
-      this.type = Number(query.type)
+      this.type = Number(this.params.type)
 
-      if (query.isQuote) {
+      if (this.params.isQuote) {
         this.isQuote = true
       }
 
-      if (query.id) {
+      if (this.params.id) {
-        this.id = query.id
+        this.id = this.params.id
-        this.getInfo(query.id)
+        this.getInfo(this.params.id)
       } else {
         this.pageShow = true
       }
+
       this.init()
 
       uni.$on('setting', res => {
@@ -181,11 +205,23 @@
 
     methods: {
       toSetting () {
-        uni.navigateTo({
+        // uni.navigateTo({
-          url: `/pages/askForm/formSetting?id=${this.id}&formConfig=${JSON.stringify(this.formConfig)}`
+        //   url: `/pages/askForm/formSetting?id=${this.id}&formConfig=${JSON.stringify(this.formConfig)}`
+        // })
+        this.component = 'FormSetting'
+        this.isShowConfig = true
+      },
+
+      back () {
+        this.$emit('change', {
+          type: 'Tabbar'
         })
       },
 
+      onChange (e) {
+
+      },
+
       removeComponent (index) {
         this.targetList.splice(index, 1)
       },
@@ -394,6 +430,15 @@
         border: 1px solid #EEEFF0;
         background: #fff;
 
+        .u-checkbox, .u-radio {
+          display: block;
+          image {
+            width: 100px;
+            height: 100px;
+            margin: 0 10px;
+          }
+        }
+
         ::v-deep .u-radio, ::v-deep .u-checkbox {
           position: relative;
           margin-bottom: 20px;
@@ -417,12 +462,6 @@
             span {
               line-height: 1.5;
             }
-
-            image {
-              width: 100px;
-              height: 100px;
-              margin: 0 10px;
-            }
           }
         }
         span {
@@ -657,16 +696,13 @@
         }
 
         .content {
+          width: 100%;
           padding: 30px 0!important;
-          font-size: 28px;
-
-          ::v-deep textarea {
           color: #333;
           font-size: 28px!important;
         }
       }
     }
-    }
 
     .header-pic {
       position: relative;

src/apps/AppAskForm/components/FormSetting.vue

@@ -9,8 +9,8 @@
         </div>
         <div class="setting-item__right">
           <u-radio-group v-model="periodValidityType" active-color="#1088F9">
-            <u-radio name="0">永久有效</u-radio>
+            <u-radio name="0" label="永久有效" style="padding-right: 20rpx;"></u-radio>
-            <u-radio name="1">自定义时间</u-radio>
+            <u-radio name="1" label="自定义时间"></u-radio>
           </u-radio-group>
           <u-icon name="arrow-right" color="#E1E2E3" />
         </div>
@@ -40,8 +40,8 @@
         </div>
         <div class="setting-item__right">
           <u-radio-group v-model="commitType" active-color="#1088F9">
-            <u-radio name="0">不限次数</u-radio>
+            <u-radio name="0" label="不限次数" style="padding-right: 20rpx;"></u-radio>
-            <u-radio name="1">限提交一次</u-radio>
+            <u-radio name="1" label="限提交一次"></u-radio>
           </u-radio-group>
         </div>
       </div>
@@ -51,7 +51,7 @@
           <image :src="`${$cdn}askform/bz.png`" @click="tips = '当客户点击或者发布表单时，发送表单的员工将会受到消息提醒' , isShowModal = true" />
         </div>
         <div class="setting-item__right">
-          <u-switch v-model="actionNotice" active-value="1" inactive-value="0" :size="40" active-color="#1088F9"></u-switch>
+          <u-switch v-model="actionNotice" active-value="1" :size="20" active-color="#1088F9"></u-switch>
         </div>
       </div>
       <div class="setting-item">
@@ -60,7 +60,7 @@
           <image :src="`${$cdn}askform/bz.png`" @click="tips = '当客户点击或者发布表单时，会将客户的打开行为记录在客户动态里' , isShowModal = true" />
         </div>
         <div class="setting-item__right">
-          <u-switch v-model="dynamicNotice" active-value="1" inactive-value="0" :size="40" active-color="#1088F9"></u-switch>
+          <u-switch v-model="dynamicNotice" active-value="1" :size="20" active-color="#1088F9"></u-switch>
         </div>
       </div>
     </div>
@@ -70,23 +70,25 @@
       </div>
       <div @click="confirm">{{ type === 'edit' ? '发布' : '确定' }}</div>
     </div>
-    <u-modal v-model="isShowModal" :content="tips"></u-modal>
+    <u-modal :show="isShowModal" :content="tips"></u-modal>
-    <u-picker mode="time" v-model="isShowTime" :show-time-tag="true" @confirm="onTimeChange" :params="params"></u-picker>
+    <u-datetime-picker
+      mode="datetime"
+      :value="periodValidityEndTime"
+      :show="isShowTime"
+      :show-time-tag="true"
+      @cancel="isShowTime = false"
+      @close="isShowTime = false"
+      @confirm="onTimeChange">
+    </u-datetime-picker>
   </div>
 </template>
 
 <script>
 export default {
+  props: ['id', 'formConfig', 'type'],
+
   data () {
     return {
-      params: {
-        year: true,
-        month: true,
-        day: true,
-        hour: true,
-        minute: true,
-        second: true
-      },
       tips: '',
       isShowModal: false,
       actionNotice: true,
@@ -95,19 +97,17 @@ export default {
       wechatId: '0',
       periodValidityEndTime: '',
       isShowTime: false,
-      periodValidityType: '0',
+      periodValidityType: '0'
-      type: '',
-      id: ''
     }
   },
 
-  onLoad (query) {
+  mounted () {
-    if (query.id) {
+    if (this.id) {
-      this.id = query.id
+      this.id = this.id
-      this.getInfo(query.id)
+      this.getInfo(this.id)
-      this.type = query.type
+      this.type = this.type
-    } else if (query.formConfig && query.formConfig !== '{}') {
+    } else if (this.formConfig) {
-      const res = JSON.parse(query.formConfig)
+      const res = this.formConfig
       this.periodValidityType = res.periodValidityType
       this.commitType = res.commitType
       this.actionNotice = res.actionNotice === '1'
@@ -121,13 +121,12 @@ export default {
 
   methods: {
     onTimeChange (e) {
-      this.periodValidityEndTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
+      this.isShowTime = false
+      this.periodValidityEndTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
     },
 
     back () {
-      uni.navigateBack({
+      this.$emit('back')
-        delta: 1
-      })
     },
 
     getInfo (id) {

src/apps/AppAskForm/components/Tabbar.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="form">
+    <div class="form-content">
+      <add-list ref="addList" v-if="currIndex === 1" @change="onChange"></add-list>
+      <list ref="list" v-if="currIndex === 0" @change="onChange"></list>
+    </div>
+    <ai-tabbar :active.sync="currIndex" :list="tabBar"/>
+  </div>
+</template>
+
+<script>
+import AddList from './AddList.vue'
+import List from './List.vue'
+import AiTabbar from '@/components/AiTabbar'
+
+export default {
+  name: 'AppAskForm',
+  appName: '问卷表单',
+
+  data () {
+    return {
+      currIndex: 0
+    }
+  },
+
+  components: {
+    AddList,
+    AiTabbar,
+    List
+  },
+
+  computed: {
+    tabBar () {
+      const link = icon => `${this.$cdn}askform/${icon}.png`
+      return [
+        {text: "表单列表", iconPath: "bdlb1", selectedIconPath: "bdlb2" },
+        {text: "新建项目", iconPath: "xjxm1", selectedIconPath: "xjxm2" }
+      ].map(e => ({
+        ...e,
+        iconPath: link(e.iconPath),
+        selectedIconPath: link(e.selectedIconPath)
+      }))
+    }
+  },
+
+  onLoad () {
+    uni.$on('reload', () => {
+      if (this.currIndex === 0) {
+        this.$refs.list.reload()
+      } else {
+        this.$refs.addList.getList()
+      }
+    })
+  },
+
+  methods: {
+    onChange (e) {
+      this.$emit('change', e)
+    }
+  },
+
+  onReachBottom() {
+    if (this.currIndex === 0) {
+      this.$refs.list.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .form {
+    padding-bottom: 98px;
+  }
+</style>

src/apps/AppAskForm/components/addList.vue

@@ -3,7 +3,7 @@
     <div class="form-list">
       <div
         class="form-list__item"
-        @click="toAdd(`/pages/askForm/addForm?type=${index}`)"
+        @click="toAdd(index)"
         :style="{'background-image': `url(${$cdn}askform/${index + 1}.png)`}"
         v-for="(item, index) in itemList"
         :key="index">
@@ -51,15 +51,22 @@ export default {
   },
 
   methods: {
-    toAdd (url) {
+    toAdd (type) {
-      uni.navigateTo({
+      this.$emit('change', {
-        url
+        type: 'AddForm',
+        params: {
+          type
+        }
       })
     },
 
     quote (id) {
-      uni.navigateTo({
+      this.$emit('change', {
-        url: `/pages/askForm/addForm?isQuote=1&id=${id}`
+        type: 'AddForm',
+        params: {
+          id,
+          isQuote: 1
+        }
       })
     },
 

src/apps/AppAskForm/components/list.vue

@@ -29,7 +29,7 @@
       </div>
       <ai-empty v-if="!list.length && isMore"></ai-empty>
     </div>
-    <u-popup :show="isShow" :closeable="false" mode="bottom" :z-index="11">
+    <u-popup :show="isShow" :closeable="false" mode="bottom" @close="isShow = false">
       <div class="popup">
         <h2>{{ info.title }}</h2>
         <div class="operate-list">
@@ -98,6 +98,7 @@ export default {
         templateType: 0,
         title: ''
       },
+      value: '',
       id: '',
       info: {},
       isMore: false,
@@ -209,8 +210,11 @@ export default {
         return this.$u.toast('该表单已有数据，无法编辑!')
       }
 
-      uni.navigateTo({
+      this.$emit('change', {
-        url: `/pages/askForm/addForm?id=${this.id}`
+        type: 'AddForm',
+        params: {
+          id: this.id
+        }
       })
 
       this.isShow = false
@@ -294,6 +298,10 @@ export default {
 .form {
   ::v-deep .u-search {
     margin-bottom: 0 !important;
+
+    .u-search__content__input {
+      height: 100%;
+    }
   }
 
   .popup {

src/apps/AppAskForm/formList.vue

@@ -1,9 +1,7 @@
 <template>
   <section class="formList">
     <ai-top-fixed>
-      <u-search placeholder="请输入标题" :show-action="false" search-icon-color="#ccc"
+      <u-search placeholder="请输入标题" :show-action="false" search-icon-color="#ccc" v-model="search.title" @search="page.current=1,getList()"/>
-                v-model="search.title" @search="page.current=1,getList()"/>
-
     </ai-top-fixed>
     <div class="mainPane">
       <div class="formBox column" flex v-for="op in list" :key="op.id">