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

<template>
  <div class="AIImageDetail">
    <van-nav-bar class="navBar" title="异常反馈" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <div class="message" v-if="data">
      <div class="storeTitle">
        <div class="storeName">{{ data.storeName }}</div>
        <div class="storeCode">
          (<span style="color: #0057ba">{{ 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.approveTime }}</div>
      </div>
      <div class="item">
        <div class="label">拍摄类型：</div>
        <div class="value">{{ data.identifyType | filterType }}</div>
      </div>
      <div class="item">
        <div class="label">识别结果：</div>
        <div class="value">{{ data.cheatType }}</div>
      </div>
      <p>业务员反馈AI识别不正确：</p>
      <div class="item">
        <van-image
          width="100%"
          height="360"
          :src="data.fileUrl"
          @click="previewImgs(data.fileUrl)" />
      </div>
    </div>
    <p class="titleText">请主管了解情况后回复原因及解决方案</p>
    <div class="feedbackReason">
      <div class="result">
        <div class="title">
          <span style="color: red">*</span>
          <span>AI识别是否正确</span>
        </div>
        <van-radio-group v-model="AIResult">
          <van-radio name="1">正确</van-radio>
          <van-radio name="0">不正确</van-radio>
        </van-radio-group>
      </div>
      <div class="cause">
        <div class="title">
          <span style="color: red">*</span>
          <span>{{ causeTitle }}</span>
        </div>
        <van-field
          v-model="causeMessage"
          rows="1"
          autosize
          type="textarea"
          :placeholder="'请输入' + causeTitle" />
      </div>
    </div>
    <div class="confirmBtn"><van-button type="info" @click="confirm">提交</van-button></div>
  </div>
</template>
<script>
import { ImagePreview } from 'vant';
import { getPhotoApproveDetail, savePhotoApprove } from '@/api/AIImage';
export default {
  name: 'AIImageDetail',
  data() {
    return {
      data: null,
      photoApproveId: null,
      AIResult: '1',
      causeTitle: '',
      causeMessage: '',
    };
  },
  watch: {
    AIResult: {
      handler(val) {
        if (val == 1) {
          this.causeTitle = '原因及解决方案';
        } else {
          this.causeTitle = '反馈不准确原因';
        }
        this.causeMessage = '';
      },
      immediate: true,
    },
  },
  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();
  },
  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.$dialog
            .confirm({
              title: '系统提示',
              message:
                res.data.approveTime +
                '时间已反馈该店拜访照异常原因及解决方案，此次拜访照仍异常，请及时跟进',
              confirmButtonText: '确定',
              showCancelButton: false,
            })
            .then(() => {});
        }
      });
    },
    previewImgs(val) {
      ImagePreview([val]);
    },
    confirm() {
      if (!this.causeMessage) {
        this.$toast('请输入' + this.causeTitle);
        return;
      }
      savePhotoApprove({
        photoApproveId: this.photoApproveId, //	long	主键
        resultCorrect: this.AIResult, //	string	AI识别是否正确： 1 正确 0不正确
        reasonsSolutions: this.AIResult == '1' ? this.causeMessage : '', //	string	原因及解决方案
        feedbackError: this.AIResult == '2' ? this.causeMessage : '', //	string	反馈AI识别不正确
      }).then((res) => {
        if (res.code == 200) {
          this.$toast('提交成功');
        } else {
          this.$toast('提交失败');
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.AIImageDetail {
  .message {
    padding: 10px;
    background: #fff;
    .storeTitle {
      display: flex;
      font-size: 16px;
      font-weight: 600;
      padding: 5px 0;
    }
    .item {
      display: flex;
      font-size: 14px;
      padding: 3px 0;
      .label {
        width: 80px;
        text-align: right;
      }
      .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%;
    }
  }
}
</style>