dvcp_v2_wxcp_app/src/apps/AppMonitoringObject/Detail.vue

<template>
  <div class="detail" v-if="pageShow" :class="[isFrom ? 'active' : '']">
    <div class="tab" v-if="!isFrom">
      <span @click="changeTab(0)" :class="[currIndex === 0 ? 'active' : '']">基本信息</span>
      <span @click="changeTab(1)" :class="[currIndex === 1 ? 'active' : '']">帮扶日志</span>
    </div>
    <div class="tab-content">
      <div class="tab-content__item" v-show="currIndex === 0">
        <div class="item-wrapper">
          <div class="item-header item-avatar">
            <div class="left">
              <!-- <img :src="info.photo" alt="" v-if="info.photo" /> -->
              <img :src="$cdn + 'avatar.png'" />
              <div class="left-right">
                <h2>{{ info.name }}</h2>
                <p>{{ info.phone }}</p>
              </div>
            </div>
            <span @click="linkTo('./Add?id=' + info.id)" v-if="info.status == 1">编辑</span>
          </div>
          <div class="item-info">
            <label>现住地址</label>
            <span>{{ info.countyName  +  info.townName + info.villageName }}</span>
          </div>
          <div class="item-info">
            <label>详细地址</label>
            <span>{{ info.currentAddress }}</span>
          </div>
          <div class="more-info" v-if="viewAll">
            <div class="item-info">
              <label>民族</label>
              <span>{{ $dict.getLabel('fpNation', info.nation) }}</span> 
            </div>
            <div class="item-info">
              <label>政治面貌</label>
              <span>{{ $dict.getLabel('fpPoliticalOutlook', info.politicsStatus) }}</span>
            </div>
            <div class="item-info">
              <label>文化程度</label>
              <span>{{ $dict.getLabel('fpEducation', info.education) }}</span>
            </div>
            <div class="item-info">
              <label>在校生情况</label>
              <span>{{ $dict.getLabel('fpStudentsInSchool', info.schoolStatus) }}</span>
            </div>
            <div class="item-info">
              <label>健康状况</label>
              <span>{{ $dict.getLabel('fpHealth', info.healthyStatus) }}</span> 
            </div>
            <div class="item-info">
              <label>大病保险</label>
              <span>{{ $dict.getLabel('fpYesOrNo', info.seriousIllnessInsurance) }}</span>
            </div>
            <div class="item-info">
              <label>医疗参保</label>
              <span>{{ $dict.getLabel('fpYesOrNo', info.basicMedicalTreatment) }}</span>
            </div>
            <div class="item-info">
              <label>享受最低生活保障</label>
              <span>{{ $dict.getLabel('fpYesOrNo', info.subsistenceAllowance) }}</span>
            </div>
            <div class="item-info">
              <label>养老保险</label>
              <span>{{ $dict.getLabel('fpYesOrNo', info.endowmentInsurance) }}</span>
            </div>
            <div class="item-info">
              <label>特困供养</label>
              <span>{{ $dict.getLabel('fpYesOrNo', info.specialPovertySupport) }}</span>
            </div>
            <div class="item-info">
              <label>劳动技能</label>
              <span>{{ $dict.getLabel('fpLaborSkills', info.labourStatus) }}</span>  
            </div>
            <div class="item-info">
              <label>务工时间/月</label>
              <span>{{ info.workeMonths }}</span>
            </div>
            <div class="item-info">
              <label>务工区域</label>
              <span>{{ info.workArea }}</span>
            </div>
          </div>
          <div class="view-all" @click="viewAll = !viewAll">{{viewAll ? '收起详情 ' : '展开详情 '}}<img :class="viewAll ? 'img-active' : ''" src="./components/img/top-icon-blue.png" /></div>
          <!-- <div class="item-info">
            <label>是否扶贫搬迁</label>
            <span>{{ $dict.getLabel('fpYesOrNo', info.move) }}</span>
          </div>
          <div class="item-info" v-if="info.move === '01'">
            <label>安置地区</label>
            <span>{{ info.placeArea }}</span>
          </div>
          <div class="item-info" v-if="info.move === '01'">
            <label>安置详细地址</label>
            <span>{{ info.place }}</span>
          </div>
          <div class="item-info">
            <label>纳入监测时间</label>
            <span>{{ info.createTime }}</span>
          </div>
          <div class="item-info">
            <label>监测员</label>
            <span>{{ info.monitoringContact || '-' }}</span>
          </div>
          <div class="item-info">
            <label>监测员电话</label>
            <span style="color: #3D94FB;"
                  @click="call(info.monitoringContactPhone)">{{ info.monitoringContactPhone || '-' }}</span>
          </div> -->
        </div>
        <div class="item-wrapper">
          <div class="item-header">
            <div class="left">
              <h2>家庭成员</h2>
              <i :style="{color: info.family && info.family.length ? '#2EA222' : '#FF4466'}">({{
                  info.family && info.family.length ? '已填写' : '未填写'
                }})</i>
            </div>
            <span @click="linkTo(`./MonitorFamilyMember?id=${info.id}&houseIdNumber=${info.idNumber}&objectType=${info.objectType}`)" v-if="info.status == 1">编辑</span>
          </div>
          <div class="item-info">
            <label>未参加医疗参保</label>
            <span>{{ info.ylbxCount }}人</span>
          </div>
          <div class="item-info">
            <label>未参加养老保险</label>
            <span>{{ info.ylCount }}人</span>
          </div>
        </div>
        <div class="item-wrapper">
          <div class="item-header">
            <div class="left">
              <h2>家庭情况</h2>
              <i :style="{color: isFamilySituation ? '#2EA222' : '#FF4466'}">({{
                  isFamilySituation ? '已填写' : '未填写'
                }})</i>
            </div>
            <span @click="linkTo(`./MonitorFamilySituation?id=${info.id}&girdId=${girdInfo.girdId}&girdName=${girdInfo.girdName}`)" v-if="info.status == 1">编辑</span>
          </div>
          <div class="item-info">
            <label>是否危房</label>
            <span>{{ $dict.getLabel('fpYesOrNo', info.dilapidatedHousehold) || '-' }}</span>
          </div>
          <div class="item-info">
            <label>饮用水安全问题</label>
            <span>{{ $dict.getLabel('fpYesOrNo', info.drinkingWaterSafety) || '-' }}</span>
          </div>
        </div>
        <div class="item-wrapper">
          <div class="item-header">
            <div class="left">
              <h2>收支情况</h2>
              <i :style="{color: isIncome ? '#2EA222' : '#FF4466'}">({{ isIncome ? '已填写' : '未填写' }})</i>
            </div>
            <span @click="linkTo(`./MonitorIncome?id=${info.id}&girdId=${girdInfo.girdId}&girdName=${girdInfo.girdName}`)" v-if="info.status == 1">编辑</span>
          </div>
          <div class="item-info">
            <label>家庭纯收入</label>
            <span>{{ info.income8 }}元</span>
          </div>
          <div class="item-info">
            <label>家庭人均纯收入</label>
            <span>{{ info.income9 }}元</span>
          </div>
        </div>
        <div class="item-wrapper">
          <div class="item-header">
            <div class="left">
              <h2>帮扶措施</h2>
              <i :style="{color: isPoorStatus ? '#2EA222' : '#FF4466'}">({{ isPoorStatus ? '已填写' : '未填写' }})</i>
            </div>
            <span @click="linkTo(`./MonitorPoorStatus?id=${info.id}&girdId=${girdInfo.girdId}&girdName=${girdInfo.girdName}`)" v-if="info.status == 1">编辑</span>
          </div>
          <div class="item-info">
            <label>产业帮扶</label>
            <span>{{ $dict.getLabel('fpIndustrialAssistance', info.industrialAssistance) || '-' }}</span>
          </div>
          <div class="item-info">
            <label>健康帮扶</label>
            <span>{{ $dict.getLabel('fpHealthAssistance', info.healthAssistance) || '-' }}</span>
          </div>
        </div>
      </div>
      <div class="tab-content__item" v-show="currIndex === 1">
        <div class="log-item" v-for="(item, index) in list" :key="index">
          <div class="log-item__wrapper">
            <div class="log-item__user">
              <div class="left">
                <div class="user">
                  <span>{{ item.createUserName.substr(item.createUserName.length - 2) }}</span>
                </div>
                <h2>{{ item.createUserName }}</h2>
              </div>
              <div class="right">
                <span>{{ item.createTime }}</span>
                <u-icon name="list" color="#999" size="28" @click="edit(item.id)" style="margin-left:16px;"></u-icon>
              </div>
            </div>
            <p>{{ item.detail }}</p>
            <div class="imgs" v-if="item.files && item.files.length">
              <image :src="img.url" @click="prevImg(item.files, img.url)" v-for="(img, index) in item.files"
                     :key="index"/>
            </div>
          </div>
        </div>
        <AiEmpty v-if="!list.length" style="padding-bottom: 20px;"></AiEmpty>
      </div>
    </div>
    <AiFixedBtn v-if="currIndex === 1">
      <div class="addBtn iconfont iconfont-iconfangda" @tap="toAddLog"></div>
    </AiFixedBtn>
     <!-- 0：待纳入、1：监测中、2：待解除、3：已解除、4：已驳回 -->
    <div v-if="checkType == 1 && currIndex != 1"> 
      <div class="footer-btn" v-if="info.status == 4">
        <div @click="del">删除人员</div>
      </div>
      <div class="footer-btn" v-if="info.status == 1">
        <div class="confirm-btn" @click="remove('您确认要申请解除此监测对象的风险吗？', '')">申请解除风险</div>
      </div>
    </div>

    <div v-if="checkType == 2 && currIndex != 1"> 
      <div class="footer-btn" v-if="info.status == 0">
        <div @click="examine('您确认要驳回此居民的监测对象申请吗？', 0)">驳回申请</div>
        <div class="confirm-btn" @click="examine('您确认要将此居民纳入监测对象吗？', 1)">纳入监测</div>
      </div>
      <div class="footer-btn" v-if="info.status == 1">
        <div @click="del">删除人员</div>
        <div class="confirm-btn" @click="remove('您确认要解除此监测对象的风险吗？', 1)">消除风险</div>
      </div>
      <div class="footer-btn" v-if="info.status == 2">
        <div @click="examine('您确认要继续监测该居民？', 0)">继续监测</div>
        <div class="confirm-btn" @click="remove('您确认要解除此监测对象的风险吗？', 1)">消除风险</div>
      </div>
      <div class="footer-btn" v-if="info.status == 3">
        <div @click="del">删除人员</div>
        <div class="confirm-btn" @click="examine('您确认要将此居民纳入监测对象吗？', 1)">纳入监测</div>
      </div>
      <div class="footer-btn" v-if="info.status == 4">
        <div @click="del">删除人员</div>
      </div> 
    </div>
    
  </div>
