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

<template>
  <div class="AIImageDetail" v-if="data">
    <van-nav-bar class="navBar" title="异常反馈" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <div class="message">
      <div class="storeTitle">
        <div class="storeName">{{ data.storeName }}</div>
        <div class="storeCode" style="margin-left: 5px; margin-top: 2px">
          (<span style="color: #0057ba; vertical-align: -1px">{{ data.storeCode }}</span
          >)
        </div>
      </div>
      <div class="item">
        <div class="label">门店类型：</div>
        <div class="value">{{ data.storeCategoryName }}</div>
      </div>
      <div class="item">
        <div class="label">地址：</div>
        <div class="value">{{ data.addressLine }}</div>
      </div>
      <div class="item">
        <div class="label">拜访人：</div>
        <div class="value">{{ data.visitUserNickName }}</div>
      </div>
      <div class="item">
        <div class="label">拜访时间：</div>
        <div class="value">{{ data.createTime }}</div>
      </div>
      <div class="item">
        <div class="label">拍摄类型：</div>
        <div class="value">{{ data.identifyType | filterType }}</div>
      </div>
      <div class="item" style="color: red">
        <div class="label">识别结果：</div>
        <div class="value">{{ data.unqualifiedReason }}</div>
      </div>
      <div class="item">
        <div class="label">业务员反馈AI识别不正确：{{ data.feedbackMessage || '未反馈' }}</div>
      </div>
      <div class="item" style="display: flex; justify-content: center">
        <van-image
          v-if="data.fileUrl"
          height="400px"
          :src="data.fileUrl"
          @click="previewImgs(data.fileUrl)"
          fit="contain">
          <template v-slot:loading>
            <van-loading type="spinner" size="40" />
          </template>
        </van-image>
      </div>
    </div>
    <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="data.abnormalStoreSolutionImg">
        <div class="title">
          <span style="color: red">*</span>
          <span>请知悉异常店招对应解决方案，并尽快整改</span>
        </div>
        <div class="tipsImg">
          <img
            :src="data.abnormalStoreSolutionImg"
            width="100%"
            @click="previewImgs(data.abnormalStoreSolutionImg)" />
        </div>
      </div>
      <div class="cause">
        <div class="title">
          <span>反馈：</span>
        </div>
        <van-field
          v-model="causeMessage"
          :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 { getPhotoApproveDetail, savePhotoApprove } from '@/api/AIImage';
import { getDictOption } from '@/api/index';
export default {
  name: 'AIImageDetail',
  data() {
    return {
      data: null,
      photoApproveId: null,
      abnormalReason: '1',
      causeTitle: '',
      causeMessage: '',
      approveState: '0',
      AIResultOption: [],
    };
  },
  filters: {
    filterType(val) {
      if (val == 1) {
        return '店招内容识别';
      } else if (val == 2) {
        return '门店代码识别';
      } else if (val == 3) {
        return '调色机识别';
      } else if (val == 4) {
        return '更换店招';
      }
    },
  },
  activated() {
    this.photoApproveId = this.$route.query.photoApproveId;
    this.getDeytail();
    // 获取店招异常原因字典
    getDictOption({}, 'feedback_error_msg').then((res) => {
      this.AIResultOption = res.data;
    });
  },
  mounted() {},
  methods: {
    getDeytail() {
      this.toastLoading(0, '加载中...', true);
      getPhotoApproveDetail({ photoApproveId: this.photoApproveId }).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          this.data = res.data;
          this.approveState = res.data.approveState; //反馈状态：0 未审批 1已审批
          if (this.approveState == '0') {
            // latestPhotoApprove 上次反馈内容 反显
            let latestPhotoApprove = res.data.latestPhotoApprove;
            if (latestPhotoApprove) {
              this.abnormalReason = latestPhotoApprove.resultCorrect || '1';
              this.causeMessage =
                latestPhotoApprove.reasonsSolutions || latestPhotoApprove.feedbackError;
              this.$dialog
                .confirm({
                  title: '系统提示',
                  message:
                    latestPhotoApprove.approveTime +
                    '已反馈该店拜访照异常原因及解决方案，此次拜访照仍异常，请及时跟进',
                  confirmButtonText: '确定',
                  showCancelButton: false,
                })
                .then(() => {});
            }
          } else {
            this.abnormalReason = res.data.resultCorrect || '1';
            this.causeMessage = res.data.reasonsSolutions || res.data.feedbackError;
          }
        }
      });
    },
    previewImgs(val) {
      ImagePreview([val]);
    },
    confirm() {
      this.toastLoading(0, '加载中...', true);
      savePhotoApprove({
        photoApproveId: this.photoApproveId, //	long	主键
        resultCorrect: this.abnormalReason, //	string	AI识别是否正确： 1 正确 0不正确
        reasonsSolutions: '',
        feedbackError: this.causeMessage, //	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>
<style lang="scss" scoped>
.AIImageDetail {
  .message {
    padding: 10px;
    background: #fff;
    .storeTitle {
      display: flex;
      font-size: 16px;
      font-weight: bold;
      padding: 5px 0;
    }
    .item {
      display: flex;
      font-size: 13px;
      padding: 3px 0;
      .label {
        /* width: 80px; */
        text-align: left;
      }
      .value {
        flex: 1;
      }
    }
  }
  .titleText {
    padding: 10px;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
  }
  .feedbackReason {
    padding: 10px;
    background: #fff;
    font-size: 16px;
    .title {
      padding: 8px 0;
    }
    .van-radio {
      padding: 5px 0 5px 10px;
    }
  }
  .confirmBtn {
    position: sticky;
    bottom: 0;
    padding-top: 20px;
    button {
      width: 100%;
      background-color: #1a77cc;
    }
  }
}
</style>