1

src/pages/activity/ActivityCode.vue

@@ -1,33 +1,58 @@
 <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"/>
+    <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 ghost class="router-btn"> 门店导购管理</Button>
+      <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>
+    <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() {
+  data () {
     let _this = this;
     return {
       loading: false,
@@ -36,6 +61,10 @@ export default {
       pageSize: 10,
       data: [],
       instanceId: 0,
+      isShow: false,
+      showStoreName: "",
+      qrCodeImage: "",
+      rowData: {},
       columns: [
         {
           width: 80,
@@ -52,28 +81,28 @@ export default {
         {
           title: "所属零售公司",
           key: "organizational.name",
-          render(h, params) {
+          render (h, params) {
             return h("span", params.row["organizational"]["name"]);
           },
         },
         {
           title: "零售公司编号",
           key: "organizational.code",
-          render(h, params) {
+          render (h, params) {
             return h("span", params.row["organizational"]["code"]);
           },
         },
         {
           title: "店铺名称",
           key: "store.name",
-          render(h, params) {
+          render (h, params) {
             return h("span", params.row["store"]["name"]);
           },
         },
         {
           title: "店铺编号",
           key: "store.code",
-          render(h, params) {
+          render (h, params) {
             return h("span", params.row["store"]["code"]);
           },
         },
@@ -135,19 +164,37 @@ export default {
       ],
     };
   },
-  created() {
+  created () {
     this.instanceId = this.$route.query.instanceId;
     this.load();
   },
   methods: {
-    handlePage(value) {
+    ok: function () {
+      this.isShow = false;
+    },
+    cancel: function () {
+      this.isShow = false;
+    },
+    handlePage (value) {
       this.pageNum = value;
       this.load();
     },
-    showQrcode(row) {
+    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 = {}) {
+    load (params = {}) {
       let _this = this;
       this.loading = true;
       params.pageSize = this.pageSize;
@@ -164,7 +211,13 @@ export default {
 </script>
 
 <style>
-  .table-width-80 {
-        width: 80px !important;
-    }
+.table-width-80 {
+  width: 80px !important;
+}
+.table-img-qr-code {
+  margin-left: 5px;
+  margin-top: 5px;
+  width: 30px;
+  height: 30px;
+}
 </style>