1

src/pages/activity/ActivityCode.vue

@@ -1,30 +1,55 @@
 <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)"
+    <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"
+      <router-link slot-scope="{row}"
+                   slot="action"
                    :to="{path:'/shop/increase/manager/staff',query:{storeId:row.id}}">
-        <Button ghost class="router-btn"> 门店导购管理</Button>
+        <Button class="router-btn"> 门店导购管理</Button>
       </router-link>
     </Table>
-    <Page
-      :total="totalSize"
+    <Page :total="totalSize"
           :current="pageNum"
           :page-size="pageSize"
           show-elevator
           show-total
           placement="top"
           @on-change="handlePage"
-      class-name="ks-page"
-    ></Page>
+          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 () {
@@ -36,6 +61,10 @@ export default {
       pageSize: 10,
       data: [],
       instanceId: 0,
+      isShow: false,
+      showStoreName: "",
+      qrCodeImage: "",
+      rowData: {},
       columns: [
         {
           width: 80,
@@ -140,12 +169,30 @@ export default {
     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;
@@ -167,4 +214,10 @@ export default {
 .table-width-80 {
   width: 80px !important;
 }
+.table-img-qr-code {
+  margin-left: 5px;
+  margin-top: 5px;
+  width: 30px;
+  height: 30px;
+}
 </style>