获取验证码功能

yaolonglong

3 天以前 b5f084460e9e639358fbf91056a86be8d0a5c4b2

 policy/reportDetails/reportDetails.vue

@@ -1,119 +1,213 @@
<template>
   <view class="page-box">
      <view class="box">
         <view class="form">
            <view class="form-item">
               <view class="label">执法主题</view>
               <view class="input">24年5月份消防突击检查</view>
            </view>
            <view class="form-item">
               <view class="label">执法对象</view>
               <view class="input">24年5月份消防突击检查</view>
            </view>
            <view class="form-item">
               <view class="label">执法时间</view>
               <view class="input">24年5月份消防突击检查</view>
            </view>
            <view class="form-item">
               <view class="label">执法类型</view>
               <view class="input">24年5月份消防突击检查</view>
            </view>
            <view class="form-item">
               <view class="label">执法人员</view>
               <view class="input">24年5月份消防突击检查</view>
            </view>
            <view class="form-item">
               <view class="label">执法部门</view>
               <view class="input">24年5月份消防突击检查</view>
            </view>
         </view>
      </view>
      <view class="box">
         <view class="form-input">
            <view class="form-input-item">
               <view class="form-label require">执法结果</view>
               <u-textarea count v-model="form.reasoon" maxlength="500"></u-textarea>
            </view>
            <view class="form-input-item">
               <view class="form-label require">执法照片</view>
               <view>
                  <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                     :maxCount="10"></u-upload>
               </view>
            </view>
         </view>
      </view>
      <view class="down">
         <view class="button">
            上报记录
         </view>
      </view>
   </view>
</template>

<script>
   export default {
      data() {
         return {
            form: {
               reasoon: ''
            },
            fileList1: []
         }
      },
      methods: {
         // 删除图片
         deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1)
         },
         // 新增图片
         async afterRead(event) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file)
            let fileListLen = this[`fileList${event.name}`].length
            lists.map((item) => {
               this[`fileList${event.name}`].push({
                  ...item,
                  status: 'uploading',
                  message: '上传中'
               })
            })
            for (let i = 0; i < lists.length; i++) {
               const result = await this.uploadFilePromise(lists[i].url)
               let item = this[`fileList${event.name}`][fileListLen]
               this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                  status: 'success',
                  message: '',
                  url: result
               }))
               fileListLen++
            }
         },
         uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
               let a = uni.uploadFile({
                  url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
                  filePath: url,
                  name: 'file',
                  formData: {
                     user: 'test'
                  },
                  success: (res) => {
                     setTimeout(() => {
                        resolve(res.data.data)
                     }, 1000)
                  }
               });
            })
         },
      }
   }
</script>
<style>
   page {
      background-color: #F4F4F4;
   }
</style>
<style lang="scss" scoped>
   @import "./reportDetails.scss";
<template>

  <view class="page-box">

    <view class="box">

      <view class="form">

        <view class="form-item">

          <view class="label">执法主题</view>

          <view class="input">{{details.enforceReason}}</view>

        </view>

        <view class="form-item">

          <view class="label">执法对象</view>

          <view class="input">{{details.companyName}}</view>

        </view>

        <view class="form-item">

          <view class="label">执法时间</view>

          <view class="input">{{details.planTime || details.planMonth || ''}}</view>

        </view>

        <view class="form-item">

          <view class="label">检查方式</view>

          <view class="input">{{enforceType}}</view>

        </view>

        <view class="form-item">

          <view class="label">执法人员</view>

          <view class="input">{{details.executeUser}}</view>

        </view>

        <view class="form-item">

          <view class="label">执法部门</view>

          <view class="input">{{details.executeDeptName}}</view>

        </view>

      </view>

    </view>

    <view class="box">

      <view class="form-input">

        <view class="form-input-item" style="margin-bottom: 40rpx;">

          <view class="form-label require" style="margin-bottom: 40rpx;">执法结果</view>

          <view>

            <u-radio-group v-model="form.regionStatus">

              <u-radio shape="circle" label="正常" name="0"></u-radio>

              <u-radio shape="circle" label="待整改" name="1"></u-radio>

            </u-radio-group>

          </view>

        </view>

        <view class="form-input-item">

          <view class="form-label require">执法结果说明</view>

          <u-textarea placeholder="请输入..." count v-model="form.regionReason" maxlength="500"></u-textarea>

        </view>



        <!-- 是否创建整改计划 -->

        <view class="form-input-item" style="margin-bottom: 40rpx;">

          <view class="form-label require" style="margin-bottom: 40rpx;">是否创建整改计划</view>

          <view>

            <u-radio-group v-model="isRectify" @change="changeRectify">

              <u-radio shape="circle" label="是" :name="1"></u-radio>

              <u-radio shape="circle" label="否" :name="0"></u-radio>

            </u-radio-group>

          </view>

        </view>

        <!-- 整改时间 -->

        <view v-if="isRectify == 1" class="form-input-item" style="margin-bottom: 40rpx;">

          <view class="form-label require" style="margin-bottom: 40rpx;">整改计划时间</view>

          <view class="form-input-content" @click="showTimeFun">

            <input type="text" placeholder="请选择整改计划时间" disabled v-model.trim="form.planTime" />

            <u-icon name="arrow-right"></u-icon>

          </view>

        </view>



        <view class="form-input-item">

          <view class="form-label require">执法照片</view>

          <view>

            <view class="show-hint">可上传9张图，单张不得超过10M</view>

          </view>

          <view>

            <uploadImage ref="uploadImage"></uploadImage>

          </view>

        </view>

      </view>

    </view>

    <view class="down">

      <view class="button" @click="startReport">

        上报结果

      </view>

    </view>



    <yt-dateTimePicker ref="myPicker" @submit="confirmTime" :time-init="timeInit" :start-year="year" :startMonth="month"

      :time-hide="[true, true, true, true, false, false]" />

  </view>

