capture-modal.vue

<template>
<div>
  <el-dialog
    :visible.sync="modalVisible"
    v-loading.body="loading"
    :close-on-click-modal="false"
    class="manage-dialog clerk-image-dialog"
    :before-close="onClose"
  >
    <span slot="title" class="dialog-title">
      <span class="title-text">{{$t('dialog.allCapture')}}</span>
      <template v-if="isNewCustomer">
        <span class="history-text-btn" @click="getHistorySnap">{{ $t('dialog.showHistory') }}</span>
      </template>
      <template v-if="isCustomer && !isMarkPerson">
        <span class="history-text-btn" @click="onMarkClerk">{{ $t('dialog.markClerk') }}</span>
      </template>
      <template v-if="isMarkPerson">
        <span class="history-text-btn" @click="onMarkPerson">{{ $t('button.markPerson') }}</span>
      </template>
    </span>
    <el-scrollbar wrap-class="capture-list-scrollbar">
      <ul class="snap-wrapper capture-list">
        <li class="history-snap-item" v-for="(valueItem, key) in personData" :key="key">
          <div class="snap-title">{{ key }}{{ $t('dialog.snapshotRecord') }}</div>
          <div class="shotpic-item all-capture-item" :key="item.id" v-for="item in valueItem">
            <div class="shotpic-img">
              <span class="shotpic-date">{{ item.counttime || '--' }}</span>
              <img :src="$parent.dealImg(item)" @error="$parent.dealErrImg" />
            </div>
            <p class="shotpic-info">
              <span class="shotpic-text__left">{{ $t('table.age')}}: {{ item.age }}</span>
              <span
                class="shotpic-text__right"
              >{{ $t('table.gender') }}: {{ $parent.genderFormatter(item.gender) }}</span>
            </p>
            <p class="shotpic-info">
              <span
                class="shotpic-text__left"
              >{{ $t('table.type') }}: {{ $parent.personTypeFormatter(item.personType) }}</span>
              <span
                class="shotpic-text__right"
              >{{ $t('table.expression') }}: {{ $parent.moodFormatter(item.mood) }}</span>
            </p>
          </div>
        </li>
        <li v-if="snapLoading" class="empty-data-text">{{ loadText }}</li>
      </ul>
    </el-scrollbar>
  </el-dialog>
  <mark-person-modal
    v-if="markPersonVisible"
    :modal-row="modalRow"
    @onCancel="cancelHandler"
  />
  </div>
</template>

<script>
import MarkPersonModal from './mark-person-modal'

