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="show(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 ghost 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>
  </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: "推广码",
          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: {
    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>
  .table-width-80 {
        width: 80px !important;
    }
</style>