storevisit-ui-mobile/src/views/AIImage/AIImageDetailPage.vue

<template>
  <div class="AIImageDetail">
    <p class="titleText">请主管勾选门店异常原因，并按对应解决方案尽快整改！</p>
    <div class="feedbackReason">
      <div class="result">
        <div class="title">
          <span style="color: red">*</span>
          <span>请核查并确认店招异常原因：</span>
        </div>
        <van-radio-group v-model="abnormalReason" :disabled="approveState == '1'">
          <van-radio :name="item.dictValue" v-for="item in AIResultOption">{{
            item.dictLabel
          }}</van-radio>
        </van-radio-group>
      </div>
      <div class="cause" v-if="detail.abnormalStoreSolutionImg">
        <div class="title">
          <span style="color: red">*</span>
          <span>请知悉异常店招对应解决方案，并尽快整改</span>
        </div>
        <div class="tipsImg">
          <img
            :src="detail.abnormalStoreSolutionImg"
            width="100%"
            @click="previewImgs(detail.abnormalStoreSolutionImg)" />
        </div>
      </div>
      <div class="cause">
        <div class="title">
          <span>反馈：</span>
        </div>
        <van-field
          v-model="causeMessageData"
          :disabled="approveState == '1'"
          rows="1"
          autosize
          type="textarea"
          placeholder="如ai识别错误、门店异常原因等，均可在此反馈，本部相关负责人会查看" />
      </div>
    </div>
    <div class="confirmBtn" v-if="approveState == '0'">
      <van-button type="info" @click="confirm">提交</van-button>
    </div>
  </div>
</template>
<script>
import { ImagePreview } from 'vant';
import { savePhotoApprove } from '@/api/AIImage';
export default {
  name: 'AIImageDetail',
  props: {
    detail: {
      type: Object,
    },
    approveState: {
      type: String,
      default: '0',
    },
    abnormalReason: {
      type: String,
      default: '1',
    },
    causeMessage: {
      type: String,
      default: '',
    },
    photoApproveId: {
      type: [String, Number],
      default: '',
    },
    AIResultOption: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      causeMessageData: '',
    };
  },
  activated() {
    this.causeMessageData = this.causeMessage;
  },
  methods: {
    previewImgs(val) {
      ImagePreview([val]);
    },
    confirm() {
      if (!this.abnormalReason) {
        this.$toast('请选择招异常原因');
        return;
      }
      this.toastLoading(0, '加载中...', true);
      savePhotoApprove({
        photoApproveId: this.photoApproveId, //	long	主键
        resultCorrect: this.abnormalReason, //	string	AI识别是否正确： 1 正确 0不正确
        reasonsSolutions: '',
        feedbackError: this.causeMessageData, //	string	反馈AI识别不正确
      }).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          this.$toast.loading({
            duration: 1000,
            message: '已反馈给本部',
            forbidClick: true,
            onClose: () => {
              this.onClickLeft();
            },
          });
        } else {
          this.$toast('提交失败');
        }
      });
    },
    onClickLeft() {
      this.$router.replace({
        path: '/AIImage',
      });
    },
  },
};
</script>