dvcp_v2_wxcp_app/src/project/hljjm/AppRecognize/AppRecognizeDetail.vue

<template>
  <section class="AppRecognizeDetail">
    <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 class="info-content" v-if="!tabIndex">
      <div class="item">
        <div class="label">助养人姓名</div>
        <div class="value">{{info.assistanceName}}</div>
      </div>
      <div class="item">
        <div class="label">与助养对象关系</div>
        <div class="value">{{$dict.getLabel('relationship_children', info.relationshipWithChild)}}</div>
      </div>
      <div class="item">
        <div class="label">助养方式</div>
        <div class="value">{{$dict.getLabel('handling_Date', info.assistanceMethod)}}</div>
      </div>
      <div class="item">
        <div class="label">详细描述</div>
        <div class="value">{{info.details}}</div>
      </div>
      <div class="item">
        <div class="label">助养人身份证号</div>
        <div class="value">{{info.assistanceIdNumber}}</div>
      </div>
      <div class="item">
        <div class="label">办理日期</div>
        <div class="value">{{info.handlingDate}}</div>
      </div>
    </div>
    <div class="info-content" v-if="tabIndex == 1">
      <div class="item">
        <div class="label">儿童姓名</div>
        <div class="value">{{info.assistanceName}}</div>
      </div>
      <div class="item">
        <div class="label">身份证号</div>
        <div class="value">{{info.assistanceIdNumber}}</div>
      </div>
      <div class="item">
        <div class="label">儿童类别</div>
        <div class="value">{{$dict.getLabel('CHILD_CATEGORY_CODE', info.childType)}}</div>
      </div>
      <div class="item">
        <div class="label">出生年月</div>
        <div class="value">{{info.birthDate}}</div>
      </div>
    </div>
    <div class="info-content" v-if="tabIndex == 2">
      <div class="item">
        <div class="label">助养者身份证信息</div>
        <div class="value">
          <!-- <AiUploader style="margin-top: 12px;" :def.sync="filesId" :disabled="true"></AiUploader> -->
          <div class="img-list" v-if="filesId.length">
            <img :src="item.filePath" alt=""  v-for="(item, index) in filesId" :key="index" @click.stop="previewImages(filesId, item.filePath)">
          </div>
          <p v-else>暂无数据</p>
        </div>
      </div>
      <div class="item">
        <div class="label">助养者经济状况证明</div>
        <div class="value">
          <div class="img-list" v-if="filesEconomy.length">
            <img :src="item.filePath" alt=""  v-for="(item, index) in filesEconomy" :key="index" @click.stop="previewImages(filesEconomy, item.filePath)">
          </div>
          <p v-else>暂无数据</p>
        </div>
      </div>
      <div class="item">
        <div class="label">助养者健康状况</div>
        <div class="value">
          <div class="img-list" v-if="filesHealth.length">
            <img :src="item.filePath" alt=""  v-for="(item, index) in filesHealth" :key="index" @click.stop="previewImages(filesHealth, item.filePath)">
          </div>
          <p v-else>暂无数据</p>
        </div>
      </div>
      <div class="item">
        <div class="label">其他材料</div>
        <div class="value">
          <div class="img-list" v-if="filesOther.length">
            <img :src="item.filePath" alt=""  v-for="(item, index) in filesOther" :key="index" @click.stop="previewImages(filesOther, item.filePath)">
          </div>
          <p v-else>暂无数据</p>
        </div>
      </div>
    </div>
    <div class="info-content" v-if="tabIndex == 3">
      <div class="item">
        <div class="label">办理人</div>
        <div class="value">{{info.agentId}}</div>
      </div>
      <div class="item">
        <div class="label">办理人联系电话</div>
        <div class="value">{{info.agentPhone}}</div>
      </div>
      <div class="item">
        <div class="label">办理机构</div>
        <div class="value">{{info.agency}}</div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "AppRecognizeDetail",
  appName: "认亲助养",
  data() {
    return {
      tabList: [{name: '助养信息'}, {name: '助养对象'}, {name: '相关文件'}, {name: '经办人'}],
			tabIndex: 0,
      barStyle: {
        'width': '20px', 
        'bottom': '-3px', 
        'background': '#4181FF', 
        'border-radius': '2px'
      },
      activeStyle: {
        'font-weight' : '400',
        'color': '#222'
      },
      id: '',
      info: {},
      filesId: [], //身份证照片
      filesEconomy: [], //经济状况证明
      filesHealth: [], //健康证明
      filesOther: [], //其它
    }
  },
  onLoad(option) {
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#2183FF'
    })
    uni.setNavigationBarTitle({
      title: '认亲助养'
    })
    this.id = option.id
    this.$dict.load(['handling_Date', 'relationship_children', 'CHILD_CATEGORY_CODE']).then(() => {
      this.getDetail()
    })
    
  },
  methods: {
    linkTo(url) {
      uni.navigateTo({url})
    },
    change(e) {
      this.tabIndex = e
    },
    getDetail() {
      this.$http.get(`/mobile/supportRaise/findById/${this.id}`, 
        {
          withoutToken: true
        }).then((res) => {
        if (res.code == 200) {
          this.info = {...res.data}
          res.data.assistanceInformationFile.map((item) => {
            item.url = item.filePath
            if(item.type == 1) {
              this.filesId.push(item)
            }
            if(item.type == 2) {
              this.filesEconomy.push(item)
            }
            if(item.type == 3) {
              this.filesHealth.push(item)
            }
            if(item.type == 4) {
              this.filesOther.push(item)
            }
          })
          console.log(this.filesId)
        }else {
          this.$u.toast(res.msg)
        }
      })
    },
    previewImages(images, img) {
      uni.previewImage({
        urls: images.map(v => v.filePath),
        current: img
      })
    },
  },
}
</script>

<style lang="scss" scoped>
uni-page-body {
  background-color: #f5f6f7;
}
.AppRecognizeDetail {
  ::v-deep .u-tabs {
    border-bottom: 1px solid #ddd;
  }
  .info-content {
    margin-top: 24px;
    .item {
      padding-left: 32px;
      background-color: #fff;
      font-family: PingFangSC-Regular;
      width: 100%;
      box-sizing: border-box;
      .label {
        padding: 16px 32px 20px 0;
        line-height: 44px;
        font-size: 32px;
        color: #999;
        box-sizing: border-box;
      }
      .value {
        padding: 0 20px 16px 0;
        box-sizing: border-box;
        line-height: 40px;
        font-size: 28px;
        color: #222;
        border-bottom: 1px solid #E4E5E6;
        .img-list {
          img {
            width: 200px;
            height: 200px;
            margin-right: 16px;
            margin-bottom: 16px;
          }
          img:nth-child(3n) {
            margin-right: 0;
          }
        }
        p {
          color: #999;
          line-height: 44px;
          padding: 8px 0;
        }
      }
    }
  }
  .footer-btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 16px 32px 52px 16px;
    box-sizing: border-box;
    background-color: #fff;
    .btn {
      width: 100%;
      text-align: center;
      height: 96px;
      line-height: 94px;
      border: 1px solid #2183FF;
      border-radius: 8px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 32px;
      color: #2183FF;
      margin-bottom: 16px;
    }
    .primary {
      background-color: #2183FF;
      color: #fff;
    }
  }
}
</style>