dvcp_v2_wxcp_app/src/apps/AppWalkask/walkObject.vue

<template>
  <div class="walkObject">
    <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.menuLevel3Name" :key="index" @change="selectUser(item)">
              <u-radio-group v-model="value">
                <u-radio v-for="(item, index) in userList" :key="index" :name="item.create_user_name">
                  {{ item.create_user_name }}
                </u-radio>
              </u-radio-group>

              <!-- <u-checkbox-group>
                <u-checkbox v-model="e.checked" v-for="(e, index) in userList" :key="index" :name="e.create_user_name" shape="circle">{{ e.create_user_name }}</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: {
    params: {},
  },
  data() {
    return {
      DiyList: {},
      userList: {},
      keyword: '',
      list: [
        {
          name: '残疾人',
        },
        {
          name: '精神病患者',
        },
        {
          name: '吸毒人员',
        },
      ],
      nameList: [],
      current: 1,
      appId: '',
      value: '',
      menuLevel3Name: '',
    }
  },
  computed: {},
  created() {
    console.log(1)
    document.title = '选择走访慰问对象' 
    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) {
      this.menuLevel3Name = item.menuLevel3Name
      this.appId = item.id
      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
        }
      })
    },

    submit() {
      this.userList.map((item) => {
        if (item.create_user_name == this.value) {
          this.$emit('back', { item: item, appId: this.appId, menuLevel3Name: this.menuLevel3Name })
        }
      })
    },
  },
  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-collapse {
        .u-collapse-item {
          .u-collapse-body {
            // display: inline;
            .u-radio-group {
              .u-radio {
                line-height: 0;
              }
            }
          }
        }
      }
    }
  }

  .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: 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>