export default {
  name: "CaptureModal",
  components: { MarkPersonModal },
  props: {
    parameter: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      modalVisible: false,
      loading: true,
      personData: {},
      snapLoading: true,
      loadText: "",
      clickUnid: "",
      isNewCustomer: false,
      isCustomer: true,
      markPersonVisible: false,
      modalRow: {}
    };
  },
  computed: {
    isMarkPerson() {
      return this.getSessionLocal("isPersonMark") ? true : false
    }
  },
  methods: {
    modalInit(currentRow) {
      const {
        id,
        accountId,
        personUnid,
        historyArrivalCount,
        counttime,
        personType,
        gender,
        age,
        mallId
      } = currentRow
      const { $parent, parameter } = this;
      const { dealDate } = $parent;
      this.modalRow = {
        name: this.$t('button.markPerson'),
        gender: gender,
        age: age,
        type: null,
        accountId: accountId,
        mallId: mallId,
        personUnid: personUnid,
        counttime: dealDate(counttime, '$1-$2-$3')
      }
      this.snapLoading = true;
      this.loadText = this.$t("echartsTitle.loading");
      this.modalVisible = true;
      this.isNewCustomer = historyArrivalCount > 0;
      this.isCustomer = personType === 0;
      this.clickUnid = personUnid;
      this.personId = id;
      let params = {};
      for (var k in parameter) {
        if (!(k == "page" || k == "pageSize")) {
          params[k] = parameter[k];
        }
      }
      params.personUnid = personUnid;
      this.personData = {};
      this.$api.flowReport
        .captureRecord(params)
        .then(res => {
          let result = res.data;
          result.data.forEach(item => {
            let key = dealDate(item.counttime, "$1-$2-$3");
            if (!this.personData[key]) {
              this.personData[key] = [];
            }
            this.personData[key].push(item);
          });
          let arrToObj = result.data.reduce((prev, item) => {
            let key = dealDate(item.counttime, "$1-$2-$3");
            if (!prev[key]) {
              prev[key] = [];
            }
            prev[key].push(item);
            return prev;
          }, {});
          this.personData = arrToObj;
          if (!Object.keys(arrToObj).length) {
            this.loadText = this.$t("echartsTitle.noData");
          }
          this.snapLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getHistorySnap() {
      const { parameter, clickUnid, $parent } = this;
      const { dateToStamp } = $parent;
      this.snapLoading = true;
      this.loadText = this.$t("echartsTitle.loading");
      this.$api.flowReport
        .historyCapture({
          mallId: parameter.mallId,
          personUnid: clickUnid,
          countdate: parameter.countdate,
          sortName: "counttime",
          sortOrder: "DESC"
        })
        .then(res => {
          const { data } = res.data;
          // 将对象 key 存入数组排序
          // 循环key数组
          let keysArr = Object.keys(data)
            .map(key => key)
            .sort((a, b) => {
              return dateToStamp(b) - dateToStamp(a);
            });
          // this.$nextTick(() => {
          keysArr.forEach(item => {
            // this.personData[item] = data[item]
            this.$set(this.personData, item, data[item]);
          });
          // })
          if (!keysArr.length) {
            this.loadText = this.$t("echartsTitle.noData");
          }
          this.snapLoading = false;
        });
    },
    onMarkClerk() {
      // markClerk
      const htmlText = `
        <p style="padding-top: 24px;text-align: center;">${this.$t(
          "dialog.markConfirmMsg"
        )}</p>
        <p style="padding-bottom: 24px;text-align: center;">${this.$t(
          "dialog.markConfirmTip"
        )}</p>
      `;
      this.$confirm(htmlText, this.$t("dialog.markClerk"), {
        confirmButtonText: this.$t("dialog.confirm"),
        cancelButtonText: this.$t("dialog.cancel"),
        showClose: false,
        customClass: "mark-message-box",
        dangerouslyUseHTMLString: true
      })
        .then(() => {
          this.fetchMarkClerk();
        })
        .catch(() => {
          // console.log()
        });
    },
    onMarkPerson() {
      this.markPersonVisible = true
    },
    fetchMarkClerk() {
      if (!this.personId) return;
      this.$api.management
        .markClerk(this.personId, {
          personType: 1
        })
        .then(res => {
          const { code } = res.data;
          if (code === 200) {
            this.$message({
              type: "success",
              message: this.$t("message.labelSuccess")
            });
          } else {
            this.$message({
              type: "warn",
              message: this.$t("message.labelFailed")
            });
          }
        });
    },
    onClose() {
      this.modalVisible = false;
    },
    cancelHandler() {
      this.markPersonVisible = false
    }
  }
};
</script>

<style scoped>
.title-text {
  color: #fff;
  font-size: 20px;
  padding-right: 5px;
}
.history-text-btn,
.mark-text-btn {
  color: #f2f2f2;
  font-size: 12px;
  cursor: pointer;
}
.history-text-btn + .history-text-btn {
  padding-left: 12px;
}
.empty-data-text {
  text-align: center;
  margin: 10px 0;
  color: #909399;
}
.history-snap-item:after,
.history-snap-item::before {
  content: "";
  display: table;
}
.history-snap-item:after {
  clear: both;
}
.snap-title {
  color: #333;
  font-size: 18px;
  padding: 0 6px 0;
  margin-bottom: 4px;
  margin-left: 3px;
  border-left: 4px solid #3bb8ff;
  box-sizing: border-box;
}
.capture-list {
  padding: 0 0px 20px;
}
</style>

<style>
.capture-list-scrollbar {
  height: 100%;
  height: 450px;
  max-height: 450px;
  overflow-x: hidden !important;
}
.el-scrollbar {
  height: 100%;
}
.mark-message-box {
  border: none;
}
.mark-message-box .el-message-box__header {
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
}
</style>