dvcp_v2_wxcp_app/src/apps/AppHelpDeclaration/details.vue

<template>
  <div class="details">
    <div class="user">
      <div class="avatar">{{ data.name && data.name.substring(data.name.length, data.name.length - 2) }}</div>
      <div class="right">
        <p><span>{{ data.name }}</span>的帮扶申请</p>
        <div>{{ data.declareTime }}</div>
      </div>
    </div>

    <div class="event_info">
      <div class="content">{{ data.riskDescription }}</div>
      <div class="tags">
        <span :style="{background: data.status == 0? '#FF883C':data.status == 1? '#1AAAFF': data.status==2? '#FF4466': '#42D784'}">{{ $dict.getLabel('helpDeclarationStatus', data.status) }}</span>
      </div>
    </div>

    <div class="progress_info">
      <div class="item">
        <label>申报人姓名</label>
        <div>{{ data.name }}</div>
      </div>
      <div class="item">
        <label>家庭人口数</label>
        <div>{{ data.householdNumber }}</div>
      </div>
      <div class="item">
        <label>联系方式</label>
        <div>{{ data.phone }}</div>
      </div>
      <div class="item">
        <label>申报方式</label>
        <div>自主申报</div>
      </div>
      <div class="item">
        <label>身份证号</label>
        <div>{{ data.idNumber }}</div>
      </div>
      <div class="item">
        <label>所在地区</label>
        <div>{{ data.areaName }}</div>
      </div>
      <div class="items" v-if="data.files && data.files.length">
        <p>照片</p>
        <div class="picture">
          <img :src="item.url" v-for="(item,index) in data.files" :key="index" alt="" @click="preview(data.files, item.url)">
        </div>
      </div>
    </div>

    <div class="header-bottom">

      <div class="plan">
        <div class="nav">
          <span>办理进度</span>
          <span> ({{ $dict.getLabel('helpDeclarationStatus', data.status) }})</span>
        </div>

        <div class="cards" v-for="(item, index) in data.processList" :key="index">
          <div class="cardss">
            <div class="cardss-left">
              <span>
                {{ item.doUsername && item.doUsername.substring(item.doUsername.length, item.doUsername.length - 2) }}
              </span>

              <img src="./components/1.png" class="avatarIcon" alt="" />
            </div>

            <div class="cardss-right">
              <div class="cardsss-right-left">
                <div class="cardssss-right-left-top">
                  <span>{{ item.description }}</span>
                  <div style="color: #2ea222; font-size: 16px; margin-top: 5px">
                    {{ $dict.getLabel('helpDeclarationStatus', item.status) }}
                  </div>
                </div>
              </div>

              <div class="cardees-right-right">{{ item.doTime }}</div>
            </div>

            <div class="lines"></div>
          </div>

          <div class="cardes-msg-top" v-if="item.doExplain">{{ item.doExplain }}</div>

          <div class="imgs">
            <img :src="e.url" alt="" v-for="(e, index) in item.files" :key="index"  @click="previewImage(item.files, e.url)" />
          </div>
        </div>
      </div>
    </div>

    <div class="fixedBtn" v-if="data.status == 0">
      <div class="status00">
        <div class="columns" @click="toContent(1)">
          <span class="hint">转交事件</span>
        </div>

        <div class="columns" @click="toContent(2)">
          <span class="hint">审核处理</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      data: {},
      id: '',
    }
  },
  onLoad(o) {
    this.$dict.load('helpDeclarationStatus')
    if (o.id) {
      this.id = o.id
      this.getDetail()
    }
  },
  methods: {
    getDetail() {
      this.$http.post(`/app/apphelpdeclarationinfo/queryDetailById?id=${this.id}`).then(res => {
        if(res.code == 0) {
          this.data = res.data
          this.list = res.data.reason.split(',')
        }
      })
    },
    preview(images, img) {
      uni.previewImage({
        urls: images.map(v => v.url),
        current: img
      })
    },
    // 转交 1 ， 审核处理 2
    toContent(status) {
      uni.navigateTo({ url: `./result?status=${status}&id=${this.id}` })
    },
  }
}
</script>

