qa-prevention-xgf-app/pages/mine/feedback/feedback.vue

<template>
  <view class="">
    <view class="feedback">
      <u--input v-model="form.FEEDBACK_TITLE" placeholder="请输入标题" border="bottom" clearable></u--input>
      <view class="feedback-type">
        <view class="item" v-for="(item, index) in feedbackType" :key="index"
              :class="{active:item.value === form.FEEDBACK_TYPE}" @click="form.FEEDBACK_TYPE = item.value">
          <view style="margin-left: 70rpx; margin-top: 20rpx;">
            <u--image :src="item.img" width="40rpx" height="38rpx"></u--image>
          </view>
          <view style="margin-top: -40rpx;">{{ item.label }}</view>
        </view>
      </view>
      <view class="title">我要反馈</view>
      <u--textarea v-model="form.FEEDBACK_CONTENT" maxlength="255" height="100" count confirmType="done"
                   placeholder="请输入问题描述"></u--textarea>
      <view class="title">
        <text>请提供相关问题的截图或照片</text>
      </view>
      <u-upload ref="aaa" capture="album" uploadIcon="plus" :fileList="form.fileList" @afterRead="afterRead"
                @delete="deletePic" name="1" multiple :maxCount="4"></u-upload>
      <u-button type="primary" text="提交" @click="$u.debounce(submitFeedback, 1000, true)"></u-button>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import {setFeedbackAdd, setFeedbackUpload} from "../../../api";

export default {
  data() {
    return {
      form: {
        FEEDBACK_TITLE: '',
        FEEDBACK_TYPE: '其他',
        FEEDBACK_CONTENT: '',
        fileList: [],
        urlList: [],
      },
      feedbackType: [{
        label: '系统错误',
        value: '1',
        img: require('../../../static/images/fico1.png'),
      },
        {
          label: '界面优化',
          value: '2',
          img: require('../../../static/images/fico2.png'),
        },
        {
          label: '设计缺陷',
          value: '3',
          img: require('../../../static/images/fico3.png'),
        },
        {
          label: '性能问题',
          value: '4',
          img: require('../../../static/images/fico4.png'),
        },
        {
          label: '其他问题',
          value: '9',
          img: require('../../../static/images/fico5.png'),
        },
      ]
    }
  },
  methods: {
    // 新增图片
    afterRead(event) {
      this.form.fileList = [...this.form.fileList, ...event.file]
    },
    // 删除图片
    deletePic(event) {
      this.form.fileList = this.form.fileList.filter(item => item.url !== event.file.url)
    },
    // 提交反馈
    submitFeedback() {
      if (!this.form.FEEDBACK_TITLE) {
        this.$refs.uToast.warning('为了更加方便我们排查，请输入标题')
        return
      }
      if (!this.form.FEEDBACK_CONTENT) {
        this.$refs.uToast.warning('为了更加方便我们排查，请输入问题描述')
        return
      }
      if (this.form.fileList.length === 0) {
        this.$refs.uToast.warning('为了更加方便我们排查，请上传问题截图或照片')
        return
      }
      let PromiseArr = [];
      for (let i = 0; i < this.form.fileList.length; i++) {
        PromiseArr.push(this.fnSetFeedbackUpload(this.form.fileList[i].url))
      }
      Promise.all(PromiseArr).then(async () => {
        await setFeedbackAdd({
          ...this.form,
          USER_ID: this.$store.getters.getUserInfo.USER_ID,
          FEEDBACK_IMG: this.form.urlList.join(';')
        })
        this.$refs.uToast.show({
          message: '反馈成功',
          type: 'success',
          complete: () => {
            uni.switchTab({
              url: '/pages/mine/index/index'
            })
          }
        })
      }).catch(() => {
        this.$refs.uToast.show({
          message: '反馈失败',
          type: 'error',
        })
      })
    },
    async fnSetFeedbackUpload(filePath) {
      let resData = await setFeedbackUpload({
        name: 'FFILE',
        filePath,
      })
      this.form.urlList.push(resData.imgPath)
      return resData
    }
  },
}
</script>

<style lang="scss" scoped>
.feedback {
  padding: 40rpx;
  background-color: #fff;

  .title {
    font-weight: bold;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    color: $uni-text-color-placeholder;
    font-size: 30rpx;

    &:first-child {
      margin-top: 0;
    }
  }

  .feedback-type {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20rpx;
    margin-top: 20rpx;


    .item {
      padding: 10rpx;
      border-radius: 10rpx;
      margin-top: 10rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
      background-color: #f6f7fb;
      text-align: center;
      font-size: 30rpx;
      color: #9fa7bc;
      width: 207rpx;
      height: 143rpx;
      box-sizing: border-box;
      line-height: 143rpx;
      text-align: center;

      &.active {
        background-color: #3c9cff;
        color: #fff;
      }
    }
  }

  ::v-deep {
    .u-upload__wrap__preview__image {
      width: 146rpx !important;
      height: 146rpx !important;
    }
  }
}

.title {
  font-size: 32rpx;
  color: #333;
}
</style>