</template>



<script>

  import uploadImage from '@/policy/components/upload.vue'

  import {

    orderDetails,

    orderUpd

  } from '@/api/policy.js'

  import {

    getDicts

  } from '@/api/data.js'

  export default {

    components: {

      uploadImage

    },

    data() {

      return {

        form: {

          regionReason: '',

          regionStatus: '0',

          planTime: null, // 整改计划时间

        },

        fileList1: [],

        details: {},

        enforceType: "",

        timeInit: '',

        planTimeStr: '',

        isRectify: 0, // 是否创建整改

      }

    },

    onLoad(options) {

      this.orderDetails(options.id)

    },

    methods: {

      changeRectify(e) {

        console.log(e)

        if (e == 0) {

          this.form.planTime = null

          this.timeInit = ''

          this.planTimeStr = ''

        }

      },



      // 获取执法类型枚举

      getDicts() {

        getDicts('enforce_type').then(val => {

          if (val.data.data) {

            this.enforceType = val.data.data.find(item => item.dictCode == this.details.enforceType).dictLabel

          }

        })

      },

      // 获取执法单详情

      orderDetails(id) {

        orderDetails({

          orderId: id

        }).then(val => {

          this.details = val.data.data

          this.getDicts()

        })

      },

      // 上报执行结果

      startReport() {

        if (!this.form.regionReason) {

          uni.showToast({

            title: '请填写执法结果',

            icon: 'none'

          })

          return

        }

        const image = this.$refs.uploadImage.imageList

        if (!image.length) {

          uni.showToast({

            title: '请上传执法图片',

            icon: 'none'

          })

          return

        }

        this.details.regionReason = this.form.regionReason

        this.form.regionImgs = image.join()

        this.form.orderId = this.details.orderId

        orderUpd(this.form).then(val => {

          if (val.data.code == 200) {

            uni.showToast({

              title: '上报成功',

              icon: 'none'

            })

            setTimeout(() => {

              uni.navigateBack()

            }, 500)

          }

        })

      },



      showTimeFun() {

        this.$refs.myPicker.show();

      },



      confirmTime(e) {

        this.form.planTime = e.year + '-' + e.month + '-' + +e.day + ' ' + e.hour + ":" + "00:00"

        this.planTimeStr = e.year + '-' + e.month + '-' + +e.day + ' ' + e.hour + ":" + "00"

        this.timeInit = this.$u.timeFormat(new Date(this.planTimeStr), 'yyyy-mm-dd hh:MM')

      },

    }

  }

</script>

<style>

  page {

    background-color: #F4F4F4;

  }

</style>

<style lang="scss" scoped>

  @import "./reportDetails.scss";



  ::v-deep .u-radio {

    margin-right: 80rpx;

  }



  .form-input-content {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: #F4F4F4;

    border-radius: 12rpx;

    padding: 10rpx 20rpx;

    box-sizing: border-box;

  }

</style>