重绘

src/apps/AppWalkask/walkObject.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="walkObject">
+    <u-navbar title="选择走访慰问对象" back-icon-color="#fff" title-color="#fff" title-width="300" title-size="36" :border-bottom="false" :background="backgroundNavbar"> </u-navbar>
+
+    <div class="header-top">
+      <u-search v-model="keyword" placeholder="搜索" :show-action="false" bg-color="#F5F5F5" search-icon-color="#CCCCCC" placeholder-color="#999999" @search="handerSearch" @clear="handerClear"></u-search>
+    </div>
+
+    <div class="header-middle">
+      <div class="hint">可选范围</div>
+
+      <div class="empty-div"></div>
+
+      <div class="Checkbox">
+        <div v-if="DiyList.length > 0">
+          <u-collapse event-type="close" arrowaccordion>
+            <u-collapse-item v-for="(item, index) in DiyList" :title="item.menuLevel2Name" :key="index" @change="selectUser(item)">
+              <u-checkbox-group @change="checkboxGroupChange">
+                <u-checkbox @change="checkboxChange" v-model="e.checked" v-for="(e, index) in userList" :key="index" :name="e.create_user_name" shape="circle">{{ e.name00 }}</u-checkbox>
+              </u-checkbox-group>
+            </u-collapse-item>
+          </u-collapse>
+        </div>
+
+        <AiEmpty description="没有数据" class="emptyWrap" v-else> </AiEmpty>
+      </div>
+    </div>
+
+    <div class="fixedBtn">
+      <div class="typeName">
+        <span class="typeName-box" v-for="(item, index) in list" :key="index" v-if="item.checked == true">
+          {{ item.name }}
+        </span>
+      </div>
+
+      <div class="subBtn" @click="submit">确定选择</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'walkObject',
+  components: {},
+  props: {},
+  data() {
+    return {
+      DiyList: {},
+      userList: {},
+      backgroundNavbar: {
+        backgroundColor: '#3975C6',
+      },
+      keyword: '',
+      list: [
+        {
+          name: '残疾人',
+        },
+        {
+          name: '精神病患者',
+        },
+        {
+          name: '吸毒人员',
+        },
+      ],
+      nameList: [],
+      current: 1,
+    }
+  },
+  computed: {},
+  created() {
+    this.getDiyList()
+  },
+  mounted() {},
+  methods: {
+    getDiyList() {
+      this.$http.post('/app/appapplicationinfo/queryApplicationListByType?type=0').then((res) => {
+        if (res.code == 0) {
+          this.DiyList = res.data
+        }
+      })
+    },
+
+    selectUser(item) {
+      console.log(item)
+      this.$http.post(`/app/appapplicationinfo/list?appId=${item.id}&current=${this.current}&size=${99}`, { searchParam: this.keyword }).then((res) => {
+        if (res.code == 0) {
+          this.userList = res.data.records
+        }
+      })
+    },
+
+    checkboxGroupChange(a) {
+      console.log(a)
+    },
+
+    checkboxChange(e) {
+      console.log(e)
+    },
+
+    submit() {
+      this.userList.map((item) => {
+        if (item.checked == true) {
+          console.log(11, 'back', 'item')
+          this.$emit('back', item)
+        }
+      })
+    },
+  },
+  watch: {},
+}
+</script>
+
+<style lang="scss" scoped>
+.walkObject {
+  background: #ffffff;
+  padding-bottom: 118px;
+  .header-top {
+    background: #fff;
+    padding: 20px 32px;
+  }
+
+  .header-middle {
+    .hint {
+      padding: 0 20px 0 32px;
+      height: 112px;
+      line-height: 112px;
+      box-shadow: 0px 1px 0px 0px #e4e5e6;
+      font-size: 30px;
+      font-weight: 500;
+    }
+    .empty-div {
+      height: 16px;
+      background: #f5f5f5;
+    }
+    .Checkbox {
+      padding: 0 20px 0 30px;
+      ::v-deep .u-checkbox-group {
+        .u-checkbox {
+          // position: relative;
+          height: 112px;
+        }
+      }
+      ::v-deep .u-collapse {
+        .u-collapse-item {
+          .u-collapse-body {
+            display: inline;
+            .u-checkbox-group {
+              display: flex;
+              flex-direction: column;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .fixedBtn {
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 32px;
+    .subBtn {
+      margin: 20px 0 18px 0;
+      padding: 18px 32px;
+      background: #1365dd;
+      border-radius: 4px;
+      font-size: 32px;
+      color: #ffffff;
+    }
+    .typeName {
+      // margin: 48px 0 44px 0;
+      margin: 36px 0 22px 0;
+      .typeName-box {
+        padding: 16px 14px;
+        background: #eaeef1;
+        border-radius: 8px;
+        font-size: 30px;
+        font-weight: 500;
+        margin-left: 10px;
+      }
+      .typeName-box:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+</style>