diff --git a/package.json b/package.json
index 360bbcb1..3deef137 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "js-cookie": "^2.2.0",
     "jsencrypt": "^3.0.3",
     "lodash": "^4.17.15",
+    "mint-ui": "^2.2.13",
     "node-sass": "^4.12.0",
     "ol": "^6.9.0",
     "portfinder": "^1.0.21",
diff --git a/public/index.html b/public/index.html
index 7761c737..6581742c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,8 @@
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover" />
+
   <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" />
   <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=LWBBZ-TIGC3-VFP3L-YNMWH-FJB7T-JFBLO"></script>
   <!-- f2图表 -->
diff --git a/src/assets/scss/pages/caiji.scss b/src/assets/scss/pages/caiji.scss
new file mode 100644
index 00000000..f59ce9df
--- /dev/null
+++ b/src/assets/scss/pages/caiji.scss
@@ -0,0 +1,26 @@
+.bg-app {
+  // background-color: rgb(230, 230, 230);
+  height: 100vh;
+  width: 100vw;
+  padding: 20px;
+
+  .title {
+    text-align: center;
+    font-size: 20px;
+  }
+
+  .content {
+    margin-top: 20px;
+    // font-size: 40px;
+
+    .line {
+      border: 1px solid #e4e4e48e;
+    }
+  }
+
+  .div-btn {
+    margin-top: 50px;
+    display: flex;
+    justify-content: center;
+  }
+}
diff --git a/src/main.js b/src/main.js
index 05367aa0..296c9448 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,8 @@
 import Vue from "vue";
 import Element from "element-ui";
+import Mint from 'mint-ui';
+import 'mint-ui/lib/style.css';
+
 
 import App from "@/App";
 import i18n from "@/i18n";
@@ -60,6 +63,7 @@ Vue.use(renProcessStart);
 Vue.use(renProcessRunning);
 Vue.use(renProcessDetail);
 Vue.use(Element);
