添加二维码生成下载

vue-admin-template-master/src/api/order.js

@@ -59,7 +59,7 @@ export function export_order(data) {
   });
 }
 
-//导出订单
+//导出商品
 export function export_goods(data) {
   return request({
     url: "dashboard/statistics_export",
@@ -148,6 +148,7 @@ export function inviteStatistics() {
     method: "get"
   });
 }
+
 //流量入口统计
 export function inviteStatisticsByinvitor(data) {
   return request({
@@ -156,3 +157,22 @@ export function inviteStatisticsByinvitor(data) {
     data
   });
 }
+
+//生成二维码
+export function qrcodeGenerate(data) {
+  return request({
+    url: "/qrcode/generate",
+    method: "post",
+    data
+  });
+}
+
+//下载二维码
+export function qrcodeDownload(data) {
+  return request({
+    url: "/qrcode/download",
+    method: "post",
+    data,
+    responseType: "arraybuffer"
+  });
+}

vue-admin-template-master/src/router/index.js

@@ -236,6 +236,12 @@ export const constantRoutes = [
         name: "statistics",
         component: () => import("@/views/coupon/statistics"),
         meta: { title: "优惠券统计" }
+      },
+      {
+        path: "qrcode",
+        name: "Qrcode",
+        component: () => import("@/views/coupon/qrcode"),
+        meta: { title: "领券二维码" }
       }
     ]
   },

vue-admin-template-master/src/views/coupon/qrcode/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="container">
+    <el-form
+      :inline="false"
+      label-width="110px"
+      :model="formInline"
+      class="form-inline"
+      :rules="rules"
+      ref="ruleForm"
+    >
+      <el-form-item label="券类型" prop="category">
+        <el-select v-model="formInline.category" placeholder="券类型">
+          <el-option label="立减券" value="reduction"></el-option>
+          <el-option label="折扣券" value="discount"></el-option>
+          <el-option label="免单券" value="vip"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="券名称" prop="title">
+        <el-input v-model="formInline.title" placeholder="券名称"></el-input>
+      </el-form-item>
+      <el-form-item
+        label="立减金额"
+        prop="num"
+        v-if="formInline.category == 'reduction'"
+      >
+        <el-input v-model="formInline.num" placeholder="立减金额"></el-input>
+      </el-form-item>
+      <el-form-item
+        label="折扣"
+        prop="num"
+        v-if="formInline.category == 'discount'"
+      >
+        <el-input v-model="formInline.num" placeholder="折扣"></el-input>
+      </el-form-item>
+
+      <el-form-item label="发券上限" prop="limit">
+        <el-input v-model="formInline.limit" placeholder="发券上限"></el-input>
+      </el-form-item>
+
+      <el-form-item label="有效日期截止" prop="duedate">
+        <el-date-picker
+          v-model="formInline.duedate"
+          type="date"
+          placeholder="有效日期截止"
+          value-format="yyyy-MM-dd"
+        >
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="二维码文件名" prop="pngname">
+        <el-input
+          v-model="formInline.pngname"
+          placeholder="二维码文件名"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit" :loading="loading"
+          >创 建</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { qrcodeGenerate, qrcodeDownload } from "@/api/order";
+export default {
+  data() {
+    return {
+      formInline: {
+        category: "",
+        title: "",
+        num: "",
+        limit: "",
+        duedate: "",
+        pngname: ""
+      },
+      rules: {
+        category: [{ required: true, message: " ", trigger: "change" }],
+        title: [{ required: true, message: " ", trigger: "blur" }],
+        num: [{ required: true, message: " ", trigger: "blur" }],
+        limit: [{ required: true, message: " ", trigger: "blur" }],
+        duedate: [{ required: true, message: " ", trigger: "change" }],
+        pngname: [{ required: true, message: " ", trigger: "blur" }]
+      },
+      loading: false
+    };
+  },
+  methods: {
+    onSubmit() {
+      this.$refs["ruleForm"].validate(async valid => {
+        if (valid) {
+          this.loading = true;
+          let res = await qrcodeGenerate(this.formInline);
+          // qrcodeDownload()
+          if (res.status === "success") {
+            let result = await qrcodeDownload({ scene: res.message });
+            console.log(result);
+            let blob = new Blob([result], {
+              type: "png",
+              application: "image/png"
+            });
+            let link = document.createElement("a");
+            link.href = window.URL.createObjectURL(blob);
+            link.download = `${res.message}.png`;
+            link.click();
+          } else {
+            this.$message.error(res.message);
+          }
+          this.loading = false;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+
+      // console.log("submit!");
+
+      // "category":"reduction","title":"测试立减券","num":15,"limit":3,"duedate":"2021-08-16","pngname":"fortest"
+    }
+  }
+};
+</script>
+<style>
+.container {
+  padding: 40px;
+}
+.form-inline {
+  width: 600px;
+}
+</style>