</template>

<script>

export default {
  name: 'detail',

  data() {
    return {
      info: {},
      pageShow: false,
      currIndex: 0,
      list: [],
      isFrom: false,
      viewAll: false,
      checkType: '',
      girdInfo: {}
    }
  },


  computed: {
    isIncome() {
      if (!this.info.id) {
        return false
      }

      return this.info.income8 > 0 || this.info.income8 > 0;


    },

    isPoorStatus() {
      if (!this.info.id) {
        return false
      }

      return (this.info.industrialAssistance || this.info.healthAssistance || this.info.employmentAssistance || this.info.educationalAssistance
      || this.info.financialAssistance || this.info.socialAssistance || this.info.publicWelfarePostAssistance);


    },

    isFamilySituation() {
      if (!this.info.id) {
        return false
      }

      return (this.info.drinkingWaterSafety || this.info.dilapidatedHouse && this.info.move);


    }
  },

  onLoad(query) {
    if (query.isFrom) {
      this.isFrom = true
    }
    this.$dict.load(['fpType', 'riskEliminationMethod', 'fpRiskType', 'fpYesOrNo', 'fpNation', 'fpEducation', 'fpStudentsInSchool', 'fpHealth',
    'fpLaborSkills', 'fpPoliticalOutlook', 'fpIndustrialAssistance', 'fpHealthAssistance']).then(() => {
      this.isGirdUser()
      this.getInfo()
    })

    this.id = query.id
  },
  onShow() {
    document.title = '监测对象详情'
    uni.$on('reload', () => {
      this.getInfo()
    })
  },

  methods: {
    isGirdUser() {
      this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
        if (res.code == 0) {
          this.checkType = res.data.checkType
          this.girdInfo = res.data
        }
      })
    },

    linkTo(url) {
      uni.navigateTo({url})
    },

    call(phone) {
      if (phone) {
        uni.makePhoneCall({
          phoneNumber: phone
        })
      }
    },

    edit(id) {
      uni.showActionSheet({
        itemList: ['编辑', '删除'],
        success: res => {
          if (res.tapIndex === 0) {
            uni.navigateTo({
              url: `./MonitorAddLog?pid=${this.info.id}&id=${id}`
            })
          } else if (res.tapIndex === 1) {
            this.$confirm('确定删除该数据？').then(() => {
              uni.showLoading()
              this.$http.post(`/app/apppreventionreturntopovertylog/delete?ids=${id}`).then(res => {
                if (res.code === 0) {
                  this.$u.toast('删除成功')
                  this.getInfo()
                }
                uni.hideLoading()
              })
            }).catch(() => {
            })
          }
        }
      })
    },

    prevImg(urls, img) {
      const imgs = urls.map(v => v.url)
      uni.previewImage({
        urls: imgs,
        current: img
      })
    },

    toAddLog() {
      uni.navigateTo({
        url: './MonitorAddLog?pid=' + this.info.id
      })
    },

    changeTab(index) {
      this.currIndex = index
    },

    getInfo() {
      this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${this.id}`).then(res => {
        if (res.code === 0) {
          this.info = res.data

          let ylbxCount = 0
          let ylCount = 0
          if(res.data.family && res.data.family.length) {
            res.data.family.forEach(item => {
              if (item.basicMedicalTreatment === '02') {
                ylbxCount = ylbxCount + 1
              }
              if (item.endowmentInsurance === '02') {
                ylCount = ylCount + 1
              }
            })
          }
          
          this.info.ylbxCount = ylbxCount
          this.info.ylCount = ylCount
          this.pageShow = true
        }
      })
      this.$http.post(`/app/apppreventionreturntopovertylog/list?pid=${this.id}&size=1000&current=1`).then(res => {
        if (res.code === 0) {
          this.list = res.data.records || []
        }
      })
    },

    examine(text, pass) {
      this.$confirm('', text).then(() => {
        this.$http.post(`/app/apppreventionreturntopoverty/examine?id=${this.id}&pass=${pass}`).then(res => {
          if (res.code === 0) {
             this.$u.toast('操作成功')
            uni.$emit('reload')
            this.getInfo()
          }
        })
      })
    },
    
    del() {
      this.$confirm('', '您确认要要删除此监测对象的信息吗？').then(() => {
        this.$http.post(`/app/apppreventionreturntopoverty/delete?ids=${this.id}`).then(res => {
          if (res.code === 0) {
             this.$u.toast('删除成功')
            uni.$emit('reload')
            setTimeout(() => {
              uni.navigateBack()
            })
          }
        })
      })
    },

    remove(text, pass) {
      this.$confirm('', text).then(() => {
        this.$http.post(`/app/apppreventionreturntopoverty/relieve?id=${this.id}&pass=${pass}`).then(res => {
          if (res.code === 0) {
             this.$u.toast('操作成功')
            uni.$emit('reload')
            this.getInfo()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
.detail {
  padding-top: 96px;
  padding-bottom: 130px;

  &.active {
    padding-top: 0;
  }

  .addBtn {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    background: $uni-color-primary;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    font-size: 48px;
    color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .tab {
    display: flex;
    position: fixed;
    align-items: center;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 96px;
    padding: 0 60px;
    background: #FFFFFF;
    border-bottom: 1px solid #D4D4D4;
    box-sizing: border-box;

    * {
      box-sizing: border-box;
    }

    span {
      position: relative;
      flex: 1;
      height: 96px;
      line-height: 96px;
      color: #000000;
      text-align: center;
      font-size: 32px;

      &::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 192px;
        height: 6px;
        background: transparent;
        transform: translateX(-50%);
        content: ' ';
      }

      &.active {
        color: #1365DD;

        &::after {
          background: #1365DD;
        }
      }
    }
  }

  .item-wrapper {
    background: #fff;
    margin-bottom: 16px;
    padding: 0 32px 16px;

    .item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 96px;

      & > span {
        color: #3975C6;
        font-size: 32px;
      }

      .left {
        display: flex;
        align-items: center;

        h2 {
          color: #333333;
          font-size: 32px;
          font-weight: 500;
        }

        i {
          font-style: normal;
          color: #2EA222;
          font-size: 32px;
        }
      }
    }

    .item-info {
      display: flex;
      justify-content: space-between;
      padding: 14px 0;

      label {
        color: #999999;
        font-size: 32px;
      }

      span {
        max-width: 496px;
        text-align: right;
        color: #333333;
        font-size: 32px;
      }
    }

    .item-avatar {
      height: 192px;

      img {
        width: 112px;
        height: 112px;
        margin-right: 24px;
      }

      .left-right {
        p {
          margin-top: 8px;
          color: #999999;
          font-size: 28px;
        }
      }
    }
  }

  .log-item {
    padding: 0 0 0 32px;
    background: #fff;

    &:first-child {
      margin-top: 16px;
    }

    &:last-child {
      .log-item__wrapper {
        border: none !important;
      }
    }

    .log-item__wrapper {
      padding: 32px 32px 32px 0;
      border-bottom: 1px solid #E4E5E6;

      .log-item__user {
        display: flex;
        align-items: center;
        justify-content: space-between;

        & > div {
          display: flex;
          align-items: center;
        }

        .left {
          .user, image {
            width: 80px;
            height: 80px;
            line-height: 80px;
            margin-right: 16px;
            text-align: center;
            border-radius: 50%;
            background: #2266FF;

            span {
              color: #fff;
              font-size: 28px;
            }
          }

          h2 {
            color: #333;
            font-size: 32px;
          }
        }

        .right {
          image {
            width: 32px;
            height: 32px;
          }

          span {
            margin-right: 6px;
            color: #999999;
            font-size: 28px;
          }
        }
      }

      p {
        margin: 4px 0 16px 96px;
        color: #343D65;
        font-size: 28px;
      }

      .imgs {
        margin-left: 96px;

        image {
          width: 136px;
          height: 136px;
          margin-right: 8px;
          margin-bottom: 8px;
        }
      }
    }
  }
  .view-all{
    text-align: center;
    font-size: 32px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #3975C6;
    line-height: 44px;
    img{
      width: 32px;
      height: 32px;
      margin-left: 8px;
      transform: rotate(180deg);
      transition: all 0.3s ease-in-out;
      vertical-align: middle;
    }
    .img-active{
      transform: rotate(0deg);
    }
  }
  .footer-btn{
    width: 100%;
    height: 112px;
    line-height: 112px;
    background: #FFF;
    display: flex;
    box-shadow: inset 0px 1px 0px 0px #DDDDDD;
    position: fixed;
    bottom: 0;
    left: 0;
    div{
      flex: 1;
      text-align: center;
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333;
    }
    .confirm-btn{
      background-color: #3192F4;
      color: #fff;
    }
  }
}
</style>