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: [
        {
          type: "index",
          width: 80,
          align: "center",
          title: "序号",
        },
        {
          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>