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

<template>
  <div class="perfectStoreSign">
    <van-nav-bar class="navBar" title="AI 店招识别" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <div class="contentBox">
        <div class="shopSign specialTask" v-if="shopSignDetail && shopSignDetail.qualifiedState">
          <div class="specialTaskLeft">
            <div class="SignText">识别结果:</div>
            <div class="signContent">
              <div class="icon">
                <van-icon
                  name="checked"
                  color="#07c160"
                  v-if="shopSignDetail.qualifiedState == '1'" />
                <van-icon name="warning" color="#ee0a24" v-else />
              </div>
              <div
                v-if="shopSignDetail.qualifiedState != null"
                :style="{ color: shopSignDetail.qualifiedState == '1' ? '#07c160' : '#ee0a24' }">
                {{
                  shopSignDetail.qualifiedState == '1'
                    ? '店招完整，授权号正确'
                    : shopSignDetail.unqualifiedReason
                }}
              </div>
            </div>
            <div class="shopSignButton">
              <div class="" style="display: flex">
                <van-button round type="primary" v-if="shopSignDetail.qualifiedState == '1'"
                  >通过</van-button
                >
                <van-button round type="danger" v-if="shopSignDetail.qualifiedState == '0'"
                  >不通过</van-button
                >
              </div>
            </div>
          </div>
        </div>
        <div class="shopSignImg">
          <div class="text">店招照片</div>
          <div class="imgBox">
            <img
              v-if="shopSignDetail && shopSignDetail.qualifiedState"
              :src="shopSignDetail.fileUrl"
              @click="previewsImg(shopSignDetail.fileUrl)" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import deleteUploadImg from '@/components/deleteUploadImg';
import { getVisitsDetailPerfectStoreByTaskId } from '@/api/index';
import { ImagePreview } from 'vant';
export default {
  name: 'perfectStoreSign',
  components: { deleteUploadImg },
  data() {
    return {
      visitsId: '',
      detail: null,
      shopSignDetail: null,
    };
  },
  activated() {
    this.visitsId = this.$route.query.visitId || '';
    this.detail = null;
    this.getVisitsDetailFn();
  },
  methods: {
    getVisitsDetailFn() {
      this.shopSignDetail = null;
      getVisitsDetailPerfectStoreByTaskId({
        visitsId: this.visitsId,
        taskIdList: this.$route.query.taskId.split(','),
      })
        .then((res) => {
          this.toastLoading().clear();
          if (res.code == 200 && res.data && res.data.length > 0) {
            this.detail = res.data[0];
            let shopSignArr = this.detail;
            this.shopSignDetail = shopSignArr;
          } else {
            this.$dialog.alert({
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$dialog.alert({
            message: err.msg,
          });
        });
    },
    previewsImg(url) {
      ImagePreview([url]);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.perfectStoreSign {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 15px;
    .contentBox {
      width: 100%;
      height: 100%;
      background: #fff;
      // padding-top: 15px;
    }
    .specialTask {
      display: flex;
      flex-direction: row;
      padding: 10px;
      font-size: 16px;
      justify-content: space-between;
      background: #e5faff;
      .specialTaskLeft {
        display: flex;
        flex-direction: row;
        width: 100%;
      }
      .SignText {
        width: 80px;
        font-weight: 600;
      }
      .signContent {
        flex: 1;
        display: flex;
        flex-direction: row;
        margin: 0 8px;
        .icon {
          padding-top: 2px;
          margin-right: 5px;
        }
      }
    }
    .shopSignButton {
      width: 56px;
      button {
        width: 55px;
        height: 28px;
        padding: 0;
        font-size: 12px;
      }
    }
    .shopSignImg {
      .text {
        font-size: 16px;
        font-weight: 600;
        padding: 15px 10px;
      }
      .imgBox {
        width: 100%;
        text-align: center;
        img {
          width: 60%;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.perfectStoreSign {
  .van-button--danger {
    background-color: #ee0a24 !important;
    border: 1px solid #ee0a24 !important;
  }
}
</style>