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 style="color: #2979ff;" @click="callPhone(info.phone)"><u-icon name="phone" color="#2979ff" size="28"></u-icon>{{ info.phone }}</p>
              </div>
            </div>
            <span @click="linkTo(`./residentDetail?id=${info.id}`)">详情</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>
        <div class="item-wrapper">
          <div class="item-header">
            <div class="left">
              <h2>帮扶措施</h2>
            </div>
            <span @click="toLogList()">查看</span>
          </div>
          <div class="item-info">
            <label>采取措施</label>
            <span>{{ info.helpLog? $dict.getLabel('fpAssistanceMeasures',info.helpLog.operationDesc): '-' }}</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="toFamily()">编辑</span>
          </div>
          <div class="item-info">
            <label>未参加医疗参保</label>
            <span>{{ basicNum.length }}人</span>
          </div>
          <div class="item-info">
            <label>未参加养老保险</label>
            <span>{{ endNum.length }}人</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}`)">编辑</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(`./familyRisk?id=${info.id}&girdId=${girdInfo.girdId}&girdName=${girdInfo.girdName}`)">编辑</span>
          </div>
          <div class="item-info">
            <label>监测对象类型</label>
            <span>{{ $dict.getLabel('fpType', info.objectType) }}</span>
          </div>
          <div class="item-info">
            <label>风险因素</label>
            <span>{{ $dict.getLabel('fpRiskType', info.riskType) }}</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}`)">编辑</span>
          </div>
          <div class="item-info">
            <label>家庭纯收入</label>
            <span>{{ info.familyIncome }}元</span>
          </div>
          <div class="item-info">
            <label>家庭人均纯收入</label>
            <span>{{ info.perCapitaIncome }}元</span>
          </div>
        </div>
        <!-- 风险解除 -->
        <!-- v-if="info.status == 3" -->
        <div class="item-wrapper" v-if="info.status == 3">
          <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}`)">编辑</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;" v-if="item.createUserId == user.id && item.operationDesc == '走访排查'"></u-icon>
              </div>
            </div>
            <p style="color: #999999;">操作类型：{{ item.operationDesc }}</p>
            <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 == 1">
        <div class="confirm-btn" @click="toAddView('您确认要申请解除此监测对象的风险吗？', '')">申请解除风险</div>
      </div>
      <div class="footer-btn" v-if="info.status == 3 || info.status == 4">
        <div @click="del">删除人员</div>
        <div class="confirm-btn" @click="toAddView('您确认要申请纳入此监测对象吗？', '')">申请纳入监测</div>
      </div>
    </div>

    <div v-if="checkType == 2 && currIndex != 1">

      <div class="footer-btn" v-if="info.status == 0 && userInfo != ''">
        <div class="confirm-btn" @click="toRemove('您确认要将此居民纳入监测对象吗？', 1,0)">纳入监测审核</div>
      </div>

      <div class="footer-btn" v-if="info.status == 1">
        <div class="confirm-btn" @click="toAddView('您确认要解除此监测对象的风险吗？', 1)">消除风险</div>
      </div>

      <div class="footer-btn" v-if="info.status == 2">
        <div class="confirm-btn" @click="toRemove('您确认要解除此监测对象的风险吗？', 1,1)">消除风险审核</div>
      </div>

      <div class="footer-btn" v-if="(info.status == 4 || info.status == 3) && userInfo != ''">
        <div @click="del">删除人员</div>
        <div class="confirm-btn" @click="toAddView('您确认要将此居民纳入监测对象吗？', 1)">纳入监测</div>
      </div> 
    </div>
    
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'detail',

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

  computed: {
    ...mapState(['user']),
    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','fpAssistanceMeasures']).then(() => {
      this.isGirdUser()
      this.getInfo()
    })
    
    this.id = query.id
    this.getUserPopup()
  },
  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
        }
      })
    },

    callPhone(phone) {
      uni.makePhoneCall({phoneNumber: phone})
    },

    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}&type=0`
            })
          } 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}&type=0`
      })
    },

    toLogList() {
      uni.navigateTo({
        url: `./LogList?id=${this.info.id}`
      })
    },

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

    getUserPopup() {
      this.$http.post(`/app/apppreventionreturntopoverty/popup?id=${this.id}`).then(res => {
        if (res?.code === 0) {
          this.userInfo = res.data
        }
      })
    },

    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.endNum = res.data.family.filter(item  => 
              (item.jcbxCxyiliao == '02' || '') && (item.jcbxCzyiliao == '02' || '')
            )
            console.log(res.data.family);
            this.endNum = res.data.family.filter(v=> 
              (v.jcbxCxyanglao == '02' || '') && (v.jcbxCzyanglao == '02' || '')
            )
            console.log(this.endNum ,111);
          }
          
          this.info.ylbxCount = ylbxCount
          this.info.ylCount = ylCount
          this.pageShow = true
        }
      })
      this.$http.post(`/app/apppreventionreturntopovertylog/list?pid=${this.id}&size=1000&current=1&type=0`).then(res => {
        if (res.code === 0) {
          this.list = res.data.records || []
        }
      })
    },

    toAddView(text, pass) {
      this.$confirm('', text).then(() => {
        uni.navigateTo({url: `./MonitorAddView?pass=${pass}&id=${this.info.id}&status=${this.info.status}`})
      })
    },
    
    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()
            })
          }
        })
      })
    },

    toRemove(text, pass,type) {
      this.$confirm('', text).then(() => {
        uni.navigateTo({url: `./MonitorRemoveView?pass=${pass}&id=${this.info.id}&status=${this.info.status}&type=${type}`})
      })
    },

    toFamily() {
      var objectType = this.info.objectType || ''
      this.linkTo(`./MonitorFamilyMember?id=${this.info.id}&houseIdNumber=${this.info.idNumber}&objectType=${objectType}`)
    }
  }
}
</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>