dvcp_v2_wxcp_app/src/pages/snapshot/handleResult.vue

<template>
  <div class="report-wrapper">
    <div class="report-form">
      <div class="form-item">
        <div class="form-item__left" shrink>
          <i>*</i>
          <label>上报类型</label>
        </div>
        <div class="form-item__right">
          <ai-select :list="reportTypes" @data="selectReportType"/>
        </div>
      </div>
      <div v-if="reportType" class="form-item">
        <div class="form-item__left" shrink>
          <i>*</i>
          <label>事件类型</label>
        </div>
        <div class="form-item__right">
          <ai-select :list="eventTypes" :value="eventType" @data="selectEventType"/>
        </div>
      </div>

      <div class="form-item" v-if="!!eventType">
        <div class="form-item__left">
          <i>*</i>
          <label>信用积分</label>
        </div>
        <div class="form-item__right">
          <span class="score"> {{ integralType }}{{ integralScore }}</span>
        </div>
      </div>

      <div class="form-area">
        <div class="form-area__top">
          <i>*</i>
          <label>处理结果</label>
        </div>
        <textarea
            placeholder="请输入处理结果描述（200字以内）"
            :maxlength="200"
            v-model="explain"
        ></textarea>
      </div>
      <div class="form-area">
        <div class="form-area__top">
          <!--          <i>*</i>-->
          <label>图片上传（最多9张）</label>
        </div>
        <div class="uploader">
          <ai-uploader
              :limit="9"
              multiple
              @data="e=>files.push(e.file)"
              @change="e=>files = e"
          ></ai-uploader>
        </div>
      </div>
    </div>
    <div bottom>
      <u-button type="primary" @click="handleSubmit">提交</u-button>
    </div>
    <back></back>
  </div>
</template>

<script>
import AiUploader from '../../components/AiUploader'
import Back from '../../components/AiBack'
import AiSelect from '../../components/AiSelect'

export default {
  name: 'handleResult',
  computed: {
    eventTypes() {
      return this.eventTypeList.map(e => ({value: e.id, label: e.ruleName}))
    },
    reportTypes() {
      return this.$dict.getDict('integralDetailType').map(e => ({value: e.dictValue, label: e.dictName}))
    },
    integralScore() {
      return (
          this.eventTypeList?.find(e => e.id == this.eventType)?.integral || 0
      )
    },
    integralType() {
      return this.integralScore == 0
          ? ''
          : this.eventTypeList?.find(e => e.id == this.eventType)?.integralType ==
          0
              ? ''
              : '+'
    }
  },
  data() {
    return {
      eventType: '',//事件类型
      reportType: '',//上报类型
      dictList: [],
      eventTypeList: [],
      id: null,
      reportIndex: null,
      files: [],
      explain: ''
    }
  },
  components: {AiSelect, Back, AiUploader},
  onLoad(opt) {
    if (opt) {
      let {id, reportType} = opt
      this.id = id
      this.reportType = reportType
      this.$dict.load(['integralDetailType']).then(() => {
        this.getDetailTypes(reportType)
      })
    }
  },
  methods: {
    selectEventType(selecteds) {
      this.eventType = selecteds?.[0]?.value
    },
    selectReportType(selecteds) {
      this.reportType = ""
      this.$nextTick(() => {
        this.reportType = selecteds?.[0]?.value
        this.eventType = ""
        this.getDetailTypes(this.reportType)
      })
    },
    getDetailTypes(classification) {
      this.$http.post(`/app/appvillagerintegralrule/listForWx`, null, {
        params: {classification, current: 1, size: 999, ruleStatus: 1}
      }).then(res => {
        if (res?.data) {
          this.eventTypeList = res.data.records
        }
      })
    },
    handleSubmit() {
      if (!this.reportType) {
        return this.$u.toast("请选择上报类型")
      }
      if (!this.eventType) {
        return this.$u.toast("请选择事件类型")
      }
      if (this.explain == '') {
        return this.$u.toast("请填写处理结果")
      }
      this.$http.post(`/app/appreportatwillinfo/handle`, {
        handleFiles: this.files,
        reportType: this.reportType,
        ruleId: this.eventType,
        handleResult: this.explain,
        id: this.id
      })
      .then(res => {
        if (res?.code == 0) {
          uni.navigateTo({
            url: '/pages/snapshot/components/handlePage/handlePage'
          })
        }
      })
      .catch(e => {
        this.$u.toast(e || '网络异常')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.report-wrapper {
  min-height: 100%;
  padding-bottom: 112px;
  box-sizing: border-box;
  background-color: #f3f6f9;

  .report-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 112px;
    line-height: 112px;
    text-align: center;
    color: #ffffff;
    font-size: 34px;
    font-weight: 600;
    background: #135ab8;
  }
}

.phone {
  text-align: right;
}

.address {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

::v-deep .picker {
  display: flex;
  align-items: center;
  height: 112px;
  line-height: 112px;
  font-size: 32px;

  span {
    position: relative;
    top: -10px;
    font-size: 32px;
  }
}

::v-deep .picker .AiArea {
  display: flex;
  align-items: center;
  height: 112px;
  line-height: 112px;
  background-color: #fff !important;
}

.form-area {
  margin-bottom: 16px;
  padding: 34px 32px 34px 32px;
  background: #fff;

  .form-area__top {
    display: flex;
    align-items: center;
    margin-bottom: 32px;

    i {
      margin-right: 4px;
      color: #ff4466;
    }

    label {
      color: #333333 !important;
      font-size: 32px;
    }
  }

  textarea {
    width: 100%;
    height: 140px;
    padding-left: 16px;
  }

  .uploader {
    padding-left: 16px;
  }
}

.form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 112px;
  margin-bottom: 16px;
  padding: 0 32px 0 32px;
  background: #fff;

  .form-item__left {
    display: flex;
    align-items: center;

    i {
      margin-right: 4px;
      color: #ff4466;
    }

    label {
      color: #333333 !important;
      font-size: 32px;
    }
  }

  .form-item__right {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 16px;

    span {
      color: #999999;
    }

    .score {
      font-size: 34px;
      font-weight: 600;
      color: #e6736e;
    }
  }

  ::v-deep .AiSelect {
    .display {
      justify-content: flex-end;
    }

    .selectedLabel {
      text-align: right;
    }
  }
}
</style>