+Vue.use(Mint);
 
 Vue.use(Element, {
   size: "default",
diff --git a/src/views/pages/caiji.vue b/src/views/pages/caiji.vue
index 39fbb94f..9de79178 100644
--- a/src/views/pages/caiji.vue
+++ b/src/views/pages/caiji.vue
@@ -1,65 +1,549 @@
 <template>
-  <div class="g-app">
-    <div class="g-bd" v-if="true">
+  <div class="bg-app">
+    <div class="title">
       居民信息填报
     </div>
+    <div class="content">
+
+      <mt-cell title="所属社区">
+
+        <span>{{shequName}}</span>
+      </mt-cell>
+      <div class="line"></div>
+
+      <div @click="handelSel('community')">
+        <mt-cell title="小区"
+                 is-link>
+          <span v-if="selCommunity">{{selCommunity.label}}</span>
+          <span v-else>请选择</span>
+        </mt-cell>
+      </div>
+      <div class="line"></div>
+
+      <div @click="handelSel('building')">
+        <mt-cell title="楼宇"
+                 is-link>
+          <span v-if="selBuilding">{{selBuilding.label}}</span>
+          <span v-else>请选择</span>
+        </mt-cell>
+      </div>
+      <div class="line"></div>
+
+      <div @click="handelSel('unit')">
+        <mt-cell title="单元"
+                 is-link>
+          <span v-if="selUnit">{{selUnit.label}}</span>
+          <span v-else>请选择</span>
+        </mt-cell>
+      </div>
+      <div class="line"></div>
+
+      <div v-if="!selUnit || selUnit.value!=='else'"
+           @click="handelSel('room')">
+        <mt-cell title="房屋"
+                 is-link>
+          <span v-if="selRoom">{{selRoom.label}}</span>
+          <span v-else>请选择</span>
+        </mt-cell>
+        <div class="line"></div>
+      </div>
+      <div v-if="showAddressField">
+        <mt-field class="my-field"
+                  label="详细地址"
+                  placeholder="请输入"
+                  v-model="address"></mt-field>
+        <div class="line"></div>
+      </div>
+
+      <div @click="handelSel('roomType')">
+        <mt-cell title="房屋类型"
+                 is-link>
+          <span v-if="selRoomType">{{selRoomType.label}}</span>
+          <span v-else>请选择</span>
+        </mt-cell>
+      </div>
+      <div class="line"></div>
+
+      <mt-field class="my-field"
+                label="户主姓名"
+                placeholder="请输入"
+                v-model="username"></mt-field>
+      <div class="line"></div>
+
+      <mt-field class="my-field"
+                label="居住成员人数"
+                placeholder="请输入"
+                type="number"
+                v-model="memberNum"></mt-field>
+      <div class="line"></div>
+
+      <div v-for="(item,index) in memberList"
+           :key="index">
+        <mt-field class="my-field"
+                  :label="'成员'+(index+1)+'姓名'"
+                  placeholder="请输入"
+                  v-model="item.name"></mt-field>
+        <div class="line"></div>
+        <mt-field class="my-field"
+                  :label="'成员'+(index+1)+'身份证'"
+                  placeholder="请输入"
+                  v-model="item.idcard"></mt-field>
+        <div class="line"></div>
+        <mt-field class="my-field"
+                  :label="'成员'+(index+1)+'手机号'"
+                  placeholder="请输入"
+                  type="tel"
+                  v-model="item.phone"></mt-field>
+        <div class="line"></div>
+
+        <div @click="handelSel('detNum',index)">
+          <mt-cell :title="'成员'+(index+1)+'参加几轮全员核酸检测'"
+                   is-link>
+            <span v-if="item.selDetNum.value">{{item.selDetNum.label}}</span>
+            <span v-else>请选择</span>
+          </mt-cell>
+        </div>
+        <div class="line"></div>
+
+        <div @click="handelSel('detCondition',index)">
+          <mt-cell :title="'成员'+(index+1)+'新冠疫苗接种情况'"
+                   is-link>
+            <span v-if="item.selDetCondition.value">{{item.selDetCondition.label}}</span>
+            <span v-else>请选择</span>
+          </mt-cell>
+        </div>
+        <div class="line"></div>
+
+      </div>
+
+    </div>
+
+    <div class="div-btn">
+      <mt-button @click="handleSubmit"
+                 type="primary"
+                 size="small">提交</mt-button>
+    </div>
+
+    <mt-popup v-model="popupVisible"
+              popup-transition="popup-fade"
+              closeOnClickModal="true"
+              position="bottom">
+      <mt-picker :slots="popupSlots"
+                 value-key="label"
+                 @change="onPickerChange"
+                 showToolbar>
+        <div class="picker-toolbar-title">
+          <div class="usi-btn-cancel"
+               @click="popupVisible = !popupVisible">取消</div>
+          <div class="">请选择</div>
+          <div class="usi-btn-sure"
+               @click="popupOk()">确定</div>
+        </div>
+      </mt-picker>
+    </mt-popup>
+
   </div>
 </template>
 <script>
-import Cookies from 'js-cookie'
-import debounce from 'lodash/debounce'
-import { messages } from '@/i18n'
-import { getUUID } from '@/utils'
-import { Loading } from 'element-ui' // 引入Loading服务
-import JSEncrypt from 'jsencrypt' //引入加密
+
+
+import { requestPost } from "@/js/dai/request";
 
 let loading // 加载动画
 export default {
-  data() {
+  data () {
     return {
-      pubKey: null, // 获取到公钥
-      isShowLogin: true,
-      i18nMessages: messages
+      popupVisible: false,
+      shequName: '其他小区',
+      shequId: '111',
+      showAddressField: false,//是否显示其他
+
+      communityList: [],
+      buildingList: [],
+      unitList: [],
+      roomList: [],
+      selType: 'community',//弹出框所显示的数据类型：community、building、unit、room
+      pickerData: [],
+
+      selObj: {},
+      selCommunity: null,
+      selBuilding: null,
+      selUnit: null,
+      selRoom: null,
+      selRoomType: null,
+
+      address: '',
+      username: '',
+      phone: '',
+      idcard: '',
+      value: '',
+      memberNum: 2,
+
+      selMemberIndex: null,
+
+      memberList: [
+        {
+          name: '',
+          phone: '',
+          idcard: '',
+          num: 0,
+          condition: '',
+          selDetNum: {},
+          selDetCondition: {}
+        },
+        {
+          name: '',
+          phone: '',
+          idcard: '',
+          num: 0,
+          condition: '',
+          selDetNum: {},
+          selDetCondition: {}
+        }
+      ],
+
+      roomTypeList: [
+        {
+          value: '1',
+          label: '自有'
+        },
+        {
+          value: '2',
+          label: '租住'
+        },
+      ],
+
+      detNumList: [
+        {
+          value: '0',
+          label: '0'
+        },
+        {
+          value: '1',
+          label: '1'
+        },
+        {
+          value: '2',
+          label: '2'
+        },
+        {
+          value: '3',
+          label: '3'
+        },
+      ],//参加核酸次数list
+      detConditionList: [//参加核酸类型list
+        {
+          label: '已全程接种（包含加强针或序贯）',
+          value: '1'
+        },
+        {
+          label: '未全程接种',
+          value: '2'
+        },
+        {
+          label: '未接种',
+          value: '3'
+        },
+      ],
+
+
+      popupSlots: [//问题类型弹框数据
+        {
+          values: []
+        }
+      ],
+
     }
   },
   components: {},
-  computed: {},
-  created() {},
-  mounted() {},
+  computed: {
+
+  },
+  created () { },
+  mounted () {
+    this.loadCommunity()
+
+  },
 
   methods: {
-    handleClickItem(k) {
-      if (k == 1) {
-        this.$router.replace({ name: 'main' })
-      } else if (k == 2) {
-        this.$router.replace({ name: 'main-shuju' })
+    //根据社区id获取小区列表
+    async loadCommunity () {
+      const url = "/gov/org/neighborhood/neighborhoodlist"
+
+      let params = {
+        pageSize: 100,
+        pageNo: 0,
+        level: 'community',
+        id: 'f6e183d8e6687020074e6d8061926bfa'
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        data.list.forEach(element => {
+          element.label = element.neighborHoodName
+          element.value = element.neighborHoodId
+        });
+        this.communityList = data.list
+        let obj = {
+          values: this.communityList
+        }
+
+        this.popupSlots = []
+        this.popupSlots.push(obj)
+      } else {
+        this.$message.error(msg)
       }
     },
+    //获取楼宇列表
+    async loadBuilding () {
+      const url = "/gov/org/icbuilding/buildingoption"
+      let params = {
+
+        neighborHoodId: this.selCommunity.value
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        // data.forEach(element => {
+        //   element.label = element.buildingName
+        //   element.value = element.buildingId
+        // });
+        this.buildingList = data
+        let obj = {
+          values: this.buildingList
+        }
 
-    // 平阴联动 自动登录接口
-    getAutoLogin(platformToken) {
-      this.dataForm.thirdToken = platformToken
-      this.dataForm.platform = 'pyld'
-      this.$http
-        .post(`/auth/sso/oper/third/login`, this.dataForm)
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            if (res.code == 8302) {
-              return this.$message.error(res.msg)
-            }
-            return this.$message.error(res.msg)
-          }
-          localStorage.setItem('customerId', res.data.customerId)
-          localStorage.setItem('userType', 'work')
-          localStorage.setItem('showHeader', '0')
-          localStorage.setItem('token', res.data.token)
-          this.$router.replace({ name: 'home' })
+        this.popupSlots = []
+        this.popupSlots.push(obj)
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    //获取单元列表
+    async loadUnit () {
+      const url = '/gov/org/icbuildingunit/unitoption'
+
+      let params = {
+        buildingId: this.selBuilding.value
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        // data.forEach(element => {
+        //   element.label = element.unitName
+        //   element.value = element.id
+        // });
+        this.unitList = data
+        this.unitList.push({
+          label: '其他',
+          value: 'else'
         })
-        .catch(() => {})
-      // epmet-ext9.elinkservice.cn/platform-admin
-    }
+        let obj = {
+          values: this.unitList
+        }
+
+        this.popupSlots = []
+        this.popupSlots.push(obj)
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    //获取房间列表
+    async loadRoom () {
+      const url = "/gov/org/ichouse/houseoption"
+
+      let params = {
+        buildingId: this.selBuilding.value,
+        unitId: this.selUnit.value
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        // data.forEach(element => {
+        //   element.label = element.unitName
+        //   element.value = element.id
+        // });
+        this.roomList = data
+        this.roomList.push({
+          label: '其他',
+          value: 'else'
+        })
+        let obj = {
+          values: this.roomList
+        }
+
+        this.popupSlots = []
+        this.popupSlots.push(obj)
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    handelSel (selType, index) {
+      this.selType = selType
+      if (selType === 'community') {
+        this.pickerData = this.communityList
+
+      }
+      if (selType === 'building') {
+        if (!this.selCommunity) {
+          Toast({
+            message: '请先选择小区',
+            duration: 5000
+          });
+          return false
+        } else {
+          this.pickerData = this.buildingList
+        }
+
+
+      }
+      if (selType === 'unit') {
+        if (!this.selBuilding) {
+          Toast({
+            message: '请先选择楼宇',
+            duration: 5000
+          });
+          return false
+        } else {
+          this.pickerData = this.unitList
+        }
+
+      }
+      if (selType === 'room') {
+        if (!this.selUnit) {
+          Toast({
+            message: '请先选择单元',
+            duration: 5000
+          });
+          return false
+        } else {
+          this.pickerData = this.roomList
+        }
+
+      }
+
+      if (selType === 'roomType') {
+        this.pickerData = this.roomTypeList
+      }
+      if (selType === 'detNum') {
+        this.selMemberIndex = index
+        this.pickerData = this.detNumList
+      }
+      if (selType === 'detCondition') {
+        this.selMemberIndex = index
+        this.pickerData = this.detConditionList
+      }
+
+
+      let obj = {
+        values: this.pickerData
+      }
+
+      this.popupSlots = []
+      this.popupSlots.push(obj)
+      this.popupVisible = !this.popupBuildingVisibl
+    },
+
+    handleSubmit () {
+
+    },
+
+    popupOk () {
+      if (this.selType === 'community') {
+        this.selCommunity = this.selObj
+        this.selBuilding = null
+        this.selUnit = null
+        this.selRoom = null
+        this.loadBuilding()
+
+      }
+      if (this.selType === 'building') {
+        this.selBuilding = this.selObj
+        this.selUnit = null
+        this.selRoom = null
+        this.loadUnit()
+
+      }
+      if (this.selType === 'unit') {
+        this.selUnit = this.selObj
+        this.selRoom = null
+        if (this.selUnit && this.selUnit.value === 'else') {
+          this.showAddressField = true
+        } else {
+          this.showAddressField = false
+        }
+        this.loadRoom()
+
+      }
+      if (this.selType === 'room') {
+        this.selRoom = this.selObj
+        if (this.selRoom && this.selRoom.value === 'else') {
+          this.showAddressField = true
+        } else {
+          this.showAddressField = false
+        }
+      }
+
+      if (this.selType === 'roomType') {
+        this.selRoomType = this.selObj
+      }
+
+      if (this.selType === 'detNum') {
+        // this.selMemberIndex = index
+        // this.pickerData = this.detNumList
+      }
+      if (this.selType === 'detCondition') {
+        // this.selMemberIndex = index
+        // this.pickerData = this.detConditionList
+      }
+
+      this.popupVisible = false
+
+    },
+
+    onPickerChange (picker, values) {
+
+      this.selObj = values[0]
+
+    },
+
+
+
+
   }
 }
 </script>
 
-<style lang="scss" src="@/assets/scss/pages/indexWork.scss" scoped></style>
+<style lang="scss" scoped >
+@import "@/assets/scss/pages/caiji.scss";
+
+.my-field /deep/ .mint-field-core {
+  text-align: right;
+  margin-right: 20px;
+}
+
+/deep/ .mint-popup-bottom {
+  width: 100vw;
+}
+
+.picker-toolbar-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #eee;
+  height: 44px;
+  line-height: 44px;
+  font-size: 16px;
+  .usi-btn-cancel,
+  .usi-btn-sure {
+    color: #26a2ff;
+    font-size: 16px;
+  }
+}
+</style>
