107 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			107 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<template>
 | 
						||
  <div class="Detail">
 | 
						||
    <div class="header-top">
 | 
						||
      <div class="titles">{{ data.title }}</div>
 | 
						||
 | 
						||
      <div class="titles-bottom">
 | 
						||
        <span>发布单位:</span>
 | 
						||
        <span>{{ data.publishUnitName }}</span>
 | 
						||
      </div>
 | 
						||
    </div>
 | 
						||
 | 
						||
    <div class="header-middle">
 | 
						||
      <span class="contsnts">{{ data.content }}</span>
 | 
						||
 | 
						||
      <div class="imgs">
 | 
						||
        <img :src="item.url" alt="" v-for="(item, i) in data.images" :key="i" @click="previewImage(data.images, item.url)" />
 | 
						||
      </div>
 | 
						||
    </div>
 | 
						||
  </div>
 | 
						||
</template>
 | 
						||
 | 
						||
<script>
 | 
						||
export default {
 | 
						||
  name: 'Detail',
 | 
						||
  components: {},
 | 
						||
  props: {},
 | 
						||
  data() {
 | 
						||
    return {
 | 
						||
      data: [],
 | 
						||
      id: '',
 | 
						||
    }
 | 
						||
  },
 | 
						||
  computed: {},
 | 
						||
  watch: {},
 | 
						||
  onLoad(o) {
 | 
						||
    this.id = o.id
 | 
						||
    this.getDetail()
 | 
						||
  },
 | 
						||
  mounted() {},
 | 
						||
  methods: {
 | 
						||
    getDetail() {
 | 
						||
      this.$http.post(`/app/appmininotice/queryDetailById?id=${this.id}`).then((res) => {
 | 
						||
        if (res?.data) {
 | 
						||
          this.data = res.data
 | 
						||
          if (res.data.images) {
 | 
						||
            this.data.images = JSON.parse(res.data.images || '[]')
 | 
						||
          }
 | 
						||
        }
 | 
						||
      })
 | 
						||
    },
 | 
						||
    previewImage (images, img) {
 | 
						||
      uni.previewImage({
 | 
						||
        urls: images.map(v => v.url),
 | 
						||
        current: img
 | 
						||
      })
 | 
						||
    },
 | 
						||
  },
 | 
						||
}
 | 
						||
</script>
 | 
						||
 | 
						||
<style scoped lang="scss">
 | 
						||
uni-page-body {
 | 
						||
  height: 100%;
 | 
						||
}
 | 
						||
.Detail {
 | 
						||
  height: 100%;
 | 
						||
  padding: 0 32px;
 | 
						||
  background: #fff;
 | 
						||
  .header-top {
 | 
						||
    padding: 40px 0 32px 0;
 | 
						||
    .titles {
 | 
						||
      font-size: 48px;
 | 
						||
      font-weight: 600;
 | 
						||
    }
 | 
						||
 | 
						||
    .titles-bottom {
 | 
						||
      margin-top: 16px;
 | 
						||
      font-size: 30px;
 | 
						||
      color: #999999;
 | 
						||
      .to-left {
 | 
						||
        margin-left: 32px;
 | 
						||
      }
 | 
						||
    }
 | 
						||
  }
 | 
						||
 | 
						||
  .header-middle {
 | 
						||
    padding: 32px 0;
 | 
						||
    .contsnts {
 | 
						||
      font-size: 36px;
 | 
						||
      line-height: 1.5;
 | 
						||
      word-break: break-all;
 | 
						||
    }
 | 
						||
    .imgs {
 | 
						||
      margin-top: 32px;
 | 
						||
      img {
 | 
						||
        width: 224px;
 | 
						||
        height: 218px;
 | 
						||
        margin-right: 8px;
 | 
						||
      }
 | 
						||
      img:nth-child(3n) {
 | 
						||
        margin-right: 0;
 | 
						||
      }
 | 
						||
    }
 | 
						||
  }
 | 
						||
}
 | 
						||
</style>
 |