dvcp_v2_wxcp_app/src/project/hljjm/AppSecurityObject/AppSecurityObject.vue

<template>
  <section class="AppSecurityObject">
    <div class="top-fixed">
      <div class="tab-content">
        <u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="change" height="112" :bar-style="barStyle"
          bg-color="#fff" inactive-color="#666" active-color="#222" :active-item-style="activeStyle"></u-tabs>
      </div>
      <div class="select-type" @click="isShowType=true">
        {{$dictHlj.getLabel('CHILD_CATEGORY_CODE', childTypeCode) || '儿童类别'}}<u-icon name="arrow-down" color="#999" size="28"></u-icon>
      </div>
    </div>
    <div class="user-list">
      <div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
        <div class="item-top">
          <div class="title">儿童姓名：{{item.name}}</div>
          <div class="info">身份证号：{{item.idNumber}}</div>
          <div class="info">儿童类别：{{$dictHlj.getLabel('CHILD_CATEGORY_CODE', item.childTypeCode)}}</div>
          <div class="type">{{item.itemName}}</div>
        </div>
        <div class="item-bottom">
          <div class="time">{{item.applicationDate}}</div>
        </div>
      </div>
      <AiEmpty v-if="!list.length"></AiEmpty>
    </div>
    <u-select v-model="isShowType" :list="typeList" value-name="value" label-name="label"  @confirm="typeChange"></u-select>
  </section>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "AppSecurityObject",
  appName: "保障对象管理",
  data() {
    return {
      tabList: [{name: '全部', val: ''}, {name: '助医', val: 2}, {name: '助学', val: 1}, {name: '基本生活费', val: 3}],
			tabIndex: 0,
      barStyle: {
        'width': '20px', 
        'bottom': '-3px', 
        'background': '#4181FF', 
        'border-radius': '2px'
      },
      activeStyle: {
        'font-weight' : '400',
        'color': '#222'
      },
      current: 1,
      pageTotal: 2,
      list: [],
      isShowType: false,
      typeList: [],
      childTypeCode: ''
    }
  },
  onLoad() {
    this.$dictHlj.load(['item_Type', 'CHILD_CATEGORY_CODE']).then(() => {
      this.typeList = this.$dictHlj.getDict('CHILD_CATEGORY_CODE')
      this.typeList.unshift({label: '全部', value: ''})
      this.getList()
    })
  },
  onShow() {
    document.title = '保障对象管理'
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    change(e) {
      this.tabIndex = e
      this.getListInit()
    },
    getListInit() {
      this.current = 1
      this.pageTotal = 2
      this.list = []
      this.getList()
    },
    getList() {
      if(this.current > this.pageTotal) return
      this.$http.post(`/mobile/guaranteeObject/findListPage`, 
        {
          itemType: this.tabList[this.tabIndex].val,
          pageNum: this.current,
          pageSize: 10,
          divisionCode: this.user.divisionCode || '',
          childTypeCode: this.childTypeCode
        },
        {
          withoutToken: true
        }).then((res) => {
        if (res.code == 200) {
          this.list = this.current > 1 ? [...this.datas, ...res.data.rows] : res.data.rows
          this.pageTotal = Math.ceil(res.data.total/10)
        }else {
          this.$u.toast(res.msg)
        }
      })
    },
    toDetail(row) {
      uni.navigateTo({url: `./AppSecurityObjectDetail?childrenId=${row.childrenId}&childTypeCode=${row.childTypeCode}&itemType=${row.itemType}`})
    },
    typeChange(e) {
      this.childTypeCode = e[0].value
      this.getListInit()
    },
  },
}
</script>

<style lang="scss" scoped>
uni-page-body {
  background-color: #F5F6F7;
}
.AppSecurityObject {
  .top-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
  }
  .tab-content {
    padding-right: 120px;
    box-sizing: border-box;
    background-color: #fff;
  }
  .select-type {
    width: 100%;
    line-height: 40px;
    background: #FFF;
    border-top: 1px solid #ddd;
    padding: 24px 32px;
    box-sizing: border-box;
    font-family: PingFangSC-Regular;
    font-size: 8px;
    color: #222;
    .u-icon {
      margin-left: 14px;
    }
  }
  .user-list {
    padding: 236px 32px 0 32px;
    box-sizing: border-box;
    .item {
      width: 100%;
      background: #FFF;
      border-radius: 16px;
      margin-bottom: 24px;
      .item-top {
        padding: 24px;
        position: relative;
        .title {
          line-height: 48px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 34px;
          color: #333;
          margin-bottom: 12px;
          word-break: break-all;
        }
        .info {
          line-height: 48px;
          font-family: PingFangSC-Regular;
          font-size: 26px;
          color: #666;
        }
        .type {
          position: absolute;
          top: 24px;
          right: 24px;
          padding: 6px 16px;
          line-height: 36px;
          font-family: PingFangSC-Regular;
          font-size: 26px;
          color: #2A6DF4;
          background: #F5F7FC;
          border: 1px solid #E1E8F6;
          border-radius: 8px;
        }
      }
      .item-bottom {
        padding: 14px 0 10px 24px;
        border-top: 1px solid #E4E5E6;
        .time {
          line-height: 48px;
          font-family: PingFangSC-Regular;
          font-size: 24px;
          color: #999;
        }
      }
    }
  }
}
</style>