添加dateCell，selectCell组件。

调用：
 <date-cell title="客户区" date-type="date" v-model="date1"/>
 <select-cell title="测试" v-model="selected" dict="XXXX"/>

src/assets/css/index.scss

@@ -3,9 +3,11 @@
 
 html,
 body .app {
+  height: 100vh;
   color: #333333;
   font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
   background-color: $background-color;
+
 }
 
 .app-container {

src/components/dateCell/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="date-cell">
+    <van-cell :title="title" is-link :label="selected" @click="clickItem"/>
+    <van-popup v-model="showPicker" round  position="bottom" :close-on-popstate="true" get-container="#app">
+      <van-datetime-picker
+        v-bind="$attrs"
+        show-toolbar
+        :type="dateType"
+        :columns="columns"
+        @cancel="cancelPicker"
+        @confirm="pickerConfirm"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+
+import dayjs from "dayjs";
+
+export default {
+  props:{
+    //默认值
+    value:{
+      type: String,
+      default: null,
+    },
+    //标题
+    title:{
+      type: String,
+      default: null,
+    },
+    //时间类型，见van-datetime-picker
+    dateType:{
+      type: String,
+      default: 'time',
+    },
+    //时间格式 个别模式下不启用
+    format:{
+      type: String,
+      default: 'YYYY-MM-DD',
+    }
+  },
+  data(){
+    return{
+      showPicker:false,
+      selected:null,
+      columns: [],
+    }
+  },
+  watch:{
+    value:{
+      handler (val) {
+        console.log(val,'val111')
+        if(!val){
+          this.selected = null
+        }else{
+          this.selected = val;
+        }
+      },
+      immediate: true
+    }
+  },
+  methods:{
+    cancelPicker(){
+      this.showPicker = false;
+    },
+    pickerConfirm(val){
+      console.log(val,'val')
+      if(this.dateType === 'time' || this.dateType === 'year-month' || this.dateType === 'month-day') {
+        this.selected = val;
+      }else {
+        this.selected = dayjs(val).format(this.format) ;
+      }
+      this.showPicker = false;
+      this.$emit('change',this.selected)
+    },
+    clickItem(){
+      this.showPicker = true;
+    },
+  },
+  model:{
+    prop: 'value',
+    event: 'change',
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/layouts/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{'app-container': !$route.meta.hideTabBar} ">
+  <div ref="layouts" :class="{'app-container': !$route.meta.hideTabBar} ">
     <div class="layout-content">
       <keep-alive v-if="$route.meta.keepAlive">
         <router-view></router-view>
@@ -7,7 +7,9 @@
       <router-view v-else></router-view>
     </div>
     <div v-if="!$route.meta.hideTabBar" class="layout-footer">
-      <TabBar :data="tabbars" @change="handleChange" />
+      <van-sticky :container="container">
+        <TabBar :data="tabTars" @change="handleChange" />
+      </van-sticky>
     </div>
   </div>
 </template>
@@ -18,7 +20,8 @@ import {userInfo} from "@/api/public";
 export default {
   data() {
     return {
-      tabbars: [
+      container: null,
+      tabTars: [
         {
           title: '工作台',
           to: {
@@ -49,6 +52,9 @@ export default {
   created() {
     this.getUserInfo();
   },
+  mounted() {
+    this.container = this.$refs.layouts;
+  },
   methods: {
     getUserInfo(){
       userInfo().then(info=>{

src/components/selectCell/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="date-cell">
+    <van-cell  :title="title" :label="label" is-link @click="clickItem"/>
+    <van-popup v-model="showPicker" round lazy-render position="bottom" :close-on-popstate="true" get-container="#app">
+      <van-picker
+        v-bind="$attrs"
+        show-toolbar
+        value-key="dictLabel"
+        v-model="selected"
+        :columns="columns"
+        @confirm="pickerConfirm"
+        @cancel="cancelPicker"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import {getDict} from "@/api/toConsult";
+export default {
+  props:{
+    value:{
+      type: Object,
+      default: null,
+    },
+    dict:{
+      type: String,
+      default: null,
+    },
+    title:{
+      type: String,
+      default: null,
+    },
+  },
+  data(){
+    return{
+      showPicker:false,
+      selected:null,
+      label:'',
+      columns: [],
+    }
+  },
+  created() {
+    this.queryDict();
+  },
+  watch:{
+    value:{
+      handler (val) {
+        if(!val){
+          this.selected = null;
+          this.label = null;
+        }else{
+          this.selected = val;
+          this.label = val.dictLabel;
+        }
+      },
+      immediate: true
+    }
+  },
+  methods:{
+    queryDict(){
+      getDict( this.dict ).then(res => {
+        let { code, data, msg } = res
+        if (code == 200) {
+         this.columns = data;
+        }
+      })
+    },
+    cancelPicker(){
+      this.showPicker = false;
+    },
+    pickerConfirm(val){
+      this.selected = val;
+      this.label = val.dictLabel;
+      this.showPicker = false;
+      this.$emit('change',this.selected)
+    },
+    clickItem(){
+      this.showPicker = true;
+    },
+  },
+  model:{
+    prop: 'value',
+    event: 'change',
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/utils/globalMixins.js

@@ -9,7 +9,7 @@ export default {
   },
   created() {
     /** 组件中设置dictType,即可获取相应的value*/
-    if(this.dicts.length > 0){
+    if(this.dicts && this.dicts.length > 0){
       this.dicts.forEach(item=>{
         this.getDictHandler(item,(res)=>{
           this[item] = res

src/views/menu/LZRegister/edit.vue

@@ -28,21 +28,21 @@
         <van-panel title="巡检区域">
           <div style="padding: 10px;">
             <van-row >
-              <van-col span="12">
-                <div class="child check-item" >
+              <van-col span="12" >
+                <div class="check-area" @click="clickArea()">
                   营业网点-设备间
                   <van-icon name="success" color="primary"/>
                   <van-icon name="fail" color="red"/>
                 </div>
               </van-col>
               <van-col span="12">
-                <div class="check-item">营业网点-钞车间</div>
+                <div class="check-area">营业网点-钞车间</div>
               </van-col>
               <van-col span="12">
-                <div class="check-item">营业网点-消防设施</div>
+                <div class="check-area">营业网点-消防设施</div>
               </van-col>
               <van-col span="12">
-                <div class="check-item">营业网点-客户区</div>
+                <div class="check-area">营业网点-客户区</div>
               </van-col>
             </van-row>
             <van-cell title="检查内容：" value="内容" />
@@ -58,22 +58,25 @@
       <div class="card">
         <van-collapse v-model="activeNames">
           <van-collapse-item title="布撤防检查" name="1">
-            <van-cell title="入侵报警撤防时间：">
+            <van-cell :border="false" title="入侵报警撤防时间：">
               <template #right-icon>
                 <van-switch
                   v-model="checked"
-                  active-color="#4fc08d"
-                  inactive-color="orange"
+                  inactive-color="#4fc08d"
+                  active-color="orange"
                   size="20" />
               </template>
             </van-cell>
-            <van-cell title="现金区" is-link/>
-            <van-cell title="客户区" is-link/>
-            <van-cell title="整改期限" is-link/>
+            <van-cell-group v-show="checked">
+              <date-cell title="现金区"  v-model="date2"/>
+              <date-cell title="客户区" date-type="date" v-model="date1"/>
+              <date-cell title="整改期限" dateType="date" />
+              <select-cell title="测试" v-model="sss" :dict="'sys_business_type'" is-link/>
+            </van-cell-group>
           </van-collapse-item>
           <van-collapse-item title="技防设备检查" name="2">
             <van-cell title="报警及通信设备状态是否良好：">
-              <template #right-icon>`
+              <template #right-icon>
                 <van-switch
                   v-model="checked"
                   active-color="#4fc08d"
@@ -96,7 +99,7 @@
           </van-collapse-item>
           <van-collapse-item title="技防设备检查" name="2">
             <van-cell title="报警及通信设备状态是否良好：">
-              <template #right-icon>`
+              <template #right-icon>
                 <van-switch
                   v-model="checked"
                   active-color="#4fc08d"
@@ -123,21 +126,39 @@
       <p class="warning-msg">需要完成所有区域的履职内容才能提交内容</p>
       <div class=""></div>
     </div>
+
   </div>
 </template>
 
 <script>
+import SelectCell from '@/components/selectCell';
+import DateCell from '@/components/dateCell';
 import NavBar from '@/components/NavBar';
 export default {
-  components:{NavBar},
+  components:{SelectCell,NavBar,DateCell},
   data(){
     return {
+      date2:'01:00',
+      date1:'07:00',
+      sss:{
+        dictLabel: "歇业",
+        dictValue: "0",
+      },
       checked:false,
       info:'',
       activeNames: ['1'],
       fileList:[],
       dicts:['sys_business_type','asdagg']
     }
+  },
+  methods:{
+    clickArea(){
+      document.getElementsByClassName('check-area')[0].classList.add('active')
+      console.log('eeeeeee')
+    },
+    openTime(){
+
+    },
   }
 }
 </script>
@@ -145,10 +166,9 @@ export default {
 <style lang="scss" scoped>
 
   .lz-edit{
-
   }
   .page-container{
-    height: calc(100% - 100px);
+
     background-color: #f1f1f1;
     overflow: auto;
     padding: 20px;
@@ -157,7 +177,7 @@ export default {
     margin-bottom: 20px;
     box-shadow: 0 10px 10px #eaeaea;
   }
-  .check-item{
+  .check-area{
     background-color: #f1f1f1;
     margin: 10px;
     padding:10px;
@@ -187,4 +207,8 @@ export default {
     height: 40px;
     line-height: 40px;
   }
+  .active{
+    color: #fff;
+    background-color: #1989fa;
+  }
 </style>