storevisit-ui-mobile/src/views/historicalVisit/skuRecognize.vue

<template>
  <div class="skuRecognize">
    <van-nav-bar class="navBar" title="拜访任务详情" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-button
          style="height: 30px; padding: 5px; border-radius: 5px"
          type="info"
          v-if="detail && detail.skuPhotoIdentifyId"
          @click="clickFeedbackShow"
          >识别异常反馈</van-button
        >
      </template>
    </van-nav-bar>
    <div class="content" v-if="detail">
      <div class="title">产品陈列照</div>
      <div class="tipsTitle">{{ detail.skuDescribe }}</div>
      <div>
        <van-row gutter="10">
          <van-col span="4" v-for="(urls, index) in detail.fileUrlList" :key="index">
            <div class="img-box">
              <img :src="urls" @click="previewsImg(index)" />
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="skuDeatil" v-if="detail.skuList">
        <div class="tableTitle">SKU图像识别结果：{{ detail.skuTotal }}个</div>
        <el-table
          :data="detail.skuList"
          style="width: 100%; border-radius: 10px"
          border
          class="table-headermd">
          <el-table-column label="序号" type="index" align="center" width="50"> </el-table-column>
          <el-table-column label="品类" prop="skuProductType" align="center"></el-table-column>
          <el-table-column label="SKU名称" prop="name" align="center">
            <template slot-scope="scope">
              <span class="tipTitle">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="排面数" prop="count" align="center" width="70"></el-table-column>
        </el-table>
      </div>
      <!-- 返回历史 -->
      <div class="feedbackHistorical" v-if="detail.feedbackList.length">
        <div class="tableTitle">识别异常反馈</div>
        <div class="historicalContent">
          <div class="rejectMsgItem" v-for="(item, index) in detail.feedbackList" :key="index">
            <div class="item approver">
              <span class="label">反馈人：</span>
              <span class="value">{{ item.nickName }}</span>
            </div>
            <div class="item approvalTime">
              <span class="label">反馈时间：</span>
              <span class="value">{{ item.createTime }}</span>
            </div>
            <div class="item rejectCause">
              <span class="label">反馈内容：</span>
              <span class="value">{{ item.feedbackContent }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 识别异常反馈 -->
    <van-popup v-model="feedbackShow" round class="feedbackMsgBox" :close-on-click-overlay="false">
      <div class="feedbackTitle">SKU图像识别结果异常反馈</div>
      <div class="feedbackContent">
        <van-field
          v-model="feedbackMessage"
          rows="2"
          autosize
          type="textarea"
          :formatter="formatter"
          placeholder="若识别SKU有遗漏、缺失，请在此反馈，本部会根据实际情况优化模型，谢谢！" />
      </div>
      <div class="btnBox">
        <van-button type="info" plain @click="feedbackShow = false">取消</van-button>
        <van-button type="info" @click="feedbackSubmit">提交</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import deleteUploadImg from '@/components/deleteUploadImg';
import { photoSkuImgSummary, photoSkuFeedback } from '@/api/historicalVisit.js';
import { ImagePreview } from 'vant';
export default {
  name: 'skuRecognize',
  components: { deleteUploadImg },
  data() {
    return {
      visitsId: '',
      detail: null,
      feedbackShow: false,
      feedbackMessage: '', //反馈内容
    };
  },
  activated() {
    this.visitsId = this.$route.query.visitId || '';
    this.getDetail();
  },
  methods: {
    getDetail() {
      this.toastLoading(0, '加载中...', true);
      photoSkuImgSummary({ visitsId: this.visitsId })
        .then((res) => {
          this.toastLoading().clear();
          if (res.code == 200) {
            this.detail = res.data;
          } else {
            this.$dialog.alert({
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$dialog.alert({
            message: err.msg,
          });
        });
    },
    // 提交反馈
    feedbackSubmit() {
      if (this.feedbackMessage == '') {
        this.$toast('请输入反馈意见！');
        return;
      }
      photoSkuFeedback({
        photoIdentifyId: this.detail.skuPhotoIdentifyId, //long	sku识别信息id
        feedbackContent: this.feedbackMessage, //string	内容
      }).then((res) => {
        this.feedbackShow = false;
        this.getDetail();
      });
    },
    previewsImg(index) {
      ImagePreview({
        images: this.detail.fileUrlList,
        startPosition: index,
      });
    },
    formatter(value) {
      return value.replace(
        /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi,
        ''
      );
    },
    clickFeedbackShow() {
      this.feedbackMessage = '';
      this.feedbackShow = true;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.skuRecognize {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .content {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    padding: 10px 15px;
    margin-top: 10px;
    .title {
      font-size: 16px;
      padding-bottom: 10px;
      font-weight: bold;
    }
    .tipsTitle {
      font-size: 12px;
      padding-bottom: 10px;
    }
    .tableTitle {
      padding: 10px 0;
      font-size: 16px;
      font-weight: bold;
      background: #f5f5f5;
      margin: 15px 0;
    }
    .skuDeatil {
    }
    .feedbackHistorical {
      .historicalContent {
        flex: 1;
        overflow-y: auto;
        .rejectMsgItem {
          margin-bottom: 20px;
          border: 1px solid #ccc;
          padding: 10px;
          .item {
            padding: 5px 0;
            span {
              display: inline-block;
            }
          }
          .label {
            width: 80px;
            font-size: 14px;
            font-weight: 600;
          }
          .value {
            font-size: 14px;
          }
        }
      }
    }
    .img-box {
      width: 100%;
      height: 50px;
      position: relative;
      display: inline-block;
      border-radius: 6px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .feedbackMsgBox {
    min-height: 30%;
    width: 90%;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .feedbackTitle {
      padding: 10px 0;
      text-align: center;
      font-size: 16px;
      font-weight: 600px;
    }
    .feedbackContent {
      flex: 1;
      overflow-y: auto;
      .van-field__control {
        color: #666 !important;
      }
    }
    .btnBox {
      margin-bottom: 10px;
      height: 44px;
      display: flex;
      justify-content: space-between;
      button {
        width: 45%;
        border-radius: 10px;
      }
    }
  }
}
</style>
<style lang="scss">
.skuDeatil {
  .table-headermd {
    font-size: 14px;
    text-align: center;
    position: initial;
    width: 98% !important;
    margin: 0 auto;
    border-right: 0;
    border-radius: 8px;
    font-weight: bold;
    thead {
      color: #000;
    }
    .el-table__cell {
      padding: 6px 0 !important;
    }
  }
  .table-headermd th.el-table__cell {
    background-color: #f5f5f5;
  }
}
.feedbackMsgBox {
  .van-cell {
    border: 1px solid #ccc;
  }
  .van-field__control {
    color: #666;
  }
}
</style>