bsdgy-front/src/pages/activity/GuideCode.vue

<template>
  <div class="activity_code">
    <Table :loading="loading"
           border
           :columns="columns"
           :data="data">
      <template slot-scope="{row}"
                slot="qrCodeAction">
        <div class="qrCodeBox"
             @mouseover="showQrcode(row)"
             @mouseout="hideQrcode(row)">
          <img :src="require('../../../static/img/qrCode-init.png')"
               class="table-img-qr-code" />
          <div class="toggleQrCode"
               v-show="rowData.id == row.id">
            <div slot="header">
              <p></p>
            </div>
            <p>{{showStoreName}}</p>
            <img :src="qrCodeImage"
                 style="width:200px;height:200px;" />
            <div style="text-align: center;">
              <Button ghost
                      type="primary"
                      @click="download(rowData)">下载</Button>
            </div>
          </div>
        </div>
      </template>
      <router-link slot-scope="{row}"
                   slot="action"
                   :to="{path:'/activity/plan/GuideCode',query:{instanceId:row.instanceId}}">
        <Button class="router-btn"> 查看导购码</Button>
      </router-link>
    </Table>
  </div>
</template>

<script>
import ActivityManager from "../../services/ActivityManager/ActivityManager";
import http from '../../services/store/IncreaseStoreManager';
import doHttp from '../../services/CommonHttp'
export default {
  name: "GuideCode",
  data () {
    let _this = this;
    return {
      loading: false,
      totalSize: 0,
      pageNum: 1,
      pageSize: 10,
      data: [],
      instanceId: 0,
      isShow: false,
      showStoreName: "",
      qrCodeImage: "",
      companyList: [],
      rowData: {},
      storeId: null,
      formValidate: {
        orgId: null,
        store: null,
      },
      columns: [
        {
          width: 80,
          align: "center",
          title: "序号",
          render (h, params) {
            let num = parseInt(params.index) + 1;
            if (_this.pageSize > 1) {
              num += (_this.pageNum - 1) * _this.pageSize;
            }
            return h("span", num);
          }
        },
        {
          title: "姓名",
          key: "organizational.name",
          render (h, params) {
            return h("span", params.row["staffer"]["name"]);
          },
        },
        {
          title: "工号",
          key: "organizational.name",
          render (h, params) {
            return h("span", params.row["staffer"]["stafferNo"]);
          },
        },
        {
          title: "手机号",
          key: "organizational.code",
          render (h, params) {
            return h("span", params.row["staffer"]["mobile"]);
          },
        },
        {
          title: "店铺",
          key: "store.name",
          render (h, params) {
            return h("span", params.row["store"]["name"]);
          },
        },
        {
          title: "角色",
          key: "store.code",
          render (h, params) {
            return h("span", params.row["staffer"]["roleName"]);
          },
        },
        {
          title: "活动码",
          slot: 'qrCodeAction',
          className: 'table-width-80',
        },
      ],
    };
  },
  created () {
    this.instanceId = this.$route.query.instanceId;
    this.storeId = this.$route.query.storeId;
    this.load();
  },
  methods: {
    showQrcode (row) {
      console.log(row);
      this.isShow = true;
      this.showStoreName = row.store.name;
      this.qrCodeImage = row.qrCode;
      this.rowData = row;
    },
    hideQrcode (row) {
      this.showStoreName = "";
      this.qrCodeImage = "";
      this.rowData = {};
    },
    download: function (row) {
      let fileName = row.store.name + "-活动码";
      http.downloadImg({
        url: row.qrCode
      }, fileName, function (/*data*/) {

      })
    },
    load (params = {}) {
      let _this = this;
      this.loading = true;
      params.storeId = this.storeId;
      params.instanceId = this.instanceId;
      ActivityManager.guideCodeList(params, (res) => {
        _this.data = res.data.results || [];
        _this.loading = false;
      });
    },
    downloadCode (type) {
      this.loading = true;
      let that = this;
      doHttp
        .downloadZip("/activity/instance/download?type=" + type + "&instanceId=" + this.instanceId, type == 2 ? '门店码' : "门店导购码", { type: type, instanceId: this.instanceId })
        .then(res => {
          that.loading = false;
        })
    }
  },
};
</script>

<style>
.search-btn {
  margin-left: 40px;
}
.table-width-80 {
  width: 80px !important;
}
.table-img-qr-code {
  margin-left: 5px;
  margin-top: 5px;
  width: 30px;
  height: 30px;
}
.qrCodeBox {
}
.toggleQrCode {
  position: absolute;
  background: #fff;
  z-index: 9999;
  padding: 10px;
  border: 1px solid #dfdfdf;
}
.ivu-table-wrapper {
  overflow: inherit !important;
}
</style>