获取验证码功能

yaolonglong

3 天以前 b5f084460e9e639358fbf91056a86be8d0a5c4b2

 pages/message/details.vue

@@ -1,22 +1,201 @@
<template>
   <view>
		
   </view>
  <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>
</template>

<script>
   export default {
      data() {
         return {
				
         }
      },
      methods: {
			
      }
   }
  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;
  }
</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;
      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>