<style lang="scss" scoped>
.details {
  .user {
    height: 120px;
    padding: 26px 30px;
    box-sizing: border-box;
    display: flex;
    background: #FFF;
    .avatar {
      width: 80px;
      height: 80px;
      line-height: 80px;
      border-radius: 50%;
      background: #4E8EEE;
      text-align: center;
      color: #FFFFFF;
      font-size: 28px;
      margin-right: 16px;
    }

    .right {
      p {
        font-weight: 600;
        font-size: 32px;
        color: #333333;
      }
      div {
        color: #999999;
        font-size: 28px;
        margin-top: 8px;
      }
    }
  }

  .event_info {
    background: #FFFFFF;
    padding: 32px;
    box-sizing: border-box;
    .content {
      background: #FFFFFF;
    }
    .picture {
      margin-top: 32px;
      img {
        width: 220px;
        height: 220px;
        margin-right: 10px;
      }
    }
    .tags {
      margin-top: 20px;
      span {
        display: inline-block;
        margin-right: 16px;
        padding: 4px 8px;
        box-sizing: border-box;
        border-radius: 8px;
        color: #FFF;
        // margin-bottom: 16px;
      }
    }
  }

  .progress_info {
    background: #FFF;
    .item {
      padding: 32px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #DDDDDD;
      label {
        color: #999999;
      }
    }
    .item:first-child {
      border-top: none;
    }
    .items {
      padding: 32px;
      box-sizing: border-box;
      border-top: 1px solid #DDDDDD;
      p {
        color: #999999;
      }
      div {
        margin-top: 32px;
      }
    }
    .status0 {
      color: #FF883C
    }
    .status1 {
      color: #1AAAFF
    }
    .status2 {
      color: #42D784
    }
    .status3 {
      color: #FF4466
    }
  }

  .header-bottom {
    padding-bottom: 80px;
    background: #FFF;
    margin-top: 16px;

    .plan {
      padding: 0 32px;
      .nav {
        padding: 26px 0;
      }

      .cards {
        position: relative;
        padding-bottom: 80px;
        .cardss {
          display: flex;
          justify-content: space-between;

          .cardss-left {
            position: relative;
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            color: #fff;
            background: #197df0;
            border: 1px solid #dddddd;
            border-radius: 50%;
            font-size: 28px;
            z-index: 9;

            .avatarIcon {
              position: absolute;
              bottom: 0;
              right: 0;
              width: 38px;
              height: 38px;
            }
          }
          .cardss-right {
            width: calc(100% - 110px);
            display: flex;
            justify-content: space-between;
            .cardsss-right-left {
              .cardssss-right-left-top {
                width: 300px;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 32px;
              }
              .cardssss-right-left-bottom {
                margin-top: 10px;
                font-size: 28px;
                color: #666666;
              }
            }
            .cardees-right-right {
              font-size: 28px;
              color: #999999;
            }
          }
          .lines {
            position: absolute;
            top: 0;
            left: 40px;
            width: 4px;
            height: 100%;
            background: #eeeeee;
          }
        }
        .cardes-msg-top {
          font-size: 28px;
          color: #343d65;
          margin-top: 10px;
          margin-left: 110px;
        }

        .imgs {
          margin-top: 10px;
          margin-left: 110px;
          img {
            width: 136px;
            height: 136px;
            border-radius: 4px;
            margin-right: 12px;
          }
          img:nth-child(4n) {
            margin-right: 0;
          }
        }
      }
      .cards:last-child {
        .lines {
          width: 0;
          height: 0;
        }
      }
    }
  }

  .fixedBtn {
    background: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 999;
    .status00 {
      display: flex;

      .columns {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        padding: 28px 0;
        border-top: 1px solid #ddd;
        .hint {

          font-size: 32px;
          color: #333;
        }
      }
      .columns:last-child {
        border-left: 1px solid #ddd;
        background: #3975c6;
        .hint {
          font-size: 32px;
          color: #FFF;
        }
      }
    }
  }
}
</style>