dvcp_v2_wxcp_app/library/project/saas/AppWalkask/detail.vue

<template>
  <div class="detail">
    <div class="header-top">
      <div class="hint">{{ data.title }}</div>

      <div class="walk-item">
        <span>走访对象：</span>
        <span class="info-value">
          {{ data.name }}
          <span v-if="data.labelList">
            <span class="tags" v-for="(item, index) in data.labelList" :key="index">{{ item }}</span>
          </span>
          
        </span>
      </div>

      <div class="walk-item" v-if="data.reality">
        <span>现实状态：</span>
        <span>{{ $dict.getLabel('realityStatus', data.reality) }} </span>
      </div>

      <div class="walk-item">
        <span>走访人员：</span>
        <span><AiOpenData v-if="data.createUserName" type="userName" :openid="data.createUserName" style="display: inline-block" /></span>
      </div>

      <div class="walk-item">
        <span>走访时间：</span>
        <span>{{ data.visitTime }}</span>
      </div>
    </div>

    <div class="header-middle">
      <div class="hint-con" v-if="data.description">{{ data.description }}</div>

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

<script>
export default {
  name: 'detail',
  components: {},
  props: {
    params: {},
  },
  data() {
    return {
      data: {},
      id: '',
    }
  },
  computed: {},
  onLoad(o) {
    this.id = o.id
    this.$dict.load('realityStatus', 'appSpecialTypeFive').then(() => {
      this.getDetail()
    })
  },
  onShow() {
    document.title = '走访详情'
  },
  mounted() {},
  methods: {
    getDetail() {
      this.$http.post(`/app/appvisitvondolence/queryDetailById?id=${this.id}`).then((res) => {
        if (res?.data) {
          this.data = res.data
          if (this.data.images) {
            this.data.images = JSON.parse(this.data.images || '[]')
            this.data.labelList = this.data.labels.split(',') || []
          }
        }
      })
    },

    previewImage(images, img) {
      uni.previewImage({
        urls: images.map((v) => v.url),
        current: img,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
uni-page-body {
  height: 100%;
}
.detail {
  height: 100%;
  background: #fff;

  .header-top {
    background: #3975c6;
    padding: 24px 32px 32px;

    .hint {
      font-size: 40px;
      font-weight: 500;
      color: #ffffff;
    }

    .walk-item {
      font-size: 28px;
      color: #d7e3f3;
      margin-top: 16px;
      .tags {
        display: inline-block;
        padding: 0 12px;
        height: 40px;
        border-radius: 4px;
        border: 1px solid #ffffff;
        margin: 0 8px 0 0;
      }
      .tags:nth-of-type(1) {
        margin-left: 8px;
      }
    }
  }

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

    .hint-con {
      font-size: 32px;
      color: #666666;
      line-height: 56px;
    }

    .imgs {
      margin: 32px 0 48px 0;

      img {
        width: 218px;
        height: 218px;
        margin-right: 16px;
      }

      img:nth-child(3n + 0) {
        margin-right: 0;
      }
    }
  }
  .info-value{
    display: inline-block;
    width: 540px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: text-top;
  }
}
</style>