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

<template>
  <div class="activity_code">
    <Table :loading="loading" border :columns="columns" :data="data"></Table>
    <Page
      :total="totalSize"
      :current="pageNum"
      :page-size="pageSize"
      show-elevator
      show-total
      placement="top"
      @on-change="handlePage"
      class-name="ks-page"
    ></Page>
  </div>
</template>

<script>
import { activityCodeList } from "../../services/ActivityManager/ActivityManager";
export default {
  name: "ActivityCode",
  data() {
    let _this = this;
    return {
      loading: false,
      totalSize: 0,
      pageNum: 1,
      pageSize: 10,
      data: [],
      instanceId: 0,
      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: "推广码",
          key: "qrCode",
          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: "操作",
          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: {
    handlePage(value) {
      this.pageNum = value;
      this.load();
    },
    showQrcode(row) {
      console.log(row);
    },
    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></style>