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

<template>
  <div class="activity_code">
    <Table :loading="loading"
           border
           :columns="columns"
           :data="data">
      <template slot-scope="{row}"
                slot="qrCodeAction">
        <img :src="require('../../../static/img/qrCode-init.png')"
             @click="showQrcode(row)"
             class="table-img-qr-code" />
      </template>
      <router-link slot-scope="{row}"
                   slot="action"
                   :to="{path:'/shop/increase/manager/staff',query:{storeId:row.id}}">
        <Button class="router-btn"> 门店导购管理</Button>
      </router-link>
    </Table>
    <Page :total="totalSize"
          :current="pageNum"
          :page-size="pageSize"
          show-elevator
          show-total
          placement="top"
          @on-change="handlePage"
          class-name="ks-page"></Page>

    <!-- 预览二维码 -->
    <Modal v-model="isShow"
           :title="showStoreName"
           :footer-hide="true"
           width="230"
           class-name="vertical-center-modal"
           @on-ok="ok">
      <div slot="header">
        <p></p>
      </div>
      <p>{{this.showStoreName}}</p>
      <img :src="qrCodeImage"
           style="width:200px;height:200px;" />
      <div style="text-align: center;">
        <Button ghost
                type="primary"
                @click="download(rowData)">下载</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { activityCodeList } from "../../services/ActivityManager/ActivityManager";
import http from '../../services/store/IncreaseStoreManager';
export default {
  name: "ActivityCode",
  data () {
    let _this = this;
    return {
      loading: false,
      totalSize: 0,
      pageNum: 1,
      pageSize: 10,
      data: [],
      instanceId: 0,
      isShow: false,
      showStoreName: "",
      qrCodeImage: "",
      rowData: {},
      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["organizational"]["name"]);
          },
        },
        {
          title: "零售公司编号",
          key: "organizational.code",
          render (h, params) {
            return h("span", params.row["organizational"]["code"]);
          },
        },
        {
          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["store"]["code"]);
          },
        },
        {
          title: "推广码",
          slot: 'qrCodeAction',
          className: 'table-width-80',
          // render(h, params) {
          //   return h(
          //     "div",
          //     {
          //       class: "qrcode",
          //     },
          //     [
          //       h(
          //         "Button",
          //         {
          //           props: { type: "primary", size: "small" },
          //           style: { marginRight: "8px" },
          //           on: {
          //             "mouseover.native": () => _this.showQrcode(params.row),
          //           },
          //         },
          //         "二维码"
          //       ),
          //       h(
          //         "div",
          //         {
          //           class: "qrcodeBox",
          //           style: { display: "none" },
          //         },
          //         [h("img", { attrs: { src: params.row.qrCode } })]
          //       ),
          //     ]
          //   );
          // },
        },
        {
          title: '操作',
          slot: 'action',
          // key: "action",
          // width: 200,
          // render(h, p) {
          //   return h("div", [
          //     h(
          //       "Button",
          //       {
          //         props: { type: "primary", size: "small" },
          //         style: { marginRight: "8px" },
          //         on: {
          //           click: () => _this.guideCode(p.row),
          //         },
          //       },
          //       "查看导购码"
          //     ),
          //   ]);
          // },
        },
      ],
    };
  },
  created () {
    this.instanceId = this.$route.query.instanceId;
    this.load();
  },
  methods: {
    ok: function () {
      this.isShow = false;
    },
    cancel: function () {
      this.isShow = false;
    },
    handlePage (value) {
      this.pageNum = value;
      this.load();
    },
    showQrcode (row) {
      console.log(row);
      this.isShow = true;
      this.showStoreName = row.store.name;
      this.qrCodeImage = row.qrCode;
      this.rowData = row;
    },
    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.pageSize = this.pageSize;
      params.pageNum = this.pageNum;
      params.instanceId = this.instanceId;
      activityCodeList(params, (res) => {
        _this.data = res.data.results.this.records;
        _this.totalSize = res.data.results.this.total;
        _this.loading = false;
      });
    },
  },
};
</script>

<style>
.table-width-80 {
  width: 80px !important;
}
.table-img-qr-code {
  margin-left: 5px;
  margin-top: 5px;
  width: 30px;
  height: 30px;
}
</style>