王恒
2025-09-04 616e6be49d3f64f2397cb1b1c05d2c06df3db9a3
pages/message/details.vue
@@ -1,185 +1,201 @@
<template>
   <view>
      <u-navbar placeholder bgColor="#1171E0FF" leftIconColor="white" :autoBack="true">
         <template slot="center">
            <view style="color: white;">信息公示详情</view>
         </template>
      </u-navbar>
      <view class="donw-box"></view>
      <view class="page-main">
         <view class="wbox">
            <view class="item">
               <view class="k">
                  执法类型
               </view>
               <view class="v">
                  {{type}}
               </view>
            </view>
            <view class="item">
               <view class="k">
                  执法人
               </view>
               <view class="v">
                  {{msg.executeUser}}
               </view>
            </view>
            <view class="item">
               <view class="k">
                  执法部门
               </view>
               <view class="v">
                  {{msg.executeDeptName}}
               </view>
            </view>
            <view class="item">
               <view class="k">
                  企业
               </view>
               <view class="v">
                  {{msg.companyName}}
               </view>
            </view>
         </view>
         <view style="height: 20rpx;"></view>
         <view class="wbox">
            <view class="item">
               <view class="k">
                  执法主题
               </view>
               <view class="v">
                  {{msg.enforceReason}}
               </view>
            </view>
            <view class="item">
               <view class="k">
                  执法过程
               </view>
            </view>
            <view class="imgbox">
               <img v-for="(item,index) in img" :key="index" :src="item" class="more" alt="" @click="imgclick(item)" />
               <!-- <img src="/static/i01.png" class="more" @click="imgclick('/static/i01.png')" alt="" />
  <view>
    <u-navbar placeholder bgColor="#1171E0FF" leftIconColor="white" :autoBack="true">
      <template slot="center">
        <view style="color: white;">信息公示详情</view>
      </template>
    </u-navbar>
    <view class="donw-box"></view>
    <view class="page-main">
      <view class="wbox">
        <view class="item">
          <view class="k">
            检查方式
          </view>
          <view class="v">
            {{type}}
          </view>
        </view>
        <view class="item">
          <view class="k">
            执法人
          </view>
          <view class="v">
            {{msg.executeUser}}
          </view>
        </view>
        <view class="item">
          <view class="k">
            执法部门
          </view>
          <view class="v">
            {{msg.executeDeptName}}
          </view>
        </view>
        <view class="item">
          <view class="k">
            企业
          </view>
          <view class="v">
            {{msg.companyName}}
          </view>
        </view>
      </view>
      <view style="height: 20rpx;"></view>
      <view class="wbox">
        <view class="item">
          <view class="k">
            执法主题
          </view>
          <view class="v">
            {{msg.enforceReason}}
          </view>
        </view>
        <view class="item">
          <view class="k">
            执法过程
          </view>
        </view>
        <view class="imgbox">
          <img v-for="(item,index) in img" :key="index" :src="item" class="more" alt="" @click="imgclick(item)" />
          <!-- <img src="/static/i01.png" class="more" @click="imgclick('/static/i01.png')" alt="" />
               <img src="/static/i02.png" class="more" alt="" />
               <img src="/static/i03.png" class="more" alt="" />
               <img src="/static/i04.png" class="more" alt="" /> -->
            </view>
            <view class="item">
               <view class="k">
                  执法结果
               </view>
               <view class="v" style="color: #EB4746;">
                  {{msg.regionReason}}
               </view>
            </view>
            <view class="item">
               <view class="k">
                  执法时间
               </view>
               <view class="v">
                  {{msg.executeTime}}
               </view>
            </view>
         </view>
      </view>
   </view>
        </view>
        <view class="item">
          <view class="k">
            执法结果
          </view>
          <view class="v" style="color: #EB4746;">
            {{msg.regionReason}}
          </view>
        </view>
        <view class="item">
          <view class="k">
            执法时间
          </view>
          <view class="v">
            {{msg.executeTime}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
   import { order } from '@/api/index.js'
   import { getDicts } from '@/api/data.js'
   import { config } from '@/common/config'
   export default {
      data() {
         return {
            msg:{},
            type:'',
            img:[],
            baseUrl: config.baseUrl
         }
      },
      onLoad(options) {
         this.getdata(options.id)
      },
      methods: {
         getdata(id){
            order(id).then(val => {
               this.msg = val.data.data
               let arr = this.msg.regionImgs.split(",");
               for(let i = 0;i<arr.length;i++){
                  this.img.push(this.baseUrl+arr[i])
               }
               console.log(this.img)
               getDicts('enforce_type').then(val => {
                   const value = val.data.data.find(item => item.dictCode == this.msg.enforceType)
                   this.type = value.dictLabel
               })
            })
         },
         imgclick(url){
             uni.previewImage({
                 urls: [url]
             })
         }
      }
   }
  import {
    order
  } from '@/api/index.js'
  import {
    getDicts
  } from '@/api/data.js'
  import {
    config
  } from '@/common/config'
  export default {
    data() {
      return {
        msg: {},
        type: '',
        img: [],
        baseUrl: config.baseUrl
      }
    },
    onLoad(options) {
      this.getdata(options.id)
    },
    methods: {
      getdata(id) {
        order(id).then(val => {
          this.msg = val.data.data
          let arr = this.msg.regionImgs.split(",");
          for (let i = 0; i < arr.length; i++) {
            this.img.push(this.baseUrl + arr[i])
          }
          console.log(this.img)
          getDicts('enforce_type').then(val => {
            const value = val.data.data.find(item => item.dictCode == this.msg.enforceType)
            this.type = value.dictLabel
          })
        })
      },
      imgclick(url) {
        uni.previewImage({
          urls: [url]
        })
      }
    }
  }
</script>
<style>
   page{
      background: #F4F4F4;
   }
  page {
    background: #F4F4F4;
  }
</style>
<style lang="scss" scoped>
   .page-main{
      position: relative;
      top: -380rpx;
   }
   .donw-box{
      width: 100%;
      height: 380rpx;
      flex-shrink: 0;
      background: linear-gradient(180deg, #1171E0 42.5%, #F4F4F4 100%);
   }
   .wbox{
      background: #fff;
      border-radius: 5px;
      padding: 24rpx;
      box-sizing: border-box;
      margin: 0 32rpx;
      .item{
         display: flex;
         margin-bottom: 20rpx;
         font-size: 30rpx;
         .k{
            color: #7E8596;
            width: 30%;
         }
         .v{
            color: #202D44;
            width: 70%;
         }
      }
      .item:last-child{
         margin-bottom: 0;
      }
      .imgbox{
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         border-radius: 10rpx;
         img{
            width: 198rpx;
            height: 198rpx;
            margin-bottom: 20rpx;
         }
      }
   }
  .page-main {
    position: relative;
    top: -380rpx;
  }
  .donw-box {
    width: 100%;
    height: 380rpx;
    flex-shrink: 0;
    background: linear-gradient(180deg, #1171E0 42.5%, #F4F4F4 100%);
  }
  .wbox {
    background: #fff;
    border-radius: 5px;
    padding: 24rpx;
    box-sizing: border-box;
    margin: 0 32rpx;
    .item {
      display: flex;
      margin-bottom: 20rpx;
      font-size: 30rpx;
      .k {
        color: #7E8596;
        width: 30%;
      }
      .v {
        color: #202D44;
        width: 70%;
      }
    }
    .item:last-child {
      margin-bottom: 0;
    }
    .imgbox {
      // display: flex;
      // flex-wrap: wrap;
      // justify-content: space-between;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10rpx;
      border-radius: 10rpx;
      img {
        width: 198rpx;
        height: 198rpx;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
      }
    }
  }
</style>