dvcp_v2_wxcp_app/library/project/biaopin/AppGridReview/Detail.vue

<template>
  <div class="Detail">
    <div class="header-top">
      <div class="avatars" v-if="data.name">{{ data.name.substring(data.name.length, data.name.length - 2) }}</div>
      <div class="right">
        <div class="names">{{ data.name }}的上报</div>
        <div class="times">{{ data.createTime }}</div>
        <!-- <span class="edit-btn" @click="toEdit()" v-if="data.eventStatus != 2 && data.eventStatus != 3">编辑</span> -->
      </div>
    </div>
    <div class="header-middle">
      <div class="titles">{{ data.content }}</div>
      <span class="status" :class="`status${data.status}`">{{$dict.getLabel('auditStatus', data.status)}}</span>
      <div class="card solid">
        <span class="card-left">所属网格</span>
        <span class="card-right">{{data.girdName}}</span>
      </div>
      <div class="card solid">
        <span class="card-left">类型</span>
        <span class="card-right">{{$dict.getLabel('wyGirdNewsType', data.type)}}</span>
      </div>
      <div class="card">
        <span class="card-left">地址</span>
      </div>
      <div class="card solid">
        <span class="card-right">{{data.address}}</span>
      </div>
      <div v-if="data.status != 0">
        <div class="card" v-if="data.examineOpinion">
          <span class="card-left">审批意见</span>
        </div>
        <div class="card solid" v-if="data.examineOpinion">
          <span class="card-right">{{data.examineOpinion}}</span>
        </div>
        <div class="card solid">
          <span class="card-left">审批人</span>
          <span class="card-right">{{data.examineUserName}}</span>
        </div>
        <div class="card solid">
          <span class="card-left">审批时间</span>
          <span class="card-right">{{data.examineTime}}</span>
        </div>
      </div>

      <div class="cards" v-if="data.files && data.files.length">
        <span class="card-left" style="color:#999">图片</span>
      </div>

      <img :src="item.url" alt="" v-for="(item, i) in data.files" :key="i" @click="previewImage(data.files, item.accessUrl)"/>
    </div>
    <div class="footer-btn" v-if="data.status == 0 && user.girdMemberId == data.girdMemberId">
      <div class="btn" @click="deletShow=true">删除</div>
    </div>
    <u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true"
      :show-title="false" @confirm="confirm"></u-modal>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'Detail',
  data() {
    return {
      data: {},
      id: '',
      selectList: [],
      deletShow: false,
    }
  },
  computed: {
    ...mapState(['user']),
  },
  onLoad(o) {
    this.id = o.id
    this.$dict.load(['wyGirdNewsType']).then(() => {
      this.getDetail()
    })
    
  },
  onShow() {
    document.title = '网格动态'
  },
  methods: {
    previewImage(images, img) {
      uni.previewImage({
        urls: images.map(v => v.url),
        current: img
      })
    },
    getDetail() {
      this.$http.post(`/app/appgirdnews/queryDetailById?id=${this.id}`).then((res) => {
        if (res?.data) {
          this.data = res.data
        }
      })
    },
    confirm() {
      this.$http.post(`/app/appgirdnews/delete?id=${this.id}`).then((res) => {
        if (res.code == 0) {
          uni.$emit('update')
          this.$u.toast('删除成功！')
          setTimeout(() => {
            uni.navigateBack()
          }, 500);
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
uni-page-body {
  height: 100%;
  padding-top: 26px;
}

.Detail {
  height: 100%;

  .header-top {
    background-color: #fff;
    display: flex;
    padding: 32px 32px 0;

    .avatars {
      width: 80px;
      height: 80px;
      line-height: 80px;
      background: #3975c6;
      border-radius: 50%;
      color: #fff;
      text-align: center;
      font-size: 28px;
      font-weight: 500;
      margin-right: 16px;
    }

    .right {
      .names {
        font-size: 32px;
        font-weight: 500;
      }

      .times {
        margin-top: 10px;
        font-size: 28px;
        color: #999999;
      }

      .edit-btn {
        position: absolute;
        color: #197df0;
        top: 32px;
        right: 32px;
        width: 150px;
        height: 44px;
        line-height: 44px;
        text-align: right;
      }
    }
  }

  .header-middle {
    padding: 0 32px 180px 32px;
    background: #fff;

    .titles {
      padding: 32px 0;
      line-height: 1.4;
      word-break: break-all;
      font-size: 40px;
      font-weight: 600;
    }

    .status {
      display: inline-block;
      margin-bottom: 14px;
      padding: 4px 8px;
      font-size: 26px;
      color: #fff;
      border-radius: 8px;
    }

    .status0 {
      background: #ff883c;
    }
    .status1 {
      background: #2EA222;
    }

    .status2 {
      background: #F46;
    }
    .status3 {
      background: #ff4466;
    }

    .card {
      display: flex;
      justify-content: space-between;
      padding: 34px 0;

      .card-left {
        width: 46%;
        font-size: 32px;
        color: #999999;
      }

      .card-right {
        font-size: 32px;
        word-break: break-all;
        padding-right: 16px;

        .u-icon {
          margin-left: 8px;
        }
      }
    }
    .solid {
      border-bottom: 1px solid #ddd;
    }

    // .card:last-child {
    //   border-bottom: none;
    // }

    .cards {
      padding: 34px 0;
    }

    img {
      width: 220px;
      height: 220px;
      margin: 0 8px 8px 0;
    }

    img:nth-of-type(3n) {
      margin-right: 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;
    }
  }
}
</style>