dvcp_v2_wxcp_app/library/project/qujing/AppPatrolReport/MediateContent.vue

<template>
  <div class="MediateContent">
    <div class="contents">
      <u-form :model="forms" ref="uForm" label-width="auto" :border-bottom="false">

        <u-form-item label="调解主体" prop="mediateAreaId" required right-icon="arrow-right" class="area">
          <AiAreaPicker :areaId="user.areaId" v-model="forms.mediateAreaId" :name.sync="forms.mediateAreaName" selectRoot>
            <img src="components/img/local-icon.png" alt="">
            <span class="label" v-if="forms.mediateAreaName">{{ forms.mediateAreaName }}</span>
            <span v-else class="color-999">请选择</span>
          </AiAreaPicker>
        </u-form-item>
        <div class="line"></div>

        <u-form-item label="调解员" prop="mediatePerson" required >
          <u-input type="text" v-model="forms.mediatePerson" placeholder="请输入"  input-align="right" />
        </u-form-item>
        <div class="line"></div>

        <u-form-item label="调解时间" prop="mediateDate" required right-icon="arrow-right">
          <u-input type="text" v-model="forms.mediateDate" placeholder="请选择" disabled @click="isShowDate=true" input-align="right" />
          <u-calendar v-model="isShowDate" @change="onDateChange" mode="date"></u-calendar>
        </u-form-item>
        <div class="line"></div>

        <u-form-item label="涉及金额" prop="mediateAmount" required >
          <u-input type="text" v-model="forms.mediateAmount" placeholder="请输入" input-align="right" />
        </u-form-item>
        <div class="line"></div>

        <u-form-item label="参加人" prop="mediateMember" required>
          <u-input type="text" v-model="forms.mediateMember" placeholder="请输入" input-align="right" />
        </u-form-item>
        <div class="line"></div>

        <u-form-item label="调处思路、措施及主要经过" prop="mediateInfo" required label-position="top" class="mediate-info">
          <u-input v-model="forms.mediateInfo" placeholder="请输入" type="textarea" auto-height height="100" maxlength="500"/>
        </u-form-item>

      </u-form>
    </div>

    <div class="btn" @click="confirm">
      <span>我已办结</span>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'MediateContent',
  components: {},
  props: {},
  data() {
    return {
      forms: {
        mediateAreaId: '',
        mediateAreaName: '',
        mediatePerson: '',
        mediateDate: '',
        mediateAmount: '',
        mediateMember: '',
        mediateInfo: ''
      },
      id: '',
      isShowDate: false,
    }
  },
  computed: {
    ...mapState(['user']),
  },
  onLoad(option) {
    this.id = option.id
    this.forms.mediateAreaId = this.user.areaId
    this.forms.mediateAreaName = this.user.areaName
  },
  onShow() {
    document.title = '我已办结'
  },
  methods: {
    onDateChange (e) {
      console.log(e)
      this.forms.mediateDate = e.result
    },

    confirm() {
      if(this.flag) return
      if (!this.forms.mediateAreaId) {
        return this.$u.toast('请选择调解主体')
      }
      if (!this.forms.mediatePerson) {
        return this.$u.toast('请输入调解员')
      }
      if (!this.forms.mediateDate) {
        return this.$u.toast('请选择调解时间')
      }
      if (!this.forms.mediateAmount) {
        return this.$u.toast('请输入涉及金额')
      }
      if (!this.forms.mediateMember) {
        return this.$u.toast('请输入参加人')
      }
      if (!this.forms.mediateInfo) {
        return this.$u.toast('请输入调处思路、措施及主要经过')
      }
      this.flag = true
      this.submit()
    },
    submit() { 
      var params = {...this.forms}
      params.id = this.id
      this.$http.post(`/app/appclapeventinfoqujing/finish`, {...this.forms, id: this.id, eventStatus: '3'}).then((res) => {
        if (res.code == 0) {
          this.$u.toast('办结成功！')
          uni.$emit('updateDeatil')
          uni.$emit('getListInit')
          setTimeout(() => {
            uni.navigateBack()
          }, 600)
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.MediateContent {
  height: 100%;

  .u-form-item__body {
    border-bottom: 1px solid #ddd;
  }

  .contents {
    padding-bottom: 140px;

    ::v-deep .u-form {

      .u-form-item {
        // padding: 0 45px !important;

        .u-form-item__body {
          .u-form-item--right__content__slot {
            padding-bottom: 0;

            .u-input {
              // text-align: right !important;
            }
          }
        }
      }
      

      .line {
        height: 24px;
        background: #f3f6f9;
      }

      .avatars {
        padding-bottom: 20px !important;

        .u-form-item__body {
          // .default {
          //   width: 160px;
          //   height: 160px;
          // }
        }
      }
    }
  }

  .mediate-info {
    padding-bottom: 20px !important;
    .u-form-item__body {
      border-bottom: none;
      // .u-form-item--right__content__slot {
      //   .u-input {
      //     text-align: left !important;
      //   }
      // }
    }
  }

  .area {
    .u-form-item--right__content__slot  {
      width: 100%;
      .AiAreaPicker {
        width: 100%;
        text-align: right;
        .color-999 {
          color: rgb(192, 196, 204);
        }
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background: #3975c6;
    padding: 34px 0;
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    color: #ffffff;
  }

  .right-span {
    display: inline-block;
    width: 100%;
    text-align: right;
  }
  ::v-deep .AiPagePicker {
    width: 100%;
    text-align: right;
  }
}
</style>