dvcp_v2_wechat_app/src/project/wuxi/AppPhotoReport/PhotoDetail.vue

<template>
  <div class="photo-detail">
    <AiGroup noBorder>
      <h2>{{ info.content }}</h2>
      <div class="status-name" :class="detailStatus.cls" v-text="detailStatus.label"/>
    </AiGroup>
    <AiGroup description noBorder labelColor="#999">
      <AiItem label="事件来源" :value="$dict.getLabel('residentEventSource', info.eventSource)"/>
      <AiItem label="事件类型" :value="info.groupName"/>
      <AiItem label="所属网格" :value="info.girdName"/>
      <AiItem label="上报时间" :value="info.createTime"/>
      <AiItem label="照片" top-label>
        <div class="flex wrap">
          <image class="fill imageItem" v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
        </div>
        <span v-if="!info.files.length">暂无照片</span>
      </AiItem>
    </AiGroup>
    <u-gap height="24"/>
    <AiGroup title="处理详情" v-if="info.eventStatus > 1" description noBorder labelColor="#999">
      <AiItem label="处理结果" top-label :value="result.doExplain"/>
      <AiItem label="照片" top-label>
        <div class="flex wrap">
          <image class="fill imageItem" v-for="(item, index) in result.files" @click="preview(item.url)" :key="index" :src="item.url"/>
        </div>
        <span v-if="!result.files.length">暂无照片</span>
      </AiItem>
    </AiGroup>
    <u-gap height="24"/>
    <u-tabs :list="[{name:'办理进度'},{name:'我的评价'}]" :current="currentTab" @change="v=>currentTab=v"/>
    <u-gap height="24"/>
    <AiGroup noBorder v-if="currentTab=='0'">
      <AiStep v-for="(item,i) in process" :key="item.id" :index="i">
        <div class="flex start">
          <div class="fill stepTitle" v-text="item.systemExplain"/>
          <div class="color-999 mar-r32 stepTime" v-text="item.doTime"/>
        </div>
        <div v-if="item.doExplain" class="stepContent mar-t8" v-text="item.doExplain"/>
        <u-gap height="48"/>
      </AiStep>
    </AiGroup>
    <AiEvaluation v-if="currentTab=='1'" :bid="info.id" type="show"/>
    <AiEvaluation v-if="info.eventStatus > 1" v-model="evaluation" class="fixed-bottom bg-fff" :bid="info.id">
      <div class="bottomBtn">去评价</div>
    </AiEvaluation>
  </div>
</template>

<script>
export default {
  appName: "事件上报详情",
  data() {
    return {
      info: {},
      result: {},
      currentTab: 0,
      evaluation: {}
    }
  },
  computed: {
    detailStatus: v => {
      const status = !v.evaluation.id ? v.info.eventStatus : 'evaluation'
      return {
        cls: 'status-' + status,
        label: !v.evaluation.id ? v.$dict.getLabel('clapEventStatus', v.info.eventStatus) : "已评价"
      }
    },
    process() {
      const list = this.info.processList
      if (this.evaluation.id) {
        const {id, createUserName, score, createTime: doTime, rateText: doExplain} = this.evaluation
        list.splice(0, 0, {
          id, doTime, doExplain,
          systemExplain: `${createUserName}完成评价 (${score}星评价)`
        })
      }
      return list
    }
  },
  onShow() {
    this.getInfo()
  },
  onLoad(query) {
    this.getInfo(query.id)
    this.$dict.load(['clapEventStatus', 'residentEventSource'])
  },
  methods: {
    getInfo(id = this.info.id) {
      this.$loading()
      this.$instance.post(`/app/appresidentreportinfo/queryDetailById?id=${id}`).then(res => {
        if (res?.data) {
          this.info = res.data
          if (res.data.eventStatus > 1) {
            this.result = res.data.processList[0]
          }
        }
      }).finally(() => this.$hideLoading())
    },
    previewResult(url) {
      uni.previewImage({
        urls: this.result.files.map(v => v.url),
        current: url
      })
    },

    preview(url) {
      uni.previewImage({
        urls: this.info.files.map(v => v.url),
        current: url
      })
    }
  }
}
</script>

<style lang="scss">
.photo-detail {
  padding: 32px 0 160px;
  margin-bottom: 60px;
  background: #fff;

  h2 {
    line-height: 1.3;
    margin-bottom: 26px;
    color: #333333;
    text-align: justify;
    font-size: 40px;
  }

  ::v-deep.stepTitle {
    min-height: 44px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 32px;
  }

  .stepTime {
    line-height: 44px;
  }

  .stepContent {
    color: #343D65;
  }

  .status-name {
    width: 96px;
    height: 44px;
    line-height: 44px;
    margin-bottom: 20px;
    text-align: center;
    background: #FF883C;
    color: #fff;
    font-size: 26px;
    border-radius: 8px;

    &.status-1, &.status-evaluation {
      background: #1AAAFF;
    }

    &.status-2 {
      background: #42D784;
    }

    &.status-3 {
      background: #FF4466;
    }
  }

  .imageItem {
    min-width: 30%;
    height: 30vw;
    flex-shrink: 0;
    margin-right: 16px;
    margin-bottom: 16px;

    &:nth-of-type(3n) {
      margin-right: 0;
    }
  }
}
</style>